/* ==========================================================================
   Bitcoin Ultra X — site styles
   Ported from the Claude Design canvas (.design-src/Bitcoin Ultra X.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 (#0A0B0D) and a very slightly
   lifted alternate (#0D0F12), with cards raised above both (#101317). 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.
   ========================================================================== */

:root {
  /* --- Raw palette: grounds ------------------------------------------- */
  --k-bg:       #0A0B0D;  /* page base */
  --k-bg-alt:   #0D0F12;  /* alternate section ground, and the ticker strip */
  --k-cell:     #101317;  /* raised card on either ground */
  --k-input:    #0A0B0D;  /* input well — reads as recessed against a card */

  --k-line:     #1A1D22;  /* card and section rules */
  --k-line-2:   #16191D;  /* interior rules inside a card (market rows) */
  --k-line-3:   #262B32;  /* input borders — must read against --k-cell */
  --k-line-4:   #1E2228;  /* form-card border, a touch lighter than --k-line */

  /* --- Raw palette: foreground ---------------------------------------- */
  --k-fg:       #F2F4F6;
  --k-fg-2:     #E4E8EC;
  --k-fg-3:     #C6CCD4;
  --k-muted:    #9BA3AD;
  --k-muted-2:  #8A929C;
  --k-muted-3:  #7C848E;
  --k-muted-4:  #6B737D;
  --k-muted-5:  #5A616A;
  --k-muted-6:  #4A5058;

  /* --- Brand ----------------------------------------------------------
     Teal is the accent; blue only ever appears in the two brand gradients
     (the logo tile and the ambient hero glow), never as a text colour. */
  --teal:       #19E3B1;
  --teal-hi:    #5FF2CD;
  --teal-deep:  #06231C;  /* text on a teal button — 12.9:1 against --teal */
  --teal-line:  #1E3B36;  /* border of a teal-tinted panel */
  --teal-tint:  #0E1B18;  /* ground of a teal-tinted panel */
  --teal-tint-2:#14211E;  /* avatar tile */
  --teal-edge:  #2A3F3A;  /* card border on hover */
  --blue:       #2C7DF0;

  /* --- Market direction -----------------------------------------------
     Up is the brand teal, so a rising market and the accent agree. */
  --up:      #19E3B1;
  --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:  "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains 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:    16px;  /* cards and panels */
  --radius-sm: 10px;  /* inputs, small tiles */
  --radius-lg: 20px;  /* the two form cards */
  --radius-btn:12px;  /* 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: 999px;
  letter-spacing: 0.12em;
  margin-bottom: 30px;
}
.kicker--badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  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(25, 227, 177, 0.11),
    rgba(44, 125, 240, 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(44, 125, 240, 0.10),
    rgba(25, 227, 177, 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: 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: 10px; }
.stack-cells > * {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 14px;
}

/* --------------------------------------------------------------------------
   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: 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: 15px; }
.btn--sm { font-size: 14px; padding: 10px 18px; border-radius: var(--radius-sm); }
.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(10, 11, 13, 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: 8px;
  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: 8px;
}
.nav__link:hover, .nav__link[aria-current="page"] {
  color: var(--k-fg);
  background: #15181C;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--d-line-3);
  border-radius: var(--radius-sm);
  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: 14px;
  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: var(--radius-lg);
  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: var(--radius-sm);
  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: var(--radius-sm);
  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: var(--radius-sm);
  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: 18px;
  overflow: hidden;
}
.market-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr)
    minmax(0, 1fr) minmax(0, 1.2fr);
  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. */
.market-row__tag { text-align: right; font-size: 13px; color: var(--k-muted-2); }
.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: 18px; }
.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: var(--radius);
  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: 18px;
  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: 10px;
  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: 14px;
  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-lg);
  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: var(--radius);
  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: var(--radius);
  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: 7px;
  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: 0;
    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: var(--radius-sm);
}
.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: var(--radius-sm);
  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; }