/* ==== css_base.css ==== */
/* ============================================================================
   COASTWORKS AI - homepage, offline mockup. Nothing here is published.

   DESIGN PLAN (one theme, top to bottom, no exceptions)
   Colour   ONE dark world. Ground #0B131B lifting to #16232E, panels are the
            HUD's own frosted plate: rgba(13,24,33,.74) behind a 1px
            rgba(255,255,255,.15) hairline with a short orange cap at the top
            left. Text cream #FAF7F2, soft #C9D3DB, muted #93A3B0. ONE accent,
            orange #C05621, which is used at #E08A54 wherever it carries small
            text (3.8:1 against the ground is not enough; #E08A54 is 6.6:1).
            Green #7FBF98 is the tick glyph only, never a second accent.
   Type     Figtree 800 display, Inter 400/500/600 body, IBM Plex Mono 500 for
            labels, prices and data. Headings balance, body near 65ch.
   Layout   Three pinned screens, then the whole live page mirrored underneath
            in the same grading. Below the HUD every section is CENTRED: the
            heading, the sub, the foot notes and the card row. Card interiors
            stay left-aligned, exactly as the founder's pricing reference does,
            because a tick list reads down a left edge.
   Motion   The HUD and the elements board are SCROLL-DRIVEN: the scroll is the
            clock, so nothing plays at the visitor. Everything else gets one
            tuned reveal on view, the ticker scrolls, the report rows arrive.
            Nothing else moves.
   ========================================================================= */

:root{
  --g0:#0B131B;            /* the ground, at the top of the page */
  --g1:#16232E;            /* the ground, at the bottom of a screen */
  --g-sec:#0D1720;         /* a section that steps forward a shade */
  --glass:rgba(13,24,33,.74);
  --glass-lit:rgba(16,30,42,.86);
  --glass-2:rgba(255,255,255,.035);
  --hair:rgba(255,255,255,.15);
  --hair-soft:rgba(255,255,255,.085);
  --cream:#FAF7F2;
  --soft:#C9D3DB;
  /* lifted from #93A3B0 on 2026-09-03: the card plate is brighter under the
     crisp-HUD spec, and the small mono labels on it were landing at 4.4:1,
     just under the 4.5 floor. #A6B3BE clears it on every ground on the page. */
  --muted:#A6B3BE;
  --orange:#C05621;
  --orange-lit:#E08A54;
  --tick:#7FBF98;
  --r-card:14px;
  --r-ctl:8px;
  --ease:cubic-bezier(.16,1,.3,1);
  --f-display:'Figtree',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 30px 70px -28px rgba(4,10,16,.9);
}
/* This page commits to one visual world on purpose, in both host themes: it is
   a dark instrument panel. Every colour is painted explicitly from the tokens
   above, so it holds on either host ground. */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--g0);color:var(--cream);font-family:var(--f-body);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.08;
  letter-spacing:-.028em;text-wrap:balance}
:focus-visible{outline:3px solid var(--orange-lit);outline-offset:3px;border-radius:4px}
::selection{background:rgba(192,86,33,.45);color:#fff}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:768px){.wrap{padding:0 20px}}

/* THE GROUND, for the whole page and not only the HUD: the same star field the
   HUD stands on, as one fixed layer behind everything, plus a slow warm rise
   under the middle of the screen. Every section below sits on it with a
   translucent tint rather than an opaque fill, so the field reads all the way
   down and no screenful of this page is ever a flat rectangle. */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  /* the ground itself: a broad ambient rise through the middle of the screen,
     #1B2C3A at its centre falling to #070D14 at the corners, with the star
     field over the top. It is fixed, so it is the same light in every frame,
     and no screenful of this page is ever one flat colour. */
  background-color:#13222E;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22760%22%20height%3D%22760%22%3E%3Ccircle%20cx%3D%22509.0%22%20cy%3D%22291.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.23%22%2F%3E%3Ccircle%20cx%3D%22336.5%22%20cy%3D%22638.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.242%22%2F%3E%3Ccircle%20cx%3D%22169.8%22%20cy%3D%22217.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.225%22%2F%3E%3Ccircle%20cx%3D%22702.3%22%20cy%3D%22614.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.16%22%2F%3E%3Ccircle%20cx%3D%22464.6%22%20cy%3D%22157.5%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.337%22%2F%3E%3Ccircle%20cx%3D%22221.0%22%20cy%3D%22455.5%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.328%22%2F%3E%3Ccircle%20cx%3D%22521.8%22%20cy%3D%22148.7%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.317%22%2F%3E%3Ccircle%20cx%3D%22256.2%22%20cy%3D%22510.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.266%22%2F%3E%3Ccircle%20cx%3D%22484.7%22%20cy%3D%22107.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.115%22%2F%3E%3Ccircle%20cx%3D%22666.8%22%20cy%3D%22750.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.111%22%2F%3E%3Ccircle%20cx%3D%22418.1%22%20cy%3D%2219.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.161%22%2F%3E%3Ccircle%20cx%3D%22291.9%22%20cy%3D%22360.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.173%22%2F%3E%3Ccircle%20cx%3D%22606.3%22%20cy%3D%22456.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.249%22%2F%3E%3Ccircle%20cx%3D%221.7%22%20cy%3D%2250.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.197%22%2F%3E%3Ccircle%20cx%3D%22254.6%22%20cy%3D%22205.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.23%22%2F%3E%3Ccircle%20cx%3D%22433.0%22%20cy%3D%22471.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.195%22%2F%3E%3Ccircle%20cx%3D%2234.1%22%20cy%3D%22470.4%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.296%22%2F%3E%3Ccircle%20cx%3D%22144.5%22%20cy%3D%22338.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.162%22%2F%3E%3Ccircle%20cx%3D%22494.9%22%20cy%3D%22220.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.258%22%2F%3E%3Ccircle%20cx%3D%22443.8%22%20cy%3D%2210.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.121%22%2F%3E%3Ccircle%20cx%3D%22682.1%22%20cy%3D%22710.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.189%22%2F%3E%3Ccircle%20cx%3D%22398.8%22%20cy%3D%22353.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.194%22%2F%3E%3Ccircle%20cx%3D%2250.0%22%20cy%3D%22540.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.171%22%2F%3E%3Ccircle%20cx%3D%22137.6%22%20cy%3D%22751.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.119%22%2F%3E%3Ccircle%20cx%3D%2289.1%22%20cy%3D%22389.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.254%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%22380.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.194%22%2F%3E%3Ccircle%20cx%3D%22599.2%22%20cy%3D%2263.4%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.244%22%2F%3E%3Ccircle%20cx%3D%22547.7%22%20cy%3D%2266.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.141%22%2F%3E%3Ccircle%20cx%3D%22699.6%22%20cy%3D%22648.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.225%22%2F%3E%3Ccircle%20cx%3D%22528.3%22%20cy%3D%2243.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.148%22%2F%3E%3Ccircle%20cx%3D%22160.8%22%20cy%3D%22575.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.263%22%2F%3E%3Ccircle%20cx%3D%22419.1%22%20cy%3D%2265.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.182%22%2F%3E%3Ccircle%20cx%3D%22362.0%22%20cy%3D%2291.6%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.332%22%2F%3E%3Ccircle%20cx%3D%22686.0%22%20cy%3D%22178.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.242%22%2F%3E%3Ccircle%20cx%3D%22247.4%22%20cy%3D%22681.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.259%22%2F%3E%3Ccircle%20cx%3D%22403.3%22%20cy%3D%22193.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.117%22%2F%3E%3Ccircle%20cx%3D%22389.5%22%20cy%3D%22256.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.164%22%2F%3E%3Ccircle%20cx%3D%2276.9%22%20cy%3D%22456.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.119%22%2F%3E%3Ccircle%20cx%3D%22648.6%22%20cy%3D%22163.1%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.303%22%2F%3E%3Ccircle%20cx%3D%22394.6%22%20cy%3D%22572.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.255%22%2F%3E%3Ccircle%20cx%3D%22658.6%22%20cy%3D%22712.9%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.288%22%2F%3E%3Ccircle%20cx%3D%22697.5%22%20cy%3D%22437.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.127%22%2F%3E%3Ccircle%20cx%3D%22510.3%22%20cy%3D%22281.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.241%22%2F%3E%3Ccircle%20cx%3D%22671.7%22%20cy%3D%22747.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.176%22%2F%3E%3Ccircle%20cx%3D%22758.1%22%20cy%3D%22471.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.205%22%2F%3E%3Ccircle%20cx%3D%22518.0%22%20cy%3D%22456.0%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%22417.6%22%20cy%3D%22714.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.177%22%2F%3E%3Ccircle%20cx%3D%22214.9%22%20cy%3D%22187.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.165%22%2F%3E%3Ccircle%20cx%3D%22437.4%22%20cy%3D%22243.5%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.302%22%2F%3E%3Ccircle%20cx%3D%22129.1%22%20cy%3D%2296.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%22678.5%22%20cy%3D%22286.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.191%22%2F%3E%3Ccircle%20cx%3D%22264.2%22%20cy%3D%22725.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.151%22%2F%3E%3Ccircle%20cx%3D%22622.9%22%20cy%3D%223.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.159%22%2F%3E%3Ccircle%20cx%3D%2230.4%22%20cy%3D%2253.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.233%22%2F%3E%3Ccircle%20cx%3D%22315.0%22%20cy%3D%22169.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.151%22%2F%3E%3Ccircle%20cx%3D%2238.2%22%20cy%3D%22104.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.142%22%2F%3E%3Ccircle%20cx%3D%22380.3%22%20cy%3D%22744.7%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.243%22%2F%3E%3Ccircle%20cx%3D%22461.3%22%20cy%3D%2254.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.132%22%2F%3E%3Ccircle%20cx%3D%22333.6%22%20cy%3D%22205.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.221%22%2F%3E%3Ccircle%20cx%3D%22418.0%22%20cy%3D%22624.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%2222.4%22%20cy%3D%22601.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.229%22%2F%3E%3Ccircle%20cx%3D%22598.0%22%20cy%3D%2284.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.201%22%2F%3E%3Ccircle%20cx%3D%22595.1%22%20cy%3D%22716.2%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.323%22%2F%3E%3Ccircle%20cx%3D%22542.1%22%20cy%3D%22583.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.142%22%2F%3E%3Ccircle%20cx%3D%22601.5%22%20cy%3D%22140.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.165%22%2F%3E%3Ccircle%20cx%3D%22263.8%22%20cy%3D%22464.9%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.232%22%2F%3E%3Ccircle%20cx%3D%22640.5%22%20cy%3D%22185.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.196%22%2F%3E%3Ccircle%20cx%3D%22179.1%22%20cy%3D%22507.6%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.237%22%2F%3E%3Ccircle%20cx%3D%22165.5%22%20cy%3D%22690.4%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22428.4%22%20cy%3D%22426.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.207%22%2F%3E%3Ccircle%20cx%3D%22352.9%22%20cy%3D%22553.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.131%22%2F%3E%3Ccircle%20cx%3D%22508.9%22%20cy%3D%22259.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22132.5%22%20cy%3D%22133.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.265%22%2F%3E%3Ccircle%20cx%3D%22662.4%22%20cy%3D%22147.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.227%22%2F%3E%3Ccircle%20cx%3D%22735.0%22%20cy%3D%22479.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.192%22%2F%3E%3Ccircle%20cx%3D%22570.8%22%20cy%3D%22512.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.183%22%2F%3E%3Ccircle%20cx%3D%22169.9%22%20cy%3D%22531.9%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.245%22%2F%3E%3Ccircle%20cx%3D%2254.3%22%20cy%3D%22321.5%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.309%22%2F%3E%3Ccircle%20cx%3D%22301.6%22%20cy%3D%2217.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22389.8%22%20cy%3D%2288.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.127%22%2F%3E%3Ccircle%20cx%3D%22598.4%22%20cy%3D%22185.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.237%22%2F%3E%3Ccircle%20cx%3D%22620.5%22%20cy%3D%2295.4%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.341%22%2F%3E%3Ccircle%20cx%3D%22347.9%22%20cy%3D%22337.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.231%22%2F%3E%3Ccircle%20cx%3D%22146.7%22%20cy%3D%22694.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.209%22%2F%3E%3Ccircle%20cx%3D%22352.9%22%20cy%3D%2257.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.139%22%2F%3E%3Ccircle%20cx%3D%22261.3%22%20cy%3D%22348.6%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.324%22%2F%3E%3Ccircle%20cx%3D%22447.8%22%20cy%3D%22203.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.256%22%2F%3E%3Ccircle%20cx%3D%22137.5%22%20cy%3D%22618.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22647.3%22%20cy%3D%22575.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.234%22%2F%3E%3Ccircle%20cx%3D%22206.5%22%20cy%3D%22238.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.167%22%2F%3E%3Ccircle%20cx%3D%22360.5%22%20cy%3D%22190.5%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.238%22%2F%3E%3Ccircle%20cx%3D%22498.4%22%20cy%3D%22690.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.178%22%2F%3E%3Ccircle%20cx%3D%22378.1%22%20cy%3D%22601.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.174%22%2F%3E%3Ccircle%20cx%3D%22137.9%22%20cy%3D%22265.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.154%22%2F%3E%3Ccircle%20cx%3D%22489.3%22%20cy%3D%2269.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.253%22%2F%3E%3Ccircle%20cx%3D%22691.6%22%20cy%3D%22486.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.234%22%2F%3E%3Ccircle%20cx%3D%22394.2%22%20cy%3D%22296.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.268%22%2F%3E%3Ccircle%20cx%3D%22273.5%22%20cy%3D%22157.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.174%22%2F%3E%3Ccircle%20cx%3D%22578.7%22%20cy%3D%22177.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.141%22%2F%3E%3Ccircle%20cx%3D%22623.4%22%20cy%3D%22382.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.118%22%2F%3E%3Ccircle%20cx%3D%22344.5%22%20cy%3D%2246.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.254%22%2F%3E%3Ccircle%20cx%3D%22628.1%22%20cy%3D%2285.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.241%22%2F%3E%3Ccircle%20cx%3D%22678.3%22%20cy%3D%22558.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.249%22%2F%3E%3Ccircle%20cx%3D%22319.9%22%20cy%3D%22317.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.123%22%2F%3E%3Ccircle%20cx%3D%2295.6%22%20cy%3D%22402.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.157%22%2F%3E%3Ccircle%20cx%3D%22210.7%22%20cy%3D%22327.0%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.231%22%2F%3E%3Ccircle%20cx%3D%22110.1%22%20cy%3D%22430.9%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.201%22%2F%3E%3Ccircle%20cx%3D%22436.9%22%20cy%3D%22174.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%22759.3%22%20cy%3D%22119.0%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.208%22%2F%3E%3Ccircle%20cx%3D%22116.2%22%20cy%3D%22570.0%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.267%22%2F%3E%3Ccircle%20cx%3D%22497.1%22%20cy%3D%22556.4%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.283%22%2F%3E%3Ccircle%20cx%3D%22292.1%22%20cy%3D%22591.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.116%22%2F%3E%3Ccircle%20cx%3D%22570.0%22%20cy%3D%22612.0%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.285%22%2F%3E%3Ccircle%20cx%3D%22157.8%22%20cy%3D%22441.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.252%22%2F%3E%3Ccircle%20cx%3D%22266.5%22%20cy%3D%22697.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.151%22%2F%3E%3Ccircle%20cx%3D%22706.5%22%20cy%3D%22433.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22196.6%22%20cy%3D%225.2%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.349%22%2F%3E%3Ccircle%20cx%3D%22663.9%22%20cy%3D%22720.3%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.315%22%2F%3E%3Ccircle%20cx%3D%22392.2%22%20cy%3D%22759.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.211%22%2F%3E%3Ccircle%20cx%3D%2235.0%22%20cy%3D%22155.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.214%22%2F%3E%3Ccircle%20cx%3D%22439.7%22%20cy%3D%22205.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.203%22%2F%3E%3Ccircle%20cx%3D%22467.7%22%20cy%3D%22266.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.199%22%2F%3E%3Ccircle%20cx%3D%22249.3%22%20cy%3D%22456.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.112%22%2F%3E%3Ccircle%20cx%3D%22485.3%22%20cy%3D%22520.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.223%22%2F%3E%3Ccircle%20cx%3D%2235.9%22%20cy%3D%22110.2%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.226%22%2F%3E%3Ccircle%20cx%3D%22178.1%22%20cy%3D%2229.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.205%22%2F%3E%3Ccircle%20cx%3D%22422.3%22%20cy%3D%22692.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.246%22%2F%3E%3Ccircle%20cx%3D%22652.1%22%20cy%3D%22612.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%22317.9%22%20cy%3D%225.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22387.4%22%20cy%3D%22549.8%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.212%22%2F%3E%3Ccircle%20cx%3D%22617.2%22%20cy%3D%22697.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.239%22%2F%3E%3Ccircle%20cx%3D%22588.0%22%20cy%3D%22588.9%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.322%22%2F%3E%3Ccircle%20cx%3D%22492.0%22%20cy%3D%22471.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.151%22%2F%3E%3Ccircle%20cx%3D%22377.5%22%20cy%3D%22484.6%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.358%22%2F%3E%3Ccircle%20cx%3D%22427.3%22%20cy%3D%22757.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.254%22%2F%3E%3Ccircle%20cx%3D%22233.7%22%20cy%3D%22127.1%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.219%22%2F%3E%3Ccircle%20cx%3D%22717.5%22%20cy%3D%22466.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.205%22%2F%3E%3Ccircle%20cx%3D%22653.7%22%20cy%3D%2288.0%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.316%22%2F%3E%3Ccircle%20cx%3D%22305.2%22%20cy%3D%2237.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.146%22%2F%3E%3Ccircle%20cx%3D%22447.3%22%20cy%3D%22160.4%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.151%22%2F%3E%3Ccircle%20cx%3D%2269.2%22%20cy%3D%22142.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.143%22%2F%3E%3Ccircle%20cx%3D%22678.2%22%20cy%3D%22449.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.131%22%2F%3E%3Ccircle%20cx%3D%22442.1%22%20cy%3D%22362.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.124%22%2F%3E%3Ccircle%20cx%3D%22327.0%22%20cy%3D%22581.9%22%20r%3D%221.6%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.252%22%2F%3E%3Ccircle%20cx%3D%22530.2%22%20cy%3D%22395.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.219%22%2F%3E%3Ccircle%20cx%3D%22258.9%22%20cy%3D%22499.9%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.191%22%2F%3E%3Ccircle%20cx%3D%22171.7%22%20cy%3D%22514.3%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.187%22%2F%3E%3Ccircle%20cx%3D%22196.4%22%20cy%3D%22547.5%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.169%22%2F%3E%3Ccircle%20cx%3D%2293.7%22%20cy%3D%22539.7%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.129%22%2F%3E%3Ccircle%20cx%3D%22287.3%22%20cy%3D%22128.6%22%20r%3D%220.9%22%20fill%3D%22%23FAF7F2%22%20opacity%3D%220.185%22%2F%3E%3C%2Fsvg%3E");
  background-size:760px 760px;background-repeat:repeat;opacity:1}
.sky::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(128% 92% at 50% 40%,#203648 0%,#13222E 46%,#050B11 100%)}
.sky::after{content:none}
/* everything in the page flow sits ABOVE the star field. Scoped to the flow
   elements on purpose: a blanket body>* rule would out-specify the fixed
   chrome (the sticky ask, the flight layer) and drop it back into flow. */
body>section,body>footer,body>.stats{position:relative;z-index:1}

/* the grain: one fixed, pointer-events-none layer, so it never repaints on
   scroll. feTurbulence at baseFrequency .82, 3 octaves, 128px tile. */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px}
@media (max-width:768px){.grain{opacity:.035}}

/* ---------------------------------------------------------------- header
   The founder's first note: the header must be the same ground as the page.
   It is: no bar, no rule, no cream. It sits over the star field. */
header{position:relative;z-index:20;background:transparent}



.cai,.cai-header{display:flex;flex-direction:column;justify-content:center;
  align-items:center;background:var(--cream);color:var(--g1);border-radius:8px;
  flex-shrink:0;width:46px;height:46px}
.cai .csym{display:inline-flex;align-items:baseline;font-family:var(--f-display);
  font-weight:800;line-height:1;letter-spacing:-.045em;font-size:1.45rem}
.cai .csym .cai-ai{font-size:.44em;color:var(--orange);margin-left:.09em}






@media (max-width:1040px){header .mono{display:none}}
@media (max-width:520px){.wordmark small{display:none}.wordmark{font-size:1.15rem}
  .cai{width:40px;height:40px}.cai .csym{font-size:1.25rem}}

/* ------------------------------------------------------------ the controls */
.btn{display:inline-block;background:var(--orange);color:#fff;border:1px solid var(--orange);
  border-radius:var(--r-ctl);padding:13px 20px;font:inherit;font-weight:600;
  font-size:.98rem;cursor:pointer;text-decoration:none;text-align:center;
  transition:background .2s var(--ease),transform .12s var(--ease)}
.btn:hover{background:#A94A1B;border-color:#A94A1B}
.btn:active{transform:translateY(1px)}
.btn-line,.btn-ghost{display:inline-block;background:transparent;color:var(--cream);
  border:1px solid rgba(250,247,242,.36);border-radius:var(--r-ctl);
  padding:13px 20px;font:inherit;font-weight:600;font-size:.98rem;cursor:pointer;
  text-decoration:none;text-align:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)}
.btn-line:hover,.btn-ghost:hover{background:rgba(250,247,242,.09);
  border-color:rgba(250,247,242,.7)}
.btn-line:active,.btn-ghost:active{transform:translateY(1px)}

/* ----------------------------------------------------- shared section chrome
   MIRRORED FROM THE LIVE SITE (founder, 2026-09-04: "look at the current site,
   how that text is being shown, and just mirror that"). The live page's grid,
   measured off /opt/coastworks/site/index.html:

     .wrap        max-width 1240px, margin 0 auto, padding 0 32px
                  (0 20px at 768 and under) -> a 1176 px text column at 1240+
     section      padding 104px 0 (72px 0 at 768 and under)
     h2           clamp(1.9rem,3.2vw,2.9rem), text-wrap:balance, margin-bottom
                  16px, LEFT aligned, no max-width
     .kicker      block, margin-bottom 14px, LEFT
     .sintro      body colour, NO max-width and NO auto margins: it runs the
                  full 1176 px measure, which is what every live section does
                  with its own max-width:none
     .pointer     margin-top 26px

   Nothing below the HUD is centred except .edge, which is centred on the live
   page too and keeps its own 940 px wrap. The measured alignment pass that
   used to centre short headings and pull paragraphs to 62ch is gone. */
section,.stats{position:relative}
/* the header is pinned from the words screen down, so an in-page jump lands
   below it rather than under it */
section[id],.stats[id]{scroll-margin-top:84px}
/* the sections are TRANSLUCENT over the star field: a tint, not a fill, so the
   ground carries through the whole page and the theme is one thing */
.who,.qs,.how,.incl,.demos,.consultsec,.elements,.proof,.edge,.plans,
.bento,.honesty,.faq,.final,.report{padding:104px 0;
  background:rgba(11,19,27,.18);
  border-top:1px solid var(--hair-soft)}
.qs,.incl,.consultsec,.proof,.plans,.faq{background:rgba(19,31,42,.26)}
/* the ONE centred section, exactly as the live page has it */
.edge{text-align:center}
.edge>.wrap{max-width:940px}
.kicker{font-family:var(--f-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange-lit);
  display:block;margin:0 0 14px}
h2{font-size:clamp(1.9rem,3.2vw,2.9rem);margin:0 0 16px}
.sintro{color:var(--soft);font-size:1.06rem;margin:0}
.pointer,.recog-close{color:var(--soft);margin:26px 0 0;font-size:1.02rem}
/* the edge is the centred section, so its closer keeps the live page's own
   60ch centred measure */
.edge .ecloser{color:var(--soft);max-width:60ch;margin:clamp(38px,5vw,54px) auto 0;
  font-size:1.15rem;line-height:1.6}
.pointer a,.recog-close a,.sintro a,.ecloser a{color:var(--orange-lit);font-weight:600}
.micro{color:var(--muted);font-size:.86rem;margin:18px 0 0;line-height:1.6}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;font-size:.72rem;color:var(--muted)}
@media (max-width:768px){
  .who,.qs,.how,.incl,.demos,.consultsec,.elements,.proof,.edge,.plans,
  .bento,.honesty,.faq,.final,.report{padding:74px 0}
}

/* the one card material on this page: the HUD's frosted plate */
.card{background:var(--glass);border:1px solid var(--hair);
  border-radius:var(--r-card);position:relative;overflow:hidden;text-align:left}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,0) 44%)}
.card::after{content:"";position:absolute;left:14px;top:0;width:44px;height:2px;
  background:rgba(192,86,33,.6)}

/* -------------------------------------------------------- the page reveal
   Motion with a job: each block states itself as it arrives, once, and then
   holds still. One transition per element, transform and opacity only. */
/* THE PAGE PRINTS AS YOU REACH IT (founder, 2026-09-03). Every block below the
   HUD states itself once as it enters the window: opacity, a 14 px rise, half a
   second on the page's own ease, staggered 60 ms across a section's children.
   It happens once and then holds still. Reduced motion gets none of it. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(14px);
    transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--d,0s)}
  .js [data-reveal].in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ------------------------------------------------------- THE SCROLL POP
   Founder, 2026-09-04: every card and tile on the page pops as it enters the
   viewport, on Grok's own values. It arrives already wearing the ring
   (0 0 0 1px rgba(192,86,33,.35) plus the 0 0 28px rgba(192,86,33,.22) glow),
   lifted 6 px and one step brighter on the plate, and settles out of all three
   over about 600 ms. The lift rides the independent `translate` property, not
   `transform`, so it cannot fight the reveal's own 14 px rise; and the 100 per
   cent keyframe names no background-colour, so every card settles back to
   whatever its own plate is rather than being forced to one fill. Reduced
   motion gets none of it: the finished state, instantly. */
@media (prefers-reduced-motion:no-preference){
  @keyframes cw-pop{
    0%,42%{box-shadow:0 0 0 1px rgba(192,86,33,.35),0 0 28px rgba(192,86,33,.22);
           translate:0 -6px;background-color:rgba(16,30,42,.84)}
    100%  {box-shadow:0 0 0 1px rgba(192,86,33,0),0 0 28px rgba(192,86,33,0);
           translate:0 0}
  }
  .js [data-reveal].pops.in{animation:cw-pop .6s cubic-bezier(.16,1,.3,1)
    var(--d,0s) backwards}
  /* the proof table prints a row at a time as the report arrives */
  .js .mrep tbody tr{opacity:0;transform:translateY(8px);
    transition:opacity .34s var(--ease),transform .34s var(--ease)}
  .js .mrep tbody tr.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mrep tbody tr{opacity:1!important;transform:none!important}
}

/* one frosted card for the fine print, left aligned at body size, on the
   section's own measure (founder, 2026-09-04) */
.finecard{margin:26px 0 0;background:var(--glass);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:26px 30px;text-align:left}
.finecard .micro{margin:0;font-size:.95rem;line-height:1.65;color:var(--soft)}
.finecard .micro+.micro{margin-top:14px}
.finecard strong{color:var(--cream)}
@media (max-width:560px){.finecard{padding:22px}}

/* ==== css_screens.css ==== */
/* =========================================================== SCREEN 1: THE HUD
   THE APPROVED HUD, RESTORED 2026-09-03. Three business cards down the left,
   three down the right, the strip of three dials top-centre, the tablet in the
   middle carrying the growth report with the reticle on it, and the five
   element tabs along the bottom. The ground is the founder's own Grok Imagine
   dawn-coast clip, graded in the encode. No star field.

   The clock is the SCROLL, not a timer: the section is pinned for 260vh and
   every scroll position renders exactly one frame. The six business cards pop
   in one at a time, each highlights in turn while the one before it settles
   back, the growth report draws its stepped line, the gauge and the donut
   fill, and each element tab lights as the first card carrying its rows
   arrives. At the end all six sit lit but calm.
   ========================================================================= */
/* FIVE STOPS, HALF A VIEWPORT EACH (founder, 2026-09-04, item F: "about 12
   swipes before the next page; it must be about 5, one per element").

   The track was 260vh, then 600vh. At 600vh the pass had 500vh of travel and
   one element held for a full viewport, which measured at eleven to twelve
   swipes to clear the HUD: a reader on a phone gave up before the words
   screen. The budget is the founder's own, in viewports of SCROLL:

       0.3   the hold, the rail flat, before the first stop
       2.5   the five stops, half a viewport each
       0.2   the run out, after Service, before the section releases
       ---
       3.0   viewports of scrolling

   The pinned screen is not scrolling, it is the window the track is read
   through, so the SECTION is that 3.0 plus the one viewport it pins for: 400vh
   of height leaves exactly 300vh of travel. A swipe is about half to seven
   tenths of a viewport, so one swipe is one element, and the sixth leaves the
   HUD. The settle that makes a swipe land ON an element rather than between
   two is in hudT(), not in scroll-snap, which fights a sticky pin. */
.hudtrack{position:relative;background:transparent;height:min(400vh,8000px)}
.hudpin{position:sticky;top:0;height:100dvh;min-height:560px;overflow:hidden}
/* THE WASH OVER THE GROUND (2026-09-04). This layer sits ON TOP of the coast
   clip and used to carry a 55 to 72 per cent near-black gradient, which is why
   the ground measured 0.017 with the video playing perfectly well: no bake
   survives a three-quarters-opaque lid. It is a light tint now, enough to sit
   the columns on something and no more. The cards are still the lightest thing
   on the screen because they are painted at .84 on the canvas above it. */
.hudwrap{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(rgba(11,19,27,.16),rgba(22,35,46,.24))}
#hudstage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  transform-origin:center center;transform:translate(-50%,-50%) scale(1)}
#hudc{display:block;width:1920px;height:1080px}
#hudbelow{display:none}

/* THE HEADER (founder, 2026-09-03). Hidden while the HUD is pinned on the
   landing screen, then pinned to the top of the window for the rest of the
   page. It is the page's own dark ground, blurred, with no rule and no colour
   change when it arrives: it appears, it does not transform. */
.topbar{position:fixed;left:0;right:0;top:0;z-index:45;
  background:rgba(9,16,23,.86);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  transform:translateY(-104%);opacity:0;pointer-events:none;
  transition:transform .42s var(--ease),opacity .3s linear}
.topbar.show{transform:none;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .topbar{transition:none}
}
#hudend{height:1px}

/* mobile, and reduced motion: the HUD is a single column that scrolls with the
   page instead of a pinned stage, so there is no dead scroll behind a still */
#hud.hud-mobile,#hud.stack{height:auto}
#hud.hud-mobile .hudpin,#hud.stack .hudpin{position:static;height:auto;
  min-height:0;overflow:visible;padding-bottom:8px}
#hud.stack .hudwrap{position:relative;height:100dvh}
/* A PHONE WITH REDUCED MOTION IS STILL A PHONE (2026-09-04). Both classes are
   on the section there, and the rule above pinned the wrap to one viewport
   while the phone's own stack is a column some three thousand pixels tall. The
   section therefore ended a screen down, and the stats band that follows it
   was drawn straight over the element rail: measured on the live page, the
   rail sat at y 299 with the stats band's top at -106, and elementFromPoint on
   a tile returned the stats copy. It never showed as a defect while the rail
   was only a picture. Now the tiles are buttons, and a reader with motion
   switched off could not press one. The wrap follows its content on a phone. */
#hud.stack.hud-mobile .hudwrap{height:auto}
/* the header no longer rides over the HUD, so this padding is only breathing
   room above the ring rather than clearance for a bar */
/* NO OPAQUE PLATE OVER THE COAST (founder, 2026-09-04). This carried
   background:linear-gradient(#070C12,#0C1620), which is why the ground stopped
   at the landing band and every card below it sat on flat navy. The stack is
   transparent and stands on the picture, exactly as the desktop composition
   does; the vignette under it keeps the cards the lightest thing on screen. */
#hud.hud-mobile .hudwrap{position:relative;display:block;overflow:visible;
  background:transparent;padding-top:26px}
#hud.hud-mobile #hudstage{position:relative;left:auto;top:auto;width:100%;
  height:auto;transform:none!important}
#hud.hud-mobile #hudc{width:100%;height:auto}
#hud.hud-mobile #hudbelow{display:block;padding:0 0 26px}
/* THE FIVE TILES FIT THE PHONE (founder, 2026-09-04). They were 94 px each on
   a fixed-width row, so the rail measured 542 px inside a 375 to 430 px window
   and the last two tiles were off the frame: on his phone the rail simply ran
   out of screen. They are five equal columns of whatever the window has now,
   centred, and the row does not scroll. The name moves from inside the tile to
   under it, so the tile can shrink without the 11 px mono floor being touched:
   the longest of them, OPERATIONS, overhangs its own column by 4 px into the
   gaps either side and never reaches the edge of the screen. */
#hudmtabs{display:flex;gap:8px;padding:16px 16px 40px;justify-content:center;
  align-items:flex-start;overflow:visible}
#hudmtabs::-webkit-scrollbar{display:none}
.mtab{flex:1 1 0;min-width:0;max-width:94px;aspect-ratio:1/1;
  border-radius:5px;position:relative;overflow:visible;
  background:rgba(14,26,36,.78);border:1px solid var(--hair)}
/* The lit tab carries 9.5 px labels. Cream on #C05621 measures 4.25:1, which
   is under the 4.5 floor for small text, so the LIT fill is the palette's
   darker orange #A94A1B (5.2:1). The accent is unchanged everywhere it is not
   carrying small type. */
.mtab.on{background:#A94A1B;border-color:rgba(255,255,255,.34)}
/* the ACTIVE tab, on Grok's .card-active values: the accent ring and the
   28 px glow, on one tile at a time */
.mtab.act{box-shadow:0 0 0 1px rgba(192,86,33,.35),0 0 28px rgba(192,86,33,.22)}
.mtab .n,.mtab .r{position:absolute;top:8px;font-family:var(--f-mono);
  font-weight:500;font-size:11px;color:rgba(250,247,242,.90);letter-spacing:1.2px}
.mtab.on .n,.mtab.on .r{color:rgba(255,255,255,.95)}
.mtab .n{left:9px}.mtab .r{right:9px}
.mtab .s{position:absolute;left:0;right:0;bottom:9px;text-align:center;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(22px,7vw,28px);line-height:1;color:var(--cream)}
.mtab .s i{font-style:normal;font-size:.64em;color:var(--orange-lit)}
.mtab.on .s i{color:var(--cream)}
/* under the tile, not in it: the tile is now as wide as the window allows and
   the name would not fit inside it at the 11 px floor */
.mtab .l{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:7px;text-align:center;white-space:nowrap;
  font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.4px;
  color:rgba(250,247,242,.92)}
.mtab.on .l{color:rgba(250,247,242,.98)}
/* THE LINE UNDER THE RAIL, the phone's copy of it (founder, 2026-09-04). The
   desktop draws it on the canvas in the card-title face; here it is a DOM node
   standing on the coast picture, where soft grey measured 1.42:1, so it keeps
   the plate the tiles above it stand on and reads at full cream. Same face,
   same weight, same size as the canvas line. */
#hudmfoot{margin:0 16px;padding:10px 12px;border-radius:6px;
  background:rgba(11,19,27,.96);border:1px solid var(--hair-soft);
  font-family:var(--f-display);font-weight:600;font-size:15px;
  letter-spacing:normal;line-height:1.4;text-align:center;color:var(--cream)}

/* ============================================= SCREEN 2: THE WORDS AND THE ASK
   Exactly as the live hero works: the claim on the left, the free guide on the
   right. The form is HUD-grade frosted, not a cream slab.
   ========================================================================= */
.pitch{background:rgba(11,19,27,.18);padding:120px 0 116px;border-top:1px solid var(--hair-soft)}
.pitchgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:60px;
  align-items:center;text-align:left}
.kickline{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);
  font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-lit);margin-bottom:22px}
.kickline::before{content:"";width:26px;height:1px;background:var(--orange)}
.pitch h1{font-size:clamp(2rem,3.9vw,3.35rem);line-height:1.04;
  letter-spacing:-.028em;margin-bottom:22px;max-width:16ch}
.pitch h1 em{font-style:normal;color:var(--orange-lit)}
.whofor{font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.3;letter-spacing:-.02em;
  color:var(--cream);max-width:26ch;margin-bottom:18px}
.pitch .lede{font-size:1.06rem;line-height:1.62;color:var(--soft);
  max-width:56ch;margin-bottom:16px}
.pitch .line{font-size:.98rem;color:var(--muted);max-width:52ch}

.capture{background:var(--glass);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:26px;position:relative;overflow:hidden;
  box-shadow:var(--shadow)}
.capture::after{content:"";position:absolute;left:16px;top:0;width:48px;height:2px;
  background:rgba(192,86,33,.75)}
.capture .flabel{display:block;font-family:var(--f-display);font-weight:800;
  font-size:1.06rem;line-height:1.3;letter-spacing:-.02em;margin-bottom:16px;
  color:var(--cream)}
.capture .row{display:grid;grid-template-columns:1fr;gap:10px}
.capture input[type=text],.capture input[type=email]{width:100%;padding:13px 12px;
  border:1px solid rgba(250,247,242,.28);border-radius:var(--r-ctl);font:inherit;
  font-size:.96rem;background:rgba(255,255,255,.05);color:var(--cream)}
.capture input::placeholder{color:#A9B6C1}
.capture input:focus-visible{outline:2px solid var(--orange-lit);outline-offset:0;
  border-color:var(--orange-lit)}
.capture .btn{width:100%;margin-top:2px;padding:14px 18px;font-size:1rem}
.optin{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;font-size:.8rem;
  color:var(--soft);line-height:1.5;cursor:pointer}
.optin input{margin:2px 0 0;flex:none;width:15px;height:15px;accent-color:#C05621}
.capture .micro{margin:10px 0 0;text-align:left;color:var(--muted)}
/* the honeypot. It used to be a full-width input parked at -9999px, which is
   a 625 px box outside the viewport on every width audit. Same job, one
   pixel, clipped. */
.hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:900px){
  .pitch{padding:80px 0}
  .pitchgrid{grid-template-columns:1fr;gap:34px}
  .capture{padding:20px}
}

/* SCREEN 3 IS GONE (founder, 2026-09-04). The pinned periodic table, the
   frame it was drawn in, the caption beside it and the five flying tiles were
   all cut, and every rule that dressed them went with them. The page runs
   landing HUD, words screen, then the sections. The reduced-motion rule the
   HUD still needs is kept below.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .hudtrack{height:auto}
}


/* --------------------------------------------------------- the HUD ground
   Grok's composite recipe, section 2, applied exactly to the one ground the
   founder chose: the real Sentinel-2 Sunshine Coast at dawn. The image is
   dimmed and blurred so it reads as weather rather than as a photograph, the
   vignette keeps the centre well the brightest part of it, and the two scrims
   sit behind the header and under the tab rail. The cards are the brightest
   thing on the screen at every scroll position. */
/* SPEED: the grade and the blur live on the STATIC parent, so the drifting
   child only ever transforms and the browser never re-filters a 2000 px image
   on a scroll frame. */
/* THE CLIP LIVES ON THE INNER BOX, not here: an overflow:hidden ancestor
   becomes the sticky scrollport, and with it on .hudbg the phone's pinned
   ground had nothing to stick to and simply scrolled away. */
.hudbg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* everything the ground is made of lives in here, so the phone can pin it to
   the viewport without moving any of the layers relative to each other */
.hudbg-stick{position:absolute;inset:0;overflow:hidden}
/* the grade and the blur are baked into the encoded image, so this layer is a
   plain picture the compositor can move without re-rendering it */
/* opacity is set INLINE per page by bg_build.py: the ground is baked bright and
   then backed off only as far as the measured type contrast demands. */
.hudbg-grade{position:absolute;inset:0;overflow:hidden;opacity:.85}
/* THE WHOLE SCENE MOVES (founder, 2026-09-04). The approved original drifted
   its entire plate on the 10 s loop, which is what makes the reference read as
   a live scene rather than a photograph with widgets on it. Everything the
   ground is made of hangs off this one box so the drift is a single composited
   transform: no layout, no paint, GPU only. The picture inside it overscans by
   3 per cent (.hudbg-poster and .hudbg-media are both inset:-3%), which is
   comfortably more than the 2 per cent the drift can ever need, so an edge can
   never come into frame. js_hud writes the transform from the ambient clock;
   with reduced motion, or with the life layer off, it writes nothing and this
   is a plain static box. */
.hudbg-drift{position:absolute;inset:0;will-change:transform;
  transform:translate3d(0,0,0);backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .hudbg-drift{transform:none!important;will-change:auto}
}
.hudbg-media{position:absolute;inset:-3%;
  background-size:cover;background-position:50% 42%;
  will-change:transform;transform:translateZ(0)}
/* Option A's own line in the spec asks for a stronger vignette top and bottom,
   and it is what makes the picture blend: everything outside the centre well is
   pushed down until the cards are the brightest thing on the screen. */
/* HALF STRENGTH (founder, 2026-09-03: he wants to see the picture move). The
   old vignette pushed everything outside the centre to .78 black, which on a
   composition that fills the frame meant the whole visible ground was black.
   The centre well is kept and the falloff is halved; the layer's own opacity is
   set inline per page, so the search can back it off if the type needs it. */
.hudbg-vig{position:absolute;inset:0;opacity:1;
  background:radial-gradient(ellipse at 50% 45%,transparent 32%,rgba(8,12,16,.39) 76%),
    linear-gradient(180deg,rgba(8,12,16,.29),rgba(8,12,16,.05) 20%,rgba(8,12,16,.05) 74%,rgba(8,12,16,.36))}
/* the scrims: one behind the header and the lockup, one under the tab rail */
.hudbg-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,16,.52) 0,rgba(8,12,16,.30) 9%,
    rgba(8,12,16,.05) 22%,rgba(8,12,16,.05) 72%,rgba(8,12,16,.38) 90%,rgba(8,12,16,.52) 100%)}
@media (prefers-reduced-motion:no-preference){
  /* about 4 percent over 30 seconds, and back: slow enough to read as air
     moving rather than as an animation */
  .hudbg-media{animation:cw-ground 30s ease-in-out infinite alternate}
  @keyframes cw-ground{from{transform:scale(1) translate3d(0,0,0)}
                       to{transform:scale(1.04) translate3d(-1%,-0.6%,0)}}
}
/* A MOVING GROUND. The grade and the blur are baked into the encode, exactly as
   they are for a still, so the compositor only ever plays a plain video and the
   scrub never re-filters a viewport-sized layer. The poster sits behind the
   video as the reduced-motion state and as the fallback if it cannot play. */
.hudbg-poster{position:absolute;inset:-3%;background-size:cover;background-position:50% 42%}
video.hudbg-media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;animation:none}
@media (prefers-reduced-motion:reduce){video.hudbg-media{display:none}}
/* THE STACKING ORDER, ONCE AND PROPERLY (2026-09-04). The ground is a
   positioned layer at z-index 0. Everything that stands on it has to be
   positioned too, because a STATIC element ignores z-index entirely: on the
   phone .hudlock and .hudwrap were both static, so the moment the coast layer
   came back the picture painted straight over the lockup and over the whole
   card stack and the reader got ghosts of them. Every layer of the HUD is
   given its own position and level here, so no media query can knock one of
   them back into the ground again. */
.hudbg{z-index:0}
/* THIS RULE MUST ONLY SET THE LEVEL, NEVER THE POSITION. It briefly carried
   position:relative for every .hudwrap, which overrode the desktop's own
   position:absolute;inset:0 twenty lines above: the wrap collapsed to nothing,
   the stage inside it went with it, and the whole desktop HUD disappeared off
   the landing screen leaving only the coast. The phone and the reduced-motion
   stack set their own position in their own media block; every one of them is
   positioned already, so z-index alone is all that is needed here. */
.hudwrap{z-index:2}
/* ------------------------------------------- THE TAP TARGETS ON THE RAIL
   Founder, 2026-09-04: the five element tiles are buttons on every device. On
   the phone the tiles are already DOM nodes and only need the role, the focus
   ring and a target big enough for a thumb: five equal columns of a 320 px
   window is 51 px a side, which clears 44 with room. On the desktop the rail
   is painted on the canvas, so five TRANSPARENT buttons are laid over it
   inside #hudstage. The stage is the fixed 1920 x 1080 box that CSS scales as
   one piece, so a button placed at a tile's own canvas coordinates lands on
   that tile at every width and scales with it. They carry their names as
   aria-labels, not as text, so nothing can push their boxes out of shape. */
#hudtabhit{position:absolute;inset:0;z-index:4;pointer-events:none}
#hudtabhit[hidden]{display:none}
#hudtabhit .tabhit{position:absolute;margin:0;padding:0;border:0;
  background:none;color:inherit;font:inherit;cursor:pointer;
  pointer-events:auto;border-radius:7px;-webkit-appearance:none;appearance:none}
#hudtabhit .tabhit:focus-visible{outline:2px solid var(--orange-lit);
  outline-offset:3px}
#hud.hud-mobile #hudtabhit{display:none}
.mtab{cursor:pointer;min-height:44px}
.mtab:focus-visible{outline:2px solid var(--orange-lit);outline-offset:3px}

#hudstage,#hud.hud-mobile #hudstage{z-index:2}
#hudbelow,#hud.hud-mobile #hudbelow{position:relative;z-index:3}
.hudlock{z-index:6}
/* THE PHONE HAD NO COAST AT ALL (founder, 2026-09-04). This file carried
   "@media (max-width:760px){.hudbg{display:none}}", which switched the WHOLE
   ground layer off under 760 px: not the video, the layer, so the poster went
   with it and a phone got a flat dark page. It is gone. The picture is the
   page's first impression on every device, and the phone is where most of them
   will see it.

   WHAT A PHONE GETS NOW. The poster still is a CSS background-image on
   .hudbg-poster and paints on the first frame, before any media loads, so the
   coast is there from the very start whatever happens next. The clip plays
   over it if it can. iOS Safari does not decode VP9 in WebM, which is the
   other half of why the phone was blank even with the layer on, so the video
   now carries an H.264 mp4 FIRST and the WebM second. Reduced motion and a
   failed decode both fall through to the poster, which is the same graded
   picture, so there is no state in which the coast is missing. */
.hudbg-poster{z-index:0}
video.hudbg-media{z-index:1;background:transparent}
/* THE PHONE CROP. The ground is a 16:9 picture and a phone window is about
   9:19.5, so "cover" scaled the landscape frame 2.2x and what reached the
   reader was a smear of sky with no coastline in it. bg_media.py cuts a 9:16
   encode from the same source with the same grade, framed on the beach and the
   headland, and one of the two pairs is shown here. Only one pair is ever
   displayed, so the phone never paints the wrong crop. */
.hudbg-port{display:none}
@media (max-width:760px){
  /* THE GROUND RIDES THE WHOLE STACK (founder, 2026-09-04). On a phone
     .hudpin is static and auto height, so a ground at inset 0 was a box some
     three thousand pixels tall: cover scaled a 9:16 picture to that and the
     600 px the reader could see was one magnified sliver of sky. It is a
     STICKY layer one viewport tall instead, pulled back out of the flow with a
     negative margin, so it is cut at the size it was encoded for AND it stays
     behind every card, the growth report, the instruments, the KPI strip and
     the tab rail all the way down, the way the desktop ground does. */
  /* ONE VIEWPORT OF PICTURE, PINNED, AND IT STOPS WITH THE HUD. Two other
     shapes were tried and both were wrong: a sticky .hudbg with a negative
     margin outlived its own containing block and the coast carried on under
     the words screen, and a fixed layer covered the viewport whatever was in
     it. The ground box stays exactly the HUD's rectangle, and the layers
     inside it are pinned to the top of the window while that rectangle is on
     screen. Sticky resolves against the window but is bounded by .hudbg, so it
     cannot paint one pixel outside the HUD. */
  .hudbg-stick{position:sticky;inset:auto;top:0;height:100dvh;min-height:560px}
  .hudbg-land{display:none}
  .hudbg-port{display:block}
  /* THE VERTICAL ANCHOR. A phone window is about 9:19.5 and the portrait
     encode is 9:16, so "cover" still crops about half the picture away: at
     the top of it was sky and haze with no coastline in it. The card stack
     covers the ground from about 600 px down, so what the reader actually sees
     is the top two thirds of the landing screen: anchoring at 50 puts the sea
     behind the lockup, the headland under the line of copy and the surf at the
     foot of the band. */
  .hudbg-poster.hudbg-port{background-position:50% 50%}
  video.hudbg-port{object-position:50% 50%}
  /* THE PHONE SCRIM. On the phone the ground is only seen behind the landing
     lockup, in a band about 600 px tall, and the desktop's stack of vignette
     plus scrim crushed that band to a flat brown. The lockup is properly on
     top of the picture now (see the stacking block above), so it does not need
     the picture put out to be readable: the scrim keeps its job behind the
     header and at the foot and lets the middle of the band be the coast. */
  .hudbg-scrim{background:linear-gradient(180deg,rgba(8,12,16,.52) 0,
    rgba(8,12,16,.20) 12%,rgba(8,12,16,.02) 34%,rgba(8,12,16,.02) 70%,
    rgba(8,12,16,.26) 90%,rgba(8,12,16,.44) 100%)}
  /* the cards stand ON the picture now, so the vignette is the desktop's own:
     a centre well that keeps the frame readable and a falloff that leaves the
     plates the lightest thing on the screen. A heavier one was tried first and
     took the coast back to near black between the cards. */
  .hudbg-vig{background:radial-gradient(ellipse at 50% 40%,transparent 40%,
    rgba(8,12,16,.34) 86%),linear-gradient(180deg,rgba(8,12,16,.08),
    rgba(8,12,16,0) 22%,rgba(8,12,16,0) 76%,rgba(8,12,16,.22))}
}

/* ------------------------------------------------- SCREEN 1: THE CLEAN CLIP
   The founder's landing, 2026-09-04. The coast clip plays on its own for two
   seconds, with the Coastworks lockup centred on it and one line under it
   saying what we do and who it is for. Then the lockup rises and fades into
   the header that pins at the top, and the HUD assembles over the same
   picture without the ground ever changing. */
.hudlock{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;padding:0 32px;
  text-align:center;pointer-events:none;
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.hudlock.gone{opacity:0;transform:translateY(-34px) scale(.86)}
.hudlock-mark{display:flex;align-items:center;gap:16px}
.hudlock-mark .cai{width:64px;height:64px;border-radius:11px}
.hudlock-mark .cai .csym{font-size:2rem}
.hudlock-word{font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.03em;color:var(--cream)}
.hudlock-word .dot{color:var(--orange-lit)}
/* AI FOR SMALL BUSINESS stands on the coast picture now that the phone has a
   ground, and .86 cream on the dawn sky measured 3.92:1. It is set at full
   cream with the same shadow the line under it carries, and at the 11 px mono
   floor rather than the 10.88 the clamp was giving it. */
.hudlock-mark small{font-family:var(--f-mono);font-weight:500;
  font-size:clamp(11px,1vw,.8rem);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,247,242,.97);margin-left:6px;
  text-shadow:0 1px 14px rgba(6,11,16,.9)}
.hudlock-line{font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.55;
  color:rgba(250,247,242,.94);max-width:44ch;margin:0;
  text-shadow:0 1px 18px rgba(6,11,16,.85)}
@media (max-width:760px){
  /* on a phone the HUD is a stack that scrolls with the page rather than a
     pinned screen, so the lockup is the page's opening block and STAYS: it
     does not collapse under the reader and shift everything up by 200 px. */
  /* RELATIVE, NOT STATIC (2026-09-04). It was static, and a static element
     ignores z-index, so the moment the coast layer came back on the phone the
     ground painted straight over the lockup and the reader got a ghost of it.
     It stays in the flow, and now it stacks. */
  /* AND IT TAKES LESS OF THE SCREEN (founder, 2026-09-04). At 96 px of lead
     in, a 64 px mark, the strap on its own line and three lines of copy, the
     opening block measured 366 px of a 664 px phone window: the reader's whole
     first screen was the brand, and the first business card sat on the fold.
     Trimmed to 64 and 34 it measures about 300, so the top of the first card
     is on the first screen and there is visibly something under the lockup. */
  .hudlock{position:relative;z-index:6;padding:64px 20px 34px;gap:14px}
  .hudlock-mark{flex-wrap:wrap;justify-content:center;gap:12px}
  .hudlock-mark small{margin-left:0;flex-basis:100%}
  .hudlock,.hudlock.gone{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hudlock{transition:none}
  .hudlock.gone{display:none}
}

/* ==== css_sections.css ==== */
/* ============================================================================
   THE LIVE PAGE, MIRRORED. Same sections, same order, same words. What changes
   is the grading: one dark ground, the HUD's frosted plate for every card, one
   hairline weight, one accent, and every section-level block CENTRED.
   ========================================================================= */

/* ------------------------------------------------------------ stats ticker */
.stats{background:rgba(22,35,46,.72);border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);padding:22px 0;overflow:hidden}
.stats .tickerwrap{overflow:hidden;width:100%}
.stats .ticker{display:flex;width:max-content}
.stats .tkset{display:flex;gap:56px;padding:0 56px 0 32px;flex-shrink:0;
  align-items:baseline}
.stats .tk{display:flex;gap:12px;align-items:baseline;white-space:nowrap}
.stats .tk .n{font-family:var(--f-display);font-weight:800;color:var(--orange-lit);
  font-size:1.5rem;font-variant-numeric:tabular-nums}
.stats .tk .l{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  /* THE LEFT CLIP (founder, 2026-09-04). Two things were wrong with it: the
     first stat sat hard against the window edge with no gutter (the 32 px pad
     on every set fixes that at rest), and a moving stat was chopped in half by
     the window edge on its way out. It fades out over the last 26 px instead,
     both sides, so nothing is ever cut mid-word. */
  .stats .tickerwrap{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,
      #000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 26px,
      #000 calc(100% - 26px),transparent 100%)}
  .stats.js .ticker{animation:cw-tick 45s linear infinite}
  .stats.js .tickerwrap:hover .ticker{animation-play-state:paused}
  @keyframes cw-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .stats .ticker{width:auto;display:block;transform:none!important}
  .stats .tkset{flex-wrap:wrap;gap:18px 40px;justify-content:flex-start;padding:0 32px}
  .stats .tkset[aria-hidden="true"]{display:none}
  .stats .tk{white-space:normal}
}
@media (max-width:768px){.stats .tkset{gap:40px;padding:0 40px 0 20px}
  .stats .tk .n{font-size:1.3rem}}

/* -------------------------------------------------------------------- who */
/* the live page lets the heading balance across the full measure */
.who h2{max-width:none}
.who .sintro{max-width:none}

/* ---------------------------------------------------------- sound familiar */
.qrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:44px 0 0}
.qrow{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:28px 26px 30px;text-align:left;position:relative;overflow:hidden}
.qrow::after{content:"";position:absolute;left:14px;top:0;width:44px;height:2px;
  background:rgba(192,86,33,.6)}
.qrow h3{font-size:1.08rem;line-height:1.3;margin-bottom:12px;color:var(--cream)}
.qrow q{quotes:none;font-style:normal}
.qrow p{color:var(--soft);font-size:.97rem;line-height:1.6}
@media (max-width:900px){.qrows{grid-template-columns:1fr;max-width:560px}}

/* ------------------------------------------------------- the morning report */
.report{background:rgba(22,35,46,.5)}
.nr{margin:44px 0 0;text-align:left;
  background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow);position:relative}
.nr::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--orange)}
.nr-chrome{display:flex;align-items:center;gap:13px;padding:20px 24px 16px;
  border-bottom:1px solid var(--hair-soft)}
.nr-chrome .cai{width:38px;height:38px}
.nr-chrome .cai .csym{font-size:1.16rem}
.nr-from{display:flex;flex-direction:column;line-height:1.35;flex:1;min-width:0}
.nr-fromname{font-family:var(--f-display);font-weight:800;font-size:1.02rem;
  color:var(--cream)}
.nr-frommeta{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--muted)}
.nr-live{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-lit);display:flex;align-items:center;gap:6px}
.nr-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
@media (prefers-reduced-motion:no-preference){
  .nr-live::before{animation:nrpulse 2.2s ease-in-out infinite}
  @keyframes nrpulse{0%,100%{opacity:1}50%{opacity:.2}}
}
.nr-demotag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:14px 24px 2px;margin:0}
.nr-body{padding:2px 24px 4px}
.nr-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--hair-soft)}
.nr-row:last-child{border-bottom:none}
.nr-el{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;flex:none}
.nr-el .esym{font-family:var(--f-display);font-weight:800;font-size:.82rem;
  line-height:1;color:var(--cream)}
.nr-el .esym em{font-style:normal;color:var(--orange-lit)}
.nr-text{font-size:.95rem;line-height:1.5;color:var(--soft)}
.nr-text strong{font-weight:600;color:var(--cream)}
.nr-status{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:99px;white-space:nowrap;flex:none}
.nr .s-do{background:var(--orange);color:#fff}
.nr .s-fyi{background:transparent;border:1px solid var(--hair);color:var(--muted)}
.nr-sug{margin:12px 24px 22px;background:rgba(192,86,33,.10);
  border-left:3px solid var(--orange);border-radius:0 8px 8px 0;padding:14px 16px;
  font-size:.92rem;line-height:1.55;color:var(--soft)}
.nr-sug-l{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-lit);margin-bottom:6px}
@media (prefers-reduced-motion:no-preference){
  .js .nr-row,.js .nr-sug{opacity:0;transform:translateY(10px);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .nr-row.in,.js .nr-sug.in{opacity:1;transform:none}
}
@media (max-width:620px){
  .nr-row{grid-template-columns:auto 1fr;gap:10px 12px}
  .nr-status{grid-column:2;justify-self:start;margin-top:6px}
}

/* ----------------------------------------------- the packages, and the plans
   The founder's reference: a centred heading and sub, the cards in one row,
   the middle one raised with the page's only filled orange button and the
   others outlined, and every tick list starting on the same line. The card
   interior stays left-aligned, exactly as the reference does. */
.how .lead{margin-bottom:8px}
/* The founder's note: the four package tiles wanted air under them, and on the
   care plans the raised tile was landing on the block beneath. Both grids now
   carry their own bottom margin, 96 px on desktop and 64 on the phone, which is
   measured from the RAISED tile's own bottom edge, not the grid's. */
.stair,.plangrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;margin:56px 0 96px;align-items:stretch}
.plangrid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px}
@media (max-width:768px){.stair,.plangrid{margin-bottom:64px}}
.hstep,.plan{background:var(--glass);border:1px solid var(--hair);
  border-radius:var(--r-card);display:flex;flex-direction:column;
  position:relative;overflow:hidden;text-align:left;padding:0;
  transition:transform .22s var(--ease),border-color .22s ease}
.hstep:hover,.plan:hover{border-color:rgba(250,247,242,.34)}
.hstep.pop,.plan.pop{background:var(--glass-lit);border-color:rgba(192,86,33,.5);
  box-shadow:0 34px 74px -30px rgba(4,10,16,.95)}
.hstep.pop::before,.plan.pop::before{content:"";position:absolute;left:0;right:0;
  top:0;height:2px;background:var(--orange)}
/* the raised tile grows ABOVE and BELOW the row rather than sliding up, so its
   interior still lines up with the others: every tick list starts on one line */
@media (min-width:1021px){
  .stair,.plangrid{margin-top:70px;margin-bottom:114px}
  .hstep.pop,.plan.pop{margin:-18px 0}
  .hstep.pop .tilehead{padding-top:38px}
  .plan.pop h3{padding-top:52px}
  .hstep.pop .pbody{padding-bottom:38px}
  .plan.pop ul{margin-bottom:40px}
}
/* The tag sits top RIGHT, on its own line, clear of the element symbol on the
   packages and of the plan name on the care plans, at every width. */
.badge{position:absolute;right:20px;top:14px;left:auto;font-family:var(--f-mono);
  font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-lit);background:rgba(192,86,33,.16);
  border:1px solid rgba(224,138,84,.42);border-radius:99px;padding:4px 10px;
  line-height:1;z-index:2;pointer-events:none}
.hstep.pop .tilehead{padding-right:132px}
.plan.pop h3{padding-right:132px}
@media (min-width:1021px){.hstep.pop .badge,.plan.pop .badge{top:32px}}
.tilehead{padding:20px 22px 0;display:flex;align-items:baseline;gap:10px}
.enum{font-family:var(--f-mono);font-weight:500;font-size:.7rem;letter-spacing:.14em;
  color:var(--muted)}
.tilehead .esym{font-family:var(--f-display);font-weight:800;font-size:1.75rem;
  line-height:1;letter-spacing:-.03em;color:var(--cream)}
.tilehead .esym em{font-style:normal;color:var(--orange-lit)}
.pbody{padding:14px 22px 24px;display:flex;flex-direction:column;flex:1}
.hstep h3,.plan h3{font-size:1.16rem;margin:0 0 6px;color:var(--cream)}
.plan h3{padding:34px 22px 0}
.pfor{font-family:var(--f-mono);font-weight:500;font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);line-height:1.6;margin-bottom:12px;
  min-height:3.2em}
.pdesc{font-size:.9rem;line-height:1.55;color:var(--soft);min-height:9.3em;margin:0}
.pprice{font-family:var(--f-display);font-weight:800;font-size:1.9rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--cream)}
.plan .pprice{padding:0 22px}
.pprice span{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:0}
.psub{display:block;font-size:.78rem;color:var(--muted);margin:5px 0 16px;
  min-height:3em;line-height:1.45}
.plan .psub{padding:0 22px}
/* the reading order of a tile: name, who for, what it is, price, control,
   then the ticks, so all four lists start on the same line */
.hstep h3{order:1}.pfor{order:2}.pdesc{order:3}
.hstep .pprice{order:4;margin-top:18px}.hstep .psub{order:5}
.hstep .pcta{order:6}.hstep .feat{order:7}.hstep .pneed{order:8}
.pneed{margin-top:16px;border-top:1px solid var(--hair-soft);padding-top:4px}
.pneed summary{cursor:pointer;padding:11px 0;font-family:var(--f-mono);
  font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-lit);list-style:none;position:relative;padding-right:20px}
.pneed summary::-webkit-details-marker{display:none}
.pneed summary::after{content:"+";position:absolute;right:2px;top:10px}
.pneed[open] summary::after{content:"\2212"}
.pneed p{font-size:.82rem;line-height:1.55;color:var(--soft);padding-bottom:14px}
.pcta{margin:0 0 4px}
.pcta .btn,.pcta .btn-line{display:block;width:100%;padding:13px 16px;font-size:.95rem}
.feat,.plan ul{list-style:none;margin:18px 0 0;padding:0 0 2px;
  border-top:1px solid var(--hair-soft)}
.plan ul{margin:18px 22px 22px}
.feat::before,.plan ul::before{content:"What's included";display:block;
  font-family:var(--f-mono);font-weight:500;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.feat li,.plan ul li{padding:7px 0 7px 24px;font-size:.82rem;line-height:1.45;
  position:relative;color:var(--soft)}
.feat li.y::before,.plan ul li.y::before{content:"\2713";position:absolute;left:0;
  top:6px;color:var(--tick);font-weight:700}
/* the NOT-INCLUDED lines. #7C8B97 measured 4.18:1 on the plate once the care
   plan cards went to the live page's full width, just under the 4.5 floor for
   13 px copy. #8A98A6 measures 5.0:1 and still reads as the greyed-out line. */
.feat li.n,.plan ul li.n{color:#8A98A6}
.feat li.n::before,.plan ul li.n::before{content:"\2715";position:absolute;left:1px;
  top:7px;color:#7C8B97;font-size:.78em}
/* the fine print: kept, revealed on entry, and standing clear of the block
   above it rather than tucked under its edge */
.how .micro:first-of-type,.plans .micro:first-of-type{margin-top:0}
.plans .micro strong{color:var(--soft)}
.finenote{margin-top:14px}
/* the fine-print notes stack with more than the reveal's own 14 px rise
   between them, so no two of them can touch while one is still arriving */
.how .micro + .micro,.plans .micro + .micro{margin-top:22px!important}
.plans .pointer,.how .pointer{margin-top:38px}
@media (max-width:1020px){
  .stair{grid-template-columns:1fr 1fr;max-width:760px}
  .plangrid{grid-template-columns:1fr;max-width:460px}
  .pfor,.psub,.pdesc{min-height:0}
}
@media (max-width:620px){.stair{grid-template-columns:1fr;max-width:420px}}

/* ------------------------------------------------------------- included */
.allincl{margin:36px 0 0}
.allincl ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;
  text-align:left}
.allincl li{position:relative;padding:14px 0 14px 30px;font-size:.94rem;
  line-height:1.55;color:var(--soft);border-bottom:1px solid var(--hair-soft)}
.allincl li::before{content:"\2713";position:absolute;left:2px;top:14px;
  color:var(--tick);font-weight:700}
.incl .btn-line{margin-top:30px;padding:13px 22px}
@media (max-width:820px){.allincl ul{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- consult */
/* THE CONSULT BAND (founder, 2026-09-03): back to the live site's large
   horizontal banner. Full width, tall, the words on the left and the one orange
   pill on the right, in this page's navy grading rather than the live orange. */
.consultsec{padding:0;border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);background:rgba(9,17,25,.62)}
.consultsec::before{content:none}
.consultsec>.wrap{position:relative;display:grid;
  grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;
  padding-top:116px;padding-bottom:116px;text-align:left!important}
.consultsec .cleft{max-width:60ch;margin:0;text-align:left}
.consultsec .cleft h2,.consultsec .cleft p{text-align:left}
.consultsec .cleft h2{margin-left:0;max-width:20ch}
.consultsec .cleft .kicker{margin-left:0}
.consultsec .cleft p{color:var(--soft);margin-top:16px}
@media (max-width:900px){
  .consultsec>.wrap{grid-template-columns:1fr;gap:34px;
    padding-top:76px;padding-bottom:76px}
  .consultsec .cbox{max-width:none}
}
.cbox{max-width:460px;margin:0 0 0 auto;text-align:left;background:var(--glass-lit);
  border:1px solid rgba(192,86,33,.5);border-radius:var(--r-card);padding:30px;
  position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cbox::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--orange)}
.clabel{display:block;font-family:var(--f-mono);font-weight:500;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cbox .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pnum{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,5vw,3.5rem);
  line-height:.9;letter-spacing:-.03em;color:var(--orange-lit);
  font-variant-numeric:tabular-nums}
.psuf{font-size:.95rem;color:var(--muted);font-weight:600}
.pcredit{margin:16px 0 0;font-size:1.02rem;font-weight:600;color:var(--cream)}
.clist{list-style:none;margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.clist li{position:relative;padding-left:26px;font-size:.96rem;color:var(--soft)}
.clist li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--tick);
  font-weight:700}
.cbox .btn{display:block;width:100%;margin-top:24px;padding:15px 24px;font-size:1.02rem}
.cbox .rrev{margin-top:12px;text-align:center;font-size:.84rem;color:var(--muted)}

/* ------------------------------------------------------------ element packs */
.elgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
  margin:46px 0 0}
.elpick{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:22px 18px 20px;text-align:left;color:inherit;font:inherit;
  position:relative;display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s ease,background .2s ease}
.elpick.sel{border-color:var(--orange);background:var(--glass-lit)}
/* THE CONTROL (founder, 2026-09-04): every pack card carries a real button
   that ticks over to "Added", and the running total under the grid reads off
   the published $950. */
.elpick-add{margin-top:auto;width:100%;background:transparent;color:var(--cream);
  border:1px solid rgba(250,247,242,.36);border-radius:var(--r-ctl);
  padding:11px 12px;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.elpick-add:hover{background:rgba(250,247,242,.09);border-color:rgba(250,247,242,.7)}
.elpick.sel .elpick-add{background:var(--orange);border-color:var(--orange);
  color:#fff}
.elpick.sel .elpick-add::before{content:"\2713\00a0\00a0"}
.elpick.sel .elpick-add:hover{background:#A94A1B;border-color:#A94A1B}
.eltotal{margin:22px 0 0;font-family:var(--f-display);font-weight:800;
  font-size:1.12rem;letter-spacing:-.02em;color:var(--muted)}
.eltotal.on{color:var(--cream)}
.tickmark{position:absolute;right:14px;top:12px;width:20px;height:20px;
  border-radius:50%;background:var(--orange);color:#fff;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .2s ease}
.elpick.sel .tickmark{opacity:1}
.eltile{width:56px;height:56px;border-radius:6px;background:rgba(255,255,255,.08);
  border:1px solid var(--hair);position:relative;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:7px}
.elpick.sel .eltile{background:var(--orange);border-color:rgba(255,255,255,.3)}
.eltile .enum{position:absolute;left:7px;top:6px;font-size:.58rem}
.eltile .esym{font-family:var(--f-display);font-weight:800;font-size:1.42rem;
  line-height:1;letter-spacing:-.03em;color:var(--cream)}
.eltile .esym em{font-style:normal;font-size:.68em;color:var(--orange-lit)}
.elpick.sel .eltile .esym em{color:var(--cream)}
.elbody h3{font-size:1.02rem;margin-bottom:8px;color:var(--cream)}
.elbody p{font-size:.86rem;line-height:1.55;color:var(--soft)}
.eltally{margin:40px 0 0}
.eltally strong{display:block;font-family:var(--f-display);font-weight:800;
  font-size:1.1rem;color:var(--cream)}
.elquote{margin-top:16px;background:var(--glass);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:20px;text-align:left}
.elqlist{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;
  justify-content:center;margin-bottom:12px}
.elqlist li{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream)}
.qtick{color:var(--tick);margin-right:6px}
.elqsum p{font-size:.92rem;line-height:1.55;color:var(--soft)}
.elqsum p+p{margin-top:8px}
.elqlaunch{color:var(--orange-lit)!important;font-weight:600}
#eltally-cta{margin-top:16px}
@media (max-width:1080px){.elgrid{grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:640px}}
@media (max-width:560px){.elgrid{grid-template-columns:1fr;max-width:380px}}

/* -------------------------------------------------------------------- proof */
.proofgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:44px 0 0;align-items:stretch}
.proofcard{background:var(--glass);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:26px 24px 26px;text-align:left;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.proofcard::after{content:"";position:absolute;left:14px;top:0;width:44px;height:2px;
  background:rgba(192,86,33,.6)}
.pkick{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.proofcard h3{font-size:1.14rem;margin-bottom:14px;color:var(--cream)}
.pchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.04em;
  color:var(--soft);border:1px solid var(--hair);border-radius:99px;
  padding:4px 10px;line-height:1.35}
.proofcard p{font-size:.92rem;line-height:1.6;color:var(--soft)}
.pmore{margin-top:14px}
.pmore summary{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-lit);cursor:pointer;
  padding:10px 0;border-top:1px solid var(--hair-soft)}
.pmore-body p{margin-top:12px;font-size:.88rem}
.pmore-body a{color:var(--orange-lit);font-weight:600}
.pelrow{margin-top:16px}
.pelrow p{font-size:.86rem;color:var(--muted)}
.proofcard .pcta{margin-top:auto;padding-top:20px}
.proofcard .pcta .btn-line{display:block;width:100%}

.mrepblock{margin:52px 0 0;text-align:left}
.mrepblock h3{font-size:1.2rem;margin:12px 0 20px;color:var(--cream)}
.mrep{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-card);
  overflow:hidden;position:relative}
.mrep::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--orange)}
.mrscroll{overflow-x:auto}
.mrep table{border-collapse:collapse;width:100%;min-width:720px;font-size:.85rem}
.mrep th{font-family:var(--f-mono);font-weight:500;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:16px 18px;border-bottom:1px solid var(--hair)}
.mrep td{padding:13px 18px;border-bottom:1px solid var(--hair-soft);
  color:var(--soft);line-height:1.5;vertical-align:top}
.mrep tbody tr:last-child td{border-bottom:none}
.mrep td:first-child{color:var(--cream);font-weight:600;white-space:nowrap}
.mrep td:nth-child(2){font-variant-numeric:tabular-nums}
.mrnote{padding:18px;font-size:.86rem;color:var(--muted);line-height:1.6;
  border-top:1px solid var(--hair-soft)}
@media (max-width:1020px){.proofgrid{grid-template-columns:1fr;max-width:560px}}

/* ------------------------------------------------------------ the window */
.edge .ehero{font-family:var(--f-display);font-weight:800;
  font-size:clamp(3.6rem,11vw,7.5rem);line-height:.92;letter-spacing:-.05em;
  color:var(--orange-lit);font-variant-numeric:tabular-nums;margin:6px 0 8px}
.edge .esub{font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.2rem,2.6vw,1.9rem);line-height:1.14;letter-spacing:-.02em;
  color:var(--cream);max-width:24ch;margin:0 auto}
.gapviz{margin:44px auto 0;max-width:640px}
.shops{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.shops span{width:38px;height:38px;display:block}
.shops svg{width:100%;height:100%}
.shop-on{color:var(--orange)}
.shop-off{color:rgba(250,247,242,.24)}
.gapcap{margin-top:18px;font-size:.96rem;color:var(--soft)}
.esrc{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--muted);margin-top:8px}
.esrc a{color:var(--muted);text-decoration:underline}
.stattiles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:46px auto 0;
  max-width:820px}
.stile{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:28px 24px;text-align:center}
.stile.accent{border-color:rgba(192,86,33,.5);background:var(--glass-lit)}
.snum{font-family:var(--f-display);font-weight:800;font-size:2.4rem;
  letter-spacing:-.04em;color:var(--cream);font-variant-numeric:tabular-nums}
.stile.accent .snum{color:var(--orange-lit)}
.slab{font-size:.92rem;color:var(--soft);margin-top:8px;line-height:1.5}
.epointer{margin-top:26px}
@media (max-width:700px){.stattiles{grid-template-columns:1fr;max-width:400px}}

/* -------------------------------------------------------------- why trust us */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:40px 0 0;align-items:stretch}
.bcell{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:28px 26px;text-align:left;display:flex;flex-direction:column}
.b-big{grid-column:span 2}
.b-founder{grid-row:span 2;background:var(--glass-lit);
  border-color:rgba(192,86,33,.45);align-items:center;text-align:center}
.b-dark{background:rgba(255,255,255,.07)}
.b-wide{grid-column:span 2}
.bcell h3{font-size:1.06rem;margin-bottom:12px;color:var(--cream)}
.bcell p{font-size:.93rem;line-height:1.6;color:var(--soft)}
.bcell p+p{margin-top:12px}
.blabel{font-family:var(--f-mono)!important;font-size:.64rem!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)!important;
  margin-top:auto!important;padding-top:18px}
.bphoto{width:150px;height:150px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(250,247,242,.24);margin-bottom:18px}
.bname{font-family:var(--f-display);font-weight:800;font-size:1.14rem;
  color:var(--cream);justify-content:center}
.bname a{border-color:var(--muted)!important;color:var(--muted)!important}
.brole{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:4px 0 12px}
.b-founder p{text-align:left}
@media (max-width:1020px){
  .bgrid{grid-template-columns:1fr 1fr;max-width:760px}
  .b-founder{grid-row:auto}
}
@media (max-width:700px){.bgrid{grid-template-columns:1fr;max-width:440px}
  .b-big,.b-wide{grid-column:auto}}

/* ------------------------------------------------------------------ honesty */
/* one measure for the whole panel, so the list and the paragraphs under it
   share a left edge instead of stepping in and out */
.honesty .panel{margin:34px 0 0;background:var(--glass);
  border:1px solid var(--hair);border-left:3px solid var(--orange);
  border-radius:0 var(--r-card) var(--r-card) 0;padding:34px 38px;
  box-shadow:var(--shadow)}
.honesty ul{list-style:none;margin:22px 0 0}
.honesty li{padding:22px 0;border-top:1px solid var(--hair);color:var(--soft);
  font-size:1.02rem;line-height:1.6;text-align:left}
.honesty li:first-child{border-top:none;padding-top:0}
.honesty .panel>p{margin-top:30px;font-size:1.04rem;color:var(--cream);
  max-width:none;margin-left:0;margin-right:0}

/* ---------------------------------------------------------------------- faq */
.faqcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;
  margin:36px 0 0;text-align:left;align-items:start}
.fgroup>.mono{display:block;color:var(--orange-lit);margin-bottom:14px}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:.95rem;
  color:var(--cream);line-height:1.45;list-style:none;position:relative;
  padding-right:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:13px;
  color:var(--orange-lit);font-family:var(--f-mono)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--soft)}
@media (max-width:960px){.faqcols{grid-template-columns:1fr;max-width:640px}}

/* ------------------------------------------------------------------- final */
.final{background:rgba(22,35,46,.5)}
.final>.wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;
  align-items:center}
.final .side{display:flex;flex-direction:column;gap:12px}
.final p{color:var(--soft);max-width:34rem;margin-top:14px}
@media (max-width:820px){.final>.wrap{grid-template-columns:1fr;gap:32px}}

/* ------------------------------------------------------------------ footer */
footer{background:rgba(6,11,17,.55);color:var(--cream);padding:64px 0 40px;
  border-top:1px solid var(--hair-soft)}














@media (max-width:760px){.fgrid{grid-template-columns:1fr;gap:30px}
  .fbar{flex-direction:column;align-items:flex-start}}

/* -------------------------------------------------------- the sticky ask */
/* THE MOBILE STICKY ASK. The live site carries a fixed bar across the bottom of
   every phone screen; this is the same behaviour in this page's grading. It is
   below 900 px only, it arrives once the HUD has scrolled past, and its right
   padding keeps the chat launcher off the button at every width. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:12px 86px 12px 14px;
  background:rgba(9,16,23,.94);border-top:1px solid var(--hair);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transform:translateY(100%);transition:transform .34s var(--ease)}
.sticky-cta .btn{display:block;width:100%;padding:14px}
@media (max-width:899px){
  .sticky-cta{display:block}
  /* it is up while the reader is coming back up the page and out of the way
     while they are going down it (founder, 2026-09-04) */
  .sticky-cta.show{transform:none}
  .sticky-cta.show.away{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}


/* READING ALIGNMENT IS THE LIVE SITE'S (founder, 2026-09-04). The .ta-centre
   and .ta-left classes the measured pass used to hand out are gone with it. */

/* ------------------------------------------------------------- the free guide
   H: the capture box is the HUD's own plate, so it reads as one component with
   the cards above it rather than a second material. */
.capture{background:rgba(21,34,46,.96);border:1px solid rgba(250,247,242,.22)}
.capture::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(250,247,242,.075),rgba(250,247,242,0) 46%)}
.capture::after{left:16px;height:2.5px;width:52px;background:rgba(224,138,84,1)}
.capture .fkick{display:block;font-family:var(--f-mono);font-weight:500;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:#EFAB84;margin:2px 0 10px}   /* #E08A54 is 4.43:1 on the lifted plate */
.capture .flabel{font-size:1.12rem;color:var(--cream)}
.capture input[type=text],.capture input[type=email]{
  background:rgba(255,255,255,.07);border-color:rgba(250,247,242,.28)}

/* ============================================================ THE CARD, LOCKED
   Grok's crisp-HUD spec, 3 Sep 2026, section 1, applied verbatim to every card
   on the page so the HTML cards and the canvas HUD are one material.
   Separate layers: the blur and the veil live on a ::before, the type sits
   above it with no filter and no blend. Glow on the card, never on the type. */
.card,.hstep,.plan,.qrow,.proofcard,.bcell,.elpick,.stile,.cbox,.nr,.mrep,
.capture,.elquote,.mtab{
  position:relative;isolation:isolate;
  background:rgba(12,20,28,.84);
  border:1px solid rgba(250,247,242,.22);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(250,247,242,.10),
             inset 0 0 0 1px rgba(255,255,255,.04),
             0 12px 40px rgba(0,0,0,.55)}
.card::before,.hstep::before,.plan::before,.qrow::before,.proofcard::before,
.bcell::before,.elpick::before,.stile::before,.cbox::before,.nr::before,
.mrep::before,.capture::before,.elquote::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  background:linear-gradient(180deg,rgba(250,247,242,.16),rgba(250,247,242,.06));
  pointer-events:none;z-index:-1}
/* the veil sits BEHIND the content inside the card's own stacking context, so
   the type needs no z-index of its own and an absolutely placed tag (the
   RECOMMENDED badge, the element-pack tick) keeps its own positioning */
/* the accent is spent on one thing at a time: the recommended tile, the card
   in view, the one gauge arc. It is not on every border. */
.hstep.pop,.plan.pop,.cbox,.stile.accent,.elpick.sel{
  box-shadow:0 0 0 1px rgba(192,86,33,.35),0 12px 40px rgba(0,0,0,.55)}
.qrow::after,.proofcard::after{background:rgba(250,247,242,.18)}
.b-dark{background:rgba(20,32,42,.82)}
.b-founder{background:rgba(14,24,33,.82)}
.hstep.pop,.plan.pop{background:rgba(16,26,35,.82)}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mono,.pprice,.snum,.pnum,.ehero,.enum,.nr-frommeta{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* mono labels never drop below 11 px or .62 alpha */
.kicker,.mono,.pkick,.clabel,.blabel,.esrc,.psub,.brole{font-size:max(.688rem,11px)}
.kicker{letter-spacing:.10em}

/* ------------------------------------------- THE 11 px MONO FLOOR, EVERYWHERE
   Founder, 2026-09-04: "no mono label below 11 px anywhere". The mirrored
   chrome carried a dozen labels set between 9.3 and 10.9 px. They are raised
   here, once, to 0.6875rem = 11 px, rather than in twenty separate rules. The
   labels already at or above the floor are not listed, so nothing shrinks. */
.wordmark small,.fkick,.nr-frommeta,.nr-live,.nr-demotag,.nr-status,.nr-sug-l,
.pfor,.stair details summary,.badge,.dc-role,.dc-does-l,.enum,.eltile .enum,
.chip,.pmore summary,.mrep th,.mono.blabel,.fbar .mono,.scorechip,.esrc,
.tilehead .enum{font-size:.6875rem}

/* ==== css_demos.css ==== */
/* ============================================================================
   THE NINE DEMONSTRATION BUILDS, with the live sticky-pile "scope in".
   The mechanic is the live site's, unchanged: all nine cards sit adjacently in
   normal flow, each position:sticky at the same top offset with a rising
   z-index, so every card slides up and covers the pinned card before it, and
   covered cards recede on transform only. What changes is the grading: the
   card is the HUD's frosted plate, not a white slab.
   ========================================================================= */
.demos{background:rgba(11,19,27,.18);overflow-x:clip}
/* THE PLATE IS OPAQUE (founder, 2026-09-04; the live site's own rule, which
   its script states as "SOLID/OPAQUE - nothing behind can ghost through").
   The dark theme had it on var(--glass-lit), rgba(16,30,42,.86), so every
   pinned card showed the card underneath through its own body: two titles and
   two previews on screen at once. #101D28 is that same colour composited over
   the section ground, so nothing changes but the transparency. */
.demos .deckshot{position:relative;background:#0E1A24;
  border-bottom:1px solid var(--hair)}
.demos .deckshot img{width:100%;height:auto;display:block;aspect-ratio:16/9;
  object-fit:cover;object-position:top center}
.demos .dc-head{display:flex;flex-direction:column;gap:5px}
.demos .dc-name{font-family:var(--f-display);font-weight:800;font-size:1.4rem;
  line-height:1.1;letter-spacing:-.025em;margin:0;color:var(--cream)}
.demos .dc-role{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
.demos .dc-point{font-size:1rem;color:var(--soft);line-height:1.55;margin:0}
.demos .dc-does{font-size:.92rem;color:var(--soft);line-height:1.55;margin:0}
.demos .dc-does-l{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.demos .scorechips{display:flex;gap:7px;flex-wrap:wrap}
.demos .scorechip{font-family:var(--f-mono);font-size:.66rem;color:var(--soft);
  background:#16242F;border:1px solid var(--hair);border-radius:99px;
  padding:4px 11px;line-height:1.3;display:inline-flex;align-items:baseline;gap:6px;
  white-space:nowrap}
.demos .scorechip b{font-family:var(--f-display);font-weight:800;font-size:.8rem;
  color:var(--tick)}
.demos .dc-open{display:inline-block;align-self:flex-start;background:transparent;
  color:var(--cream);border:1px solid rgba(250,247,242,.36);text-decoration:none;
  font-weight:600;padding:12px 22px;border-radius:var(--r-ctl);font-size:.96rem}
.demos .dc-open:hover{background:rgba(250,247,242,.09);border-color:rgba(250,247,242,.7)}

.demos .card-front{background:#101D28;border:1px solid var(--hair);
  border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;
  color:var(--cream)}
.demos .card-front .fbody{padding:22px 26px 26px;display:flex;flex-direction:column;
  gap:14px;flex:1;text-align:left}

/* FALLBACK grid: default state, and what no-JS / reduced motion keep */
.demos .deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;margin:40px 0 0;align-items:start}
.demos .deckcard{min-width:0}
@media (prefers-reduced-motion:no-preference){
  .demos .deck:not(.is-deck) .card-front{
    transition:transform .2s var(--ease),border-color .2s var(--ease)}
  .demos .deck:not(.is-deck) .deckcard:hover .card-front{transform:translateY(-3px);
    border-color:rgba(250,247,242,.34)}
}

/* the sticky stacking pile */
/* THE RUN IN (founder, 2026-09-04): "tighten the gap after #included". Measured
   on the live page rather than judged: the section-to-section spacing there is
   104 px of padding each side, which is exactly what this page already had, so
   the ink-to-ink gap is 209 px on both. The one number that was ours and not
   the live page's was the pile's own lead in, 36 px against its 32. */
.demos .deck.is-deck{display:flex;flex-direction:column;align-items:center;
  gap:2.2rem;margin-top:32px;margin-bottom:24px;max-width:none}
.demos .deck.is-deck .deckcard{position:sticky;top:5vh;min-width:0}
/* width capped three ways so the whole card always fits the pinned viewport
   without cropping the 16:9 preview: hard max, 92vw, and a height-derived cap */
.demos .deck.is-deck .card-front{
  width:min(820px,92vw,calc((86vh - 320px) * 16 / 9));margin:0 auto;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transform-origin:top center;will-change:transform}
.demos .deck.is-deck .fbody{padding:20px 34px 24px;gap:12px}
.demos .deck.is-deck .dc-name{font-size:1.68rem}
.demos .deck.is-deck .dc-point{font-size:1.05rem}
@media (max-width:1000px){
  .demos .deck.is-deck .card-front{width:min(680px,92vw,calc((86vh - 300px) * 16 / 9))}
  .demos .deck.is-deck .fbody{padding:18px 26px 22px;gap:10px}
  .demos .deck.is-deck .dc-name{font-size:1.42rem}
  .demos .deck.is-deck .dc-point{font-size:1rem}
}
@media (max-height:760px){
  .demos .deck.is-deck .fbody{padding-top:14px;padding-bottom:16px;gap:9px}
}
/* THE PILE PINS UNDER THE HEADER ON A PHONE (2026-09-04). The pin is 5vh on
   every device, which is what the live page used and what the founder has
   always seen; on the live page the header scrolled away with the document, so
   5vh was clear air. This page's header is FIXED from the words screen onward
   and it is 65 px tall on a phone, so the pinned card's own screenshot spent
   the whole pile behind it. The phone pins below the header instead. The card
   is capped against the viewport height as well, so it still fits: 582 px of
   card under 72 px of pin, inside a 664 px window. */
@media (max-width:760px){
  .demos .deck.is-deck .deckcard{top:72px}
  .demos .deck.is-deck .card-front{
    width:min(680px,92vw,calc((86vh - 372px) * 16 / 9))}
}
.demos .seeall-wrap{text-align:center;margin:60px 0 8px}
.demos .deck.is-deck+.seeall-wrap{margin:64px 0 8px}
.demos .seeall-wrap .btn-line{padding:13px 22px}

@media (prefers-reduced-motion:reduce){
  .demos .deck,.demos .deck.is-deck{display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;
    margin-top:40px;margin-bottom:0;align-items:start}
  .demos .deck.is-deck .deckcard{position:static}
  .demos .deck.is-deck .card-front{width:auto;transform:none!important;
    will-change:auto;box-shadow:none}
}



/* ==========================================================================
   PRODUCTION OVERRIDES, written by production.py. Everything above this line
   is the approved mockup's own CSS, minus the chrome rules that /assets/site.css
   now owns for all 27 pages.
   ========================================================================== */

/* The one face the shared sheet does not carry: Inter 500, which this page uses
   for the card sub-labels. Same file the other pages already ship. */
@font-face{font-family:'Inter';font-weight:500;font-display:swap;
  src:url('/assets/fonts/Inter-500.woff2') format('woff2')}

/* THE CHROME ON THIS PAGE. The markup, the links and the type are the shared
   chrome, unchanged. Two grounds differ, and only because this page has its own:
   the header rides over the coast and the star field rather than over a navy
   hero band, and the footer stands on the star field. Both values are the
   approved mockup's own. */
header.site-chrome{background-image:none;background-color:transparent}
footer.site-chrome{background-image:none;
  background-color:rgba(6,11,17,.55)}

/* The proof cards' element tiles, restored from the live page and dressed for
   the dark ground: the live rule paints a navy tile, which is invisible here. */
.pelrow{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding-top:14px;border-top:1px dashed var(--hair-soft)}
.minitiles{display:flex;gap:8px;flex-shrink:0}
.minitile{width:44px;height:44px;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  background:rgba(255,255,255,.06);border:1px solid var(--hair);
  color:var(--cream);border-radius:8px;font-family:var(--f-display);
  font-weight:800;font-size:1.1rem;line-height:1;letter-spacing:-.02em}
.minitile em{font-style:normal;color:var(--orange-lit)}
.minitile .mnum{font-family:var(--f-mono);font-size:.5rem;font-weight:400;
  color:var(--muted);letter-spacing:.12em}

/* THE LIVE WORDING on the four package tiles. The mockup's ::before labels
   every open inclusions list "What's included"; the live page's word for the
   same list is "Everything included". Live wins on words. The care-plan lists
   keep the mockup's label: the live page has no label there to reconcile to. */
.stair .feat::before{content:"Everything included"}

/* THE DOCUMENT IS 30,000 PIXELS TALL AND THE READER CAN SEE 844 OF THEM.
   Measured on a phone at 4x CPU: blocking the page stylesheet took the first
   five seconds from 630 ms of blocking time to 310 ms, so half of everything
   this page blocks on is one style-and-layout pass over sixteen sections the
   reader has not reached. content-visibility lets the browser skip laying out a
   section until it is near the window, and contain-intrinsic-size gives it a
   height to reserve in the meantime, with `auto` so it remembers the real one
   once it has rendered it. Nothing about how a section looks changes; it is
   laid out when it is needed instead of all at once.

   Two sections are deliberately NOT in this list. #hud and #pitch are the
   landing and have to be laid out anyway. #statband is a ticker a few lines
   tall, so there is nothing to save. #demonstration-builds is the sticky card
   pile, and containment changes what position:sticky resolves against. */
@supports (content-visibility: auto){
  #who,#sound-familiar,#report,#packages,#included,#consult-info,#element-packs,
  #proof,#the-edge,#care-plans,#why-trust-us,#honesty,#faq,#start,
  footer.site-chrome{content-visibility:auto;contain-intrinsic-size:auto 900px}
}

/* THE CHAT LAUNCHER. /assets/chat.js appends its own <style> after this sheet,
   so these need one extra step of specificity to land. Navy on navy loses the
   button against this ground, so its face is cream here, as the cutover
   evaluation asked. Nothing else about the widget changes. */
body #cwx-chat-btn{background:#FAF7F2;
  box-shadow:0 10px 30px -6px rgba(0,0,0,.55)}
body #cwx-chat-btn:hover{background:#fff}
body #cwx-chat-btn .cwx-btnbadge{border-color:#0B131B}