/* ==========================================================================
   Avenix Trade — site styles
   Ported from the Claude Design canvas (.design-src/Avenix Trade.dc.html).

   Tokens first, then the section-context layer, then layout primitives,
   components, and responsive rules.

   Polarity note: this design is light, and runs three grounds rather than two.
   The page base is a pale lilac (#F3F1FF), an alternate ground is plain white,
   and a third is the deep ink (#15123A) used for the assets section, the
   closing panel, the login aside and the footer. Ink is a full polarity flip,
   not a darker step: it carries its own foreground set.

   The contextual-variable layer below is what makes that work. Components read
   `--ground` / `--fg` / `--accent` and never the raw palette, so the same card
   renders correctly on lilac, on white and on ink without knowing which it is
   on. Changing or adding a ground is a change to that block alone.
   ========================================================================== */

/* === GENERATED by build/fonts.mjs — do not edit by hand === */
/* Self-hosted so no request reaches Google before the visitor has consented.
   See build/fonts.mjs for why, and public/assets/fonts/OFL.txt for the licence.
   Regenerate with: node build/fonts.mjs */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === END GENERATED === */

:root {
  /* --- Raw palette: grounds -------------------------------------------
     Three, not two. `--k-ink*` is a genuine second polarity rather than a
     darker step of the first, so it carries its own foreground set below. */
  --k-bg:       #F7F3EB;  /* page base - warm paper */
  --k-bg-alt:   #FFFFFF;  /* alternate section ground */
  --k-cell:     #FFFFFF;  /* raised card on either light ground */
  --k-input:    #FFFFFF;  /* input well - white, held by a warm grey border */

  --k-ink:      #1B2A41;  /* ink ground: dark sections, panels, footer */
  --k-ink-cell: #223350;  /* raised card on ink */
  --k-ink-tile: #2C3F5F;  /* filled tile / inactive step marker on ink */

  --k-line:     #D8D2C4;  /* card and section rules */
  --k-line-2:   #E2DCCF;  /* interior rules inside a card (market rows) */
  --k-line-3:   #B9B1A0;  /* input borders - must read against --k-cell */
  --k-line-4:   #D8D2C4;  /* form-card border */
  --k-ink-line: #3A4A63;  /* rules on the ink ground */
  --k-ink-line-2: #4A5C78; /* tag borders on the ink ground */

  /* --- Raw palette: foreground on the light grounds --------------------- */
  --k-fg:       #1B2A41;
  --k-fg-2:     #24354E;
  --k-fg-3:     #2E415C;
  --k-muted:    #3F4A5C;
  --k-muted-2:  #4A5568;
  --k-muted-3:  #6B7482;
  --k-muted-4:  #8C93A0;
  --k-muted-5:  #A8ADB8;
  --k-muted-6:  #B9B1A0;

  /* --- Raw palette: foreground on the ink ground ------------------------ */
  --k-ink-fg:    #F7F3EB;
  --k-ink-body:  #C9D0DB;
  --k-ink-muted: #A9B4C6;
  --k-ink-faint: #7C8BA3;

  /* --- Brand ----------------------------------------------------------
     This design has one brand colour and it is the ink itself. Buttons on a
     light ground are ink with paper text; on the ink ground the pair swaps
     over, because ink-on-ink is not a button. There is no third hue: the
     canvas earns its emphasis from the serif, the hairlines and the paper
     ground rather than from a saturated accent.

     The `--violet` / `--lime` names are inherited from the sibling site this
     engine came from and are kept so the component layer did not have to be
     renamed. `--violet` is the light-ground action colour, `--lime` the
     ink-ground one. */
  --violet:       #1B2A41;
  --violet-hi:    #3A5378;  /* hover - lighter, because the ground is light */
  --violet-on:    #F7F3EB;  /* text on an ink button - 12.1:1 */
  --violet-line:  #D8D2C4;  /* border of a tinted panel */
  --violet-tint:  #EFEAE0;  /* ground of a tinted panel */
  --violet-tint-2: #E6E0D4; /* avatar tile */
  --violet-edge:  #B9B1A0;  /* card border on hover */

  --lime:      #F7F3EB;
  --lime-hi:   #FFFFFF;
  --lime-on:   #1B2A41;     /* text on a paper button - 12.1:1 */

  /* --- Market direction -----------------------------------------------
     Muted rather than signal-bright, so a table of prices reads as a document
     and not as a dashboard. Both still clear 4.5:1 on paper and on white. */
  --up:       #2E6B4F;
  --down:     #9B3B2E;
  --up-bg:    #E6F0EA;
  --down-bg:  #F6E7E3;
  --up-ink:   #6FBF95;      /* the same two, lifted to read on ink */
  --down-ink: #E08A78;

  /* --- Type -----------------------------------------------------------
     Two families, not three. Source Serif 4 sets the wordmark and every
     heading; Plus Jakarta Sans sets everything else. `--mono` is kept as a
     token name because the component layer references it, and points at the
     sans: this design has no monospaced role, and the kickers it used to set
     are plain uppercase sans here. */
  --sans:    "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Metrics -------------------------------------------------------- */
  --wrap:     1180px;
  --gutter:   32px;
  --header-h: 80px;
  --chrome-h: 80px;  /* header only - this design has no ticker strip */

  /* Barely rounded. The canvas is built from hairlines and right angles; a
     4px radius on a control and 6px on a card is the whole of the softening. */
  --radius:     6px;    /* cards and panels */
  --radius-sm:  4px;    /* inputs, small tiles */
  --radius-lg:  6px;    /* the two form cards, and the footer panel */
  --radius-btn: 4px;    /* buttons and nav pills */
}

/* --------------------------------------------------------------------------
   Section context

   Every ground defines the same variable names. Components below reference
   only these, never the raw palette, so they stay correct wherever they land.
   -------------------------------------------------------------------------- */

:root,
.ctx-lilac {
  --ground:     var(--k-bg);
  --cell:       var(--k-cell);
  --cell-tint:  var(--k-cell);
  --input-bg:   var(--k-input);
  --fg:         var(--k-fg);
  --fg-hi:      var(--k-fg);
  --fg-body:    var(--k-muted);
  --fg-muted:   var(--k-muted-3);
  --fg-faint:   var(--k-muted-4);
  --fg-faintest: var(--k-muted-5);
  --rule:       var(--k-line);
  --rule-strong: var(--k-fg);
  --rule-soft:  var(--k-line-2);
  --rule-input: var(--k-line-3);
  --focus-ring: #DCE3EE;
  --accent:     var(--violet);
  --accent-hi:  var(--violet-hi);
  --accent-line: var(--violet-line);
  --dir-up:     var(--up);
  --dir-down:   var(--down);
  --dir-up-bg:  var(--up-bg);
  --dir-down-bg: var(--down-bg);

  --btn-bg:       var(--violet);
  --btn-fg:       var(--violet-on);
  --btn-bg-hover: var(--violet-hi);
  --btn-fg-hover: var(--violet-on);
}

/* The white ground. Only the ground and the input well move: on white, lilac
   reads as the recessed colour, the inverse of its role on the base ground.
   `.ctx-cream` keeps its name from the sibling sites so the component layer
   did not have to be rewritten. */
.ctx-cream,
.section--light,
.form-card,
.login__form {
  --ground:     var(--k-bg-alt);
  --cell:       var(--k-cell);
  --cell-tint:  var(--k-bg);
  --input-bg:   var(--k-input);
  --fg:         var(--k-fg);
  --fg-hi:      var(--k-fg);
  --fg-body:    var(--k-muted);
  --fg-muted:   var(--k-muted-3);
  --fg-faint:   var(--k-muted-4);
  --fg-faintest: var(--k-muted-5);
  --rule:       var(--k-line);
  --rule-strong: var(--k-fg);
  --rule-soft:  var(--k-line-2);
  --rule-input: var(--k-line-3);
  --focus-ring: #DCE3EE;
  --accent:     var(--violet);
  --accent-hi:  var(--violet-hi);
  --accent-line: var(--violet-line);
  --dir-up:     var(--up);
  --dir-down:   var(--down);
  --dir-up-bg:  var(--up-bg);
  --dir-down-bg: var(--down-bg);

  --btn-bg:       var(--violet);
  --btn-fg:       var(--violet-on);
  --btn-bg-hover: var(--violet-hi);
  --btn-fg-hover: var(--violet-on);
}

/* The ink ground - a full polarity flip. Every foreground, rule and direction
   colour is replaced, and the button goes lime: violet on ink is the one
   pairing in this palette without the contrast to be a button ground.
   `.ctx-sand` / `.section--sand` keep their sibling-site names; here they are
   the dark ground. */
.ctx-ink,
.ctx-sand,
.section--sand,
.cta-panel,
.login__aside,
/* The cookie banner is an ink card sitting over a paper page, so it has to
   declare the ink context rather than inherit the page's. Without this line
   its own comment below is wrong: `--accent` resolves to the light-ground
   navy, and the privacy-policy link renders navy-on-navy at 1.4:1 — an
   unreadable link in the one place a visitor is being asked to consent. */
.consent {
  --ground:     var(--k-ink);
  --cell:       var(--k-ink-cell);
  --cell-tint:  var(--k-ink-cell);
  --input-bg:   var(--k-ink-cell);
  --fg:         var(--k-ink-fg);
  --fg-hi:      var(--k-ink-fg);
  --fg-body:    var(--k-ink-body);
  --fg-muted:   var(--k-ink-body);
  --fg-faint:   var(--k-ink-muted);
  --fg-faintest: var(--k-ink-faint);
  --rule:       var(--k-ink-line);
  --rule-strong: var(--k-ink-line-2);
  --rule-soft:  var(--k-ink-line);
  --rule-input: var(--k-ink-line-2);
  --focus-ring: rgba(247, 243, 235, 0.22);
  --accent:     var(--lime);
  --accent-hi:  var(--lime-hi);
  --accent-line: var(--k-ink-line-2);
  --dir-up:     var(--up-ink);
  --dir-down:   var(--down-ink);
  --dir-up-bg:  var(--k-ink-cell);
  --dir-down-bg: var(--k-ink-cell);

  --btn-bg:       var(--lime);
  --btn-fg:       var(--lime-on);
  --btn-bg-hover: var(--lime-hi);
  --btn-fg-hover: var(--lime-on);
}

/* The two form cards sit ON a ground rather than being one, so they take the
   card colour. */
.form-card,
.login__form {
  --ground: var(--k-cell);
}

/* --------------------------------------------------------------------------
   Palette aliases

   The component layer below was written against the sibling sites' raw token
   names. Rather than rename several hundred usages - a large diff with no
   behavioural meaning, and an easy place to miss one - the old names are
   pointed at this design's palette here.

   The `--d-*` ("dark") names now resolve to the INK palette, because that is
   what they always meant: the components asking for the dark ground and its
   light foreground are exactly the footer, the closing panel and the login
   aside. The `--c-*` ("cream") names resolve to the white ground.
   -------------------------------------------------------------------------- */

:root {
  --d-bg:       var(--k-ink);
  --d-bg-2:     var(--k-ink-cell);
  --d-panel:    var(--k-ink-cell);
  --d-line:     var(--k-ink-line);
  --d-line-2:   var(--k-ink-line);
  --d-line-3:   var(--k-ink-line-2);
  --d-fg:       var(--k-ink-fg);
  --d-fg-hi:    var(--k-ink-fg);
  --d-fg-2:     var(--k-ink-body);
  --d-muted:    var(--k-ink-body);
  --d-muted-2:  var(--k-ink-body);
  --d-muted-3:  var(--k-ink-muted);
  --d-muted-4:  var(--k-ink-faint);

  --c-bg:       var(--k-bg-alt);
  --c-cell:     var(--k-cell);
  --c-fg:       var(--k-fg);

  --gold:        var(--violet);
  --gold-hi:     var(--violet-hi);
  --gold-dk-2:   var(--violet-hi);
  --gold-tint:   var(--violet-tint);
  --gold-tint-d: var(--violet-tint);

  /* The sibling sites' accent was a cyan called `--teal`. Same role here. */
  --teal:        var(--violet);
  --teal-hi:     var(--violet-hi);
  --teal-deep:   var(--violet-on);
  --teal-line:   var(--violet-line);
  --teal-tint:   var(--violet-tint);
  --teal-tint-2: var(--violet-tint-2);
  --teal-edge:   var(--violet-edge);
  --blue:        var(--violet-hi);

  --up-l:       var(--up);
  --down-l:     var(--down);
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

img { max-width: 100%; display: block; }

h1, h2, h3 { text-wrap: balance; font-family: var(--serif); font-weight: 500; }
p { text-wrap: pretty; }

::selection { background: var(--lime); color: var(--lime-on); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--violet);
  color: var(--violet-on);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
}
.skip-link:focus { left: 0; color: var(--violet-on); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--k-bg); }
.main { flex: 1; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--narrow { max-width: 920px; }
.wrap--legal  { max-width: 800px; }

/* Sections carry their own ground and context. */
.section { background: var(--ground); color: var(--fg); }
.section--light { background: var(--ground); color: var(--fg); }
.section--sand  { background: var(--ground); color: var(--fg); }
.section--top-rule { border-top: 1px solid var(--k-line); }

.section__body { padding-top: 96px; padding-bottom: 96px; }

.kicker {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 24px;
}
.kicker--quiet { color: var(--fg-faint); }

/* The hero kicker is the same line as every other kicker, with a little more
   air beneath it. The sibling design gave it a bordered pill and a pulsing
   dot; this canvas has neither, and a live-looking indicator above a headline
   that makes no live claim would be decoration pretending to be status. */
.kicker--badge { margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   Section rules, where the sibling design had an ambient glow

   The glow is gone. This canvas separates its sections with a single hairline
   and nothing else — a soft radial behind the hero would be the one gradient
   on a page built entirely from flat grounds and 1px rules, and it read as a
   rendering artefact rather than as depth.

   The class names stay because the markup uses them, and `--glow` still has a
   job: it is the hook the hero and the closing panel use for their top rule.
   -------------------------------------------------------------------------- */

.section--glow { position: relative; }
.section--glow > * { position: relative; }
.section--glow-bottom { border-top: 1px solid var(--k-fg); }

.split { display: grid; gap: 64px; align-items: start; }
.split--hero    { grid-template-columns: minmax(0, 1fr) 500px; gap: 64px; }
.split--markets { grid-template-columns: 0.9fr 1.1fr; }
.split--steps   { grid-template-columns: 0.8fr 1.2fr; }
.split--derisk  { grid-template-columns: 0.85fr 1.15fr; }
.split--faq     { grid-template-columns: 0.7fr 1.3fr; }
.split--security { grid-template-columns: 1fr 1fr; }
.split--fees    { grid-template-columns: 1fr 1fr; }
.split--cta     { grid-template-columns: minmax(0, 1fr) 500px; gap: 64px; align-items: center; }
.split--contact { grid-template-columns: 1fr 1.1fr; gap: 84px; }

.sticky-col { position: sticky; top: 110px; }

/* Gapped cards. The sibling sites drew a hairline grid by letting a rule
   colour show through 1px gaps; this design gives every card its own border
   and radius and separates them with real space. */
.grid-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.grid-cells > * {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 120ms ease;
}
.grid-cells > *:hover { border-color: var(--teal-edge); }

/* Stacked cards — the same treatment in one column. */
.stack-cells { display: flex; flex-direction: column; gap: 16px; }
.stack-cells > * {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */

.h-hero {
  font-family: var(--serif);
  /* Fluid rather than fixed: at 72px this headline is two words per line on a
     laptop and four on a phone, and the design sets a floor of 38px. */
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 26px;
  color: var(--fg-hi);
}
.h-page {
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.014em;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 16em;
  color: var(--fg-hi);
}
/* The contact headline runs shorter than the other page titles, so it carries
   its own curve rather than an inline `font-size` — a fixed size defeats the
   fluid scale at every width, which is what the note above forbids. */
.h-page--contact {
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 1.1;
  margin-bottom: 24px;
}

.h-section {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  font-weight: 500;
  margin: 0 0 18px;
  color: var(--fg-hi);
}
.h-section--sm { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.12; }
.h-section--xs { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.12; }
.h-section--closing {
  font-size: clamp(32px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
}
.h-card {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--fg);
}
.h-sub {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--fg-hi);
}

.lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0 0 40px;
  max-width: 30em;
}
.lede--lg { font-size: 20px; max-width: 38em; margin-bottom: 52px; }

.body-copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0 0 30px;
}
.body-copy--lg { font-size: 18px; }
.body-copy--tight { margin-bottom: 20px; }

.intro-copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0;
}

.mono-note { font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--fg-faint); }
.mono-note--faint { font-size: 14px; color: var(--fg-faint); }

.measure-sm { max-width: 34em; }
.measure-md { max-width: 36em; }
.measure-lg { max-width: 38em; }

.mb-52 { margin-bottom: 54px; }
.mb-56 { margin-bottom: 58px; }

/* --------------------------------------------------------------------------
   Buttons

   One primary button whose colours come from the section context, so it flips
   automatically between gold-on-dark and near-black-on-cream.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  padding: 16px 30px;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); }
.btn--block { display: block; width: 100%; padding: 17px; font-size: 17px; }
.btn--sm { font-size: 15px; padding: 12px 22px; border-radius: var(--radius-btn); }
.btn--wide { padding-left: 34px; padding-right: 34px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.link-quiet {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header

   A full-width bar with one hairline under it, not the floating rounded pill
   the sibling design used. The translucent ground plus a small blur keeps the
   paper colour while the page scrolls beneath it; the fallback for a browser
   without backdrop-filter is the same colour at 94%, which is close enough to
   opaque that nothing shows through badly.
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 243, 235, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-fg);
}
.header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Wordmark: an outlined circle carrying a solid dot, then the name in the
   display serif. Both parts of the mark are drawn in CSS rather than as
   markup or an inline SVG, so the templates stay free of a decorative shape a
   screen reader would otherwise have to be told to ignore. */
.brand { display: flex; align-items: center; gap: 12px; color: var(--k-fg); }
.brand:hover { color: var(--k-fg); }
.brand__mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand__mark::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.brand__name {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* The wordmark is one colour. `em` survives because the shell wraps the second
   word in it for the sibling sites' two-tone treatment; here it inherits. */
.brand__name em { font-style: normal; color: inherit; }

/* Plain text links with a colour change on hover — no pill, no underline. The
   nav sits hard right and the CTA button is the only filled element in it. */
.nav { display: flex; gap: 32px; margin-left: auto; align-items: center; }
.nav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--k-muted);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--k-fg); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--k-line-3);
  border-radius: var(--radius-btn);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--k-fg);
}
.nav-toggle__bar { display: block; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }



/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero__body { padding: 96px var(--gutter) 88px; }

/* Numbered rule-separated list under the hero lede. */
/* Three fact tiles under the hero copy. A list rather than three <div>s
   because they are one enumerable set, and a screen reader announcing "list,
   3 items" is the correct summary of what they are. */
.stat-cards {
  border-top: 1px solid var(--rule);
  max-width: 640px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat-card {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.stat-card__label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.stat-card__value { font-size: 16px; line-height: 1.5; color: var(--fg); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

/* The hero form card is a raised card on the section ground rather than an
   inverted island — its inputs recess to the page base so the well reads as
   below the card rather than above it. */
.form-card {
  background: var(--ground);
  color: var(--fg);
  border: 1px solid var(--k-line-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: 110px;
}
/* No rule between the card head and its body: the canvas runs the heading,
   the sub-line and the first label as one block of text on one ground. */
.form-card__head { padding: 36px 36px 0; }
.form-card__title {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--fg);
}
.form-card__sub { font-size: 15px; line-height: 1.5; color: var(--fg-muted); margin: 0; }
.form-card__body { padding: 26px 36px 36px; }

.field { margin-bottom: 18px; }
.field--last { margin-bottom: 26px; }

.field__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--rule-input);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 17px;
  color: var(--fg);
  padding: 14px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field__textarea { resize: vertical; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.field__input[aria-invalid="true"] { border-color: var(--dir-down); }
.field__input::placeholder { color: var(--fg-faintest); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.field-row .field { margin-bottom: 0; }

/* Inline per-field validation message */
.field__msg {
  display: none;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 7px;
}
.field__msg[data-state="checking"] { display: block; color: var(--fg-faint); }
.field__msg[data-state="ok"]       { display: block; color: var(--dir-up); }
.field__msg[data-state="warn"]     { display: block; color: var(--accent); }
.field__msg[data-state="error"]    { display: block; color: var(--dir-down); }

.field__msg button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Honeypot — off-screen for people, inviting to naive bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { font-size: 14px; line-height: 1.6; color: var(--fg-muted); margin: 18px 0 0; }
.form-note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.form-status { display: none; margin-top: 14px; }
.form-status[data-state="ok"] {
  display: block;
  background: var(--teal-tint);
  border: 1px solid var(--teal-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--teal-hi);
}
.form-status[data-state="error"] {
  display: block;
  background: var(--down-bg);
  border: 1px solid #F5C4BC;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--down);
}

.turnstile-slot:not(:empty) { margin-bottom: 18px; }

/* The closing-CTA panel carries `.form-dark` from the sibling sites. Every
   ground is dark here, so the status colours above already apply and no
   override is needed — the class is kept as a hook, not a restyle. */

/* --------------------------------------------------------------------------
   Market table
   -------------------------------------------------------------------------- */

.market-table {
  border: 1px solid var(--rule);
  background: var(--cell);
  border-radius: var(--radius);
  overflow: hidden;
}
.market-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.85fr)
    minmax(0, 0.95fr) minmax(0, 1.5fr);
  /* Every column after the first is right-aligned, so without a gap a long
     value sits flush against the one before it. English never showed this —
     "News-driven" leaves room — but German ("Nachrichtengetrieben") fills the
     profile column and collided with the volume figure. */
  column-gap: 16px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.market-row:last-of-type { border-bottom: 0; }
.market-row--head {
  padding: 14px 26px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.market-row__pair { display: flex; align-items: baseline; gap: 12px; }
.market-row__sym  { font-size: 17px; font-weight: 600; }
.market-row__name { font-size: 15px; color: var(--fg-muted); }
.market-row__num { text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; }
.market-row__num--vol  { color: var(--k-muted-2); }
/* The profile column is prose, not a figure, so it keeps the sans. It is also
   the only column whose content is a translated phrase rather than a number,
   and German compounds it into single unbreakable words — "Nachrichten-
   getrieben" is 20 characters with nowhere to wrap. The column is sized for
   that, and `overflow-wrap` is the backstop for whatever the next locale
   brings. */
.market-row__tag {
  text-align: right;
  font-size: 15px;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.market-row__num--up   { color: var(--dir-up); }
.market-row__num--down { color: var(--dir-down); }
.market-table__foot {
  padding: 14px 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-faint);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Definition rows — the security table and the fee list

   Both are rule-separated rows with no card around them: a hairline above the
   first row, one below each row, and nothing else. That is why they are one
   component with a modifier rather than two — the security table pairs a label
   column with a sentence, the fee list pairs a label with a short value pushed
   right, and everything else about them is identical.
   -------------------------------------------------------------------------- */

.spec-list { border-top: 1px solid var(--rule-strong); }
.spec-list__row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.spec-list__k { font-size: 16px; font-weight: 600; color: var(--fg); }
.spec-list__v { font-size: 16px; line-height: 1.6; color: var(--fg-body); margin: 0; }

/* The fee list puts its value hard right on one line, so it drops the fixed
   label column for a flex row that lets the label take what it needs. */
.spec-list--fees .spec-list__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}
.spec-list--fees .spec-list__k { font-weight: 400; color: var(--fg-body); font-size: 17px; }
.spec-list--fees .spec-list__v { font-weight: 600; text-align: right; color: var(--fg); font-size: 17px; }

.table-note { font-size: 14px; line-height: 1.6; color: var(--fg-faint); margin: 16px 0 0; }

/* --------------------------------------------------------------------------
   Content cells
   -------------------------------------------------------------------------- */

.benefit { padding: 30px 30px 32px; }
.benefit__no {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--fg-faintest);
  margin: 0 0 22px;
}
.benefit__body { font-size: 17px; line-height: 1.65; color: var(--fg-body); margin: 0; }

/* "How to get started" stacks the number above the title rather than beside
   it: inside a card the side-by-side arrangement leaves the number stranded
   in its own column of whitespace. */
.step { padding: 34px 30px 38px; border-radius: var(--radius); }
.step__no {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg-faintest);
  margin: 0 0 22px;
}
.step__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--fg);
}
.step__body { font-size: 15px; line-height: 1.62; color: var(--fg-body); margin: 0; max-width: 40em; }

/* The risk-management list keeps the number beside the title — those rows run
   full width, so the column costs nothing and the numbers read as a sequence. */
.step--tight {
  padding: 26px 30px 28px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  align-items: center;
}
/* The risk list numbers its items with the same large display numeral as the
   benefit cards, not with the lime chip the "get started" steps use. The chip
   reads as a stage marker in a sequence you follow; these five are a set you
   apply, and the design distinguishes them that way. */
.step--tight .step__no {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--accent);
  background: none;
  padding: 0;
  border-radius: 0;
  margin: 0;
}
.step--tight .step__title { font-size: 19px; margin-bottom: 8px; }

/* Two columns of cards on the ink ground. The card is a wrapping flex row of
   three children — head, tag, body — so the pair and its tag share the first
   line and the prose takes a full row beneath, without the template having to
   nest anything. */
.asset {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 26px 26px 28px;
}
.asset__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.asset__sym {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.asset__name { font-size: 17px; font-weight: 600; color: var(--fg); }
.asset__tag {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--fg-muted);
  white-space: nowrap;
  flex: none;
  margin: 0;
}


/* The assets list is the one stack that runs two-up. */
.section--sand .stack-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.asset__body {
  flex: 1 0 100%;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-body);
  margin: 6px 0 0;
}

.banner-cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--lime);
  border-radius: 22px;
  padding: 26px 32px;
}
.banner-cta__text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lime-on);
  margin: 0;
}
/* The banner is lime whatever ground it sits on, so its button and link are
   pinned to the ink pair rather than inheriting the section's accent — violet
   on lime is the one combination in this palette that fails to carry. */
.banner-cta .btn {
  padding: 14px 26px;
  white-space: nowrap;
  background: var(--k-ink);
  color: var(--k-ink-fg);
}
.banner-cta .btn:hover { background: var(--violet); color: var(--violet-on); }

.center-cta { margin-top: 40px; text-align: center; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonials { overflow: hidden; }
.testimonials__head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 92px var(--gutter) 44px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.marquee { padding-bottom: 52px; }
.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 0 var(--gutter);
}
.marquee__track[data-cloned="true"] { animation: tscroll 70s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes tscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.quote {
  margin: 0;
  width: 392px;
  flex: none;
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.quote__text {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--k-fg-2);
}
.quote__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.quote__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--teal-tint-2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  flex: none;
}
.quote__name { font-size: 14px; font-weight: 500; }
.quote__role { font-size: 13px; color: var(--fg-faint); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
}
.faq__q {
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 22px 26px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.faq__mark { font-family: var(--mono); font-size: 16px; color: var(--accent); line-height: 1; flex: none; }
.faq__a { display: none; }
.faq__q[aria-expanded="true"] + .faq__a { display: block; }
.faq__a p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--fg-muted);
  margin: 0;
  padding: 0 60px 24px 26px;
  max-width: 46em;
}

/* --------------------------------------------------------------------------
   Closing CTA panel
   -------------------------------------------------------------------------- */

.cta-panel {
  background: var(--cell-tint);
  border: 1px solid var(--k-line-4);
  border-radius: var(--radius);
  padding: 30px;
}
/* Not a kicker despite the name: in the closing panel this line is the
   panel's title, so it takes the heading treatment, not the mono all-caps
   one the kickers elsewhere use. */
.cta-panel__kicker {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0 0 4px;
}
.cta-panel__sub { font-size: 14px; color: var(--fg-faint); margin: 0 0 24px; }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.about__body { padding: 92px var(--gutter) 108px; }
.value { padding: 28px 26px; }
.value h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--fg);
}
.value p { font-size: 15px; line-height: 1.65; color: var(--fg-muted); margin: 0; }

.placeholder-box {
  border: 1px dashed var(--rule-input);
  background: var(--k-bg-alt);
  border-radius: var(--radius);
  padding: 60px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faintest);
}

/* --------------------------------------------------------------------------
   Login page
   -------------------------------------------------------------------------- */

/* Two panels rather than two half-screens: the design insets them from the
   page edge and rounds them, so neither runs to the viewport edge. */
.login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px var(--gutter) 96px;
  align-items: stretch;
}
.login__form {
  background: var(--ground);
  color: var(--fg);
  border: 1px solid var(--k-line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
}
.login__inner { width: 100%; max-width: 380px; }
.login__title {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 8px;
}
.login__sub { font-size: 15px; color: var(--fg-muted); margin: 0 0 34px; }
.login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.login__check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-muted); }
.login__foot { font-size: 14px; color: var(--fg-muted); margin: 26px 0 0; text-align: center; }
.login__aside {
  display: flex;
  align-items: center;
  padding: 64px 56px;
  background: var(--ground);
  color: var(--fg);
  border-radius: var(--radius-lg);
}
.login__aside-inner { max-width: 30em; }
.login__aside h2 {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--d-fg-hi);
}
.login__aside p { font-size: 16px; line-height: 1.65; color: var(--d-muted); margin: 0 0 30px; }
.security-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Pill chips on the ink panel, per the design. Each sits on the raised ink
   cell colour, so the chip reads without needing a dash to mark where an item
   starts. */
.security-list li {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-body);
  background: var(--cell);
  padding: 10px 14px;
  border-radius: var(--radius-btn);
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact__body { padding: 92px var(--gutter) 108px; }
.contact-details { display: flex; flex-direction: column; gap: 26px; margin: 0; }
.contact-details dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 7px;
}
.contact-details dd { font-size: 16px; margin: 0; }
.contact-form {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 28px;
  padding: 38px;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal__body { padding: 92px var(--gutter) 108px; }
.legal__title {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 14px;
}
.legal__meta { font-family: var(--mono); font-size: 12px; color: var(--fg-faintest); margin: 0 0 52px; }
.legal-section { margin-bottom: 36px; }
.legal-section h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.legal-section p { font-size: 16px; line-height: 1.75; color: var(--fg-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* The footer is on the page ground, not an inset ink panel.

   The sibling design closed with a dark slab; this canvas closes with a single
   navy hairline and the same paper the page opened on. That is a deliberate
   consequence of the palette: the ink ground already carries the security
   section and the closing CTA, and a third ink block immediately under the
   second would run the last third of the page as one dark mass.

   `.footer` is therefore NOT in the ink context list at the top of this file. */
.footer {
  color: var(--k-muted);
  background: var(--k-bg);
  border-top: 1px solid var(--k-fg);
}
.footer__cols {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px var(--gutter) 36px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--k-fg);
}
.footer__brand:hover { color: var(--k-fg); }
.footer__mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.footer__mark::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.footer__name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--k-fg);
}
.footer__name em { font-style: normal; color: inherit; }
.footer__blurb { font-size: 15px; line-height: 1.65; margin: 0; max-width: 26em; color: var(--k-muted); }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__heading {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-muted-3);
  margin-bottom: 3px;
}
.footer__col a { font-size: 15px; font-weight: 500; color: var(--k-muted); }
.footer__col a:hover { color: var(--k-fg); }
.footer__legal { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 44px; }
.footer__disclaimer {
  font-size: 14px;
  line-height: 1.65;
  color: var(--k-muted);
  margin: 0 0 16px;
  border-top: 1px solid var(--k-line);
  padding-top: 22px;
}
.footer__copy { font-family: var(--sans); font-size: 13px; color: var(--k-muted-3); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound { padding: 120px var(--gutter); text-align: center; }
.notfound__code {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.notfound .lede { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Breakpoints follow the design canvas: 1180px collapses the two-column
   splits, 980px steps the card grids down, 720px is the phone layout.

   The heading sizes are NOT restated here. They are `clamp()` in the type
   scale, so a fixed size at a breakpoint would override the fluid curve and
   reintroduce the jump the clamp exists to remove. */

@media (max-width: 1180px) {
  .split--hero,
  .split--markets,
  .split--steps,
  .split--derisk,
  .split--faq,
  .split--security,
  .split--fees,
  .split--cta,
  .split--contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .sticky-col { position: static; }
  /* Centred rather than left-aligned: at one column a 452px form hugging the
     left edge of a full-width section reads as a layout error. */
  .split--hero .form-card,
  .split--contact .form-card,
  .split--cta .cta-panel { max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 980px) {
  .grid-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* `.asset` is a flex row, so it takes the tighter gap here; the column
     count that actually matters is on the grid around it, collapsed at 720. */
  .asset { gap: 10px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .login { grid-template-columns: 1fr; }
  .login__aside { padding: 48px 32px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  /* One asset per row. `1fr` floors at min-content and `.asset__tag`'s
     `white-space: nowrap` holds that floor open, so two columns could never
     fit a 320px screen however narrow the prose got. Worse, `overflow-x:
     clip` on <html> meant the overhanging column was not just off-screen but
     unreachable — 103px of German copy with no gesture to get to it. */
  .section--sand .stack-cells { grid-template-columns: minmax(0, 1fr); }

  /* The page whose only job is a five-field form was carrying 128px of
     vertical and 64px of horizontal padding on a 320px screen. */
  .login__form { padding: 36px 20px; }

  /* Nineteen consecutive 18px targets 7px apart is the densest tap zone on
     the site. */
  .legal-toc li { margin-bottom: 0; }
  .legal-toc a { display: block; padding: 12px 0; }

  .nav-toggle { display: block; }
  .header__inner { gap: 16px; }
  .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--k-bg);
    border-bottom: 1px solid var(--k-line);
    padding: 8px var(--gutter) 20px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--k-line);
    border-radius: var(--radius-btn);
    font-size: 16px;
  }
  /* The pill hover would look like a selected state on a stacked list. */
  .nav__link:hover, .nav__link[aria-current="page"] { background: none; }
  .nav .btn { margin-top: 16px; }

  .legal__title { font-size: 34px; }
  .login__title { font-size: 32px; }
  .lede { font-size: 17px; }
  .lede--lg { font-size: 18px; }
  .banner-cta__text { font-size: 19px; }
  .quote__text { font-size: 16px; }

  .hero__body { padding: 56px var(--gutter); }
  .section__body { padding-top: 56px; padding-bottom: 56px; }
  .about__body, .contact__body, .legal__body { padding: 56px var(--gutter) 72px; }
  .testimonials__head { padding: 56px var(--gutter) 32px; }
  .notfound { padding: 72px var(--gutter); }

  .grid-cells { grid-template-columns: minmax(0, 1fr); }
  .stat-cards { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: 1fr; }

  .field-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .field-row .field { margin-bottom: 16px; }

  .form-card__head { padding: 20px 20px 18px; }
  .form-card__body { padding: 22px 20px 24px; }
  .cta-panel { padding: 24px 20px; }
  .contact-form { padding: 24px 20px; }

  /* Volume and profile are the two columns a phone can afford to lose: the
     pair, the price and the 24h move are what the table is for. */
  .market-row, .market-row--head {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr);
    padding-left: 16px;
    padding-right: 16px;
  }
  .market-row > :nth-child(n+4), .market-row--head > :nth-child(n+4) { display: none; }
  .market-row__name { display: none; }
  .market-table__foot { padding-left: 16px; padding-right: 16px; }

  .quote { width: 300px; padding: 26px 22px; }
  .faq__q { padding: 20px; }
  .faq__a p { padding: 0 20px 20px; }
  .banner-cta { flex-direction: column; align-items: flex-start; }
  .banner-cta .btn { width: 100%; }
  .step { padding: 28px 22px 30px; }
  .step--tight { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px; }
  .step--tight .step__no { padding-top: 0; }
  .asset { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .kicker--badge::before { animation: none; }
  .marquee { overflow-x: auto; }
  /* Same reasoning as the marquee above: with the animation stopped, an
     overflow:hidden strip shows its first two symbols permanently and the
     rest cannot be reached. */
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .header, .footer, .marquee, .form-card, .cta-panel { display: none; }
}

/* --------------------------------------------------------------------------
   Country + phone fields

   The country select used to be a 92px column beside the number, showing the
   dial code alone ("+27") with the country name hidden in an aria-label. That
   is unusable for a sighted visitor — nobody knows their own dial code — and
   it broke type-ahead, since the option text began with "+". It is now a
   full-width field of its own, labelled, listing "South Africa +27".
   -------------------------------------------------------------------------- */

.field__select {
  /* Leave room for the native dropdown arrow at every width. */
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* The option list is painted by the OS, not the page, so it does not inherit
   the section context. Set both halves explicitly or a dark-ground select
   renders light text on a light list in some browsers. */
.field__select option { background: var(--c-cell); color: var(--c-fg); }
.form-dark .field__select option { background: var(--d-panel); color: var(--d-fg); }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb { margin: 0 0 24px; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faintest);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--rule);
}
.breadcrumb a { color: var(--fg-faint); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--fg); }

/* --------------------------------------------------------------------------
   Long-form content
   -------------------------------------------------------------------------- */

.prose { margin-bottom: 48px; }
.prose:last-child { margin-bottom: 0; }
.prose p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin: 0 0 18px;
  max-width: 40em;
}
.prose p:last-child { margin-bottom: 0; }
.prose .h-sub { margin-top: 0; }

.prose-list {
  margin: 0 0 32px;
  padding-left: 22px;
  max-width: 40em;
}
.prose-list li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin-bottom: 10px;
  padding-left: 4px;
}
.prose-list li::marker { color: var(--accent); }

/* Inline links inside body copy need to read as links, not as decoration. */
.prose a,
/* Inline links take the CONTEXTUAL accent — violet on the light grounds, lime
   on ink — so a link stays readable wherever its block is used. `.form-note`
   is the one that makes this non-negotiable: it renders on the white hero card
   AND on the ink closing panel, and it carries the Terms and Privacy Policy
   links, which cannot be allowed to disappear on either. */
.prose-list a,
.body-copy a,
.step__body a,
.value p a,
.form-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover,
.prose-list a:hover,
.body-copy a:hover,
.step__body a:hover,
.value p a:hover { color: var(--accent-hi); }

/* The lime banner is the exception: it is lime on every ground, so its link is
   pinned to ink rather than following the section's accent. Lime-on-lime would
   vanish exactly the way ink-on-ink did. */
.banner-cta__text a {
  color: var(--lime-on);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.banner-cta__text a:hover { color: var(--violet-hi); }

.login .breadcrumb { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Footer language links

   Plain anchors, not a <select> — they work with JavaScript disabled and give
   every locale a crawlable inbound link.
   -------------------------------------------------------------------------- */

.lang-links {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}
.lang-links__label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-muted-3);
}
.lang-links__list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.lang-links__link {
  font-size: 15px;
  color: var(--k-muted);
  /* 44px minimum touch target, extended without visual bulk. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-btn);
}
.lang-links__link:hover { color: var(--k-fg); background: var(--violet-tint); }
.lang-links__link--current {
  color: var(--k-fg);
  background: var(--violet-tint);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Mobile conversion fixes

   iOS zooms the viewport whenever a focused input is under 16px and never
   zooms back out, which on a four-field form means the visitor fights the
   layout at exactly the moment they are converting.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .field__input,
  .field__select,
  .field__textarea {
    font-size: 16px;
    min-height: 48px;
  }

  /* Every interactive control clears the 44x44 guideline. */
  .nav-toggle { padding: 12px 13px; min-width: 44px; min-height: 44px; }

  /* 721-980px is a touch range with the horizontal nav still showing — the
     hamburger does not take over until 720. These measured 34px tall. */
  .nav__link { display: inline-flex; align-items: center; min-height: 44px; }

  /* Hit area only; neither mark nor wordmark moves. */
  .brand,
  .footer__brand { min-height: 44px; }

  /* Standalone navigation controls, so WCAG 2.5.8 Target Size applies —
     these measured 28x15px. Growing the row leaves the visual weight alone,
     the same approach `.lang-links__link` already uses. */
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .faq__q { padding-top: 20px; padding-bottom: 20px; min-height: 56px; }
  .btn { min-height: 48px; }
  .login__check input[type="checkbox"] { width: 20px; height: 20px; }
}

/* A register CTA inside the first viewport on a phone. The header button sits
   inside the collapsed nav, so on mobile there was no visible call to action
   above the fold at all. */
.hero-cta-mobile { display: none; }

@media (max-width: 720px) {
  .hero-cta-mobile { display: block; margin: 0 0 28px; }
  .hero-cta-mobile .btn { width: 100%; }
  .split--hero { gap: 32px; }
  .lang-links { padding-bottom: 4px; }
}

/* --------------------------------------------------------------------------
   Cookie consent

   Revealed by site.js only when no choice has been recorded. Both buttons are
   real buttons of equal weight — a prominent "Accept" beside a hidden or
   greyed-out "Decline" is a dark pattern, and consent obtained that way is not
   freely given.
   -------------------------------------------------------------------------- */

/* A compact card in the bottom-left, not a full-width bar — it should sit
   beside the page rather than barricade it. */
.consent {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 60;
  width: 380px;
  max-width: calc(100vw - (var(--gutter) * 2));
  padding: 20px 22px 18px;
  background: var(--d-panel);
  border: 1px solid var(--d-line-3);
  color: var(--d-fg);
  box-shadow: 0 12px 32px rgba(21, 18, 58, 0.22);
}
.consent[hidden] { display: none; }

.consent__close {
  position: absolute;
  top: 8px;
  right: 8px;
  /* 32px box around a 12px glyph — small on the page, still a real target. */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--d-muted-3);
  cursor: pointer;
  transition: color 120ms ease;
}
.consent__close:hover { color: var(--d-fg); }

.consent__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--d-muted);
  margin: 0 24px 16px 0; /* clears the close button */
}
/* Contextual accent, not `--gold`: the card is ink, and `--gold` is an alias
   for violet defined only on :root, so it never follows the ground — 2.53:1
   on the one link in the cookie banner. */
.consent__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent__text a:hover { color: var(--accent-hi); }

.consent__actions { display: flex; gap: 10px; }
.consent__actions .btn { flex: 1; }

/* Decline carries the same size and weight as Accept — a prominent Accept
   beside a faint Decline is a dark pattern, and consent collected that way is
   not freely given. */
.consent__decline {
  background: transparent;
  color: var(--d-fg);
  border: 1px solid var(--d-line-3);
}
.consent__decline:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

@media (max-width: 720px) {
  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Company identity (footer)

   Legal name, registered office, company number and regulatory status. This is
   an <address> element, so it is deliberately not italicised.
   -------------------------------------------------------------------------- */

.company {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--k-muted);
  border-top: 1px solid var(--k-line);
  padding-top: 24px;
  margin-bottom: 18px;
}
.company__name { font-weight: 600; color: var(--k-fg); }

/* The disclaimer sits directly below and already has its own rule; drop its
   duplicate border so the two blocks read as one legal footer. */
.company + .footer__disclaimer { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   Mobile hardening

   Four classes of phone problem the breakpoints above do not cover: a stray
   wide element scrolling the whole page sideways, the notch and home
   indicator on modern iPhones, tap targets in the footer, and the 360-400px
   screens that are still a large share of Android traffic.
   -------------------------------------------------------------------------- */

/* A single over-wide child — a long unbroken string, a table, a marquee mid
   animation — otherwise scrolls the entire document sideways and the visitor
   has no way to tell which element did it.

   `clip`, not `hidden`. `overflow: hidden` makes the element a scroll
   container, which would break `position: sticky` on .header; `clip` does not
   create one, so the header keeps sticking to the viewport. */
html {
  overflow-x: clip;
}

/* The default translucent-blue tap flash reads as a rendering fault on a dark
   ground. Suppressed here and replaced by the :active states below, so taps
   still acknowledge themselves. */
a, button, [role="button"], summary, label, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Removes the ~300ms click delay older mobile engines hold for a possible
   double-tap zoom. Only on controls — the page itself stays pinch-zoomable,
   which `user-scalable=no` would have taken away. */
a, button, [role="button"], .btn, summary {
  touch-action: manipulation;
}

/* Touch has no hover, so a tap on a primary control would otherwise give no
   feedback at all between press and page change. */
@media (hover: none) {
  .btn:active { opacity: 0.82; }
  /* The footer pair sit on the ink panel, where near-white is right. The nav
     panel does not: at <=720 its ground is `--k-bg`, the same #F3F1FF that
     `--d-fg` resolves to, so every tap blanked the label it was pressing. */
  .footer__col a:active,
  .lang-links__link:active { color: var(--k-fg); }
  .nav__link:active { color: var(--k-fg); }
}

/* Long words in the translated locales — German compounds especially — set
   the minimum content width of a card and force the sideways scroll that
   `overflow-x: clip` would then silently hide. Break them instead. */
h1, h2, h3, .lede, .quote__text, .faq__q, .btn {
  overflow-wrap: break-word;
}

/* The fixed cookie card sits in the home-indicator strip on a notched iPhone,
   where the system gesture area swallows taps on the buttons. */
@supports (padding: max(0px)) {
  .consent {
    bottom: max(var(--gutter), env(safe-area-inset-bottom));
    left: max(var(--gutter), env(safe-area-inset-left));
  }
}

/* Landscape on a notched phone puts the gutter under the sensor housing. */
/* Short viewports — a landscape phone, or a small window on a laptop.
   Height, not width, is the constraint here: 740x360 is above every width
   breakpoint, so it was taking full desktop hero padding on a 360px-tall
   screen and pushing the headline to y=286. */
@media (max-height: 480px) {
  .hero__body { padding-top: 28px; padding-bottom: 32px; }
  .section__body { padding-top: 32px; padding-bottom: 32px; }
  /* 39px of aria-hidden decoration is 11% of the screen here. */
  .login { padding-top: 20px; padding-bottom: 40px; }
  .login__form, .login__aside { padding-top: 32px; padding-bottom: 32px; }
}

@media (orientation: landscape) {
  @supports (padding: max(0px)) {
    .header__inner,
    .hero__body,
    .section__body,
    .footer__cols,
    .footer__legal {
      padding-left: max(var(--gutter), env(safe-area-inset-left));
      padding-right: max(var(--gutter), env(safe-area-inset-right));
    }
  }
}

@media (max-width: 980px) {
  /* The footer navigation columns were the last place on the site with tap
     targets under the 44px guideline — 14px links on a 12px gap. Padding the
     link and closing the gap keeps the footer the same height while making
     each target reachable. */
  .footer__col { gap: 2px; }
  .footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  @supports (padding: max(0px)) {
    .consent {
      bottom: max(12px, env(safe-area-inset-bottom));
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
    }
  }
}

/* --------------------------------------------------------------------------
   Small phones (<= 420px)

   iPhone SE and the 360px Android baseline. The 720px layout fits but runs
   out of horizontal room in three places: the market table, the testimonial
   cards, and any button carrying a long translated label.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  :root { --gutter: 16px; }

  .hero__body { padding-top: 44px; padding-bottom: 44px; }
  .section__body { padding-top: 44px; padding-bottom: 44px; }
  .about__body, .contact__body, .legal__body { padding-top: 44px; padding-bottom: 56px; }
  .testimonials__head { padding-top: 44px; padding-bottom: 24px; }
  .notfound { padding-top: 56px; padding-bottom: 56px; }

  /* Was a fixed 300px card in a horizontal scroller. On a 360px screen that
     left no visible edge of the next quote, so the strip did not read as
     scrollable. */
  .quote {
    width: min(288px, calc(100vw - 72px));
    padding: 22px 18px;
  }

  /* Three columns in ~328px of content width. The numbers are monospaced, so
     a point off each keeps the 24h change on one line at BTC's price. */
  .market-row, .market-row--head {
    padding-left: 12px;
    padding-right: 12px;
  }
  .market-row__sym { font-size: 14px; }
  .market-row__num { font-size: 13px; }
  .market-table__foot { padding-left: 12px; padding-right: 12px; }

  /* The form is the conversion path; it gets the room back that the reduced
     gutter frees up rather than spending it on card padding. */
  .form-card__head { padding: 18px 16px 16px; }
  .form-card__body { padding: 20px 16px 22px; }
  .cta-panel { padding: 22px 16px; }
  .contact-form { padding: 22px 16px; }

  /* "Kostenlos registrieren" and "Zarejestruj się za darmo" overflow a
     24px-padded button at this width. */
  .btn { padding-left: 18px; padding-right: 18px; }

  .step { padding: 24px 18px 26px; }
  .step--tight { padding: 18px; }
  .asset { padding: 18px; }
  .faq__q { padding-left: 16px; padding-right: 16px; }
  .faq__a p { padding-left: 16px; padding-right: 16px; }
  .breadcrumb ol { font-size: 10px; gap: 6px; }
  .consent { padding: 16px 18px 14px; }
}

/* --------------------------------------------------------------------------
   /ok — the post-registration completion page

   Its job is to be read, not admired: the visitor has just handed over their
   details and is about to be phoned. So the hierarchy is heavier than the rest
   of the site — a large title, a rule, then a short shouted line — and the
   measure is kept narrow enough to actually read.
   -------------------------------------------------------------------------- */

.ok__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 28px;
  max-width: 18ch;
}

.ok__rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 32px;
}

/* The "You MUST read this now" line. An h2 for document order, sized between
   the title and the body so it reads as an instruction rather than a section. */
.ok__shout {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.25;
  color: var(--accent);
  margin: 0 0 24px;
}

.ok__section { margin-top: 44px; }
.ok__section .h-sub { margin-bottom: 16px; }

.ok__cta { margin: 40px 0 28px; }

/* The design highlights a clause mid-sentence. A yellow marker pen belongs on
   white paper; on this ground it becomes a tinted panel in the accent, which
   carries the same emphasis without fighting the palette. `color` is set
   explicitly because the UA default for <mark> is black on yellow. */
.ok mark,
mark {
  background: var(--teal-tint);
  color: var(--accent);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 720px) {
  .ok__title { max-width: none; }
  .ok__section { margin-top: 36px; }
  .ok__cta { margin: 32px 0 24px; }
  /* The button is the whole point of the page on a phone. */
  .ok__cta .btn { display: block; width: 100%; }
}

/* --------------------------------------------------------------------------
   Legal pages: notice, contents, clause lists

   The terms and privacy pages carry template wording that has not been through
   legal review. That fact used to sit in the same grey mono line as the
   version number, where it read as metadata. It is the most important sentence
   on the page, so it is now a bordered callout above the contents — a reader
   deciding whether to trust the clauses should not have to notice it.
   -------------------------------------------------------------------------- */

.legal-notice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--cell);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 0 44px;
}
.legal-notice p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.legal-notice a { color: var(--accent); text-decoration: underline; }

/* Nineteen clauses is past the length where a reader can scan headings, so the
   page gets a contents list. Numbered because the clauses are numbered by
   position — the anchors are #s1..#sN and survive rewording and translation. */
.legal-toc {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 24px;
  margin: 0 0 48px;
}
.legal-toc__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 14px;
}
.legal-toc ol {
  margin: 0;
  padding: 0 0 0 1.2em;
  columns: 2;
  column-gap: 40px;
}
.legal-toc li {
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.5;
  break-inside: avoid;
}
.legal-toc a { color: var(--fg-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); text-decoration: underline; }

/* Anchored clauses: give the scroll target room to clear the sticky header. */
.legal-section { scroll-margin-top: calc(var(--header-h) + 20px); }

.legal-list {
  margin: 14px 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
.legal-list li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin-bottom: 9px;
}
.legal-list li strong { color: var(--fg); font-weight: 600; }
.legal-list a { color: var(--accent); text-decoration: underline; }
.legal-section p a { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  /* Two columns of clause titles is unreadable on a phone. */
  .legal-toc ol { columns: 1; }
  .legal-notice { padding: 16px 16px; }
  .legal-list li, .legal-section p { font-size: 15px; }
}