/* ==========================================================================
   ZEROA DRAFT — COMPONENTS
   ========================================================================== */

/* --- NAV ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule-on-light);
}
.nav__inner {
  display: flex; align-items: center; gap: 40px;
  height: var(--nav-h);
}
/* The real Zeroa wordmark, extracted from the brand plate. Shipped as two
   tinted WebPs rather than one CSS mask: mask-image is fetched cross-origin
   and is blocked on file://, which would leave the logo invisible in the
   delivered folder — the same trap as the font preload. Two instances per
   page, nav and footer, which is what §4.9 now checks for. */
.wordmark { display: block; width: 150px; flex: none; line-height: 0; }
.wordmark img { display: block; width: 100%; height: auto; }
.wordmark--footer { width: 172px; }


/* margin-left:auto belongs on the flex ITEM. It was on the <ul> inside <nav>,
   which is not a child of .nav__inner, so it did nothing and the CTA stopped
   short of the content edge. The nav element carries it instead. */
.nav > nav, .nav__inner > nav { margin-right: auto; }
.nav__links { display: flex; gap: 34px; list-style: none; padding: 0; margin: 0; }
.nav__links a {
  font-size: var(--t-16); font-weight: 500;
  color: var(--ink-700); text-decoration: none;
  position: relative; padding: 6px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-fill); transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav__links a::after { transition: none; } }
.nav__links a:hover { color: var(--accent-on-light); }
.nav__links a[aria-current="page"] { color: var(--accent-on-light); }
.nav__cta { display: flex; gap: 14px; align-items: center; margin-left: auto; }
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
}
/* The taller bar and larger buttons do not fit a 390px viewport alongside a
   150px wordmark — everything steps down together rather than wrapping. */
/* The taller bar and larger buttons do not fit a 390px viewport alongside a
   150px wordmark, and a wrapping CTA label breaks the bar height. Everything
   steps down together and the Login ghost drops its chrome to buy the width. */
@media (max-width: 640px) {
  .nav__inner { gap: 12px; height: 68px; }
  .nav__cta { gap: 10px; }
  .nav__cta .btn--sm { padding: 9px 14px; font-size: var(--t-14); }
  .nav__cta .btn--ghost {
    border-color: transparent; padding-left: 4px; padding-right: 4px;
  }
  .wordmark { width: 104px; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .nav__inner { gap: 10px; }
  .nav__cta .btn--sm { padding: 8px 12px; font-size: var(--t-13); }
  .wordmark { width: 92px; }
  /* The nav CTA sheds its tail below 380px. It is visually hidden rather than
     display:none, so the accessible name stays "Open an account" while the
     visible label reads "Open" — which WCAG 2.5.3 allows, because the visible
     text is contained in the accessible name. An aria-label override here
     would instead detach the name from the text and fail the same rule. */
  .nav-cta-tail {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* --- BUTTONS ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: var(--t-16); font-weight: 500;
  padding: 16px 30px; border-radius: 7px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn--sm { padding: 11px 20px; font-size: var(--t-16); border-radius: 6px; }
.btn--primary { background: var(--accent-fill); color: var(--paper); }
.btn--primary:hover { background: var(--teal-700); }
.btn--ghost { border-color: var(--ink-100); color: var(--ink-700); background: transparent; }
.btn--ghost:hover { border-color: var(--accent-fill); color: var(--accent-on-light); }
.band-proof .btn--ghost { border-color: var(--rule-on-dark); color: var(--paper); }
.band-proof .btn--ghost:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* --- HERO --------------------------------------------------------------- */
/* The corridor map sits BESIDE the copy, never behind it. §1.2 of the review
   indicts the current site for text over busy imagery; a scrim is not the fix. */
.hero {
  padding: clamp(44px, 4.5vw, 76px) 0 clamp(52px, 5vw, 84px);
  background: var(--paper-2);
  display: flex; align-items: center;
}
.hero > .wrap { width: 100%; }
.hero__grid { align-items: center; row-gap: 48px; }
.hero__copy { grid-column: span 12; }
.hero__map  { grid-column: span 12; }
@media (min-width: 1024px) {
  .hero__copy { grid-column: span 6; }
  .hero__map  { grid-column: 7 / span 6; }
}
@media (min-width: 1440px) {
  .hero__copy { grid-column: span 6; }
  .hero__map  { grid-column: 7 / span 6; }
}

/* Sourced figures, in mono, closing the hero. Every value is published on the
   live site — see README. Nothing here is illustrative. */
.hero__stats {
  grid-column: span 12;
  margin-top: clamp(48px, 5vw, 88px);
  padding-top: clamp(28px, 2.6vw, 40px);
  border-top: 1px solid var(--rule-on-light);
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }
.hero__stat { display: flex; flex-direction: column; gap: 8px; }
.hero__stat b {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.5625rem, 2.6vw, var(--t-39));
  letter-spacing: -0.02em; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.hero__stat span {
  font-family: var(--mono); font-size: var(--t-13);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--label-on-light);
}
.hero h1 { margin-bottom: 26px; }
.hero .lede { margin-bottom: 38px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__note {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule-on-light);
  font-family: var(--mono); font-size: var(--t-14);
  letter-spacing: 0.06em; color: var(--label-on-light);
  display: inline-block;
}

/* --- CORRIDOR MAP -------------------------------------------------------
   Light treatment: no panel, sitting directly on the cream band. On a dark
   ground fibre reads as emitted light; on light it has to read as *ink* —
   a fine pale base line with a saturated dark dash chased along it. Same
   mechanism, inverted values.

   Every link drawn is a route the published copy describes: the ten hub pairs
   (money moves BETWEEN all five countries, not only out of South Africa) plus
   domestic second-city legs.

   The unlit countries are labelled "Launching soon" at the client's request.
   That is a forward-looking claim about ~35 countries and nothing on the live
   site supports it — see the open questions in README.md. It needs Zeroa's
   confirmation, or a softer word, before this goes anywhere public.
   ------------------------------------------------------------------------ */
.map { width: 100%; height: auto; display: block; overflow: visible; }
.hero__map .map { max-height: min(58vh, 600px); }

.map .map-bg { fill: none; }
/* The graticule was a dark-panel device. With no panel it just draws stray
   rules across the cream. */
.map .grid { display: none; }

.map .land { fill: #E7E2D6; stroke: #D4CCBB; stroke-width: .8; }
.map .land--live { fill: var(--teal-100); stroke: var(--teal-600); stroke-width: 1.1; }

.map .fibre { fill: none; stroke-linecap: round; }
.map .fibre--cross { stroke: #6FB4B3; stroke-width: 1.4; opacity: .95; }
.map .fibre--dom   { stroke: #A9C3C3; stroke-width: 1; opacity: .8; stroke-dasharray: 2 4; }

/* The travelling light, inverted: a saturated dark dash on a pale line. No
   blur — glow is invisible on cream and only muddies the linework. */
.map .pulse {
  fill: none; stroke: var(--teal-700); stroke-width: 2.1; stroke-linecap: round;
  opacity: 0;
}
.js-motion .map .pulse { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js-motion .map .pulse { opacity: 0; } }

.map .node { fill: var(--teal-700); }
.map .node--hub { fill: var(--teal-600); stroke: var(--paper-2); stroke-width: 2; }
.map .node-ring { fill: none; stroke: var(--teal-600); stroke-width: 1.2; opacity: .5; }
.map .node-glow { display: none; }          /* glow is a dark-ground device */

.map .label {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.13em;
  fill: var(--ink-500); text-transform: uppercase;
}

.map-legend {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px;
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.05em;
  color: var(--label-on-light);
}
.map-legend span { display: inline-flex; align-items: center; gap: 9px; }
.map-legend i { width: 22px; height: 0; border-top: 2px solid; display: inline-block; }
.map-legend .k-live { color: var(--teal-700); }
.map-legend .k-dom  { color: #7FA3A3; border-top-style: dashed; }
.map-legend .k-ctx  { width: 12px; height: 12px; border: 1px solid #D4CCBB;
                      background: #E7E2D6; border-radius: 2px; }

/* --- SECTION HEAD ------------------------------------------------------- */
.sec-head { grid-column: span 12; margin-bottom: clamp(40px, 4vw, 72px); }
@media (min-width: 768px)  { .sec-head { grid-column: span 9; } }
@media (min-width: 1280px) { .sec-head { grid-column: span 8; } }
.sec-head h2 { margin-bottom: 22px; }
.sec-head .eyebrow { margin-bottom: 24px; }

/* --- TICKER ------------------------------------------------------------- */
.ticker {
  border-top: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
  padding: 14px 0;
  margin-bottom: 40px;
}
.ticker__head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.ticker__flag {
  display: inline-block;
  font-family: var(--mono); font-size: var(--t-13); font-weight: 500;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--warn);
  border: 1px solid var(--warn); border-radius: 3px; padding: 3px 8px;
}
.band-proof .ticker__flag { color: var(--warn-400); border-color: var(--warn-400); }
.ticker__pause {
  background: transparent; border: 1px solid var(--rule-on-dark); color: var(--body-on-dark);
  border-radius: 4px; padding: 4px 12px; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.06em;
}
.ticker__pause:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.ticker__viewport { overflow: hidden; }
.ticker__rail { display: flex; gap: 40px; white-space: nowrap; will-change: transform; }
.ticker__item {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: var(--t-14);
}
.ticker__pair { color: var(--label-on-dark); letter-spacing: 0.06em; }
.ticker__rate { color: var(--paper); font-variant-numeric: tabular-nums; }
.ticker__chg--up   { color: var(--up-400); }
.ticker__chg--down { color: var(--down-400); }

/* --- DATA TABLE ---------------------------------------------------------
   Light surface is the default; .band-proof re-pairs every colour. Colours are
   never written inline — the band owns the pairing. */
.dt-wrap { grid-column: span 12; overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; min-width: 640px; }
.dt caption { text-align: left; margin-bottom: 14px; font-size: var(--t-14); color: var(--body-on-light); max-width: 72ch; }
.dt th, .dt td { text-align: left; padding: clamp(16px, 1.5vw, 24px) 24px clamp(16px, 1.5vw, 24px) 0; vertical-align: top; }
.dt thead th {
  font-family: var(--mono); font-size: var(--t-13); font-weight: 500;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--label-on-light);
  border-bottom: 1px solid var(--rule-on-light);
  padding-bottom: 12px;
}
.dt tbody tr { border-bottom: 1px solid var(--rule-on-light); }
.dt tbody th { font-family: var(--display); font-weight: 600; font-size: var(--t-25); color: var(--ink-700); }
.dt__country { display: inline-flex; align-items: center; gap: 14px; }
.dt__flag {
  width: 33px; height: 22px; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.band-story .dt__flag { box-shadow: 0 0 0 1px rgba(11,26,30,.14); }
.dt td { color: var(--body-on-light); font-size: var(--t-16); }
.dt .code { font-family: var(--mono); color: var(--accent-on-light); letter-spacing: 0.08em; }
.dt .tbc { font-family: var(--mono); color: var(--warn); font-size: var(--t-13); letter-spacing: 0.04em; }
.dt .num { text-align: left; font-variant-numeric: tabular-nums; }
.dt .methods { display: flex; flex-wrap: wrap; gap: 6px; }
.dt .chip {
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.04em;
  border: 1px solid var(--rule-on-light); border-radius: 3px; padding: 3px 8px;
  color: var(--body-on-light);
}

.band-proof .dt caption { color: var(--body-on-dark); }
.band-proof .dt thead th { color: var(--label-on-dark); border-bottom-color: var(--rule-on-dark); }
.band-proof .dt tbody tr { border-bottom-color: var(--rule-on-dark); }
.band-proof .dt tbody th { color: var(--paper); }
.band-proof .dt td { color: var(--body-on-dark); }
.band-proof .dt .code { color: var(--accent-on-dark); }
.band-proof .dt .tbc { color: var(--warn-400); }
.band-proof .dt .chip { border-color: var(--rule-on-dark); color: var(--body-on-dark); }

/* Semantic movement, surface-paired */
.chg--up   { color: var(--up); }
.chg--down { color: var(--down); }
.band-proof .chg--up   { color: var(--up-400); }
.band-proof .chg--down { color: var(--down-400); }

/* --- PRODUCT CARDS ------------------------------------------------------ */
/* Fixed source order; the grid never reorders, at any width. */
.cards { grid-column: span 12; display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px)  { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule-on-light); border-radius: 12px;
  padding: clamp(28px, 2.4vw, 40px); background: var(--paper);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.card:hover, .card:focus-within {
  transform: translateY(-6px);
  border-color: var(--teal-600);
  box-shadow: 0 26px 56px -32px rgba(11,26,30,.5);
}
@media (prefers-reduced-motion: reduce) { .card:hover, .card:focus-within { transform: none; } }
/* Photo first, then the label as real text beneath. The current site burns
   "zeroa PERSONAL" into the image itself, which is where three of §1.1's seven
   wordmarks came from; here the photograph carries no type at all. */
.card { padding-top: 0; overflow: hidden; }
.card__media {
  /* base.css caps every img at max-width:100%, which here means the card's
     CONTENT box — the bleed would start at the left padding edge and stop
     short on the right. */
  max-width: none;
  width: calc(100% + 2 * clamp(28px, 2.4vw, 40px));
  margin: 0 calc(-1 * clamp(28px, 2.4vw, 40px)) clamp(24px, 2vw, 30px);
  aspect-ratio: 3 / 2; object-fit: cover; display: block;
  background: var(--paper-2);
}
.card .eyebrow { margin-bottom: 14px; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: var(--t-16); margin-bottom: 26px; }
.card__link { margin-top: auto; font-weight: 500; text-decoration: none; }
.card__link:hover { text-decoration: underline; }

/* Small live UI fragment inside each card */
.frag {
  border: 1px solid var(--rule-on-light); border-radius: 6px;
  background: var(--paper-2); padding: 14px; margin-bottom: 22px;
  font-family: var(--mono); font-size: var(--t-13);
}
.frag__row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.frag__k { color: var(--label-on-light); letter-spacing: 0.06em; }
.frag__v { color: var(--ink-700); font-variant-numeric: tabular-nums; }
.frag__bar { height: 4px; border-radius: 2px; background: var(--teal-100); overflow: hidden; margin-top: 8px; }
.frag__bar > i { display: block; height: 100%; background: var(--teal-600); }

/* --- TRADING UI (reconstructed in HTML/CSS, not a screenshot) ----------- */
.tui {
  border: 1px solid var(--rule-on-dark); border-radius: 12px;
  background: #0E2126; overflow: hidden;
  display: grid; grid-template-columns: 1fr;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
}
@media (min-width: 900px)  { .tui { grid-template-columns: 1.7fr 1fr; } }
@media (min-width: 1440px) { .tui { grid-template-columns: 2fr 1fr; } }
.tui__head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: clamp(14px, 1.4vw, 22px) clamp(18px, 1.8vw, 32px);
  border-bottom: 1px solid var(--rule-on-dark);
  font-family: var(--mono); font-size: var(--t-14); letter-spacing: 0.06em;
  color: var(--label-on-dark);
}
.tui__pair { color: var(--paper); font-size: var(--t-14); letter-spacing: 0.08em; }
.tui__last { color: var(--up-400); font-size: var(--t-14); }
.tui__chart { padding: clamp(18px, 1.8vw, 32px); border-bottom: 1px solid var(--rule-on-dark); }
@media (min-width: 900px) { .tui__chart { border-right: 1px solid var(--rule-on-dark); border-bottom: 0; } }
.tui__chart svg { width: 100%; height: auto; }
.tui .candle-up   { fill: var(--up-400);   stroke: var(--up-400); }
.tui .candle-down { fill: var(--down-400); stroke: var(--down-400); }
.tui .axis { stroke: var(--rule-on-dark); stroke-width: 1; }
.tui .axis-label { font-family: var(--mono); font-size: 9px; fill: var(--label-on-dark); }

.tui__book { padding: clamp(16px, 1.6vw, 28px); }
.tui__book h2, .tui__book h3 {
  font-family: var(--mono); font-size: var(--t-13); font-weight: 500;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--label-on-dark); margin-bottom: 12px;
}
.book { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--t-14); }
.book th {
  text-align: right; font-weight: 500; color: var(--label-on-dark);
  letter-spacing: 0.06em; padding-bottom: 8px; font-size: 11px; text-transform: uppercase;
}
.book th:first-child, .book td:first-child { text-align: left; }
.book td { text-align: right; padding: 3px 0; position: relative; color: var(--body-on-dark); font-variant-numeric: tabular-nums; }
.book .px-ask { color: var(--down-400); }
.book .px-bid { color: var(--up-400); }
.book .depth {
  position: absolute; right: 0; top: 1px; bottom: 1px; z-index: 0;
  border-radius: 2px; opacity: .16;
}
.book .depth--ask { background: var(--down-400); }
.book .depth--bid { background: var(--up-400); }
.book td span { position: relative; z-index: 1; }
.book .spread td {
  color: var(--label-on-dark); font-size: 11px; letter-spacing: 0.08em;
  padding: 8px 0; border-top: 1px solid var(--rule-on-dark); border-bottom: 1px solid var(--rule-on-dark);
}
.tui__balances {
  grid-column: 1 / -1; border-top: 1px solid var(--rule-on-dark);
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px);
  padding: clamp(16px, 1.6vw, 26px) clamp(18px, 1.8vw, 32px);
  font-family: var(--mono); font-size: var(--t-14);
}
.tui__bal-k { color: var(--label-on-dark); letter-spacing: 0.06em; display: block; margin-bottom: 4px; }
.tui__bal-v { color: var(--paper); font-size: var(--t-25); font-variant-numeric: tabular-nums; }

/* ScrollTrigger wraps the pinned section in .pin-spacer. The spacer inherits
   the body background, so without this the released pin leaves a white gap
   where a dark band should be. */
.pin-spacer { background: var(--ink-900); }

/* Annotations for the pinned sequence */
.proof { grid-column: span 12; }
.proof__stage { position: relative; }
.proof__notes { list-style: none; margin: clamp(32px, 3vw, 52px) 0 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 32px); }
@media (min-width: 900px) { .proof__notes { grid-template-columns: repeat(3, 1fr); } }
.proof__note {
  border-left: 2px solid var(--accent-on-dark); padding: 6px 0 6px 20px;
}
.proof__note b {
  display: block; font-family: var(--mono); font-size: var(--t-13);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--accent-on-dark); font-weight: 500; margin-bottom: 6px;
}
.proof__note span { font-size: var(--t-16); color: var(--body-on-dark); }

/* --- TRUST TILES -------------------------------------------------------- */
.tiles { grid-column: span 12; display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  border: 1px solid var(--rule-on-light); border-radius: 12px;
  padding: clamp(26px, 2.2vw, 36px); background: var(--paper);
  display: flex; flex-direction: column; min-height: 250px;
}
.tile__k {
  font-family: var(--mono); font-size: var(--t-13); font-weight: 500;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--label-on-light); margin-bottom: 18px;
}
.tile__v {
  font-family: var(--mono); font-size: clamp(1.5625rem, 2.4vw, var(--t-39)); font-weight: 500;
  color: var(--ink-900); letter-spacing: -0.02em; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.tile__d { font-size: var(--t-14); color: var(--body-on-light); margin-top: auto; }
.tile__src {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: var(--t-13); color: var(--label-on-light);
}

/* --- STEPS -------------------------------------------------------------- */
.steps { grid-column: span 12; display: grid; gap: 28px; grid-template-columns: 1fr; position: relative; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } }
.step { position: relative; padding-top: 30px; }
.step__line {
  position: absolute; top: 9px; left: 0; height: 2px; width: 100%;
  background: var(--rule-on-light); overflow: hidden;
}
.step__line > i { display: block; height: 100%; width: 100%; background: var(--teal-600); transform-origin: left center; }
.step__n {
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: var(--t-13); font-weight: 500;
  letter-spacing: var(--track-mono); color: var(--accent-on-light);
  background: var(--paper-2); padding-right: 10px;
}
.step h3 { margin: 14px 0 8px; font-size: var(--t-20); letter-spacing: -0.015em; }
.step p { font-size: var(--t-16); }

/* --- CUSTODY DIAGRAM ---------------------------------------------------- */
.diagram { grid-column: span 12; }
.diagram svg { width: 100%; height: auto; }
.diagram .box { fill: #0E2126; stroke: var(--rule-on-dark); stroke-width: 1; rx: 6; }
.diagram .box--accent { stroke: var(--teal-400); }
.diagram .flow { stroke: var(--teal-400); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }
.diagram .t {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  fill: var(--paper); text-transform: uppercase;
}
.diagram .t--dim { fill: var(--label-on-dark); text-transform: none; letter-spacing: 0; font-size: 10.5px; }

/* --- CTA + FOOTER ------------------------------------------------------- */
.cta { text-align: center; }
.cta__inner { grid-column: span 12; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.cta p { text-align: center; }

.footer { background: var(--ink-900); color: var(--body-on-dark); padding: clamp(64px, 7vw, 104px) 0 48px; }
.footer__brand { margin-bottom: 32px; }
.footer__brand p { margin-top: 16px; color: var(--body-on-dark); font-size: var(--t-16); }

.footer__flags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 40px; padding-bottom: 36px;
  border-bottom: 1px solid var(--rule-on-dark);
}
.flagchip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 8px; border-radius: 6px;
  border: 1px solid var(--rule-on-dark); text-decoration: none;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.flagchip img { width: 26px; height: 18px; border-radius: 2px; display: block; }
.flagchip span {
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.1em;
  color: var(--body-on-dark);
}
.flagchip:hover { border-color: var(--accent-on-dark); background: rgba(42,169,165,.08); }
.flagchip:hover span { color: var(--accent-on-dark); }
.footer__cols { display: grid; gap: clamp(36px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer dl { margin: 0; }
.footer dt {
  font-family: var(--mono); font-size: var(--t-13); font-weight: 500;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--label-on-dark); margin-bottom: 6px;
}
.footer dd { margin: 0 0 22px; font-size: var(--t-16); color: var(--body-on-dark); }
.footer dd a { color: var(--accent-on-dark); }
.footer__legal {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--rule-on-dark);
  font-size: var(--t-14); color: var(--body-on-dark);
}
.footer__legal p { max-width: 92ch; margin-bottom: 10px; }
.tbc-inline { font-family: var(--mono); color: var(--warn-400); font-size: 0.94em; }

/* --- DEMO BAR -----------------------------------------------------------
   Demo-only chrome, deliberately kept out of the real nav: the header below
   was aligned to the content measure and a mode switch does not belong in a
   production navigation. It sits above the nav, on the same measure, and it
   carries the payload of each mode because the comparison IS the argument.
   ------------------------------------------------------------------------ */
.demo-bar { background: var(--ink-700); color: var(--paper-2); }
.demo-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 9px; padding-bottom: 9px;   /* .wrap owns the horizontal padding */
}
.demo-bar__note {
  max-width: none;
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.05em;
  color: var(--ink-300);
}

.bw {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid #3A4B51; border-radius: 6px; overflow: hidden;
}
.bw__label {
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-300);
  display: flex; align-items: center; padding: 0 12px;
  border-right: 1px solid #3A4B51;
}
.bw a, .bw span[aria-current] {
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.06em;
  padding: 7px 14px; text-decoration: none; white-space: nowrap;
  display: flex; align-items: baseline; gap: 8px;
  color: var(--ink-300); background: transparent;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.bw a:hover { color: var(--paper); background: #22343A; }
/* Must out-specify `.bw span[aria-current]` above (0,2,1) — a bare
   `.bw [aria-current="page"]` is 0,2,0 and silently loses. */
.bw span[aria-current="page"] { color: var(--ink-900); background: var(--teal-400); }
.bw span[aria-current="page"] b { color: var(--ink-900); }
.bw span[aria-current="page"] i { color: var(--ink-900); }   /* 6.20 on --teal-400; teal-900 is 4.42 and fails */
.bw b { font-weight: 500; }
/* Secondary weight comes from a token, never from opacity. Opacity-dimmed text
   is invisible to naive contrast tooling and was failing here at 3.7:1. */
.bw i { font-style: normal; font-weight: 400; color: var(--ink-300); }
.bw a:hover i { color: var(--paper); }
@media (max-width: 720px) {
  .demo-bar__inner { justify-content: center; }
  .bw__label { display: none; }
}

/* --- VIDEO HERO (high-bandwidth mode only) ------------------------------ */
.hero--video {
  position: relative; isolation: isolate;
  background: var(--ink-900); color: var(--body-on-dark);
  min-height: clamp(520px, 74vh, 860px);
}
.hero--video video, .hero--video .hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* A real scrim, not a wish — but no darker than it has to be. The floor is set
   by arithmetic, not taste: against the BRIGHTEST POSSIBLE frame (solid white),
   white text needs 0.588 alpha to clear 4.5:1 over --ink-900 and --paper-2
   needs 0.629. The copy side runs 0.66, which passes both with margin on any
   frame the video can produce; it then falls away to 0.12 so the footage is
   actually visible on the right, where no text sits.

   The dim neutrals are what used to force 0.94 here: --ink-300 would have
   needed 0.868 alpha and --ink-200 0.791. Lightening the text is what buys the
   lighter scrim — the video reads through roughly three times more of the
   frame at the same AA guarantee. */
.hero--video::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(11,26,30,.74) 0%,
    rgba(11,26,30,.66) 42%,
    rgba(11,26,30,.34) 68%,
    rgba(11,26,30,.12) 100%);
}
/* Below 1024 the copy spans the full width, so the scrim has to hold its floor
   everywhere rather than clearing the right-hand side. */
@media (max-width: 1023px) {
  .hero--video::after {
    background: linear-gradient(180deg,
      rgba(11,26,30,.72) 0%, rgba(11,26,30,.68) 55%, rgba(11,26,30,.74) 100%);
  }
}

/* Lift the footage a little; it was graded for a much darker overlay. */
.hero--video video, .hero--video .hero__poster { filter: brightness(1.1) saturate(1.06); }

.hero--video h1, .hero--video .hero__stat b { color: var(--paper); }
/* Every text colour in this hero is white or near-white. Nothing dim sits over
   the video — that is the trade that lets the scrim come up. */
.hero--video .lede { color: var(--paper); }
.hero--video .eyebrow, .hero--video .hero__note,
.hero--video .hero__stat span { color: var(--paper-2); }
.hero--video .hero__note, .hero--video .hero__stats { border-top-color: rgba(255,255,255,.28); }
.hero--video .btn--ghost { border-color: rgba(255,255,255,.45); color: var(--paper); }
.hero--video .btn--ghost:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }

.hero__vidctl {
  position: absolute; right: var(--gutter); bottom: 20px; z-index: 2;
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.06em;
  background: rgba(11,26,30,.8); color: var(--paper);
  border: 1px solid #3A4B51; border-radius: 5px; padding: 7px 14px; cursor: pointer;
}
.hero__vidctl:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }

.weight-note {
  grid-column: span 12; margin-top: 28px;
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.05em;
  color: var(--warn-400);
  border-left: 2px solid var(--warn-400); padding: 6px 0 6px 16px;
}