/* ═══════════════════════════════════════════════════════════════════════
   The public design system: the landing page, and every page that continues
   it.

   It lived inside `landing.html` as one page's `<style>` block, which was
   right while there was one public page. There are two now — `/security` is
   the same document continued, and the owner asked for it to look like it —
   and a second copy of a visual language is a second visual language a week
   later.

   What is here is everything the landing page had, unchanged, so nothing had
   to be judged "shared" while moving it. A page that uses a tenth of it pays
   one cached request; a page that diverges from it cannot.

   Naming, from the block this came from: a one-letter modifier is a collision
   waiting to happen (`.btn.g` for the ghost button met a top-level `.g` for a
   gate row, and every ghost button on the page laid out as a four-column
   grid). Modifiers here are words.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
     Vaeron — the front door.

     Built on the app's own tokens and on the app's one rule: colour is signal,
     never decoration. Graphite and platinum throughout; green only where it
     means money, red only where it means a loss.

     Every colour below is either a `var()` from `brand.css` or one of the
     graphite/platinum chrome literals the palette test allows. A landing page
     that invents a hue invents a meaning for it.

     Two things this sheet learned the hard way:

       * The `font:` shorthand REQUIRES a family. `font:600 clamp(...)` with
         none is invalid and the browser discards the whole declaration — that
         is how the pricing figure silently collapsed to inherited size. Any
         unusual size is written longhand.

       * A one-letter modifier is a collision waiting to happen. `.btn.g` for
         the ghost button met a top-level `.g` for a gate row, and every ghost
         button on the page was laid out as a four-column grid 98px wide.
         Modifiers here are words.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Local names for the app's tokens, so the rules below read in this page's
     own vocabulary without redefining a single value. */
  /* `--edge` and `--faint` were here and are in `brand.css` now: two public
     pages read them, and a token defined in one page's sheet is a token the
     other one does not have. `--gut` stays — it is this layout's own column,
     not a colour anything else would want. */
  /* One measure for every band on every public page. It was 1240px written
     out in six places; on a 27-inch screen that is a column down the middle
     with the product's own full-width chrome either side of it, and the
     owner asked for the site to feel like the app rather than like a brochure
     about it. The app's own pages are full-bleed, so this is as close to that
     as a reading measure allows. */
  :root{ --gut:74px; --page:1440px; }

  html{scroll-behavior:smooth}
  body{
    margin:0;color:var(--text);font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
    background:
      radial-gradient(ellipse 100% 46% at 50% -6%, rgba(220,234,242,.055), transparent 62%),
      linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px) 0 0/100% 52px,
      linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px) 0 0/52px 100%,
      var(--canvas);
  }
  h1,h2,h3,h4{margin:0;text-wrap:balance;overflow-wrap:break-word}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
  .tnum{font-variant-numeric:tabular-nums}
  /* Grid and flex children default to min-width:auto, which refuses to shrink
     below their content and pushes long headlines off the side of the page. */
  .head>*,.vaultin>*,.pgrid>*,.topband>*,.feeds>*,.frow>*,.krow>*,.agrow>*,
  .basics>*,.steps>*,.books>*{min-width:0}
  @keyframes bl{0%,100%{opacity:1}50%{opacity:.28}}

  /* ── the bar ─────────────────────────────────────────────────────────── */
  .lnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;
    max-width:var(--page);margin:0 auto;padding:18px 30px;
    background:rgba(5,6,8,.82);backdrop-filter:blur(12px)}
  .lnav .brand{display:flex;align-items:center;gap:11px;--emblem:30px;
    font-weight:700;font-size:19px;letter-spacing:-.025em}
  .lnav .links{display:flex;gap:30px;font-size:14px;color:var(--text-secondary)}
  .lnav .links a{white-space:nowrap;display:inline-flex;align-items:center;
    transition:color .16s}
  .lnav .links a:hover{color:var(--text)}
  .lnav .sp{flex:1}
  .lnav .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:0 18px;border-radius:9px;white-space:nowrap;
    font-family:var(--font-sans);font-weight:600;font-size:13.5px;line-height:1}
  .lnav .cta .arw{transition:transform .16s}
  .lnav .cta:hover .arw{transform:translateX(3px)}
  .lnav .prog{position:absolute;left:0;bottom:0;height:1px;width:0;
    background:var(--accent);opacity:.5}
  .navtoggle{display:none;width:44px;padding:0;border-radius:9px;
    background:transparent;box-shadow:none;border:1px solid var(--edge);
    flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .navtoggle span{display:block;width:15px;height:1.5px;background:var(--text);border-radius:2px}

  /* Anything a thumb has to hit. 44px is what Apple and Google both publish,
     and the bar's own button and menu toggle were under it. */
  .lnav .cta, .navtoggle, .btn, .lnav .links a {
    min-height:44px;
  }

  /* ── status rail ─────────────────────────────────────────────────────── */
  .rail{border-bottom:1px solid var(--line);
    font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  /* One line, never two: it wrapped once everybody's figures joined it and
     stood three times as tall. Items drop out by width below instead. */
  .railw{max-width:var(--page);margin:0 auto;padding:10px 30px;display:flex;gap:26px;
    align-items:center;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .railw .on{color:var(--green);display:flex;align-items:center;gap:7px}
  .railw .on i{width:5px;height:5px;border-radius:50%;background:var(--green);
    box-shadow:0 0 8px rgba(69,222,140,.9);animation:bl 2.1s ease-in-out infinite}
  .railw .sp{margin-left:auto}
  .railw [hidden]{display:none}
  /* Users' P&L in the colour of its sign: `public.js` marks it. */
  .railw b.pos{color:var(--green)}
  .railw b.neg{color:var(--red)}
  @media (max-width:1240px){ .railw .r2{display:none} }
  @media (max-width:1080px){ .railw .sp{display:none} }
  @media (max-width:940px){ .railw .r1{display:none} }
  @media (max-width:760px){ .railw .lg{display:none} }
  /* The narrowest phones: measured, the three figures need 355px at the
     phone size and a 320px screen has 320. */
  @media (max-width:350px){ .railw{font-size:9px;gap:10px} }

  /* ── buttons ─────────────────────────────────────────────────────────── */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border-radius:9px;cursor:pointer;font-family:var(--font-sans);font-weight:600;
    font-size:14.5px;line-height:1;min-height:48px;padding:0 24px;
    border:1px solid transparent;flex:0 0 auto;width:auto;white-space:nowrap;
    transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
  .btn:hover{transform:translateY(-1px)}
  .btn.ghost{border-color:var(--edge);color:var(--text);
    background:rgba(255,255,255,.02);box-shadow:none}
  .btn.ghost:hover{border-color:var(--text-secondary);background:rgba(255,255,255,.05)}
  .btn .arw{transition:transform .16s}
  .btn:hover .arw{transform:translateX(3px)}

  /* ── section skeleton ────────────────────────────────────────────────── */
  .band{max-width:var(--page);margin:0 auto;padding:68px 30px;position:relative}
  .band::before{content:"";position:absolute;left:30px;right:30px;top:0;height:1px;
    background:linear-gradient(90deg,var(--edge),transparent 62%)}
  .head{display:grid;grid-template-columns:var(--gut) 1fr;align-items:start}
  .idx{font:600 11.5px var(--mono);letter-spacing:.14em;color:var(--faint);padding-top:10px}
  .cap{display:block;font:500 11px var(--mono);letter-spacing:.17em;
    text-transform:uppercase;color:var(--text-secondary)}
  /* `.band h1` too: a page whose first band *is* its title needs one h1, and
     it is the same size as the h2s under it. See `/security`. */
  h2,.band h1{font-size:clamp(30px,4.1vw,49px);font-weight:600;letter-spacing:-.042em;
    line-height:1.08;margin-top:17px}
  .lede{font-size:16.5px;line-height:1.68;color:var(--text-secondary);max-width:58ch;margin-top:16px}
  .lede+.lede{margin-top:16px}
  .lede b{color:var(--text);font-weight:500}

  .pnl{position:relative;border:1px solid var(--edge);border-radius:12px;
    background:linear-gradient(180deg,rgba(26,30,38,.5),rgba(11,14,19,.72));
    box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 20px 50px rgba(0,0,0,.42)}
  .pnl>.tick{position:absolute;width:8px;height:8px;border:1px solid var(--edge);
    pointer-events:none}
  .pnl>.tick.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
  .pnl>.tick.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
  .pnl>.tick.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
  .pnl>.tick.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
  .ph{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;
    justify-content:space-between;align-items:center;gap:12px;
    font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

  /* ── hero ────────────────────────────────────────────────────────────── */
  .hero{max-width:var(--page);margin:0 auto;padding:44px 30px 64px;
    display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
  .hero>*{min-width:0}
  h1{font-size:clamp(42px,6.4vw,84px);font-weight:600;letter-spacing:-.05em;
    /* 0.99 clipped the tops of the gradient-filled line. Gradient text is
       painted inside the line box, so it needs the room. */
    line-height:1.06;margin-top:24px}
  /* The gradient line is set in italic on purpose, and `background-clip:text`
     clips to the element's box rather than to the ink. An italic glyph leans
     past its own advance width, so the last letter of the widest line — the
     "r" of "never" — had its tail sliced off. `inline-block` gives the box a
     width to pad, and the padding is what the overhang leans into. The
     gradient runs at 178deg, so widening the box does not move it. */
  h1 em{font-style:italic;display:inline-block;padding-right:.09em}
  .cur{display:inline-block;font-style:normal;width:.46ch;height:.7em;background:var(--green);
    vertical-align:-.02em;margin-left:.1em;box-shadow:0 0 12px rgba(69,222,140,.6);
    animation:bl 1.05s steps(1) infinite}
  .hsub{font-size:17px;line-height:1.62;color:var(--text-secondary);max-width:50ch;margin-top:20px}
  .hsub b{color:var(--text);font-weight:500}
  .hacts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;align-items:center}
  .hfine{font:500 12.5px var(--mono);color:var(--dim);white-space:nowrap}
  .hstats{display:flex;gap:38px;margin-top:34px;padding-top:22px;
    border-top:1px solid var(--line);flex-wrap:wrap}
  .hstats .k{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim);white-space:nowrap}
  .hstats .v{font:600 27px var(--font-sans);letter-spacing:-.04em;margin-top:7px}

  /* ── the gate: an order walking the four checks ──────────────────────── */
  .gate{overflow:hidden}
  .gord{padding:18px;border-bottom:1px solid var(--line);display:flex;
    justify-content:space-between;align-items:flex-start;gap:14px;min-height:78px}
  .gord .m{font-size:16px;font-weight:600;letter-spacing:-.02em}
  .gord .s{font:400 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
    color:var(--dim);margin-top:7px}
  .gord .amt{font:600 19px var(--font-sans);letter-spacing:-.03em;white-space:nowrap}
  .gates{padding:6px 0}
  .chk{display:grid;grid-template-columns:34px 1fr auto;gap:13px;align-items:center;
    padding:13px 18px;position:relative}
  .chk .no{font:600 11px var(--mono);color:var(--faint);letter-spacing:.1em;transition:color .3s}
  .chk .nm{font-size:14px;font-weight:500;color:var(--dim);transition:color .3s}
  .chk .st{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);transition:color .3s;white-space:nowrap}
  .chk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:transparent;transition:background .3s,box-shadow .3s}
  .chk.pass .no,.chk.pass .st{color:var(--green)}
  .chk.pass .nm{color:var(--text)}
  .chk.pass::before{background:var(--green);box-shadow:0 0 14px rgba(69,222,140,.6)}
  .chk.fail .no,.chk.fail .st{color:var(--red)}
  .chk.fail .nm{color:var(--text)}
  .chk.fail::before{background:var(--red);box-shadow:0 0 14px rgba(251,113,133,.6)}
  .gout{padding:16px 18px;border-top:1px solid var(--line);display:flex;
    justify-content:space-between;align-items:center;gap:14px;min-height:60px}
  .gout .v{font:600 13px var(--mono);letter-spacing:.13em;text-transform:uppercase;
    color:var(--faint);transition:color .3s;white-space:nowrap}
  .gout .why{font-size:12.5px;color:var(--text-secondary);text-align:right;line-height:1.5}
  .gout.ok .v{color:var(--green)}
  .gout.no .v{color:var(--red)}
  .gbar{height:2px;background:var(--line);position:relative;overflow:hidden}
  .gbar i{position:absolute;inset:0 100% 0 0;
    background:linear-gradient(90deg,transparent,var(--accent));transition:right .28s linear}

  /* ── the tape ────────────────────────────────────────────────────────── */
  .tapewrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    overflow:hidden;display:flex;align-items:center;height:46px}
  .tapelbl{flex:none;padding:0 17px;align-self:stretch;display:flex;align-items:center;gap:8px;
    border-right:1px solid var(--line);background:rgba(69,222,140,.05);
    font:600 10.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
  .tapelbl i{width:5px;height:5px;border-radius:50%;background:var(--green);
    box-shadow:0 0 8px rgba(69,222,140,.9);animation:bl 2.1s ease-in-out infinite}
  .tape{display:flex;gap:38px;white-space:nowrap;padding-left:24px;
    font:500 12.5px var(--mono);color:var(--dim);animation:tape 46s linear infinite}
  .tape span b{color:var(--text-secondary);font-weight:500}
  .tape i.mkt{font-style:normal;color:var(--accent);opacity:.62;
    letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;margin-right:9px}
  .cat{display:inline-flex;align-items:center}
  @keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ── the app, drawn as the app draws itself ──────────────────────────── */
  .app{margin-top:32px;overflow:hidden;border-radius:12px}
  .appscroll{overflow-x:auto}
  .appinner{min-width:940px}
  .appnav{display:flex;align-items:center;padding:0 18px;height:58px;
    border-bottom:1px solid var(--line);background:#080a0e}
  .appnav .abrand{display:flex;align-items:center;gap:9px;--emblem:19px;
    font-weight:700;font-size:16px;letter-spacing:-.025em;
    padding-right:20px;border-right:1px solid var(--line);height:28px}
  .appnav .tabs{display:flex;gap:2px;margin-left:20px;
    font:500 13px var(--font-sans);color:var(--dim)}
  .appnav .tabs span{padding:6px 11px;border-radius:6px;position:relative;white-space:nowrap}
  .appnav .tabs span.on{color:var(--text)}
  .appnav .tabs span.on::after{content:"";position:absolute;left:11px;right:11px;
    bottom:-18px;height:2px;background:var(--text)}
  .appnav .rt{margin-left:auto;display:flex;align-items:center;gap:14px}
  .seg{display:flex;padding:3px;border-radius:7px;background:#12161d;border:1px solid var(--line)}
  .seg span{padding:5px 11px;border-radius:5px;font:500 12px var(--font-sans);
    color:var(--dim);white-space:nowrap}
  .seg span.on{background:var(--surface-raised);color:var(--text)}
  .upd{display:flex;align-items:center;gap:7px;font:500 11.5px var(--mono);color:var(--dim);
    padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:#0d1015;
    white-space:nowrap}
  .upd i{width:5px;height:5px;border-radius:50%;background:var(--green);
    box-shadow:0 0 7px rgba(69,222,140,.9);animation:bl 2.2s ease-in-out infinite}
  .appnav .lk{font:500 13px var(--font-sans);color:var(--dim);white-space:nowrap}
  .appnav .av{width:27px;height:27px;border-radius:50%;background:var(--surface-raised);
    border:1px solid var(--edge);display:grid;place-items:center;
    font:600 11px var(--mono);color:var(--text-secondary);flex:none}
  .appbody{padding:14px;background:var(--canvas);display:grid;gap:12px}

  .topband{display:grid;grid-template-columns:1fr 340px;gap:12px}
  .pv{border:1px solid var(--line);border-radius:10px;background:#0b0e13;
    padding:20px 22px 8px;display:flex;flex-direction:column}
  .pvk{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .pvv{font:600 47px var(--font-sans);letter-spacing:-.045em;line-height:1.08;margin-top:9px}
  .pvd{font:500 13.5px var(--mono);margin-top:8px}
  .pvd b{font-weight:600}
  .pvd span{color:var(--dim);font-weight:400}
  .pvchart{margin-top:12px;flex:1}
  .pvchart svg{width:100%;height:160px;display:block}
  .pvchart .ln{fill:none;stroke:var(--green);stroke-width:1.8;stroke-linejoin:round}
  .pvchart .fl{fill:url(#pgfill);stroke:none}
  .pvchart .gl{stroke:rgba(255,255,255,.045);stroke-width:1;stroke-dasharray:2 4}
  .pvchart .pt{fill:#0b0e13;stroke:var(--green);stroke-width:1.8}

  .fleet{border:1px solid var(--line);border-radius:10px;background:#0b0e13;padding:18px 20px}
  .fleet .ft{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .fleet .fw{font:500 13px var(--mono);color:var(--text-secondary);margin-top:13px}
  .fleet .fc{font:500 13px var(--mono);color:var(--dim);margin-top:7px}
  .dist{margin-top:18px}
  .distbar{display:flex;align-items:flex-end;gap:1.5px;height:36px;position:relative}
  .distbar b{flex:1;border-radius:1px;display:block}
  .distbar .mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:0;
    border-left:1px dashed var(--edge)}
  .distl{display:flex;justify-content:space-between;margin-top:8px;
    font:500 10.5px var(--mono);color:var(--dim)}
  .distl .be{color:var(--faint);letter-spacing:.1em}
  .bw{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    padding-top:13px;margin-top:15px;border-top:1px solid var(--line);font:500 13px var(--mono)}
  .bw:last-child{padding-top:10px;margin-top:10px}
  .bw .lb{color:var(--dim);font-size:11.5px}
  .bw .nm{color:var(--text);font-weight:600;font-family:var(--font-sans);font-size:14px}

  .krow{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .krow>div{background:#0b0e13;padding:16px 16px 17px}
  /* Inside the example dashboard it is one panel of a grid with its own gap;
     used as a band's own strip it needs the air every other block in a band
     has, or it reads as a caption stuck to the paragraph above it. Scoped to
     the direct child so the mock is untouched. */
  .band > .krow{margin-top:32px}
  .krow .k{font:500 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
    color:var(--dim);line-height:1.4;min-height:2.8em}
  .krow .v{font:600 20px var(--font-sans);letter-spacing:-.035em;margin-top:4px;white-space:nowrap}
  .krow .c{font:400 10.5px var(--mono);color:var(--dim);margin-top:6px;line-height:1.4}
  .kbadge{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
    padding:2px 6px;border-radius:3px;border:1px solid rgba(69,222,140,.35);
    color:var(--green);margin-left:6px;vertical-align:2px}

  .feeds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .feed{border:1px solid var(--line);border-radius:10px;background:#0b0e13;overflow:hidden}
  .feedhead{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:12px 14px;border-bottom:1px solid var(--line)}
  .feedhead .t{display:flex;align-items:center;gap:8px;
    font:600 13.5px var(--font-sans);letter-spacing:-.015em;white-space:nowrap}
  .feedhead .t i{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
  .feedhead .t.play i{background:var(--warning);box-shadow:0 0 7px rgba(251,191,82,.7)}
  .feedhead .t.done i{background:var(--green);box-shadow:0 0 7px rgba(69,222,140,.7)}
  .feedhead .m{font:500 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;
    color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frow{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 14px;
    border-bottom:1px solid var(--line);align-items:start}
  .frow:last-child{border-bottom:0}
  .frow .n{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
  .frow .s{font:400 11.5px var(--mono);color:var(--dim);margin-top:5px;line-height:1.45;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frow .r{text-align:right;white-space:nowrap}
  .frow .r .a{font:600 13.5px var(--mono)}
  .frow .r .w{font:400 11px var(--mono);color:var(--dim);margin-top:5px}
  .frow .r .w.hold{color:var(--warning)}
  .frow .r .w.win{color:var(--green)}
  .frow .r .w.loss{color:var(--red)}

  /* ── the eight, as an instrument reads a table ───────────────────────── */
  .agt{margin-top:32px;overflow:hidden}
  .agh{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:18px;padding:13px 22px;
    border-bottom:1px solid var(--edge);font:600 10px var(--mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim)}
  .agrow{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:18px;padding:18px 22px;
    border-bottom:1px solid var(--line);align-items:center;transition:background .16s}
  .agrow:last-child{border-bottom:0}
  .agrow:hover{background:rgba(255,255,255,.022)}
  .agrow .nm{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
  .agrow .ds{font-size:12.5px;color:var(--text-secondary);margin-top:5px;line-height:1.5}
  .agrow .cl{font:500 12.5px var(--mono);color:var(--text-secondary)}
  .agrow .tg{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
    color:var(--accent);border:1px solid rgba(220,234,242,.22);
    padding:5px 10px;border-radius:999px;white-space:nowrap}

  .qs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:32px;
    background:var(--edge);border:1px solid var(--edge);border-radius:12px;overflow:hidden}
  .qs>div{background:#0b0e13;padding:28px 26px}
  .qs .q{font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.38}
  .qs .a{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-top:13px}
  .qs .a b{color:var(--text);font-weight:500}

  .vaultin{display:grid;grid-template-columns:var(--gut) 1fr}
  .vq{font-size:clamp(25px,3.3vw,39px);font-weight:500;letter-spacing:-.032em;
    line-height:1.3;max-width:24ch;margin-top:20px}
  .vq b{font-weight:500;color:var(--accent)}
  .vsub{font-size:16px;line-height:1.74;color:var(--text-secondary);max-width:56ch;margin-top:24px}

  /* ── pricing ─────────────────────────────────────────────────────────── */
  .price{display:grid;grid-template-columns:var(--gut) 1fr;align-items:end}
  .pgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:end}
  /* Longhand, deliberately — see the note at the top of this sheet. */
  .pnum{font-family:var(--font-sans);font-weight:600;font-size:clamp(88px,14vw,180px);
    letter-spacing:-.06em;line-height:.86;margin-top:20px;
    background:linear-gradient(178deg,var(--green) 18%,rgba(69,222,140,.26) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .pnum small{font-size:.36em;font-weight:500;letter-spacing:-.03em}
  .pcap{font-size:clamp(21px,2.5vw,29px);font-weight:600;letter-spacing:-.028em;
    line-height:1.25;margin-top:18px}
  .plist div{padding:17px 0;border-top:1px solid var(--line);display:flex;gap:16px;
    align-items:baseline}
  .plist .z{font:600 15.5px var(--mono);color:var(--text);min-width:46px;flex:none}
  .plist .t{font-size:14.5px;line-height:1.6;color:var(--text-secondary)}

  /* ── closer and footer ───────────────────────────────────────────────── */
  .closer{max-width:var(--page);margin:0 auto;padding:78px 30px;text-align:center;position:relative}
  .closer::before{content:"";position:absolute;left:30px;right:30px;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--edge),transparent)}
  .closer h2{font-size:clamp(32px,4.8vw,60px);margin-top:0;line-height:1.1}
  .closer p{font-size:17.5px;color:var(--text-secondary);margin-top:20px;line-height:1.6}
  .closer .hacts{justify-content:center;margin-top:36px}
  footer{border-top:1px solid var(--line);margin-top:0}
  footer .wrap{max-width:var(--page);margin:0 auto;padding:34px 30px 52px}
  footer .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  footer .brand{display:flex;align-items:center;gap:10px;--emblem:22px;
    font-weight:700;font-size:15px;letter-spacing:-.02em}
  footer .sp{flex:1}
  footer .fine{font:500 11px var(--mono);letter-spacing:.11em;text-transform:uppercase;
    color:var(--faint)}
  footer .small{margin-top:22px;font-size:12px;line-height:1.7;color:var(--dim);max-width:92ch}
  .eg{font:400 11px var(--mono);color:var(--faint);letter-spacing:.06em;
    text-align:center;padding-top:18px}

  /* ── basics: what a contract is, before anything leans on it ─────────── */
  .basics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
  .bcard{border:1px solid var(--edge);border-radius:12px;background:#0b0e13;padding:22px 22px}
  .bcard .bn{font:600 11px var(--mono);letter-spacing:.14em;color:var(--accent)}
  .bcard h3{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-top:14px}
  .bcard p{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-top:10px}
  .bcard p b{color:var(--text);font-weight:600}

  /* ── three steps ─────────────────────────────────────────────────────── */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:32px}
  .steps .n{font:600 13px var(--mono);letter-spacing:.14em;color:var(--accent)}
  .steps h3{font-size:19px;font-weight:600;letter-spacing:-.022em;margin-top:14px}
  .steps p{font-size:14.5px;line-height:1.7;color:var(--text-secondary);margin-top:10px}

  /* ── the two books ───────────────────────────────────────────────────── */
  .books{display:grid;grid-template-columns:1.08fr .92fr;gap:14px;margin-top:32px}
  .book{border:1px solid var(--edge);border-radius:12px;background:#0b0e13;padding:24px 24px}
  .book.lead{border-color:rgba(69,222,140,.3)}
  .book .tag{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim)}
  .book.lead .tag{color:var(--green)}
  .book h3{font-size:22px;font-weight:600;letter-spacing:-.028em;margin-top:12px}
  .book p{font-size:14.5px;line-height:1.7;color:var(--text-secondary);margin-top:12px}
  .book .when{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
    font:500 12px var(--mono);color:var(--text-secondary)}

  /* ── the worked example under the price ──────────────────────────────── */
  .worked{margin-top:32px;border:1px solid var(--edge);border-radius:12px;
    background:#0b0e13;padding:26px 26px}
  .worked h3{font-size:19px;font-weight:600;letter-spacing:-.022em}
  .worked p{font-size:15px;line-height:1.75;color:var(--text-secondary);margin-top:14px;
    max-width:70ch}
  .worked p b{color:var(--text);font-weight:600}
  .worked p+p{margin-top:12px}

  /* The same story as a ledger. Figures line up in a column because that is
     the whole point of showing them: a reader checks the arithmetic down the
     page, not across a sentence. */
  .ledger{width:100%;margin-top:22px;border-collapse:collapse;
    font-variant-numeric:tabular-nums}
  .ledger[hidden]{display:none}
  .ledger caption{caption-side:top;text-align:left;padding-bottom:10px;
    font:600 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim)}
  .ledger th,.ledger td{padding:11px 12px;border-top:1px solid var(--edge);
    font-size:13.5px;text-align:left;vertical-align:top}
  .ledger thead th{border-top:0;padding-top:0;font:600 9.5px var(--mono);
    letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .ledger tbody th{font-weight:500;color:var(--text-secondary);max-width:36ch}
  .ledger .n{text-align:right;white-space:nowrap;font-family:var(--mono);
    font-size:12.5px}
  .ledger tbody td{color:var(--text)}
  /* A row with no fee says why, in the same column the figure would be in.
     An empty cell reads as a number nobody worked out. */
  .ledger .none{color:var(--dim);font-family:var(--font-sans);font-size:12px}
  @media (max-width:640px){
    .ledger tbody th{max-width:none}
    .ledger th,.ledger td{padding:9px 6px;font-size:12.5px}
  }

  /* ── scroll reveal ─────────────────────────────────────────────────────
     Note what is NOT here: `.rise { opacity:0 }`. The hiding is applied by
     the script, and only once it has an observer ready to undo it. A section
     that starts invisible and waits to be revealed shows nothing at all when
     the reveal never comes — which is not hypothetical, it is what happens in
     a tab the browser never composites. Default is visible; the animation is
     the enhancement. */
  .rise{transition:opacity .6s ease,transform .6s ease}
  html.reveal .rise{opacity:0;transform:translateY(14px)}
  html.reveal .rise.in{opacity:1;transform:none}

  /* ── the phone ───────────────────────────────────────────────────────── */
  @media (max-width:1180px){ .krow{grid-template-columns:repeat(4,1fr)} }
  @media (max-width:1040px){
    :root{--gut:0px}
    .hero{grid-template-columns:1fr;gap:48px;padding:36px 24px 64px}
    .pgrid{grid-template-columns:1fr;gap:40px}
    .head,.vaultin,.price{grid-template-columns:1fr}
    .idx{padding-top:0;margin-bottom:14px}
    .feeds{grid-template-columns:1fr}
    .agh{display:none}
    .agrow{grid-template-columns:1fr auto;gap:10px 16px;padding:18px}
    .agrow .cl{display:none}
    .qs,.basics,.books{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr;gap:34px}
    .band{padding:52px 24px}
    .lnav,.railw,.closer,footer .wrap{padding-left:24px;padding-right:24px}
    .band::before,.closer::before{left:24px;right:24px}
  }
  @media (max-width:900px){
    /* The row is hidden and the toggle reveals it as a sheet under the bar. A
       phone visitor who wanted the price had no route to the answer at all
       when this was simply `display:none`. */
    .navtoggle{display:flex}
    .lnav .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;
      gap:0;padding:6px 24px 16px;background:rgba(5,6,8,.97);
      border-bottom:1px solid var(--line);display:none}
    .lnav .links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
    .lnav .links.open{display:flex}
    .lnav .sp{flex:1}
  }
  @media (max-width: 560px){
    .heroacts .cta { width:100%; }
  }
  @media (max-width:620px){
    .krow{grid-template-columns:repeat(2,1fr)}
    /* On a phone the rail keeps what a stranger came to see — what everybody
       on it has put in, won and made — on one line, in a size that fits a
       phone that narrow. It hid every item past the third, which would have
       hidden exactly those. */
    .railw{gap:12px;font-size:10px;letter-spacing:.06em;
      padding-left:16px;padding-right:16px}
    .railw > span:not(.us){display:none}
    .railw .sp{margin-left:0}
    .hstats{gap:26px}
    .hstats .v{font-size:23px}
    .hfine{width:100%;text-align:center}
    .hacts{flex-direction:column;align-items:stretch}
  }

  /* Everything that moves, stops. The tape, the pips, the cursor and the
     gate's own sequencing — the script checks the same query. */

  /* ── The demo, on the device most visitors arrive on ────────────────────
     `.appinner` is 940px wide inside `overflow-x:auto`, so a phone visitor was
     handed a desktop screenshot in a sideways scroller and had to drag it
     around to see what was being sold. Worse than a shrunken picture: it
     showed a layout they would never be given.

     So the mock takes the phone shape here — the same one the app itself
     takes at this width, sections along the bottom edge included. The tabs go
     absolute rather than moving in the markup: they live inside `.appnav`,
     and the desktop bar wants them there. */
  @media (max-width:760px){
    .appscroll{overflow-x:visible}
    .appinner{min-width:0;position:relative}
    .appnav{height:52px;padding:0 12px}
    .appnav .abrand{--emblem:17px;gap:7px;font-size:13.5px}
    .appnav .tabs{position:absolute;left:0;right:0;bottom:0;z-index:2;
      margin-left:0;gap:0;justify-content:space-around;padding:9px 2px;
      border-top:1px solid var(--line);background:#080a0e}
    .appnav .tabs span{padding:0 3px;font-size:9.5px}
    /* The rail follows the bar: on the bottom edge it marks upwards. */
    .appnav .tabs span.on::after{left:3px;right:3px;top:-9px;bottom:auto}
    .appnav .rt{gap:9px}
    /* The clock and the two text links are the first to go, exactly as they
       are in the real bar at this width. */
    .appnav .upd,.appnav .lk{display:none}
    .seg{padding:2px}
    .seg span{padding:4px 8px;font-size:10.5px}
    .appbody{padding:10px;gap:10px;padding-bottom:44px}
    .topband{grid-template-columns:1fr}
    .pv{padding:16px 16px 6px}
    .pvv{font-size:33px}
    .pvd{font-size:12px}
    .pvchart svg{height:104px}
    .krow{grid-template-columns:repeat(2,1fr)}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition-duration:.01ms!important}
    html{scroll-behavior:auto}
    /* Not merely "do not animate": a section that starts at zero opacity and
       is revealed by an observer shows nothing at all if the observer never
       runs. This puts it on screen outright. */
    .rise { opacity:1; transform:none; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     Everything the pages *after* the front one needed.

     Added when the site became six pages rather than two. Each of these is a
     component root, unique across the app, and every one of them is used by
     more than one page — a class invented for a single page belongs in that
     page, and there are none of those here.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── the bar knows where you are ─────────────────────────────────────── */
  .lnav .links a.on{color:var(--text)}
  .lnav .links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
    height:1px;background:var(--accent);opacity:.75}
  .lnav .links a{position:relative}

  /* ── a page's own opening ────────────────────────────────────────────────
     The landing page has a two-column hero with a demonstration in it. Every
     other page opens on the argument alone, in one column, at a width that
     reads — so this is deliberately not `.hero` with a column removed. */
  .phero{max-width:var(--page);margin:0 auto;padding:52px 30px 46px;position:relative}
  .phero h1{font-size:clamp(40px,6vw,74px);font-weight:600;letter-spacing:-.045em;
    line-height:1.02;margin-top:20px}
  .phero h1 em{font-style:normal}
  .phero .hsub{max-width:58ch;font-size:clamp(16px,1.4vw,19px)}
  .phero .hacts{margin-top:32px}
  .phero::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

  /* ── the four checks, written out ────────────────────────────────────── */
  .gatelist{margin-top:32px}
  .gl-row{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:18px 26px;
    border-bottom:1px solid var(--line)}
  .gl-row:last-child{border-bottom:0}
  .gl-no{font:600 13px var(--mono);letter-spacing:.14em;color:var(--accent);padding-top:4px}
  .gl-row h3{font-size:19px;font-weight:600;letter-spacing:-.022em}
  .gl-row p{font-size:14.5px;line-height:1.72;color:var(--text-secondary);margin-top:10px;
    max-width:74ch}
  .gl-row p b{color:var(--text);font-weight:500}

  /* ── a numbered walkthrough ──────────────────────────────────────────────
     Getting started is four steps and they are a sequence, so they are
     numbered: the marker is information here rather than decoration. */
  .walk{margin-top:32px;display:grid;gap:1px;background:var(--line);
    border:1px solid var(--edge);border-radius:12px;overflow:hidden}
  .wstep{background:#0b0e13;padding:22px 26px;display:grid;
    grid-template-columns:var(--gut) 1fr 1fr;gap:28px;align-items:start}
  .wstep .n{font:600 13px var(--mono);letter-spacing:.14em;color:var(--accent)}
  .wstep h3{font-size:21px;font-weight:600;letter-spacing:-.026em}
  .wstep p{font-size:14.5px;line-height:1.72;color:var(--text-secondary);margin-top:12px}
  .wstep p b{color:var(--text);font-weight:500}
  .wstep .aside{border-left:1px solid var(--line);padding-left:24px}
  .wstep .aside .k{font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--dim)}
  .wstep .aside p{margin-top:10px;font-size:13.5px}
  @media (max-width:1040px){
    .wstep{grid-template-columns:1fr;gap:16px;padding:24px}
    .wstep .aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
  }

  /* ── questions, as a list rather than a grid ─────────────────────────────
     `.qs` is three across and right for three. A page of fifteen answers is a
     column: a reader scans the questions and stops at theirs, which a grid
     makes impossible. */
  .qlist{margin-top:28px;border-top:1px solid var(--line)}
  .qitem{border-bottom:1px solid var(--line);padding:19px 0;display:grid;
    grid-template-columns:minmax(0,26ch) minmax(0,1fr);gap:40px;align-items:start}
  .qitem h3{font-size:17px;font-weight:600;letter-spacing:-.022em;line-height:1.4}
  .qitem p{font-size:14.5px;line-height:1.74;color:var(--text-secondary)}
  .qitem p+p{margin-top:12px}
  .qitem p b{color:var(--text);font-weight:500}
  .qitem a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
  @media (max-width:860px){ .qitem{grid-template-columns:1fr;gap:12px} }

  /* ── a claim with its evidence beside it ────────────────────────────────
     Used wherever the page says something a reader is entitled to disbelieve:
     the sentence on the left, the thing they can go and check on the right. */
  .proof{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .pcard{border:1px solid var(--edge);border-radius:12px;background:#0b0e13;
    padding:22px 22px;display:flex;flex-direction:column}
  .pcard .pk{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--dim)}
  .pcard h3{font-size:18px;font-weight:600;letter-spacing:-.024em;margin-top:12px}
  .pcard p{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-top:10px}
  .pcard p b{color:var(--text);font-weight:500}
  .pcard .go{margin-top:auto;padding-top:18px;font:500 12.5px var(--mono);
    color:var(--accent);display:inline-flex;align-items:center;gap:7px}
  .pcard .go:hover{text-decoration:underline;text-underline-offset:3px}
  @media (max-width:1040px){ .proof{grid-template-columns:1fr} }

  /* ── what an agent will and will not do ─────────────────────────────────
     Two columns that mean opposite things, so they are marked as opposites
     rather than left to the reading. Green and red carry money everywhere
     else in this product; these use the platinum ramp on purpose. */
  .willnot{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .willnot section{border:1px solid var(--edge);border-radius:12px;background:#0b0e13;
    padding:22px 22px}
  .willnot h3{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--dim)}
  .willnot ul{margin:16px 0 0;padding:0;list-style:none}
  .willnot li{font-size:14.5px;line-height:1.66;color:var(--text-secondary);
    padding:11px 0 11px 26px;border-top:1px solid var(--line);position:relative}
  .willnot li:first-child{border-top:0}
  .willnot li b{color:var(--text);font-weight:500}
  .willnot li::before{position:absolute;left:0;top:11px;font:600 12px var(--mono)}
  .willnot .does li::before{content:"\2713";color:var(--green)}
  .willnot .doesnt li::before{content:"\2715";color:var(--red)}
  @media (max-width:860px){ .willnot{grid-template-columns:1fr} }

  /* ── a figure with its caption, for the example screens ─────────────────
     Every one of these is labelled an example. A picture of a dashboard with
     somebody's money on it is a claim about that money. */
  .shot{margin-top:40px}
  .shot .cap2{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim);margin-top:14px;display:flex;gap:10px;align-items:baseline}
  .shot .cap2 b{color:var(--text-secondary);font-weight:500}

  /* ── a heading and its argument, side by side ──────────────────────────
     A band is `[gutter][everything]`, which reads well when "everything" is a
     heading and one paragraph. At the width these pages are set at, two or
     three paragraphs under a heading leave the right half of a very large
     screen empty and the text stranded in a column down the left.

     `.split` puts the heading in its own column and the prose beside it, so
     the band fills the measure it was given. The markup is the same three
     things in the same order, so a narrow screen simply stacks them. */
  .head.split{grid-template-columns:var(--gut) minmax(0,1.02fr) minmax(0,1fr);
    gap:0 60px}
  .head.split .ttl{min-width:0}
  .head.split .prose{min-width:0;padding-top:6px}
  .head.split .prose .lede{margin-top:0;max-width:62ch}
  .head.split .prose .lede+.lede{margin-top:16px}
  .head.split .prose .hacts{margin-top:26px}
  @media (max-width:1040px){
    .head.split{grid-template-columns:1fr;gap:0}
    .head.split .prose{padding-top:18px}
  }

  /* ── the front door fills the screen ────────────────────────────────────
     The hero was as tall as its contents, which on a large display left the
     product's first impression floating in the top third with the fold below
     it doing nothing. `svh` rather than `vh`: on a phone the browser's own
     chrome is part of the viewport and `100vh` is taller than the screen. */
  /* Capped, and that cap is the point: a bare `100svh` makes the hero as tall
     as whatever window it is in, so on a tall display the argument floats in
     a void and on a screenshot at 5,200px the rest of the page is a mile
     below the fold. 760px is a full first screen on a laptop and never more
     than the content deserves. */
  .hero{min-height:min(calc(100svh - 132px),760px);align-content:center}
  @media (max-width:1040px){ .hero{min-height:0} }

  /* ── the whole thing, in thirty seconds ─────────────────────────────────
     The owner's brief: somebody should be able to digest the site in under
     three minutes. Everything below this strip is the long version — this is
     the product, the price, the risk and the way out, in four lines, above
     the fold on a laptop. A visitor who reads only this has not been misled
     about anything that matters. */
  .tldr{max-width:var(--page);margin:0 auto;padding:0 30px 10px;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
    background:transparent}
  .tldr > div{background:#0b0e13;border:1px solid var(--line);padding:16px 18px;
    min-width:0}
  .tldr .k{font:600 9.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;
    color:var(--dim)}
  .tldr .v{font-size:15px;font-weight:600;letter-spacing:-.02em;margin-top:8px;
    line-height:1.35}
  .tldr .s{font-size:12.5px;line-height:1.55;color:var(--text-secondary);margin-top:6px}
  .tldr .s b{color:var(--text);font-weight:500}
  @media (max-width:1040px){
    .tldr{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:24px;
      padding-right:24px}
  }
  @media (max-width:620px){ .tldr{grid-template-columns:1fr} }