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

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

   Polarity note: this design is dark throughout — there is no light ground.
   Sections alternate between the page base (#0E0F11) and a very slightly
   lifted alternate (#131518), with cards raised above both (#15171A). The
   contextual-variable layer below is kept even though every ground is dark,
   because the components read those variables rather than the raw palette:
   a card renders correctly on any ground without knowing which it is on, and
   reintroducing a light ground later is a change to this 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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-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: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/sora-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: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/sora-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 ------------------------------------------- */
  --k-bg:       #0E0F11;  /* page base */
  --k-bg-alt:   #131518;  /* alternate section ground, and the ticker strip */
  --k-cell:     #15171A;  /* raised card on either ground */
  --k-input:    #0E0F11;  /* input well — reads as recessed against a card */

  --k-line:     #22252A;  /* card and section rules */
  --k-line-2:   #1B1E22;  /* interior rules inside a card (market rows) */
  --k-line-3:   #2C3037;  /* input borders — must read against --k-cell */
  --k-line-4:   #22252A;  /* form-card border, a touch lighter than --k-line */

  /* --- Raw palette: foreground ---------------------------------------- */
  --k-fg:       #F7F8F9;
  --k-fg-2:     #E3E6E9;
  --k-fg-3:     #D3D7DC;
  --k-muted:    #98A0AA;
  --k-muted-2:  #7E868F;
  --k-muted-3:  #6E7681;
  --k-muted-4:  #6A7280;
  --k-muted-5:  #5A616A;
  --k-muted-6:  #545C67;

  /* --- Brand ----------------------------------------------------------
     Cyan is the accent; the deeper cyan only appears in the two brand gradients
     (the logo tile and the ambient hero glow), never as a text colour. */
  --teal:       #00C2FF;
  --teal-hi:    #5FD6FF;
  --teal-deep:  #04222E;  /* text on a teal button — 12.9:1 against --teal */
  --teal-line:  #123A4D;  /* border of a teal-tinted panel */
  --teal-tint:  #0B1E27;  /* ground of a teal-tinted panel */
  --teal-tint-2:#0F2833;  /* avatar tile */
  --teal-edge:  #1D4A5E;  /* card border on hover */
  --blue:       #007FA8;

  /* --- Market direction -----------------------------------------------
     Up is the brand teal, so a rising market and the accent agree. */
  --up:      #22D3A6;
  --down:    #F0604D;

  /* --- Type -----------------------------------------------------------
     No serif in this design: headings are the sans at 600 with tight
     negative tracking. `--serif` is kept as a name so the component layer
     below does not have to change, and points at the same stack. */
  --sans:  Sora, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Sora, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Metrics -------------------------------------------------------- */
  --wrap:     1320px;
  --gutter:   28px;
  --header-h: 66px;
  --ticker-h: 40px;
  --chrome-h: 106px;  /* header + ticker */

  /* The design is uniformly round-cornered — the inverse of the sibling
     sites, so these are real values rather than the 0 they carried there. */
  --radius:    3px;   /* cards and panels */
  --radius-sm: 3px;   /* inputs, small tiles */
  --radius-lg: 3px;   /* the two form cards */
  --radius-btn:3px;   /* buttons */
}

/* --------------------------------------------------------------------------
   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-dark {
  --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);
  --fg-faint:   var(--k-muted-4);
  --fg-faintest:var(--k-muted-5);
  --rule:       var(--k-line);
  --rule-soft:  var(--k-line-2);
  --rule-input: var(--k-line-3);
  --accent:     var(--teal);
  --accent-hi:  var(--teal-hi);
  --accent-line:var(--teal-line);
  --dir-up:     var(--up);
  --dir-down:   var(--down);

  --btn-bg:       var(--teal);
  --btn-fg:       var(--teal-deep);
  --btn-bg-hover: var(--teal-hi);
  --btn-fg-hover: var(--teal-deep);
}

/* The alternate ground. Everything but the ground itself is inherited from
   the base context — the two differ by one step of lightness, which is the
   whole point: it separates sections without introducing a second polarity.

   `.ctx-cream` and `.form-card` / `.login__form` keep their names from the
   sibling sites so the component layer and the page templates did not have to
   be rewritten, but here they are dark like everything else. */
.ctx-cream,
.section--light,
.section--sand,
.form-card,
.login__form {
  --ground:     var(--k-bg-alt);
  --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);
  --fg-faint:   var(--k-muted-4);
  --fg-faintest:var(--k-muted-5);
  --rule:       var(--k-line);
  --rule-soft:  var(--k-line-2);
  --rule-input: var(--k-line-3);
  --accent:     var(--teal);
  --accent-hi:  var(--teal-hi);
  --accent-line:var(--teal-line);
  --dir-up:     var(--up);
  --dir-down:   var(--down);

  --btn-bg:       var(--teal);
  --btn-fg:       var(--teal-deep);
  --btn-bg-hover: var(--teal-hi);
  --btn-fg-hover: var(--teal-deep);
}

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

/* Sand and light are the same ground in this design. Kept as a separate rule
   so the distinction survives if a third ground is ever wanted. */
.ctx-sand,
.section--sand {
  --ground: var(--k-bg-alt);
  --cell:   var(--k-cell);
  --rule:   var(--k-line);
}
/* --------------------------------------------------------------------------
   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 cream names (`--c-*`) now resolve to dark values, because this design
   has no light ground: anywhere a component asked for "the cream ground" it
   now gets the alternate dark one, and anywhere it asked for "text on cream"
   it gets light text. That is the correct translation, not a stopgap.
   -------------------------------------------------------------------------- */

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

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

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

  --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(--d-bg);
  color: var(--d-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: 600; }
p { text-wrap: pretty; }

::selection { background: var(--gold); color: var(--d-bg); }

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

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

.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(--d-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(--d-line); }

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

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.kicker--quiet { color: var(--fg-faintest); }

/* The hero states the category, so the design gives it a bordered pill with a
   live dot rather than the bare mono line the section kickers use. The dot is
   decorative and carries no text, so it is a pseudo-element. */
.kicker--badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--teal-line);
  background: var(--teal-tint);
  padding: 7px 13px;
  border-radius: 3px;
  letter-spacing: 0.12em;
  margin-bottom: 30px;
}
.kicker--badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--teal);
  flex: none;
  animation: bxpulse 2s ease-in-out infinite;
}
@keyframes bxpulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

/* --------------------------------------------------------------------------
   Ambient glow

   A single soft radial behind the hero and the closing panel. Purely
   decorative: it is a pseudo-element on the section, sits behind everything
   at z-index 0, and takes pointer-events: none so it can never intercept a
   click on the form it sits behind.
   -------------------------------------------------------------------------- */

.section--glow { position: relative; overflow: hidden; }
.section--glow > * { position: relative; z-index: 1; }
.section--glow::before {
  content: "";
  position: absolute;
  top: -240px;
  left: 50%;
  width: 1100px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 194, 255, 0.11),
    rgba(0, 127, 168, 0.06) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
/* The closing panel's glow rises from below and leads with the blue. */
.section--glow-bottom::before {
  top: auto;
  bottom: -300px;
  width: 1000px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 127, 168, 0.10),
    rgba(0, 194, 255, 0.05) 45%,
    transparent 70%
  );
}

.split { display: grid; gap: 68px; align-items: start; }
.split--hero    { grid-template-columns: minmax(0, 1fr) 452px; gap: 72px; }
.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--cta     { grid-template-columns: minmax(0, 1fr) 452px; gap: 72px; align-items: center; }
.split--contact { grid-template-columns: 1fr 1.1fr; gap: 84px; }

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

/* 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: 12px;
}
.grid-cells > * {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 3px;
  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: 10px; }
.stack-cells > * {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   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(38px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 600;
  margin: 0 0 26px;
  color: var(--fg-hi);
}
.h-page {
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0 0 30px;
  max-width: 16em;
  color: var(--fg-hi);
}
.h-section {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0;
  color: var(--fg-hi);
}
.h-section--sm { font-size: clamp(29px, 3.2vw, 42px); line-height: 1.03; }
.h-section--xs { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.03; }
.h-section--closing {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.h-card {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--fg);
}
.h-sub {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--fg-hi);
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  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: 16px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0 0 30px;
}
.body-copy--lg { font-size: 17px; }
.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: 12px; color: var(--fg-faint); }
.mono-note--faint { font-size: 11px; color: var(--fg-faintest); }

.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: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  padding: 14px 24px;
  border: 0;
  border-radius: 3px;
  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: 15px; }
.btn--sm { font-size: 14px; padding: 10px 18px; border-radius: 3px; }
.btn--wide { padding-left: 32px; padding-right: 32px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

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

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

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 15, 17, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--d-line);
  color: var(--d-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: a rounded teal-to-blue tile carrying the bitcoin glyph, then the
   name with the X in teal. The glyph is a ::after rather than markup so the
   templates stay free of a decorative character that a screen reader would
   otherwise announce. */
.brand { display: flex; align-items: center; gap: 11px; color: var(--k-fg); }
.brand:hover { color: var(--k-fg); }
.brand__mark {
  width: 26px; height: 26px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand__mark::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--k-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23fff'%3E%3Crect x='12.4' y='4' width='2.2' height='24' rx='1'/%3E%3Crect x='17' y='4' width='2.2' height='24' rx='1'/%3E%3Cpath d='M9 7.4h7.6a4.9 4.9 0 0 1 0 9.8H9zm3.2 2.8v4.2h4.4a2.1 2.1 0 0 0 0-4.2z'/%3E%3Cpath d='M9 14.6h8.3a5.1 5.1 0 0 1 0 10.2H9zm3.2 2.8v4.6h5.1a2.3 2.3 0 0 0 0-4.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23fff'%3E%3Crect x='12.4' y='4' width='2.2' height='24' rx='1'/%3E%3Crect x='17' y='4' width='2.2' height='24' rx='1'/%3E%3Cpath d='M9 7.4h7.6a4.9 4.9 0 0 1 0 9.8H9zm3.2 2.8v4.2h4.4a2.1 2.1 0 0 0 0-4.2z'/%3E%3Cpath d='M9 14.6h8.3a5.1 5.1 0 0 1 0 10.2H9zm3.2 2.8v4.6h5.1a2.3 2.3 0 0 0 0-4.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.brand__name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.brand__name em { font-style: normal; color: var(--teal); }

/* Nav items are pill-shaped hover targets in this design, so the gap closes
   right up and the padding does the separating. */
.nav { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.nav__link {
  font-size: 14px;
  color: var(--k-muted);
  padding: 8px 12px;
  border-radius: 3px;
}
.nav__link:hover, .nav__link[aria-current="page"] {
  color: var(--k-fg);
  background: #1B1E22;
}

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

/* --------------------------------------------------------------------------
   Ticker — site-wide, directly beneath the header
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  background: var(--k-bg-alt);
  border-bottom: 1px solid var(--k-line);
}
.ticker__track { display: flex; width: max-content; }
/* Animation starts only once JS has cloned the strip, so the -50% loop always
   lands on an identical frame. Without JS the strip simply sits still. */
.ticker__track[data-cloned="true"] { animation: ttick 44s linear infinite; }
.ticker__item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 24px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}
.ticker__sym   { color: var(--k-fg-3); font-weight: 500; }
.ticker__price { color: var(--k-muted-4); }
.ticker__chg--up   { color: var(--up); }
.ticker__chg--down { color: var(--down); }

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

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

.hero__body { padding: 92px 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 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat-card {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 20px 20px 22px;
}
.stat-card__label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
}
.stat-card__value { display: block; font-size: 17px; font-weight: 500; 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: 3px;
  overflow: hidden;
  scroll-margin-top: 94px;
}
.form-card__head {
  padding: 26px 30px 22px;
  border-bottom: 1px solid var(--rule);
}
.form-card__title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  color: var(--fg);
}
.form-card__sub { font-size: 14px; color: var(--k-muted-3); margin: 0; }
.form-card__body { padding: 26px 30px 30px; }

.field { margin-bottom: 16px; }
.field--last { margin-bottom: 24px; }

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

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--rule-input);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--fg);
  padding: 12px 13px;
  outline: none;
  transition: border-color 120ms ease;
}
.field__textarea { resize: vertical; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--teal); }
.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: 12px;
  margin-bottom: 14px;
}
.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: 12px; line-height: 1.55; color: var(--fg-faint); margin: 16px 0 0; }
.form-note a { text-decoration: underline; text-underline-offset: 2px; }

.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: 3px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--teal-hi);
}
.form-status[data-state="error"] {
  display: block;
  background: #1E100D;
  border: 1px solid #4A211A;
  border-radius: 3px;
  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: 3px;
  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(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.market-row__pair { display: flex; align-items: baseline; gap: 12px; }
.market-row__sym  { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.market-row__name { font-size: 13px; color: var(--fg-faint); }
.market-row__num { text-align: right; font-family: var(--mono); font-size: 14px; }
.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: 13px;
  color: var(--k-muted-2);
  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-family: var(--mono);
  font-size: 10px;
  color: var(--fg-faintest);
  margin: 0;
}

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

.benefit { padding: 28px 26px 32px; }
.benefit__no { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-bottom: 18px; }
.benefit__body { font-size: 15px; line-height: 1.62; color: var(--k-muted-2); 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: 3px; }
.step__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.step__title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--fg);
}
.step__body { font-size: 15px; line-height: 1.62; color: var(--k-muted-2); 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: 24px 26px 26px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: start;
}
.step--tight .step__no {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
  padding-top: 4px;
}
.step--tight .step__title { font-size: 19px; margin-bottom: 8px; }

/* One asset per full-width row: symbol, profile, then the prose. Three
   columns rather than a card grid, because each description is a sentence or
   two and a 3-up grid would leave most of every card empty. */
.asset {
  display: grid;
  grid-template-columns: 200px 180px minmax(0, 1fr);
  gap: 28px;
  padding: 24px 26px;
  align-items: baseline;
}
.asset__head { display: flex; align-items: baseline; gap: 11px; margin: 0; }
.asset__sym {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.asset__name { font-size: 14px; color: var(--fg-faint); }
.asset__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}
.asset__body { font-size: 15px; line-height: 1.62; color: var(--k-muted-2); margin: 0; max-width: 46em; }

.banner-cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 28px 32px;
}
.banner-cta__text {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--fg);
}
.banner-cta .btn { padding: 14px 28px; white-space: nowrap; }

.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: 3px;
  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: 3px;
  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: 3px;
  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: 3px;
  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(--k-muted-3); 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: 3px;
  padding: 60px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faintest);
}

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

/* The sticky header and the ticker strip beneath it both sit above this
   split, so the viewport allowance has to cover the pair. */
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--chrome-h)); }
.login__form {
  background: var(--c-bg);
  color: var(--c-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 68px var(--gutter);
}
.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: 68px 60px;
  border-left: 1px solid var(--d-line);
}
.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;
  gap: 13px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--d-muted-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   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: 3px;
  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
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--k-line); color: var(--k-muted-2); background: var(--k-bg-alt); }
.footer__cols {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  color: var(--k-fg);
}
.footer__brand:hover { color: var(--k-fg); }
.footer__mark {
  width: 22px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.footer__mark::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--k-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23fff'%3E%3Crect x='12.4' y='4' width='2.2' height='24' rx='1'/%3E%3Crect x='17' y='4' width='2.2' height='24' rx='1'/%3E%3Cpath d='M9 7.4h7.6a4.9 4.9 0 0 1 0 9.8H9zm3.2 2.8v4.2h4.4a2.1 2.1 0 0 0 0-4.2z'/%3E%3Cpath d='M9 14.6h8.3a5.1 5.1 0 0 1 0 10.2H9zm3.2 2.8v4.6h5.1a2.3 2.3 0 0 0 0-4.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23fff'%3E%3Crect x='12.4' y='4' width='2.2' height='24' rx='1'/%3E%3Crect x='17' y='4' width='2.2' height='24' rx='1'/%3E%3Cpath d='M9 7.4h7.6a4.9 4.9 0 0 1 0 9.8H9zm3.2 2.8v4.2h4.4a2.1 2.1 0 0 0 0-4.2z'/%3E%3Cpath d='M9 14.6h8.3a5.1 5.1 0 0 1 0 10.2H9zm3.2 2.8v4.6h5.1a2.3 2.3 0 0 0 0-4.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.footer__name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--k-fg);
}
.footer__name em { font-style: normal; color: var(--teal); }
.footer__blurb { font-size: 14px; line-height: 1.65; margin: 0; max-width: 26em; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__heading {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted-3);
  margin-bottom: 3px;
}
.footer__col a { font-size: 14px; color: var(--d-muted); }
.footer__col a:hover { color: var(--d-fg); }
.footer__legal { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 48px; }
.footer__disclaimer {
  font-size: 12px;
  line-height: 1.65;
  color: var(--d-muted-3);
  margin: 0 0 20px;
  border-top: 1px solid var(--d-line);
  padding-top: 26px;
}
.footer__copy { font-family: var(--mono); font-size: 11px; color: var(--d-muted-4); }

/* --------------------------------------------------------------------------
   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--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--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)); }
  /* The asset rows lose their fixed symbol/profile columns and stack. */
  .asset { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .asset__tag { order: 3; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .login { grid-template-columns: 1fr; min-height: 0; }
  .login__aside { padding: 56px var(--gutter); border-left: 0; border-top: 1px solid var(--k-line); }
}

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

  .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: 3px;
    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; }
  .ticker__track, .marquee__track { animation: none; }
  .kicker--badge::before { animation: none; }
  .marquee { overflow-x: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .header, .footer, .ticker, .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,
.prose-list a,
.body-copy a,
.step__body a,
.value p a,
.form-note a,
.banner-cta__text 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,
.banner-cta__text a:hover { color: var(--accent-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(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted-3);
}
.lang-links__list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.lang-links__link {
  font-size: 14px;
  color: var(--d-muted);
  /* 44px minimum touch target, extended without visual bulk. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 3px;
}
.lang-links__link:hover { color: var(--d-fg); background: var(--d-panel); }
.lang-links__link--current {
  color: var(--d-fg);
  background: var(--d-panel);
  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; }
  .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(0, 0, 0, 0.45);
}
.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: 3px;
  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 */
}
.consent__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.consent__text a:hover { color: var(--gold-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(--gold); border-color: var(--gold); }

@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: 13px;
  line-height: 1.55;
  color: var(--d-muted);
  border-top: 1px solid var(--d-line);
  padding-top: 24px;
  margin-bottom: 18px;
}
.company__name { font-weight: 500; color: var(--d-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; }
  .nav__link:active,
  .footer__col a:active,
  .lang-links__link:active { color: var(--d-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. */
@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; }
}