/* ═══════════════════════════════════════════════════════════════════════════
   AXIS DECK SYSTEM  ·  the shared layer behind /whitelabel and /holders
   ───────────────────────────────────────────────────────────────────────────
   WHY THIS FILE EXISTS. Three separate defects all had the same cause — every
   page-level rule lived inside one <style> block per page, so nothing was
   shared and nothing could be enforced:

     1. DESKTOP OVERSIZING. Founder, repeatedly: "everything becomes super
        oversized and way too large… you're doing it for mobile but not for
        desktop." Mobile-first clamps that never cap keep growing to 1440px.
        Measured before this file: 8 blocks of body copy running to 132ch on
        /whitelabel and 5 on /holders. The fix is not per-section patches; it
        is a CONSTRAINT LAYER (see THE MEASURE CAP below) that every text
        element on both decks inherits, so a new section cannot forget it.

     2. THE WALLET WIDGET WAS COPIED, NOT SHARED. `.pw` markup was pasted into
        whitelabel.html but its stylesheet only ever existed in index.html, so
        the widget rendered as raw unstyled markup — "Wallet$23,304.00" with no
        gap, actions in a column. Founder called this widget out as the pattern
        he wants MORE of. It now lives here, once.

     3. THE TWO DECKS DRIFTED. Founder: "they need to be the same style and the
        same concept on both." Two <style> blocks cannot stay the same.

   TRAPS THIS FILE IS WRITTEN AROUND (see §10 of AXIS-1000X-BRIEF.md):
     · --line and --paper are referenced across the site and defined in NO
       stylesheet. An unresolvable var() with no fallback invalidates the whole
       declaration, so "border-top:1px solid var(--line)" computed to "none 0px"
       and every divider rendered as nothing. Defined here.
     · axis-tokens.css defaults --ff-display to --ff-sans. A page that does not
       set it silently loses every condensed headline. Set here.
     · Comment delimiters are balanced deliberately. A stray close-comment
       inside a comment kills every rule after it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --line:   rgba(255,255,255,.11);
  --line-2: rgba(255,255,255,.20);
  --line-3: rgba(255,255,255,.30);
  --paper:  var(--ink,#fff);
  --nav-h:  60px;

  /* The display face index.html sets, so every deck headline matches it. */
  --ff-display:'Bebas Neue',Impact,'Haettenschweiler','Arial Narrow',sans-serif;

  /* ── THE CONSTRAINT LAYER ──────────────────────────────────────────────
     Every number a desktop layout is allowed to grow to, in one place.
     --col     the content column: content stops here, the PAGE does not.
     --read    prose measure. 68ch is the readable band; 132ch was the bug.
     --lede    short intro copy, deliberately narrower than body.
     --card-w  the widest a single card/tile is allowed to get.
     Components below size against these, never against the viewport. */
  --col:      1200px;
  --col-tight: 940px;
  --read:     66ch;
  --lede:     48ch;
  --card-w:   380px;
  --phone-w:  290px;
  --shot-w:   340px;
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:#000;color:var(--paper);font-family:var(--ff-sans);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}

/* Anything an in-page link targets must clear the sticky header, or the
   heading you asked for arrives underneath it. */
[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}


/* ══ HEADER ═══════════════════════════════════════════════════════════════
   A real site header rather than the product's app rail: who this is, which
   of the two decks you are on, and the one thing we want you to do. */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);display:flex;
  align-items:center;padding-inline:var(--gutter);
  background:rgba(0,0,0,.74);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav__in{width:100%;max-width:var(--col);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(10px,2.4vw,30px)}
.nav__mark{font:800 17px/1 var(--ff-sans);letter-spacing:.24em;color:var(--paper);
  text-decoration:none;white-space:nowrap}
.nav__mid{display:flex;align-items:center;gap:clamp(10px,2vw,22px);margin-inline:auto}
.nav a.lnk{display:inline-flex;align-items:center;min-height:var(--tap,44px);
  font:600 14px/1 var(--ff-sans);color:var(--ink-3,rgba(255,255,255,.6));
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.nav a.lnk:hover{color:var(--paper)}
.nav a.lnk[aria-current="page"]{color:var(--paper);border-bottom-color:var(--accent)}
.nav__cta{display:inline-flex;align-items:center;gap:7px;min-height:38px;
  padding:0 16px;border-radius:8px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--accent);
  font:700 14px/1 var(--ff-sans);text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),
             background-color .2s ease,border-color .2s ease}
.nav__cta:hover{transform:translateY(-1px);
  background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent)}
@media(max-width:760px){
  .nav .hide-s{display:none !important}
  .nav__in{gap:8px}
  .nav__mid{margin-inline:auto 0;gap:14px}
  .nav__mark{font-size:14px;letter-spacing:.14em}
  .nav a.lnk{font-size:13px}
  .nav__cta{padding:0 12px;font-size:13px;margin-left:10px}
}
@media(max-width:400px){
  .nav__mark{display:none}
  .nav__mid{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.nav__cta{transition:none}}


/* ══ THE PAGE GRID ════════════════════════════════════════════════════════
   One wrap, one rhythm. A chapter is a real visual break — the founder's
   "separate these into separate sections because they're on top of each
   other" is a spacing and divider problem, so both are solved here and not
   re-decided per section. */
.wrap{width:100%;max-width:var(--col);margin-inline:auto;
  padding-inline:var(--gutter)}
.wrap--tight{max-width:var(--col-tight)}

.sec{position:relative;padding-block:clamp(56px,6vw,104px)}
.sec--tight{padding-block:clamp(40px,4vw,72px)}
.sec--line{border-top:1px solid var(--line)}
.sec--lift{background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 70%)}


/* ── THE CHAPTER RULE ────────────────────────────────────────────────────
   Three chapters carry this deck: what we build you, what it pays you, why
   you would do it. A chapter opens with a full-width hairline and a marker,
   so a reader can see where one argument ends and the next begins without
   reading a word. This is the direct answer to "they're on top of each
   other". */
.chap{border-top:1px solid var(--line-2);
  padding-block:clamp(64px,6.8vw,120px) clamp(56px,6vw,104px);
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.05),transparent 62%)}
.chap__mark{display:flex;align-items:center;gap:14px;margin:0 0 clamp(20px,2.4vw,34px)}
.chap__mark span{flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  font:800 13px/1 var(--ff-sans);color:var(--accent)}
.chap__mark b{font:700 12px/1 var(--ff-sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.55))}
.chap__mark i{flex:1;height:1px;background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent) 42%,transparent),var(--line) 46%,transparent)}


/* ══ TYPE ═════════════════════════════════════════════════════════════════
   Capped at the top of every clamp. These upper bounds ARE the desktop fix —
   a heading tuned to fill 393px must not keep filling 1440px. */
.eyebrow{margin:0 0 12px;font:600 12px/1 var(--ff-sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.5))}
.eyebrow b{font-weight:700;font-style:normal;color:var(--accent)}

.h1{margin:0 0 18px;font:400 clamp(40px,5vw,66px)/.96 var(--ff-display);
  letter-spacing:.005em;text-transform:uppercase;color:var(--paper);
  max-width:14ch;text-wrap:balance}
.h1 em{font-style:normal;color:var(--accent);display:block}

.h2{margin:0;font:800 clamp(26px,3.4vw,42px)/1.1 var(--ff-sans);
  letter-spacing:-.028em;color:var(--paper);max-width:20ch;text-wrap:balance}
.h2 em{font-style:normal;color:var(--accent);display:block}
.h2--inline em{display:inline}

.h3{margin:0;font:700 clamp(17px,1.5vw,21px)/1.25 var(--ff-sans);
  letter-spacing:-.015em;color:var(--paper)}

.sub{margin:14px 0 0;font:400 clamp(15.5px,1.15vw,17.5px)/1.55 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.72));max-width:var(--lede)}
.sub b{color:var(--paper);font-weight:650}
.sub em{font-style:normal;color:var(--accent);font-weight:650}

.note{margin:14px 0 0;font:400 13.5px/1.5 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.46));max-width:56ch}


/* ── THE MEASURE CAP ─────────────────────────────────────────────────────
   THE SINGLE MOST IMPORTANT RULE IN THIS FILE.
   Every piece of prose on a deck is capped, including <li>, which the site's
   own gate showed running to 132ch because only <p> was ever capped. Written
   as a floor-level default so a section added later inherits it by existing
   rather than by remembering. Anything that genuinely wants to be wider —
   a heading, a row of tiles — opts out explicitly with .u-wide. */
.sec p,.sec li,.chap p,.chap li{max-width:var(--read)}
.sec .u-wide,.chap .u-wide,
.sec li.u-wide,.chap li.u-wide{max-width:none}


/* ══ BUTTONS — SEE-THROUGH, ALWAYS ════════════════════════════════════════
   Founder, twice: all buttons must be see-through. A solid accent fill is
   wrong everywhere on this site, so there is no filled variant to reach for. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap,44px);padding:0 22px;border-radius:10px;border:0;
  font:700 15px/1 var(--ff-sans);text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),
             background-color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn--fill{background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--fill:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);
  border-color:var(--accent)}
.btn--ghost{background:transparent;color:var(--paper);
  border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--line-3);
  background:rgba(255,255,255,.04)}
.btn--text{color:var(--paper);background:transparent;padding-inline:2px}
.btn--text:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}


/* ══ THE SECTION HEADER LAYOUT ════════════════════════════════════════════
   Eyebrow and heading left, lede beside it, content full width below.
   `> .wrap >` is deliberate: only a section's OWN children are placed, so a
   component that renders its own grid inside keeps its internal layout. */
@media(min-width:1000px){
  .sec > .wrap,.chap > .wrap{display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(40px,4.4vw,72px);align-items:end}
  .sec > .wrap > .eyebrow,.chap > .wrap > .eyebrow{grid-column:1;grid-row:1;align-self:end}
  .sec > .wrap > .h2,.chap > .wrap > .h2{grid-column:1;grid-row:2;align-self:start}
  .sec > .wrap > .sub,.chap > .wrap > .sub{grid-column:2;grid-row:1/3;align-self:end;
    margin:0 0 6px;max-width:44ch}
  .sec > .wrap > *:not(.eyebrow):not(.h2):not(.sub),
  .chap > .wrap > *:not(.eyebrow):not(.h2):not(.sub){grid-column:1/-1}
  /* A SECOND .sub in a section is body copy, not the header lede. Without
     this it inherits the header placement and prints on top of the first. */
  /* ⛔ IT ALSO HAS TO UNDO align-self, AND THAT IS WHAT WAS MISSING.
     Founder, with a desktop screenshot: "Raise capital. Give away no control."
     painted straight over "Right now your money is locked inside the business".
     MEASURED at 1440: the h2 and this paragraph ended on the SAME pixel
     (bottom -2987 for both) — the signature of two items sharing a row with
     `align-self:end`.
     This rule re-declares grid-column and grid-row and so beats `.sub` on both,
     but `.sub` ALSO sets `align-self:end` and nothing here reset it. A variant
     that only overrides some of what it inherits is the same failure as the
     `.deliv--cards` one in trap §16: a modifier must UNDO the base, not just
     add to it. `start` also stops the paragraph floating to the bottom of
     whatever implicit row it lands in. */
  .sec > .wrap > .sub--after,.chap > .wrap > .sub--after{
    grid-column:1/-1;grid-row:auto;align-self:start;
    margin:26px 0 0;max-width:var(--read)}

  /* ── THE CHAPTER MARKER MUST OPEN THE CHAPTER ──────────────────────────
     It was landing UNDERNEATH the chapter's own heading. `grid-row:0` is not
     a valid line number — grid lines are 1-based — so the declaration was
     dropped and the marker fell into auto-flow, which places it after the
     explicitly-positioned rows 1 and 2. A chapter divider printed below the
     thing it divides is worse than no divider. Every row in a chapter is
     therefore numbered explicitly here, and the marker owns row 1. */
  .chap > .wrap > .chap__mark{grid-column:1/-1;grid-row:1}
  .chap > .wrap > .eyebrow{grid-row:2}
  .chap > .wrap > .h2{grid-row:3}
  .chap > .wrap > .sub{grid-row:2/4}
  /* ⛔⛔ AND THE --after VARIANT HAS TO BE EXEMPTED HERE TOO. This is where the
     "Raise capital. Give away no control." headline was being painted over by
     "Right now your money is locked inside the business" on desktop.
     A chapter carries a `chap__mark` in row 1, so every header row shifts down
     one and this block renumbers them — including `.sub{grid-row:2/4}`. But
     `.sub--after` ALSO carries the class `sub`, so it matched this rule, and
     this rule is declared AFTER the `.sub--after` exemption twelve lines up.
     Equal specificity, later wins: the second paragraph was yanked back into
     the header rows and sat on top of the heading. MEASURED in #why:
     h2 row=3, sub--after row=2/4 — overlapping by 540x51px at 1440.
     The exemption has to be repeated inside every block that renumbers `.sub`.
     One rule for the base and none for the variant is trap §16: a modifier must
     UNDO the base wherever the base is re-stated. */
  .chap > .wrap > .sub--after{grid-row:auto;grid-column:1/-1;align-self:start}
}


/* ══ THE WALLET WIDGET ════════════════════════════════════════════════════
   Founder: "this little wallet widget… is really good… these little
   interactive custom widgets." THE PATTERN HE WANTS MORE OF, and the reason
   it works is that it is MARKUP, not a screenshot: it stays sharp at any
   size, recolours entirely from --bc with no new asset per brand, and cannot
   go stale when the real app changes.

   Canonical copy. index.html still carries an identical inline block; this is
   the shared one the decks use, and index.html moves onto it next pass so the
   three surfaces cannot drift. Sizing is driven by --pw-s so one widget can be
   a 210px thumbnail in a grid and a 290px hero object without new rules. */
.pw{position:absolute;inset:0;display:flex;flex-direction:column;
  gap:calc(9px * var(--pw-s,1));
  padding:0 calc(14px * var(--pw-s,1)) calc(14px * var(--pw-s,1));
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bc,var(--accent)) 16%,#07090a),#05070a 46%);
  font-family:var(--ff-sans);overflow:hidden}
.pw__top{height:calc(30px * var(--pw-s,1));display:grid;place-items:center;flex:none}
.pw__notch{width:calc(78px * var(--pw-s,1));height:calc(18px * var(--pw-s,1));
  border-radius:0 0 12px 12px;background:#000;display:block}
.pw__brand{display:flex;align-items:center;gap:calc(7px * var(--pw-s,1));margin:0;flex:none;
  font:800 calc(13px * var(--pw-s,1))/1 var(--ff-sans);letter-spacing:.12em;
  color:var(--bc,var(--accent))}
.pw__brand img{width:calc(20px * var(--pw-s,1));height:calc(20px * var(--pw-s,1));
  object-fit:contain;display:block}
.pw__brand span{margin-left:auto;font:600 calc(10.5px * var(--pw-s,1))/1 var(--ff-sans);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.pw__k{margin:calc(2px * var(--pw-s,1)) 0 0;flex:none;
  font:600 calc(9.5px * var(--pw-s,1))/1 var(--ff-sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.pw__bal{margin:0;flex:none;font:800 calc(30px * var(--pw-s,1))/1 var(--ff-sans);
  letter-spacing:-.03em;color:#fff}
.pw__bal small{font-size:calc(16px * var(--pw-s,1));font-weight:700;
  color:rgba(255,255,255,.52)}
.pw__card{margin:calc(2px * var(--pw-s,1)) 0 0;flex:none;border-radius:9px;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.6),
             0 0 22px color-mix(in srgb,var(--bc,var(--accent)) 24%,transparent)}
.pw__card img{display:block;width:100%;height:auto}
.pw__two{display:grid;grid-template-columns:1fr 1fr;gap:calc(7px * var(--pw-s,1));flex:none}
.pw__two div{padding:calc(8px * var(--pw-s,1)) calc(9px * var(--pw-s,1));
  border-radius:9px;background:rgba(255,255,255,.05)}
.pw__two small{display:block;font:600 calc(8.5px * var(--pw-s,1))/1 var(--ff-sans);
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.44);
  margin-bottom:calc(4px * var(--pw-s,1))}
.pw__two b{font:700 calc(12.5px * var(--pw-s,1))/1 var(--ff-sans);color:#fff}
.pw__acts{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(6px * var(--pw-s,1));
  margin:0;padding:0;list-style:none;flex:none}
.pw__acts li{display:grid;justify-items:center;gap:calc(5px * var(--pw-s,1));
  padding:calc(9px * var(--pw-s,1)) 2px;border-radius:9px;
  background:rgba(255,255,255,.045);max-width:none;
  font:600 calc(8.5px * var(--pw-s,1))/1 var(--ff-sans);color:rgba(255,255,255,.66)}
.pw__acts i{display:grid;place-items:center;
  width:calc(23px * var(--pw-s,1));height:calc(23px * var(--pw-s,1));border-radius:50%;
  border:1px solid color-mix(in srgb,var(--bc,var(--accent)) 56%,transparent);
  font-style:normal;font-size:calc(11px * var(--pw-s,1));color:var(--bc,var(--accent))}
.pw__hold{display:grid;gap:calc(6px * var(--pw-s,1));margin:0;padding:0;list-style:none;flex:none}
.pw__hold li{display:flex;align-items:center;justify-content:space-between;max-width:none;
  padding:calc(9px * var(--pw-s,1)) calc(10px * var(--pw-s,1));
  border-radius:9px;background:rgba(255,255,255,.04)}
.pw__hold span{font:700 calc(11px * var(--pw-s,1))/1 var(--ff-sans);letter-spacing:.1em;
  color:var(--bc,var(--accent))}
.pw__hold b{font:700 calc(11.5px * var(--pw-s,1))/1 var(--ff-sans);color:#fff}

/* The phone shell the widget sits in. Capped at --phone-w so it cannot grow
   into the "oversized on desktop" failure. */
.phone{position:relative;margin:0;width:100%;max-width:var(--phone-w);
  aspect-ratio:9/16.4;border-radius:26px;overflow:hidden;background:#06080a;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 60px rgba(0,0,0,.76),
             0 0 44px color-mix(in srgb,var(--bc,var(--accent)) 20%,transparent)}


/* ══ THE FULL-BLEED BAND ══════════════════════════════════════════════════
   Founder's UI reference: a photograph running the full width of the screen
   with one condensed line across it. Ten screens of type on black was a large
   part of why the deck read as flat — proof that a thing is real is not the
   word "real", it is a photograph of someone holding it.

   The band breaks the wrap, the TEXT inside it does not: the headline is
   still capped, which is the whole discipline this file exists to enforce. */
.band{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(220px,26vw,380px);display:grid;align-items:center}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0}
.band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 44%,
    rgba(0,0,0,.18) 78%,transparent 100%)}
.band__in{position:relative;z-index:2;width:100%;max-width:var(--col);
  margin-inline:auto;padding:clamp(28px,4vw,54px) var(--gutter)}
.band h2,.band p.band__t{margin:0;font:400 clamp(26px,3.6vw,48px)/1.04 var(--ff-display);
  letter-spacing:.01em;text-transform:uppercase;color:#fff;max-width:17ch}
.band em{font-style:normal;color:var(--accent)}
.band .band__s{margin:14px 0 0;font:400 clamp(14.5px,1.1vw,16.5px)/1.55 var(--ff-sans);
  color:rgba(255,255,255,.8);max-width:42ch}
@media(max-width:700px){
  .band::after{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,
    rgba(0,0,0,.82) 58%,rgba(0,0,0,.94) 100%)}
  .band{align-items:end}
}


/* ══ STAT CARDS ═══════════════════════════════════════════════════════════
   Founder's reference: a glowing bordered figure with a dash line under it
   and a source credit. Capped at --card-w so three of them at 1440px are
   three cards, not three billboards. */
.stats{display:grid;gap:12px;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;
  list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.stats li{max-width:none;padding:clamp(18px,2vw,24px);border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.02)),rgba(255,255,255,.012));
  box-shadow:0 0 38px color-mix(in srgb,var(--accent) 11%,transparent)}
.stats b{display:block;font:800 clamp(30px,3.4vw,44px)/1 var(--ff-sans);
  letter-spacing:-.035em;color:var(--accent)}
.stats b small{font-size:.5em;font-weight:800;letter-spacing:-.02em}
.stats span{display:block;margin-top:10px;font:500 14.5px/1.4 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.76))}
.stats i{display:block;margin-top:8px;font-style:normal;
  font:600 11.5px/1 var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3,rgba(255,255,255,.42))}
/* The quiet variant: same shape, no glow, for rows of six where every tile
   glowing is no emphasis at all. */
.stats--quiet li{border-color:var(--line);background:rgba(255,255,255,.022);
  box-shadow:none}
.stats--quiet li:first-child{border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.02)),rgba(255,255,255,.012))}
.stats--quiet b{font-size:clamp(24px,2.6vw,32px)}


/* ══ THE VERSUS PAIR ══════════════════════════════════════════════════════
   Two panels, deliberately unequal: the old way stated plainly and left grey,
   this way carrying the accent, with a VS chip between them. A reader should
   see which side they are on before reading a word. */
.vs{position:relative;display:grid;gap:14px;margin:clamp(24px,3vw,38px) 0 0;
  padding:0;list-style:none}
@media(min-width:860px){.vs{grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px)}}
.vs li{max-width:none;padding:clamp(20px,2.2vw,26px);border-radius:18px;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.vs li p{max-width:38ch}
.vs--new{border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.03)),rgba(255,255,255,.012));
  box-shadow:0 0 34px color-mix(in srgb,var(--accent) 9%,transparent)}
.vs b{display:block;margin-bottom:10px;font:700 12px/1 var(--ff-sans);
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.5))}
.vs--new b{color:var(--accent)}
.vs p{margin:0;font:400 15.5px/1.55 var(--ff-sans);color:var(--ink-2,rgba(255,255,255,.72))}
.vs em{font-style:normal;color:var(--paper);font-weight:650}
.vs--new em{color:var(--accent)}
/* The chip only exists where there is a gap to sit in. */
.vs__chip{display:none}
@media(min-width:860px){
  .vs__chip{display:grid;place-items:center;position:absolute;
    left:50%;top:50%;translate:-50% -50%;z-index:2;
    width:42px;height:42px;border-radius:50%;background:#000;
    border:1px solid var(--line-2);
    font:800 13px/1 var(--ff-sans);letter-spacing:.06em;
    color:var(--ink-3,rgba(255,255,255,.62))}
}


/* ══ THE ICON ROW ═════════════════════════════════════════════════════════
   Founder's reference: a ring-outlined icon, a short title, three short
   lines. Five across on a wide screen, two on a phone. Each column is capped
   so five columns of a 1200px grid stay readable rather than becoming five
   paragraphs. */
.icons{display:grid;gap:clamp(18px,2vw,26px);margin:clamp(22px,2.6vw,34px) 0 0;
  padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr))}
.icons li{max-width:none;display:grid;justify-items:center;text-align:center;gap:10px;
  padding-inline:clamp(4px,1vw,12px)}
@media(min-width:760px){
  .icons li{border-left:1px solid var(--line)}
  .icons li:first-child{border-left:0}
}
.icons i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--accent) 14%,transparent)}
.icons i svg{width:23px;height:23px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* display:block IS THE CAP. max-width does nothing at all on a non-replaced
   INLINE element, and <b> is inline by default — so every "max-width:NNch" on
   a <b> in this file was inert and the text ran the full width of its box.
   The site's own desk gate caught it as 132ch rows that looked capped in the
   CSS and were not. Every titled <b> below is therefore explicitly block. */
.icons b{display:block;font:700 15px/1.3 var(--ff-sans);letter-spacing:-.01em;
  color:var(--paper);max-width:16ch}
.icons p{margin:0;font:400 13.5px/1.5 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.58));max-width:22ch}


/* ══ THE DELIVERABLE LIST ═════════════════════════════════════════════════
   The answer to "what do I actually get", as a numbered counter rather than
   bullets, because that answer should be countable. */
.deliv{counter-reset:dv;display:grid;gap:0;margin:clamp(22px,2.6vw,34px) 0 0;
  padding:0;list-style:none}
@media(min-width:900px){.deliv{grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px)}}
/* EVERY DELIVERABLE CARRIES A MARK. Founder: "you bring the business and we
   do all the rest — that should have visuals for all of it." Eight rows of
   type is a contract, not a product page; an icon chip per row is what makes
   it read as eight THINGS being handed over. The counter moves onto the chip
   so the row still counts without spending a second column on it. */
.deliv li{max-width:none;counter-increment:dv;padding:20px 0;
  border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;
  gap:6px 16px;align-items:start}
.deliv li > i{grid-row:1/3;position:relative;display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 11%,transparent)}
.deliv li > i svg{width:20px;height:20px;fill:none;stroke:var(--accent);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.deliv li > i::after{content:counter(dv,decimal-leading-zero);position:absolute;
  right:-5px;bottom:-6px;padding:2px 5px;border-radius:6px;background:#000;
  border:1px solid var(--line);
  font:800 9px/1 var(--ff-sans);letter-spacing:.04em;color:var(--ink-3,rgba(255,255,255,.6))}
/* The number only becomes a ::before when the row has no icon, so a list
   written without marks still counts. */
.deliv li:not(:has(> i))::before{content:counter(dv,decimal-leading-zero);grid-row:1/3;
  font:800 12px/1.7 var(--ff-sans);letter-spacing:.06em;color:var(--accent)}
.deliv b{display:block;font:700 clamp(16.5px,1.5vw,19px)/1.25 var(--ff-sans);
  letter-spacing:-.015em;color:var(--paper);max-width:24ch}
.deliv p{margin:0;font:400 15px/1.55 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.72));max-width:46ch}
.deliv em{font-style:normal;color:var(--accent);font-weight:650}


/* ══ THE NUMBERED STACK — "the whole thing in 30 seconds" ═════════════════ */
.ax30{counter-reset:ax30;display:grid;gap:0;margin:clamp(20px,2.4vw,30px) 0 0;
  padding:0;list-style:none}
.ax30 li{max-width:none;counter-increment:ax30;display:grid;
  grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:15px 0;
  border-top:1px solid var(--line)}
.ax30 li:last-child{border-bottom:1px solid var(--line)}
.ax30 li::before{content:counter(ax30,decimal-leading-zero);
  font:800 13px/1.6 var(--ff-sans);letter-spacing:.06em;color:var(--accent)}
.ax30 b{display:block;font:700 clamp(17px,1.7vw,22px)/1.3 var(--ff-sans);letter-spacing:-.02em;
  color:var(--paper);max-width:40ch}
.ax30 em{font-style:normal;color:var(--accent)}


/* ══ THE TIMELINE ═════════════════════════════════════════════════════════
   Horizontal on desktop, an ordinary numbered list on a phone: a four-across
   timeline inside a 393px column is four cramped columns. */
.steps{counter-reset:st;display:grid;gap:26px;margin:clamp(24px,3vw,40px) 0 0;
  padding:0;list-style:none}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px);position:relative}
  .steps::before{content:"";position:absolute;left:18px;right:18px;top:17px;height:1px;
    background:linear-gradient(90deg,var(--accent),var(--line))}
}
.steps li{max-width:none;counter-increment:st;position:relative;padding-top:48px}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#000;
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  font:800 12px/1 var(--ff-sans);color:var(--accent)}
.steps b{display:block;margin:0 0 7px;font:700 17px/1.25 var(--ff-sans);
  letter-spacing:-.015em;color:var(--paper);max-width:24ch}
.steps p{margin:0;font:400 14.5px/1.55 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.72));max-width:34ch}
.steps em{font-style:normal;color:var(--accent);font-weight:650}


/* ══ THE VERTICAL STEPS ═══════════════════════════════════════════════════ */
.vsteps{counter-reset:vs;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;list-style:none;
  display:grid;gap:0}
.vsteps li{max-width:none;counter-increment:vs;position:relative;padding:0 0 26px 58px}
.vsteps li::before{content:counter(vs,decimal-leading-zero);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#000;
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  font:800 12px/1 var(--ff-sans);color:var(--accent)}
.vsteps li::after{content:"";position:absolute;left:17.5px;top:38px;bottom:2px;width:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 40%,transparent),var(--line))}
.vsteps li:last-child{padding-bottom:0}
.vsteps li:last-child::after{display:none}
.vsteps b{display:block;margin:5px 0 6px;font:700 17.5px/1.25 var(--ff-sans);
  letter-spacing:-.015em;color:var(--paper);max-width:26ch}
.vsteps p{margin:0;font:400 14.5px/1.55 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.72));max-width:44ch}


/* ══ PLAIN-WORD DEFINITIONS ═══════════════════════════════════════════════ */
.words{display:grid;gap:0;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;list-style:none}
@media(min-width:900px){.words{grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3vw,48px)}}
.words li{max-width:none;padding:20px 0;border-top:1px solid var(--line);
  display:grid;gap:8px;align-content:start}
@media(max-width:899px){.words li:last-child{border-bottom:1px solid var(--line)}}
.words b{display:block;font:800 clamp(18px,1.9vw,22px)/1.1 var(--ff-sans);letter-spacing:-.02em;
  color:var(--accent)}
.words i{justify-self:start;font-style:normal;font:600 11.5px/1 var(--ff-sans);
  letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-3,rgba(255,255,255,.44));padding:6px 10px;
  border:1px solid var(--line);border-radius:999px}
.words p{margin:0;font:400 15px/1.55 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.72));max-width:38ch}
.words em{font-style:normal;color:var(--paper);font-weight:650}


/* ══ COMMON QUESTIONS — native accordion, no script ═══════════════════════
   <details> because keyboard, screen readers and find-in-page all work with
   no JavaScript, and seven closed questions are three screens shorter than
   seven open ones. */
.qa{margin:clamp(18px,2.2vw,28px) 0 0;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:18px 0;min-height:var(--tap,44px);
  font:700 clamp(15.5px,1.4vw,17.5px)/1.35 var(--ff-sans);letter-spacing:-.012em;
  color:var(--paper)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;flex:0 0 auto;
  font:400 24px/1 var(--ff-sans);color:var(--accent);
  transition:transform .28s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--accent)}
.qa p{margin:0 0 20px;max-width:62ch;font:400 15px/1.6 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.72))}
.qa em{font-style:normal;color:var(--accent);font-weight:650}
@media(prefers-reduced-motion:reduce){.qa summary::after{transition:none}}


/* ══ THE CLOSE ════════════════════════════════════════════════════════════ */
.start{border-top:1px solid var(--line);
  background:radial-gradient(120% 96% at 6% 50%,
    color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%)}
.form{display:grid;gap:14px;margin:clamp(20px,2.4vw,30px) 0 0;max-width:720px}
@media(min-width:720px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.form label{display:grid;gap:7px;font:600 12px/1 var(--ff-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.5))}
.form input,.form textarea{width:100%;min-height:var(--tap,44px);padding:12px 14px;
  border-radius:10px;background:rgba(255,255,255,.045);border:1px solid var(--line);
  color:var(--paper);font:400 16px/1.4 var(--ff-sans)}
.form textarea{min-height:104px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-color:transparent}
.form ::placeholder{color:rgba(255,255,255,.3)}
.start__note{margin:14px 0 0;font:400 13.5px/1.5 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.5));max-width:58ch}


/* ══ THE DOCK CLEARANCE ═══════════════════════════════════════════════════
   tabbar.js pins a dock to the bottom. Without this the last control on the
   page sits underneath it. */
body{padding-bottom:calc(var(--tabbar-h,72px) + env(safe-area-inset-bottom,0px))}
@media(min-width:1000px){body{padding-bottom:calc(var(--tabbar-h,72px) + 12px)}}


/* ══════════════════════════════════════════════════════════════════════════
   THE LAPTOP  ·  the third branded object
   ──────────────────────────────────────────────────────────────────────────
   Founder: "that wallet on the homepage is so fucking good… we can also make
   a MacBook which would be fucking awesome — it'll look like the MacBook with
   the wallet page on it with the card and everything, with maybe some staking
   on it. So we have the card, we have the wallet, and we have that third
   object, so we can use those three across the branding."

   So there are now three: the CARD (three-card.js), the PHONE WALLET (.pw
   above), and THIS. All three recolour from one custom property and none of
   them is a screenshot.

   IT IS MARKUP, FOR THE SAME REASON .pw IS. A screenshot of a dashboard
   shrunk into a 560px lid is unreadable, it goes stale the moment the real
   product changes, and it needs a new render per brand — which is exactly why
   only two of six brands ever had a wallet image. This draws itself, stays
   sharp at any size, and costs no asset at all.

   EVERYTHING SCALES FROM --mb-s, like the phone does from --pw-s, so the same
   object can be a 320px thumbnail in a grid and a 760px hero without a second
   set of rules.
   ══════════════════════════════════════════════════════════════════════════ */
.mb{--mb-s:1;position:relative;width:100%;max-width:var(--laptop-w,680px);
  margin-inline:auto;display:block}

/* ── THE LID ─────────────────────────────────────────────────────────────
   16:10, which is the real proportion of the machine and the reason the
   thing reads as a laptop rather than as a rounded rectangle. */
.mb__lid{position:relative;aspect-ratio:16/10;border-radius:calc(14px * var(--mb-s));
  padding:calc(10px * var(--mb-s));
  background:linear-gradient(170deg,#2a2d31,#141619 38%,#0c0e10);
  box-shadow:0 calc(30px * var(--mb-s)) calc(70px * var(--mb-s)) rgba(0,0,0,.72),
             0 0 calc(50px * var(--mb-s)) color-mix(in srgb,var(--bc,var(--accent)) 16%,transparent),
             inset 0 1px 0 rgba(255,255,255,.10)}
.mb__cam{position:absolute;left:50%;top:calc(4px * var(--mb-s));translate:-50% 0;
  width:calc(5px * var(--mb-s));height:calc(5px * var(--mb-s));border-radius:50%;
  background:#0a0b0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mb__scr{position:absolute;inset:calc(10px * var(--mb-s));
  border-radius:calc(7px * var(--mb-s));overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bc,var(--accent)) 13%,#07090a),#05070a 46%);
  display:grid;grid-template-columns:calc(74px * var(--mb-s)) 1fr;
  font-family:var(--ff-sans)}

/* ── THE BASE ────────────────────────────────────────────────────────────
   A wedge and a notch. Two elements, and they are what stop the lid reading
   as a floating tablet. */
.mb__base{position:relative;height:calc(11px * var(--mb-s));
  width:calc(100% + 7%);margin-inline:-3.5%;
  border-radius:0 0 calc(9px * var(--mb-s)) calc(9px * var(--mb-s));
  background:linear-gradient(180deg,#3a3e43,#1b1e21 58%,#0e1012);
  box-shadow:0 calc(14px * var(--mb-s)) calc(26px * var(--mb-s)) rgba(0,0,0,.7)}
.mb__base::after{content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:14%;height:calc(4px * var(--mb-s));
  border-radius:0 0 calc(5px * var(--mb-s)) calc(5px * var(--mb-s));
  background:rgba(0,0,0,.5)}

/* ── THE APP ON THE SCREEN ───────────────────────────────────────────────
   The same shape as the real product: a rail on the left, the account on the
   right. Deliberately a REDUCTION of the vault, not a copy of it — at this
   size only the things a person can actually read belong on it. */
.mb__rail{padding:calc(9px * var(--mb-s)) calc(7px * var(--mb-s));
  border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;
  gap:calc(4px * var(--mb-s))}
.mb__mk{display:flex;align-items:center;gap:calc(5px * var(--mb-s));
  margin:0 0 calc(7px * var(--mb-s));
  font:800 calc(9px * var(--mb-s))/1 var(--ff-sans);letter-spacing:.12em;
  color:var(--bc,var(--accent))}
.mb__mk img{width:calc(12px * var(--mb-s));height:calc(12px * var(--mb-s));
  object-fit:contain;display:block}
.mb__rail ul{display:grid;gap:calc(3px * var(--mb-s));margin:0;padding:0;list-style:none}
.mb__rail li{max-width:none;display:flex;align-items:center;gap:calc(5px * var(--mb-s));
  padding:calc(4px * var(--mb-s)) calc(5px * var(--mb-s));
  border-radius:calc(5px * var(--mb-s));
  font:600 calc(7.5px * var(--mb-s))/1 var(--ff-sans);color:rgba(255,255,255,.52)}
.mb__rail li i{width:calc(9px * var(--mb-s));height:calc(9px * var(--mb-s));
  border-radius:calc(3px * var(--mb-s));flex:none;
  background:rgba(255,255,255,.10);font-style:normal}
.mb__rail li.on{background:color-mix(in srgb,var(--bc,var(--accent)) 16%,transparent);
  color:var(--bc,var(--accent))}
.mb__rail li.on i{background:var(--bc,var(--accent))}

/* FILL THE SCREEN WITH CONTENT, not with gaps. Packed to the top, the app
   occupied half the lid and the lower half read as a dead grey panel — but
   spreading the same blocks with space-between just moved the emptiness
   between them. A 16:10 screen needs enough rows to fill 16:10, so the app
   carries five staking pairs and a payout strip. */
.mb__body{padding:calc(9px * var(--mb-s)) calc(10px * var(--mb-s));
  display:flex;flex-direction:column;gap:calc(6px * var(--mb-s));min-width:0}
.mb__rail ul{margin-bottom:auto}
/* The payout strip along the foot of the app. */
.mb__out{margin-top:calc(2px * var(--mb-s));display:flex;align-items:center;gap:calc(8px * var(--mb-s));
  padding:calc(6px * var(--mb-s)) calc(8px * var(--mb-s));
  border-radius:calc(6px * var(--mb-s));
  border:1px solid color-mix(in srgb,var(--bc,var(--accent)) 30%,transparent);
  background:color-mix(in srgb,var(--bc,var(--accent)) 9%,transparent)}
.mb__out em{font-style:normal;font:600 calc(6.5px * var(--mb-s))/1 var(--ff-sans);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mb__out b{margin-left:auto;font:800 calc(10px * var(--mb-s))/1 var(--ff-sans);
  color:var(--bc,var(--accent))}
.mb__k{margin:0;font:600 calc(6.5px * var(--mb-s))/1 var(--ff-sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.mb__bal{margin:0;font:800 calc(21px * var(--mb-s))/1 var(--ff-sans);
  letter-spacing:-.03em;color:#fff}
.mb__bal small{font-size:calc(11px * var(--mb-s));color:rgba(255,255,255,.5)}
.mb__top{display:flex;align-items:flex-end;gap:calc(10px * var(--mb-s))}
.mb__card{flex:none;width:calc(96px * var(--mb-s));border-radius:calc(5px * var(--mb-s));
  overflow:hidden;margin:0;
  box-shadow:0 calc(5px * var(--mb-s)) calc(14px * var(--mb-s)) rgba(0,0,0,.66),
             0 0 calc(14px * var(--mb-s)) color-mix(in srgb,var(--bc,var(--accent)) 26%,transparent)}
.mb__card img{display:block;width:100%;height:auto}

/* The staking rows — the founder asked for staking on the screen specifically. */
.mb__stk{display:grid;gap:calc(4px * var(--mb-s));margin:0;padding:0;list-style:none}
.mb__stk li{max-width:none;display:flex;align-items:center;gap:calc(6px * var(--mb-s));
  padding:calc(5px * var(--mb-s)) calc(7px * var(--mb-s));
  border-radius:calc(5px * var(--mb-s));background:rgba(255,255,255,.045)}
.mb__stk img{width:calc(12px * var(--mb-s));height:calc(12px * var(--mb-s));
  object-fit:contain;display:block;flex:none}
.mb__stk b{font:700 calc(7.5px * var(--mb-s))/1 var(--ff-sans);letter-spacing:.05em;
  color:#fff;white-space:nowrap}
.mb__stk span{margin-left:auto;font:800 calc(7.5px * var(--mb-s))/1 var(--ff-sans);
  color:var(--bc,var(--accent));white-space:nowrap}
/* The depth bar, segmented — the smooth sound-wave version was sent back once. */
.mb__bar{height:calc(3px * var(--mb-s));border-radius:calc(3px * var(--mb-s));
  overflow:hidden;background:rgba(255,255,255,.08);position:relative}
.mb__bar i{position:absolute;inset:0 auto 0 0;width:var(--d,64%);
  background:repeating-linear-gradient(90deg,
    var(--bc,var(--accent)) 0 calc(3px * var(--mb-s)),
    transparent calc(3px * var(--mb-s)) calc(5px * var(--mb-s)))}


/* ── THE LAPTOP SCREEN IS THE REAL PRODUCT, NOT A DASHBOARD ──────────────
   Founder: "the web application needs to look like our actual web app inside
   of the view. It doesn't look like the actual web app inside of the view
   correctly."
   He was right — the first pass drew a plausible fintech dashboard. These
   rules make it /v2/axis at a quarter size: the chain line under the brand,
   the group headings, the numbered vault rows, the numbered section eyebrow
   (01 // ACCOUNT CORE), the four actions, and the View-vault control pinned
   in the foot of the rail. Every one of those is a thing the real vault has
   and the generic version did not. */
.mb__chain{margin:0 0 calc(8px * var(--mb-s));
  font:600 calc(6.5px * var(--mb-s))/1 var(--ff-sans);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.34)}
.mb__chain b{color:var(--bc,var(--accent));font-weight:700}
.mb__gh{margin:calc(7px * var(--mb-s)) 0 calc(3px * var(--mb-s));
  font:700 calc(6px * var(--mb-s))/1 var(--ff-sans);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.3)}
.mb__rail li em{margin-left:auto;font-style:normal;
  font:700 calc(6px * var(--mb-s))/1 var(--ff-sans);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.3)}
.mb__rail li.on em{color:var(--bc,var(--accent))}
.mb__go{margin:auto 0 0;display:grid;gap:calc(1px * var(--mb-s));
  padding:calc(6px * var(--mb-s)) calc(7px * var(--mb-s));
  border-radius:calc(6px * var(--mb-s));border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.mb__go b{font:800 calc(7.5px * var(--mb-s))/1 var(--ff-sans);color:#fff}
.mb__go span{font:500 calc(6px * var(--mb-s))/1 var(--ff-sans);color:rgba(255,255,255,.4)}

/* The numbered section eyebrow the vault uses on every block. */
.mb__eb{display:flex;align-items:center;gap:calc(5px * var(--mb-s));margin:0;
  font:600 calc(6.5px * var(--mb-s))/1 var(--ff-sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
.mb__eb b{color:var(--bc,var(--accent));font-weight:800}
.mb__eb u{text-decoration:none;color:rgba(255,255,255,.22)}
.mb__eb::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)}

.mb__two{display:flex;gap:calc(10px * var(--mb-s));margin:calc(5px * var(--mb-s)) 0 0}
.mb__two span{font:600 calc(6.5px * var(--mb-s))/1.5 var(--ff-sans);
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.mb__two b{display:block;font:700 calc(9px * var(--mb-s))/1 var(--ff-sans);
  letter-spacing:0;text-transform:none;color:#fff}

.mb__acts{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(5px * var(--mb-s));
  margin:0;padding:0;list-style:none}
.mb__acts li{max-width:none;display:grid;place-items:center;
  padding:calc(6px * var(--mb-s)) 0;border-radius:calc(5px * var(--mb-s));
  background:rgba(255,255,255,.045);
  font:600 calc(6.5px * var(--mb-s))/1 var(--ff-sans);color:rgba(255,255,255,.6)}

/* The earn rows carry a word where there is no fixed rate, never a number we
   do not publish. */
.mb__stk li b{flex:none}
.mb__stk li span{font-size:calc(8px * var(--mb-s))}


/* ══════════════════════════════════════════════════════════════════════════
   THE STAKE SLIDER
   ──────────────────────────────────────────────────────────────────────────
   Founder: "don't put 'they deposit 10,000, blah blah blah.' Just put what it
   is: 5% staking rewards, spendable on your card right away. …put the slider,
   which has the 10,000, and then it says how much goes onto your card and how
   much goes into the staking pool from that 10,000."

   ⚠ A STAKE SLIDER WAS BUILT AND DELETED ONCE BEFORE, on his instruction — he
   scribbled out the whole tile (YOU STAKE / the range / DAY ONE TOTAL VALUE /
   OF IT WHAT TOPS UP YOUR CARD). He is now asking for it back explicitly, and
   the newest instruction wins. THE DIFFERENCE THAT MATTERS: the deleted one
   printed a "day one total value", which is a projection. This one does
   arithmetic and nothing else — amount × the published 5% — and says so. It
   forecasts nothing, so it does not put invented financial data on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.stk{margin:clamp(22px,2.6vw,32px) 0 0;padding:clamp(20px,2.4vw,28px);
  border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.03)),rgba(255,255,255,.012));
  box-shadow:0 0 44px color-mix(in srgb,var(--accent) 10%,transparent)}
.stk__k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 6px;font:600 11.5px/1 var(--ff-sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.5))}
.stk__amt{margin:0;font:800 clamp(30px,3.6vw,46px)/1 var(--ff-sans);
  letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}

/* The range. Styled on both engines, because the default control is a grey
   bar that looks like a browser and not like this site. */
.stk__r{-webkit-appearance:none;appearance:none;width:100%;height:34px;
  margin:10px 0 0;background:transparent;cursor:pointer;display:block}
.stk__r:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.stk__r::-webkit-slider-runnable-track{height:8px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent) var(--p,20%),rgba(255,255,255,.10) var(--p,20%))}
.stk__r::-moz-range-track{height:8px;border-radius:6px;background:rgba(255,255,255,.10)}
.stk__r::-moz-range-progress{height:8px;border-radius:6px;background:var(--accent)}
.stk__r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#0a0c0d;
  border:2px solid var(--accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent)}
.stk__r::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#0a0c0d;
  border:2px solid var(--accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent)}
.stk__ends{display:flex;justify-content:space-between;
  font:600 11px/1 var(--ff-sans);letter-spacing:.1em;
  color:var(--ink-3,rgba(255,255,255,.38))}

/* The two outcomes. Deliberately unequal: the spendable one carries the
   accent, because "you can spend it today" is the whole point. */
.stk__out{display:grid;gap:12px;margin:clamp(18px,2.2vw,26px) 0 0;padding:0;list-style:none}
@media(min-width:680px){.stk__out{grid-template-columns:1fr 1fr}}
.stk__out li{max-width:none;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.028)}
.stk__out li:first-child{border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:color-mix(in srgb,var(--accent) 11%,transparent)}
.stk__out small{display:block;margin-bottom:7px;font:600 11px/1 var(--ff-sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.5))}
.stk__out li:first-child small{color:var(--accent)}
.stk__out b{display:block;font:800 clamp(22px,2.4vw,30px)/1 var(--ff-sans);
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.stk__out li:first-child b{color:var(--accent)}
.stk__out span{display:block;margin-top:7px;font:400 13.5px/1.45 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.7))}
.stk__note{margin:14px 0 0;font:400 12.5px/1.5 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.42));max-width:60ch}


/* ══════════════════════════════════════════════════════════════════════════
   THE THREE REWARD CARDS  ·  shared by /whitelabel and the vault
   ──────────────────────────────────────────────────────────────────────────
   Founder: "put this similar module on the white-label page, and then it uses
   their branding, their colours." Same three cards as the homepage, driven
   from --accent — and because the deck sets data-brand on <html>, pressing a
   brand recolours these along with everything else, with no per-brand rule.
   No prose under them, on his instruction: "get rid of all the small talk
   under the staking rewards, cash back, all that. Just keep that."
   ══════════════════════════════════════════════════════════════════════════ */
.rw3{display:grid;gap:14px;margin:clamp(24px,3vw,38px) 0 0;padding:0;list-style:none}
@media(min-width:860px){.rw3{grid-template-columns:repeat(3,1fr)}}
.rw3 li{position:relative;isolation:isolate;overflow:hidden;max-width:none;
  display:grid;justify-items:center;text-align:center;gap:12px;
  padding:clamp(24px,2.8vw,34px) clamp(18px,2vw,24px);border-radius:20px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.03)),rgba(255,255,255,.01));
  box-shadow:0 0 42px color-mix(in srgb,var(--accent) 9%,transparent)}
.rw3 li::before{content:"";position:absolute;z-index:-1;inset:-50% -30% auto -30%;
  height:170%;pointer-events:none;
  background:radial-gradient(56% 46% at 50% 0%,
    color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%)}
.rw3 i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rw3 i svg{width:23px;height:23px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rw3 h3{margin:0;font:700 14px/1 var(--ff-sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent)}
.rw3 .v{display:block;margin:0;padding:14px 0 0;width:100%;
  border-top:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  font:800 clamp(38px,5vw,60px)/1 var(--ff-sans);letter-spacing:-.04em;color:#fff}
.rw3 .v em{font-style:normal;color:var(--accent)}
.rw3 .u{display:block;margin:0;font:500 13.5px/1.4 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.56));max-width:24ch}
.rw3 small{font:600 11px/1 var(--ff-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3,rgba(255,255,255,.34))}


/* ══════════════════════════════════════════════════════════════════════════
   THE DELIVERABLES, AS LIVE CARDS
   ──────────────────────────────────────────────────────────────────────────
   Founder: "this part needs to be dramatically upgraded and animated with
   visual motion graphics — really level it up."

   It was eight rows of type separated by hairlines: a contract, not a product
   page. Each deliverable is now a card that behaves like the thing it names —
   the card taps, the launch lifts, the pool ripples, the wheel turns, the
   network fires in sequence. The motion is tiny and it LOOPS SLOWLY, because
   eight things moving fast at once is noise, not craft.

   EVERY ANIMATION IS OFF UNDER prefers-reduced-motion, and none of them carry
   information — the card reads identically still.
   ══════════════════════════════════════════════════════════════════════════ */
.deliv--cards{display:grid;gap:clamp(12px,1.4vw,18px);margin:clamp(24px,3vw,38px) 0 0;
  padding:0;list-style:none;counter-reset:dv;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
/* ⚠ EXPLICITLY ONE COLUMN, AND THE BASE COUNTER OFF. `.deliv li` is a two
   column grid (auto 1fr) with a ::before counter, and this card variant
   inherits both — which put the icon and the title in column two, squeezed the
   title to one word per line, and printed the number TWICE. A variant has to
   undo the base grid, not just add to it. */
.deliv--cards li{counter-increment:dv;position:relative;isolation:isolate;
  overflow:hidden;max-width:none;display:grid;grid-template-columns:1fr;
  gap:12px;align-content:start;justify-items:start;
  padding:clamp(20px,2.2vw,26px);border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color .32s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),
             transform .32s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.deliv--cards li:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 46%,transparent)}
/* The bloom, lit on hover only — eight permanent glows is a smear. */
.deliv--cards li::after{content:"";position:absolute;z-index:-1;inset:-60% -30% auto -30%;
  height:180%;pointer-events:none;opacity:0;transition:opacity .38s ease;
  background:radial-gradient(52% 44% at 50% 0%,
    color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%)}
.deliv--cards li:hover::after{opacity:1}

.deliv--cards li::before{content:none}
.deliv--cards .ic{position:relative;display:grid;place-items:center;
  grid-row:auto;font-style:normal;
  width:46px;height:46px;border-radius:13px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.deliv--cards .ic::before{content:counter(dv,decimal-leading-zero);position:absolute;
  right:-6px;bottom:-7px;padding:2px 5px;border-radius:6px;background:#000;
  border:1px solid var(--line);font:800 9px/1 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.6))}
.deliv--cards .ic svg{width:21px;height:21px;fill:none;stroke:var(--accent);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.deliv--cards b{display:block;font:700 clamp(16.5px,1.5vw,19px)/1.25 var(--ff-sans);
  letter-spacing:-.015em;color:var(--paper);max-width:24ch}
.deliv--cards p{margin:0;font:400 14.5px/1.55 var(--ff-sans);
  color:var(--ink-2,rgba(255,255,255,.7));max-width:42ch}
.deliv--cards em{font-style:normal;color:var(--accent);font-weight:650}

/* ── THE MOTION. One loop per card, each doing what the card describes. ──── */
@media(prefers-reduced-motion:no-preference){
  /* the card taps — the contactless arcs ripple outward */
  .mg-tap  .a1{animation:mgTap 2.6s ease-out infinite}
  .mg-tap  .a2{animation:mgTap 2.6s ease-out .28s infinite}
  .mg-tap  .a3{animation:mgTap 2.6s ease-out .56s infinite}
  @keyframes mgTap{0%{opacity:0}18%{opacity:1}60%{opacity:0}100%{opacity:0}}

  /* money lands in the wallet */
  .mg-drop .a1{animation:mgDrop 3s cubic-bezier(.16,1,.3,1) infinite}
  @keyframes mgDrop{0%{transform:translateY(-7px);opacity:0}
    28%{opacity:1}55%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:1}}

  /* the screen refreshes */
  .mg-scan .a1{animation:mgScan 3.2s ease-in-out infinite}
  @keyframes mgScan{0%{transform:translateY(0);opacity:0}
    20%{opacity:.9}80%{transform:translateY(9px);opacity:0}100%{opacity:0}}

  /* the site loads, bar by bar */
  .mg-load .a1{animation:mgLoad 2.8s ease-out infinite}
  .mg-load .a2{animation:mgLoad 2.8s ease-out .34s infinite}
  @keyframes mgLoad{0%{transform:scaleX(0);opacity:.35}
    45%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.35}}

  /* the launch lifts */
  .mg-lift .a1{animation:mgLift 3s cubic-bezier(.16,1,.3,1) infinite}
  .mg-lift .a2{animation:mgFlame .5s ease-in-out infinite alternate}
  @keyframes mgLift{0%{transform:translateY(2px)}45%{transform:translateY(-3px)}
    100%{transform:translateY(2px)}}
  @keyframes mgFlame{from{opacity:.35;transform:scaleY(.7)}to{opacity:1;transform:scaleY(1)}}

  /* the pool ripples */
  .mg-pool .a1{animation:mgPool 3s ease-out infinite}
  .mg-pool .a2{animation:mgPool 3s ease-out .5s infinite}
  @keyframes mgPool{0%{transform:scale(.55);opacity:0}25%{opacity:.9}
    100%{transform:scale(1.25);opacity:0}}

  /* managed, every day — the wheel turns */
  .mg-turn .a1{animation:mgTurn 9s linear infinite;transform-origin:12px 12px}
  @keyframes mgTurn{to{transform:rotate(360deg)}}

  /* all of it, connected — the nodes fire round the loop */
  .mg-net .a1{animation:mgNet 2.4s ease-in-out infinite}
  .mg-net .a2{animation:mgNet 2.4s ease-in-out .35s infinite}
  .mg-net .a3{animation:mgNet 2.4s ease-in-out .7s infinite}
  @keyframes mgNet{0%,100%{opacity:.3}40%{opacity:1}}
}


/* ══════════════════════════════════════════════════════════════════════════
   THE CENTRE FLOW  ·  the business in the middle, its pools around it
   ──────────────────────────────────────────────────────────────────────────
   Founder: "their brand in the centre, and the other liquidity pools like the
   stocks, and it goes back to the centre — on white label and on home."

   This is the liquidity argument as one picture: your token sits in the
   middle, every pool it is paired against sits on the ring, and the fee flow
   runs INWARD from all of them at once. It is the thing the three paragraphs
   above it are trying to describe.

   ⛔ NO FIGURE APPEARS ON IT. The nodes are named pairs and nothing else — no
   depth, no volume, no share. The motion shows DIRECTION, which is true, and
   never a quantity, which we do not publish.
   ══════════════════════════════════════════════════════════════════════════ */
.flow{position:relative;width:100%;max-width:560px;margin:clamp(26px,3vw,40px) auto 0;
  aspect-ratio:1}
.flow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow .ring{fill:none;stroke:var(--line);stroke-width:1}
.flow .wire{fill:none;stroke:color-mix(in srgb,var(--accent) 26%,transparent);stroke-width:1.2;
  vector-effect:non-scaling-stroke}
/* The travelling fee. A short bright dash whose offset runs toward the middle,
   so every pool visibly pays inward. */
.flow .fee{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:10 150;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 80%,transparent))}
@media(prefers-reduced-motion:no-preference){
  .flow .fee{animation:flowIn 3.4s linear infinite}
  .flow .f2{animation-delay:.55s} .flow .f3{animation-delay:1.1s}
  .flow .f4{animation-delay:1.65s} .flow .f5{animation-delay:2.2s}
  .flow .f6{animation-delay:2.75s}
  @keyframes flowIn{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
  /* the centre answers, once a cycle */
  .flow__hub::after{animation:hubPulse 3.4s ease-out infinite}
  @keyframes hubPulse{0%{transform:scale(.9);opacity:.55}
    60%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
}
@media(prefers-reduced-motion:reduce){
  .flow .fee{stroke-dasharray:none;opacity:.45}
}

/* The hub — their brand, in their colour. */
.flow__hub{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  display:grid;place-items:center;width:31%;aspect-ratio:1;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 58%,transparent);
  background:radial-gradient(circle at 50% 35%,
    color-mix(in srgb,var(--accent) 22%,#0a0c0d),#07090a 72%);
  box-shadow:0 0 60px color-mix(in srgb,var(--accent) 30%,transparent),
             inset 0 0 30px color-mix(in srgb,var(--accent) 14%,transparent)}
.flow__hub::after{content:"";position:absolute;inset:-6%;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);pointer-events:none}
.flow__hub img{width:34%;height:auto;display:block;margin-bottom:6px}
.flow__hub b{font:800 clamp(13px,1.5vw,17px)/1 var(--ff-sans);letter-spacing:.14em;
  color:var(--accent)}
.flow__hub span{margin-top:5px;font:600 11px/1 var(--ff-sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.44))}

/* The pools on the ring. Positioned from one --a angle each, so adding a
   seventh is one element and one number. */
/* ⚠ POSITIONED, NOT ROTATED OUT. The first version placed each node with
   transform:rotate(a) translate(38%) rotate(-a) — and a percentage inside
   `translate()` resolves against the ELEMENT'S OWN width, not the container's,
   so every node moved 38% of its own 129px and they all piled up in the middle
   on top of the hub. left/top are computed per node instead (same polar maths,
   done once, in the markup) and a percentage there means what it looks like it
   means. */
.flow__n{position:absolute;z-index:2;translate:-50% -50%;
  display:grid;place-items:center;gap:5px;width:23%}
.flow__n i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  border:1px solid var(--line-2);background:rgba(10,12,13,.94);
  box-shadow:0 8px 22px rgba(0,0,0,.6)}
.flow__n img{width:26px;height:26px;object-fit:contain;display:block}
.flow__n b{font:700 11.5px/1 var(--ff-sans);letter-spacing:.12em;
  color:var(--ink-2,rgba(255,255,255,.74));white-space:nowrap}
@media(max-width:600px){
  .flow__n i{width:38px;height:38px;border-radius:12px}
  .flow__n img{width:21px;height:21px}
  .flow__n b{font-size:11px}
}
.flow__cap{margin:18px 0 0;text-align:center;font:500 13px/1.5 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.46));max-width:52ch;margin-inline:auto}


/* ══════════════════════════════════════════════════════════════════════════
   THE TRADE  ·  the old way against this one, answered line by line
   ──────────────────────────────────────────────────────────────────────────
   Founder: "upgrade the 'raising capital without giving control of your
   company' part." Two prose panels made the case; they did not let anyone
   CHECK it. Four questions an owner actually weighs, answered on both sides,
   so the decision is visible at a glance and the accent only ever sits on the
   side we are arguing for.
   ══════════════════════════════════════════════════════════════════════════ */
.trade{display:grid;gap:0;margin:clamp(24px,3vw,38px) 0 0;padding:0;list-style:none}
.trade li{max-width:none;display:grid;gap:4px;padding:16px 0;
  border-top:1px solid var(--line)}
.trade li:last-child{border-bottom:1px solid var(--line)}
@media(min-width:840px){
  .trade li{grid-template-columns:minmax(0,.85fr) minmax(0,1.05fr) minmax(0,1.05fr);
    gap:24px;align-items:baseline}
}
.trade span{font:600 12px/1.4 var(--ff-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.44))}
.trade em{font-style:normal;font:400 15px/1.5 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.56))}
.trade b{font:650 15.5px/1.5 var(--ff-sans);color:var(--paper)}
/* The header row only makes sense where there are columns to head. */
.trade__hd{display:none}
@media(min-width:840px){
  .trade__hd{display:grid;padding-top:0;border-top:0}
  .trade__hd b{font:700 11.5px/1 var(--ff-sans);letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.4))}
  .trade__hd b:last-child{color:var(--accent)}
  .trade li > b:last-child{color:var(--accent);font-weight:700}
}
@media(max-width:839px){
  .trade em::before{content:"Debt or equity: ";color:var(--ink-3,rgba(255,255,255,.34));
    font-weight:600}
  .trade li > b:last-child{color:var(--accent)}
  .trade li > b:last-child::before{content:"This: ";color:var(--ink-3,rgba(255,255,255,.34));
    font-weight:600}
}


/* ══════════════════════════════════════════════════════════════════════════
   THE FLYWHEEL  ·  it turns
   ──────────────────────────────────────────────────────────────────────────
   Founder: "upgrade the flywheel — how it looks, moves and spins."
   It was four numbered steps on a straight horizontal line, which is the one
   shape a flywheel is not. It is now an actual wheel: four stations on a ring,
   a rotor sweeping round them, and each station lighting as the rotor passes.
   The loop never ends, because the argument is that the loop never ends.
   ══════════════════════════════════════════════════════════════════════════ */
.fw{position:relative;width:100%;max-width:520px;margin:clamp(26px,3vw,40px) auto 0;
  aspect-ratio:1}
.fw svg{position:absolute;inset:0;width:100%;height:100%}
.fw .trk{fill:none;stroke:var(--line-2);stroke-width:1.2;vector-effect:non-scaling-stroke}
/* The rotor: a bright arc that runs the ring forever. */
.fw .rot{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:44 220;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 80%,transparent))}
@media(prefers-reduced-motion:no-preference){
  .fw .rot{animation:fwSpin 8s linear infinite}
  @keyframes fwSpin{to{stroke-dashoffset:-264}}
}
@media(prefers-reduced-motion:reduce){.fw .rot{stroke-dasharray:none;opacity:.4}}

.fw__hub{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  display:grid;place-items:center;text-align:center;width:40%;aspect-ratio:1;
  border-radius:50%;padding:10px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:radial-gradient(circle at 50% 36%,
    color-mix(in srgb,var(--accent) 16%,#0a0c0d),#07090a 74%)}
.fw__hub b{font:400 clamp(20px,2.4vw,30px)/1 var(--ff-display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--accent)}
.fw__hub span{margin-top:6px;font:500 12.5px/1.45 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.5));max-width:16ch}

.fw__s{position:absolute;z-index:2;translate:-50% -50%;width:34%;
  display:grid;justify-items:center;text-align:center;gap:6px}
.fw__s i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#000;border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);
  font-style:normal;font:800 13px/1 var(--ff-sans);color:var(--accent);
  transition:background .4s ease,box-shadow .4s ease}
.fw__s b{font:700 13.5px/1.25 var(--ff-sans);color:var(--paper);max-width:18ch}
.fw__s p{margin:0;font:400 12.8px/1.45 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.55));max-width:22ch}
/* Each station lights as the rotor reaches it. */
@media(prefers-reduced-motion:no-preference){
  .fw__s i{animation:fwLit 8s linear infinite}
  .fw__s:nth-of-type(2) i{animation-delay:2s}
  .fw__s:nth-of-type(3) i{animation-delay:4s}
  .fw__s:nth-of-type(4) i{animation-delay:6s}
  @keyframes fwLit{
    0%,12%{background:var(--accent);color:var(--accent-ink,#07090a);
      box-shadow:0 0 22px color-mix(in srgb,var(--accent) 70%,transparent)}
    24%,100%{background:#000;color:var(--accent);box-shadow:none}}
}
@media(max-width:640px){
  .fw{max-width:none;aspect-ratio:auto}
  .fw svg,.fw__hub{display:none}
  .fw__s{position:static;translate:none;width:auto;justify-items:start;
    text-align:left;grid-template-columns:auto 1fr;gap:4px 14px;
    padding:16px 0;border-top:1px solid var(--line)}
  .fw__s i{grid-row:1/3;animation:none;width:34px;height:34px}
  .fw__s b,.fw__s p{max-width:38ch}
}


/* ══════════════════════════════════════════════════════════════════════════
   THE SIDE SWITCH  ·  white label ⟷ holders
   ──────────────────────────────────────────────────────────────────────────
   Founder: "for the white label we need the thing that switches between white
   label and holders — don't forget about that, I have to show the holders as
   well."
   The two decks are the same offer told to the two people in it, so moving
   between them has to be one press and it has to be in the same place on both.
   It replaces the two text links the old per-page header carried, which went
   when the header became one shared component.
   ══════════════════════════════════════════════════════════════════════════ */
.side{display:flex;justify-content:center;padding:12px var(--gutter) 0}
.side__in{display:inline-flex;padding:4px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.side__in a{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:0 18px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 13px/1 var(--ff-sans);letter-spacing:.06em;
  color:var(--ink-3,rgba(255,255,255,.55));
  transition:color .22s ease,background-color .22s ease}
.side__in a:hover{color:var(--paper)}
.side__in a[aria-current="page"]{color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.side__in a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side__in small{font:600 11px/1 var(--ff-sans);letter-spacing:.14em;
  text-transform:uppercase;opacity:.6}
@media(max-width:420px){
  .side__in a{padding:0 13px;font-size:12px}
  .side__in small{display:none}
}

/* ⛔ sr-only WAS USED BEFORE IT EXISTED. The comparison's <caption> carried it
   and nothing defined it, so the caption would have rendered as visible text
   above the table — the classic "utility class assumed into existence". It is
   the standard clip-rect recipe: out of sight, still read aloud. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══ THE FOUR-WAY COMPARISON ════════════════════════════════════════════════
   Founder's best line — "an IPO for your company without all the extra steps"
   — was built out NOWHERE. The page argued against "debt or equity" in two
   columns, but a real buyer is not choosing between us and a bank. They are
   already running a loyalty scheme, or talking to a rewards-card partner, or
   being pitched a raise. Until those three are on the page, we are answering a
   question nobody asked.

   A comparison table converts because it does the buyer's homework. This one
   states only checkable things — who owns the customer, what you give up, what
   it pays back — and ⛔ NOT ONE PRICE, because we do not publish one yet and an
   invented number reads exactly like a real one.

   ⚠ IT IS A REAL <table>. A grid of divs looks the same and is unreadable to a
   screen reader, which is the one audience that cannot scan a comparison
   visually. Row headers are <th scope="row">. */
.cmp{margin:clamp(26px,3.4vw,42px) 0 0;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-lg,20px);
  background:color-mix(in srgb,#fff 2.5%,transparent)}
.cmp table{width:100%;border-collapse:collapse;min-width:680px}
.cmp th,.cmp td{text-align:left;padding:15px 18px;vertical-align:top;
  border-bottom:1px solid var(--line-2,rgba(255,255,255,.055))}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font:700 10px/1.2 var(--ff-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap;padding-top:18px;padding-bottom:14px}
/* OURS IS THE LAST COLUMN AND IT IS LIT. Not with a fill — see-through, accent
   hairline, exactly like every other control on this product. */
.cmp thead th:last-child{color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 26%,transparent),
             inset -1px 0 0 color-mix(in srgb,var(--accent) 26%,transparent)}
.cmp td:last-child{color:var(--ink-1);font-weight:600;
  background:color-mix(in srgb,var(--accent) 4.5%,transparent);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 18%,transparent),
             inset -1px 0 0 color-mix(in srgb,var(--accent) 18%,transparent)}
.cmp tbody tr:last-child td:last-child{
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 18%,transparent),
             inset -1px 0 0 color-mix(in srgb,var(--accent) 18%,transparent),
             inset 0 -1px 0 color-mix(in srgb,var(--accent) 26%,transparent)}
.cmp th[scope=row]{font:600 13px/1.4 var(--ff-sans);color:var(--ink-2);white-space:nowrap}
.cmp td{font:400 13px/1.5 var(--ff-sans);color:var(--ink-3)}
.cmp .no{color:var(--ink-4)}
.cmp .yes{color:var(--accent)}
.cmp__note{margin:14px 0 0;font:400 12.5px/1.5 var(--ff-sans);color:var(--ink-4)}
@media (max-width:760px){
  .cmp th,.cmp td{padding:12px 13px;font-size:12.5px}
  .cmp thead th{font-size:9px}
}

/* ══ THE MULTI-STEP FORM ════════════════════════════════════════════════════
   Three short steps instead of one long column. The steps are presentation —
   every field is in the DOM from the start, so JS-off posts the lot. */
.form--steps{position:relative}
.form__prog{grid-column:1/-1;height:3px;border-radius:99px;
  background:rgba(255,255,255,.07);overflow:hidden;margin:0 0 6px}
.form__prog i{display:block;height:100%;border-radius:99px;background:var(--accent);
  width:calc(var(--at,1) / var(--n,3) * 100%);
  transition:width .42s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.form__step{grid-column:1/-1;display:grid;gap:14px;border:0;padding:0;margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.form__step[hidden]{display:none}
.form__lg{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;padding:0;
  font:700 11px/1 var(--ff-sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3)}
.form__lg b{color:var(--accent);font-variant-numeric:tabular-nums}
.form__hint{margin:0;font:400 13px/1.5 var(--ff-sans);color:var(--ink-4)}
.form__nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
/* ⛔ SEE-THROUGH, like every control on this product. The bands are the one
   place a fill would be tempting and it is still wrong. */
.form__bands{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(122px,1fr))}
.form__bands label{position:relative;display:block;cursor:pointer}
.form__bands input{position:absolute;opacity:0;width:0;height:0}
.form__bands span{display:block;text-align:center;padding:13px 10px;border-radius:12px;
  border:1px solid var(--line);background:color-mix(in srgb,#fff 2.5%,transparent);
  font:600 13px/1 var(--ff-sans);color:var(--ink-2);
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.form__bands label:hover span{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.form__bands input:checked + span{
  border-color:color-mix(in srgb,var(--accent) 62%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink-1)}
.form__bands input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.form [aria-invalid=true]{border-color:color-mix(in srgb,#FF5C6E 62%,transparent)}
.form__state{grid-column:1/-1;margin:4px 0 0;font:400 13.5px/1.55 var(--ff-sans);
  color:var(--ink-3)}
.form__state:empty{display:none}
.form__state.is-ok{color:var(--ink-2)}
.form__state.is-ok b{color:var(--accent)}
.form__state.is-err{color:#FF8C97}
.form__state a{color:var(--accent)}
@media (max-width:640px){
  .form__step{grid-template-columns:minmax(0,1fr)}
}


/* ══════════════════════════════════════════════════════════════════════════
   THE LAPTOP, REBUILT — "it's like a 1/10, it needs to feel like the actual
   desktop version of the platform" (founder, 2026-09-21)
   ──────────────────────────────────────────────────────────────────────────
   Shot on its own at 2x (.axi/_macshot.mjs) the first build was not a small
   version of the product, it was a wireframe of it. Measured against /v2/axis,
   six things were wrong and all six are material, not layout:

   1 · THE RAIL ICONS WERE GREY CIRCLES. Six identical dots read as disabled
       radio buttons — which is exactly what made the screen look unfinished.
       They now carry the PRODUCT'S OWN glyphs, lifted path-for-path from
       axis-app.js (wallet · stake · earn · vaultd · token · dot) and painted
       as masks, so the laptop cannot drift from the real rail.
   2 · "Staking pools" and "The treasury" WRAPPED to two lines in a 74px rail
       and collided with their own numbers. The rail is 90px and nothing wraps.
   3 · NOTHING HAD A BORDER. Every surface was a flat fill, and a flat fill at
       4.5% white is the one thing the real product never does — it is glass:
       a hairline, a gradient, and a lit top edge.
   4 · THE FOUR ACTIONS WERE GREY SLABS. ⛔ Hard rule, caught on four controls
       before this one: ALL BUTTONS SEE-THROUGH, accent border, never a fill.
   5 · DEPTH WAS MISSING ENTIRELY. .mb__bar was written and never placed. Pool
       rows now carry it as a SHAPE along the foot of the row — never a number,
       because we do not publish pot sizes.
   6 · NO SPECULAR. A screen with no reflection reads as a printed rectangle.
       One diagonal sheen and one accent wash is the whole difference.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · HARDWARE ────────────────────────────────────────────────────────
   Aluminium is not one gradient. Four inset hairlines (top bright, sides
   half, bottom faint) are what make an extrusion read as milled metal. */
.mb__lid{
  background:linear-gradient(176deg,#34383d 0%,#24272b 17%,#15171a 54%,#0b0d0f 100%);
  box-shadow:
    0 calc(34px * var(--mb-s)) calc(80px * var(--mb-s)) rgba(0,0,0,.78),
    0 calc(6px * var(--mb-s))  calc(18px * var(--mb-s)) rgba(0,0,0,.52),
    0 0 calc(56px * var(--mb-s)) color-mix(in srgb,var(--bc,var(--accent)) 15%,transparent),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 1px 0 0 rgba(255,255,255,.055),
    inset -1px 0 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(255,255,255,.04);
}
/* A housing with a glint, not a drawn dot. */
.mb__cam{
  width:calc(6px * var(--mb-s));height:calc(6px * var(--mb-s));
  background:radial-gradient(circle at 34% 30%,
    rgba(255,255,255,.34) 0%,rgba(90,110,130,.28) 26%,#060708 62%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 calc(3px * var(--mb-s)) rgba(0,0,0,.8);
}
.mb__base{
  background:linear-gradient(180deg,#44484e,#2a2d31 34%,#17191c 70%,#0c0e10);
  box-shadow:0 calc(16px * var(--mb-s)) calc(30px * var(--mb-s)) rgba(0,0,0,.72),
             inset 0 1px 0 rgba(255,255,255,.22);
}

/* ── 2 · THE SCREEN IS GLASS ─────────────────────────────────────────────
   Both layers are position:absolute, so neither becomes a third grid column.
   The sheen is screen-blended at 7% — any stronger and it fogs the content. */
.mb__scr::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 6% -8%,
    color-mix(in srgb,var(--bc,var(--accent)) 16%,transparent) 0%,transparent 58%);
}
.mb__scr::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:linear-gradient(116deg,
    rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 16%,transparent 38%);
  mix-blend-mode:screen;
}
.mb__scr{grid-template-columns:calc(90px * var(--mb-s)) 1fr}
.mb__rail,.mb__body{position:relative;z-index:2}

/* ── 3 · THE RAIL ────────────────────────────────────────────────────────
   Nothing wraps. The brand sits in a glass chip the way it does in the shell. */
.mb__rail{border-right:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.mb__mk{
  padding:calc(4px * var(--mb-s)) calc(6px * var(--mb-s));
  border-radius:calc(6px * var(--mb-s));
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  color:#fff;letter-spacing:.10em}
.mb__rail li{white-space:nowrap;position:relative;
  padding:calc(4.5px * var(--mb-s)) calc(5px * var(--mb-s))}
.mb__rail li em{font-variant-numeric:tabular-nums;opacity:.72}
/* "ROBINHOOD CHAIN 4663" broke after the word CHAIN and left 4663 alone on a
   second line, which reads as two facts instead of one address. */
.mb__chain{white-space:nowrap;font-size:calc(5.8px * var(--mb-s));letter-spacing:.07em}

/* ⚠ SPECIFICITY, NOT SOURCE ORDER. The hairline that finishes each eyebrow
   stopped 133px short of the rows under it because `.sec p` (0,1,1) in this
   same file caps every paragraph at --read, and a plain `.mb__eb` (0,1,0)
   loses to it no matter how far down the file it sits. `.mb .mb__eb` is
   (0,2,0) and wins. This is the same trap that forced `max-width:none` onto
   .mb__rail li and .mb__stk li when the component was first built. */
.mb .mb__eb,.mb .mb__two{max-width:none}

/* THE PRODUCT'S OWN GLYPHS, as masks — one source of truth with axis-app.js.
   A mask paints currentColor, so the lit row's icon turns accent for free. */
.mb__rail li i{
  background:currentColor;border-radius:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;opacity:.62}
.mb__rail li.on i{opacity:1}
.mb__rail ul:first-of-type li:nth-child(1) i{-webkit-mask-image:var(--ic-wallet);mask-image:var(--ic-wallet)}
.mb__rail ul:first-of-type li:nth-child(2) i{-webkit-mask-image:var(--ic-stake);mask-image:var(--ic-stake)}
.mb__rail ul:first-of-type li:nth-child(3) i{-webkit-mask-image:var(--ic-earn);mask-image:var(--ic-earn)}
.mb__rail ul:first-of-type li:nth-child(4) i{-webkit-mask-image:var(--ic-vaultd);mask-image:var(--ic-vaultd)}
.mb__rail ul:first-of-type li:nth-child(5) i{-webkit-mask-image:var(--ic-token);mask-image:var(--ic-token)}
.mb__rail ul:last-of-type li:nth-child(1) i{-webkit-mask-image:var(--ic-dot);mask-image:var(--ic-dot)}

/* The lit row gets the shell's pill, not a flat tint. */
.mb__rail li.on{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--bc,var(--accent)) 20%,transparent),
    color-mix(in srgb,var(--bc,var(--accent)) 7%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bc,var(--accent)) 26%,transparent)}
.mb__rail li.on::before{
  content:"";position:absolute;left:calc(-1px * var(--mb-s));top:22%;bottom:22%;
  width:calc(2px * var(--mb-s));border-radius:calc(2px * var(--mb-s));
  background:var(--bc,var(--accent));
  box-shadow:0 0 calc(6px * var(--mb-s)) var(--bc,var(--accent))}

/* ⛔ SEE-THROUGH, accent border. It is a control, and controls are never filled. */
.mb__go{
  border:1px solid color-mix(in srgb,var(--bc,var(--accent)) 34%,transparent);
  background:color-mix(in srgb,var(--bc,var(--accent)) 10%,transparent)}
.mb__go b{color:var(--bc,var(--accent))}

/* ── 4 · THE BODY — PANELS, NOT BARS ─────────────────────────────────────
   The account block is the product's glass card: hairline, gradient, lit top
   edge. Before this it was loose text on the screen background with the card
   floating beside it, which is what read as a wireframe. */
/* ⚠ THE LID IS A FIXED 16:10 AND EVERY PADDING HERE IS PAID FOR IN IT.
   The first pass grew six surfaces at once and put the last two earn rows
   57.5px below the glass — with the rail's View-vault control dragged out
   with them, because the grid row stretches to the taller column, so a body
   overflow silently truncates the rail too. Every number below is measured
   by .axi/_macfit.mjs, which fails when any block leaves the screen. */
.mb__body{gap:calc(5px * var(--mb-s))}
.mb__top{
  align-items:center;
  padding:calc(6px * var(--mb-s)) calc(9px * var(--mb-s));
  border-radius:calc(8px * var(--mb-s));
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.mb__two{margin-top:calc(3px * var(--mb-s))}
.mb__card{width:calc(104px * var(--mb-s));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 calc(7px * var(--mb-s)) calc(18px * var(--mb-s)) rgba(0,0,0,.72),
             0 0 calc(20px * var(--mb-s)) color-mix(in srgb,var(--bc,var(--accent)) 30%,transparent)}

.mb__acts li{padding:calc(4.5px * var(--mb-s)) 0;
  border:1px solid color-mix(in srgb,var(--bc,var(--accent)) 26%,transparent);
  background:color-mix(in srgb,var(--bc,var(--accent)) 8%,transparent);
  color:rgba(255,255,255,.82);letter-spacing:.06em}

/* Rows are glass with a hairline, and they separate from the screen. */
.mb__stk{gap:calc(3.5px * var(--mb-s))}
.mb__stk li{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  padding:calc(4px * var(--mb-s)) calc(7px * var(--mb-s))}

/* ⚠ DEPTH IS A SHAPE, NEVER A NUMBER (axis-pools.js header). It runs along the
   foot of the pool row so the three pools read as unequal without printing a
   pot size we do not publish. */
.mb__stk--pool li::after{
  content:"";position:absolute;left:0;bottom:0;height:calc(1.6px * var(--mb-s));
  width:var(--d,62%);opacity:.3;
  border-radius:0 calc(2px * var(--mb-s)) calc(2px * var(--mb-s)) 0;
  background:repeating-linear-gradient(90deg,
    var(--bc,var(--accent)) 0 calc(3px * var(--mb-s)),
    transparent calc(3px * var(--mb-s)) calc(5px * var(--mb-s)))}
.mb__stk--pool li:nth-child(1){--d:74%}
.mb__stk--pool li:nth-child(2){--d:52%}
.mb__stk--pool li:nth-child(3){--d:38%}

/* An earn row is a rate, not a pool — it gets the accent edge instead. */
.mb__stk--earn li::before{
  content:"";position:absolute;left:0;top:26%;bottom:26%;
  width:calc(2px * var(--mb-s));border-radius:0 calc(2px * var(--mb-s)) calc(2px * var(--mb-s)) 0;
  background:color-mix(in srgb,var(--bc,var(--accent)) 70%,transparent)}
/* Dividends have no rate — the word sits quieter than the two that do. */
.mb__stk--earn li span.q{color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:calc(6.5px * var(--mb-s))}

/* The glyph set, declared once. Paths are copied from axis-app.js `I`. */
.mb{
  --ic-wallet:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.6h16v10.4H3ZM19 10.4h2.2v3.2H19M16.2 12h.01"/></svg>');
  --ic-stake:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.2c0-1.2 3.6-2.2 8-2.2s8 1 8 2.2-3.6 2.2-8 2.2-8-1-8-2.2ZM4 7.2v4.4c0 1.2 3.6 2.2 8 2.2s8-1 8-2.2V7.2M4 11.6V16c0 1.2 3.6 2.2 8 2.2s8-1 8-2.2v-4.4"/></svg>');
  --ic-earn:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.4V13M9.3 19.4V9.2M14.6 19.4v-6.1M19.9 19.4V5.6M3.4 9.9 9.3 5.2l5.3 3.6 5.9-4.6"/></svg>');
  --ic-vaultd:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18v16H3ZM12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8ZM12 5.2V8m0 8v2.8m3.4-6.8H18M6 12h2.6"/></svg>');
  --ic-token:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5v8.5l6 6M20.5 12a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0Z"/></svg>');
  --ic-dot:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>');
}


/* ══════════════════════════════════════════════════════════════════════════
   THE ICON ROW — MACHINED, NOT STICKERED
   ──────────────────────────────────────────────────────────────────────────
   Founder, on the customers-become-holders row: "we MUST fix this part and
   upgrade the icons as well, super important."

   The plate was one stroked circle over a 7% wash, which at 54px is the same
   object every template on the internet ships. Three changes and it reads as
   hardware: a SECOND hairline inside the first (one ring reads as a sticker,
   two read as a machined bezel), light coming from above rather than an even
   tint, and a real shadow so the disc sits on the page instead of being
   printed on it.

   Glyphs were changed in the markup for the same reason, and the two worst
   were not style problems at all: "A tokenized holding" was a CLOCK, and
   "They stay" was a five-pointed STAR — a rating glyph under a line about
   people not churning. A picture that contradicts its own caption is not an
   icon, it is a decoration.
   ══════════════════════════════════════════════════════════════════════════ */
.icons i{
  position:relative;
  width:58px;height:58px;
  border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);
  background:
    radial-gradient(circle at 50% 20%,
      color-mix(in srgb,var(--accent) 17%,transparent) 0%,transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  box-shadow:
    0 0 0 6px color-mix(in srgb,var(--accent) 4%,transparent),
    0 10px 26px rgba(0,0,0,.6),
    0 0 30px color-mix(in srgb,var(--accent) 12%,transparent),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.icons i::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 13%,transparent);
  pointer-events:none;
}
.icons i svg{ position:relative; z-index:1; width:24px; height:24px; stroke-width:1.6; }

/* The column rules were full-height hairlines at the same weight as a border,
   so five cards read as a table. Faded at both ends they separate without
   drawing. */
@media(min-width:760px){
  .icons li{
    border-left:0;
    position:relative;
  }
  .icons li:not(:first-child)::before{
    content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;
    background:linear-gradient(180deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   THE KEY-ART BAND
   ──────────────────────────────────────────────────────────────────────────
   Founder shipped a set of finished 16:9 key frames and asked for them on the
   home page and on /whitelabel. They are FINISHED ARTWORK — headline, card,
   ticker and logo row are baked into the pixels — so the page must not print
   a heading over them or crop them. The band's whole job is to get out of the
   way: full bleed, correct aspect, a hairline top and bottom, nothing else.

   ⚠ WEIGHT. These arrived as 2752x1536 PNGs at 4-10MB each — 96MB for the set,
   on a site whose domComplete is already 8.8s. They are served as 1600w WebP
   (1.2MB for the whole set, 99% off) and the PNG masters live in
   media/original/, which deploy.sh excludes. Never reference a .png here.
   ══════════════════════════════════════════════════════════════════════════ */
.keyart{
  position:relative;
  margin:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#000;
  overflow:hidden;
}
.keyart img{
  display:block;width:100%;height:auto;
  /* The art is authored 16:9; declaring it stops the band collapsing to zero
     and then jolting the page down when the image decodes. */
  aspect-ratio:16/9;object-fit:cover;
}
/* A band that is only ever seen once does not need an entrance; it needs to be
   there when the reader arrives. The reveal is a fade with no travel, so a
   slow connection shows a black band rather than a sliding one. */
@media(prefers-reduced-motion:no-preference){
  .keyart img{animation:keyartIn .7s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)) both}
  @keyframes keyartIn{from{opacity:0}to{opacity:1}}
}


/* ── THE VIDEO BAND ──────────────────────────────────────────────────────
   Same object as .keyart, moving. Founder supplied the cut and asked for it
   near the top of /whitelabel with no audio.

   ⛔ THE AUDIO TRACK IS REMOVED FROM THE FILE, not muted in markup. A muted
   <video> that still carries AAC downloads those bytes anyway, and iOS has
   historically refused inline autoplay on a file with an audio stream at all.
   `muted` stays on the element as well — belt and braces, and Chrome requires
   the attribute for autoplay regardless of what the container holds.

   ⚠ WEIGHT: the source was 13.6MB at 10s. Served at 1.1MB (1280w, CRF 26,
   faststart). It is `preload="none"` behind a poster, so a reader who never
   reaches it pays only for a 61KB still. */
/* ⛔ THE BAND USES THE FILM'S OWN ASPECT, NOT 16/9. The cut is 1280x732
   (1.749:1); forcing it into a 16:9 box with object-fit:cover shaved ~1.6% off
   the top and bottom — which on this cut is exactly where the headline sits.
   The popup was fixed for the same reason; the band had the same bug and was
   missed because the crop is small enough to look like framing.
   `aspect-ratio` from the real dimensions means there is nothing to crop. */
.keyart--film video{
  display:block;width:100%;height:auto;
  aspect-ratio:1280/732;object-fit:contain;
  background:#000;
}
/* The figure must not hold a 16:9 box around a 1.749:1 film either, or the
   letterbox just moves from the video to its frame. */
.keyart--film{aspect-ratio:auto}
@media(prefers-reduced-motion:reduce){
  /* A looping autoplay film is exactly what this setting exists to stop.
     The poster still carries the frame, so nothing is lost but the motion. */
  .keyart--film video{display:none}
  .keyart--film{background:#000 center/cover no-repeat var(--film-poster,none);aspect-ratio:16/9}
}


/* ── PLAY WITH SOUND ─────────────────────────────────────────────────────
   The silent band is wallpaper; this is the way into the cut with audio.
   ⛔ SEE-THROUGH, accent border — a control on this product is never a filled
   slab, and this one sits on artwork, where a solid fill would be worse. */
.keyart--play{cursor:pointer}
.keyart__play{
  position:absolute;left:50%;bottom:clamp(14px,2.4vw,26px);translate:-50% 0;
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:0 16px 0 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);
  background:color-mix(in srgb,#05060A 62%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--accent);cursor:pointer;
  font:700 12px/1 var(--ff-sans);letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 8px 26px rgba(0,0,0,.6);
}
.keyart__play i{
  width:20px;height:20px;flex:none;display:block;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent);
  position:relative;
}
/* A triangle drawn with borders — no glyph to load, no font to wait for. */
.keyart__play i::after{
  content:"";position:absolute;left:50%;top:50%;
  margin:-4px 0 0 -2.5px;
  border-left:7px solid var(--accent);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
}
@media(prefers-reduced-motion:no-preference){
  .keyart__play{transition:background .2s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),
                           scale .24s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
  .keyart--play:hover .keyart__play{background:color-mix(in srgb,var(--accent) 14%,transparent);scale:1.04}
  .keyart__play:active{scale:.96}
}
@media(max-width:560px){.keyart__play span{display:none}.keyart__play{padding:0 12px}}

/* ── THE DIALOG ──────────────────────────────────────────────────────────
   Native <dialog>, so focus trapping, Escape and inertness are the platform's
   job rather than three more things to get wrong. */
.axfilm{
  border:0;padding:0;background:transparent;
  width:min(1180px,94vw);max-width:none;max-height:none;
  color:var(--paper);
}
.axfilm::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}
/* ⛔ NO FORCED ASPECT HERE. Founder: "the white label pop-up is also cropped."
   It was: the dialog declared aspect-ratio:16/9 while the cut is 1280x732
   (1.753:1), so every frame lost a sliver top and bottom — which on this cut
   is exactly where the headline sits. A <video> already knows its own shape;
   width + height:auto lets it use it, and there is nothing left to crop. */
.axfilm__v{
  display:block;width:100%;height:auto;max-height:86vh;
  object-fit:contain;
  background:#000;border-radius:var(--r-md,14px);
  box-shadow:0 30px 90px -20px rgba(0,0,0,.9),
             0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);
}
.axfilm__x{
  position:absolute;top:-46px;right:0;
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;
}
.axfilm__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round}
@media(max-width:700px){.axfilm__x{top:auto;bottom:-52px;right:50%;translate:50% 0}}


/* ── KEY ART IS A FIGURE, NOT A BILLBOARD ────────────────────────────────
   Founder: "those images are way too large. They should be only one-third of
   that size, put in certain places."

   They shipped full-bleed, so a 16:9 plate ate a whole 1440x810 viewport and
   the page read as a slideshow with paragraphs between it. A third of the
   column is the brief, so the band becomes a contained figure sitting in the
   text measure: it punctuates the argument instead of interrupting it.

   ⚠ NOT A THIRD ON A PHONE. Below 700px a third of the column is 120px wide
   and the headline baked into the plate stops being readable — the art carries
   its own type, which is exactly the thing that cannot be scaled past legible.
   Full width there, a third of the column above it. */
.keyart{
  width:min(560px,42vw);
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md,14px);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.9);
}
/* The film is the one exception and stays wide — it is the page's opening
   statement and it carries motion, which a 560px box throws away. */
.keyart--film{width:min(980px,86vw)}
@media(max-width:700px){
  .keyart,.keyart--film{width:100%;border-radius:0;border-left:0;border-right:0}
}


/* ── THE DECK CALL TO ACTION ─────────────────────────────────────────────
   ⛔ SEE-THROUGH, accent border. Caught on four controls before this one. */
.deck-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,2.4vw,32px)}
.deck-cta__a{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  color:var(--accent);text-decoration:none;
  font:700 15px/1 var(--ff-sans);letter-spacing:.04em;
}
.deck-cta__a--ghost{
  border-color:var(--line);
  background:rgba(255,255,255,.03);
  color:var(--ink-2,rgba(255,255,255,.72));
}
@media(prefers-reduced-motion:no-preference){
  .deck-cta__a{transition:background .2s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),
                          scale .22s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
  .deck-cta__a:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);scale:1.03}
  .deck-cta__a--ghost:hover{background:rgba(255,255,255,.07)}
  .deck-cta__a:active{scale:.97}
}

/* ── VIEW THE DECK, IN THE HERO ──────────────────────────────────────────
   Sits between the primary fill button and the text link, so the hero reads
   as: commit · look · browse.
   ⛔ See-through with an accent border — never a second filled slab next to
   the primary, which is the fastest way to destroy a call-to-action hierarchy. */
.btn--deck{
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent);
}
@media(prefers-reduced-motion:no-preference){
  .btn--deck{transition:background .2s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),
                        scale .22s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
  .btn--deck:hover{background:color-mix(in srgb,var(--accent) 17%,transparent);scale:1.03}
  .btn--deck:active{scale:.97}
}


/* ══════════════════════════════════════════════════════════════════════════
   MEDIA SECTION — a plate on one side, the argument on the other
   ──────────────────────────────────────────────────────────────────────────
   Founder, on the REGULARS/INVESTORS band sitting alone at full width:
   "this needs to be built as a section where it's on the left side or the
   right side, and then there's text on the other side. That goes for the
   video part too: its own section, not so large, slightly smaller."

   The bare .keyart band was a picture with nothing to say and a lot of air
   around it. A plate earns its space when it is answering a sentence, so the
   media and the copy now sit in one two-column section and alternate sides
   down the page — which also stops four bands reading as a slideshow.

   ⚠ NOT A FIXED HEIGHT. The column heights come from whichever side is
   taller; the media is capped by width alone. A fixed height here is the same
   bug that truncated copy on the laptop and in the deck.
   ══════════════════════════════════════════════════════════════════════════ */
.medsec{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,72px);
  align-items:center;
  margin:clamp(30px,4vw,56px) 0 0;
}
.medsec--flip .medsec__fig{order:2}
.medsec__fig{margin:0;min-width:0}
.medsec__fig img,.medsec__fig video{
  display:block;width:100%;height:auto;
  border-radius:var(--r-md,14px);
  border:1px solid var(--line);
  background:#000;
  box-shadow:0 22px 60px -28px rgba(0,0,0,.95);
}
/* the film keeps its own 1.749:1 shape — never a forced 16:9, which clipped
   the headline off the top of the cut once already */
.medsec__fig video{aspect-ratio:1280/732;object-fit:contain}
.medsec__txt{min-width:0;display:grid;gap:14px;align-content:center}
.medsec__txt .eyebrow{margin:0}
.medsec__txt h3{
  margin:0;font:800 clamp(26px,2.6vw,40px)/1.1 var(--ff-sans);
  letter-spacing:-.02em;color:var(--paper);max-width:18ch;text-wrap:balance;
}
.medsec__txt h3 em{font-style:normal;color:var(--accent)}
.medsec__txt p{
  margin:0;font:400 clamp(15px,1.25vw,18px)/1.6 var(--ff-sans);
  color:var(--ink-3,rgba(255,255,255,.58));max-width:44ch;text-wrap:pretty;
}
.medsec__txt p b{color:var(--ink-2,rgba(255,255,255,.78));font-weight:700}
@media(max-width:860px){
  .medsec{grid-template-columns:1fr;gap:20px}
  .medsec--flip .medsec__fig{order:0}
}

/* ── the one-page lead form ──────────────────────────────────────────────
   His note: "let's upgrade that into one form right there." With the wizard
   gone the three fieldsets are sections of one form, so they need air between
   them and a rule to read as sections rather than as one long list. */
.form--one .form__step + .form__step{
  margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line);
}
.form__nav--send{margin-top:clamp(14px,1.8vw,22px)}
/* the first legend sat straight on top of its first label — the wizard used to
   put a progress bar between them */
.form--one .form__step:first-of-type .form__lg{margin-bottom:8px}

/* ── THE ON-CHAIN HERO BAND (homepage) ─────────────────────────────────────
   ⛔ IT WAS CROPPED, AND THE CROP WAS MINE. I capped the height at 52vh and
   set object-fit:cover, which slices the top and bottom off the artwork —
   reported as "it's cut off". An image whose headline is burnt in cannot be
   cropped; there is nothing to crop that is not content.
   ⛔ AND IT HAS TO SIT FLUSH AT THE TOP. It was inside .wrap, so it carried
   the page gutters and a radius and floated in the middle of the fold.
   Full-bleed, square corners, hard against the nav, natural aspect ratio.
   ⚠ 100vw + the negative margin breaks it out of .wrap without touching
   .wrap itself, which every other section on this page depends on. */
.hero .heroband{
  position:relative;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:clamp(16px,3vh,34px);
  border:0; border-radius:0; box-shadow:none; overflow:hidden;
  max-height:none;
}
.hero .heroband img{
  width:100%; height:auto; max-height:none;   /* no crop, ever */
  object-fit:fill; object-position:center;
  display:block;
}
/* the hero section itself must not hold the band away from the top */
.hero:has(.heroband){ padding-top:0 }
@media (max-width:760px){
  .hero .heroband{ margin-bottom:14px }
}

/* the phone treatment: crop to the subject, real text over it */
.hero .heroband__say{ display:none }
@media (max-width:760px){
  .hero .heroband{ margin-bottom:0 }
  .hero .heroband img{
    height:auto; width:100%;
    object-fit:contain;
    /* frame the operator and the card, which live on the RIGHT of the
       artwork — this deliberately pushes the burnt-in headline out of frame
       rather than shrinking it to 9px */
    /* ⚠ 92%, NOT 78%. At 78% the tail of the burnt-in word "business" was
       still clipping into the left edge — a stray "ess" floating over the
       artwork. The crop has to clear that type entirely, not nearly. */
    object-position:92% center }
  .hero .heroband{ position:relative }
  /* ⛔ THE SCRIM AND THE OVERLAY TEXT ARE BOTH GONE. They existed only to
     make a cropped mobile frame readable; with the full frame showing, the
     video already carries its headline and anything on top of it is a second
     copy of the same words. */
  .hero .heroband::after{ content:none }
  .hero .heroband__say{ display:none }
  .hero .heroband__say b{
    font:800 clamp(27px,8.4vw,36px)/1.05 'Manrope',system-ui;
    letter-spacing:-.035em; color:#fff }
  .hero .heroband__say em{ font-style:normal; color:var(--accent,#C8FF00) }
  .hero .heroband__say span{
    font:400 13px/1.45 'Manrope',system-ui; color:rgba(255,255,255,.76) }
}
/* the hero banner video inherits everything the still had */
.hero .heroband__vid{ width:100%; height:auto; display:block;
  object-fit:fill; background:#000 }
/* ⛔ NO CROP ON MOBILE. "Mobile needs to be the full size together, and then
   you don't put any text. It already has the text on the video."
   I had been cropping to 92% to push the burnt-in headline out of frame and
   substituting live HTML text. He wants the artwork whole — the video's own
   type included — so the frame is shown complete at its natural aspect and
   the overlay is gone. */
@media (max-width:760px){
  .hero .heroband__vid{ height:auto; width:100%;
    object-fit:contain; object-position:center }
}