/* ============================================================================
   home.css — the redesigned homepage (direction B, lit). Extracted from
   brand/proto/home-proto.html (the design of record this was migrated from).
   Registered in build.py CACHE_BUST_ASSETS — run python3 build.py after edits.
   ========================================================================== */
/* ============================================================================
   Thread homepage — WORKING PROTOTYPE (from the Claude Design draft).
   Direction B: --p paper #FCFCFB · --i ink #141414 · --q quiet #64686E ·
   --v verified #0F7B3B. Copy verbatim from index.html / dataroom.md.
   All cohort numbers are the site's real Sankey values (2,000 / 1,565 /
   1,102 / 918 · quiet 1,139) — the reference renders' numbers were
   image-tool inventions and are corrected here per the real-records rule.

   TWO SCROLL SCENES, sticky-scrub (normal scrolling, never wheel-hijack):
     scene 1 · the ledger — Enrolled at rest; Engaged, Verifying arrive on
       cuts with count-up; the quiet slab appears and slides out; Done
       arrives grey, lifts, flips green on a cut; then ±2° parallax.
     scene 2 · one thread — the real email → sms → voice conversation
       arrives message-by-message on cuts; ends on the printed receipt.
   Reduced-motion / non-scrolling views: both scenes fully assembled.
   Round 5b: comeback slowed again — 500vh. Round 5: slower scrubs (hero 2150, one-thread 1500) with
   end holds (450/350/430px of pinned travel at each finished frame); the
   comeback story starts at the seam (field+caption from p=0 — kills the
   black void between hero and story); verdict says ACTIVATED; a revenue
   beat added, verbatim from /for/payments ("Every day between signed and
   first transaction is processing revenue that never happened.") — a dollar
   stat for this cohort would be invented; the one real candidate is
   Customer.io's ~$1.4M, attributed — Sam's call.
   Round 4: machine text DECIDED = Public Sans tabular (Plex dropped, a/b
   duals removed); cursor parallax removed (scroll drift kept); Done slab
   lost its floor pool (it floats); hero receipt strip removed; THE COMEBACK
   inlined below the hero (adapted from hero/comeback.js — lit reskin,
   scattered rows, caption fades; see the inline component header).
   Also lit: the black nav bar (paper hairline below), the portal and voice
   panels (live-site strings verbatim; the a-guide-at-work read ignites
   green), and the industries dark band of rim cards. Scene-2 channels are
   hue-coded (email white · sms blue · voice violet — never green: the call
   can't cheat). Arrivals now fade (.24s slabs, .55s messages); .rv/.rv-i
   sections stagger in via IntersectionObserver, only when body.anim.

   THE MATERIAL — lit (Sam picked the lit direction 2026-08-31, superseding
   the earlier no-gradient slab rule by reference approval): edge-lit frosted
   slabs on near-black #0A0A0A — gradient falloff across the face, hot rim
   (crisp 1.6px + two blurred strokes) on the top silhouette and bottom seam,
   a radial glow pool on the floor, rounded corners (rx16 plane space),
   glowing text (feDropShadow). Stage hues are scene-local, NOT tokens:
   Enrolled white · Engaged violet · Verifying blue · Done green (arrives
   white-grey, flips green) · the quiet slab is the UNLIT one.

   HAIRLINE FLAGS (each genuinely needed):
     paper ground — dashed receipt rule ink@.45 · slot corner marks ink@.30 ·
       secondary-btn border ink@.35
     ink fields — message-card hairline paper@.22 · meta text paper@.62 ·
       secondary-btn border quiet (solid)
     slab material — the three fixed face tones are SOLID COMPOSITES of
       paper/green at .92/.38/.20 over ink (#E9E9E8/#6C6C6B/#424241 ·
       #0F7338/#123B23/#13291C): literal alphas stack additively where
       slabs overlap; solids keep the same tones with physical occlusion.
   ========================================================================== */
:root{
  --p:#FCFCFB; --i:#141414; --q:#64686E; --v:#0F7B3B;
  --dash:rgba(20,20,20,.45); --mark:rgba(20,20,20,.30); --bord:rgba(20,20,20,.35);
  --pl62:rgba(252,252,251,.62); --pl22:rgba(252,252,251,.22);
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Public Sans",Helvetica,Arial,sans-serif;
}
html{scroll-behavior:auto;background:#0A0A0A;} /* rubber-band ends match nav + footer */
body{margin:0;background:var(--p);color:var(--i);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:var(--i);text-decoration:none;} a:hover{color:var(--q);}
.shell{max-width:1160px;margin:0 auto;padding:0 40px;}
h1,h2,h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;margin:0;}
.eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--q);margin:0 0 14px;}
.sub{color:var(--q);font-size:17px;line-height:1.6;max-width:62ch;margin:20px 0 0;}
.sub strong{color:var(--i);font-weight:600;}
.sub a{color:var(--i);font-weight:600;}
.btn{display:inline-flex;align-items:center;border-radius:4px;padding:12px 22px;font-family:var(--sans);font-size:13.5px;font-weight:600;border:1px solid transparent;white-space:nowrap;cursor:pointer;}
.btn-ink{background:var(--i);color:var(--p);}
.btn-line{background:transparent;color:var(--i);border-color:var(--bord);}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--i);outline-offset:3px;}
.mx{display:flex;align-items:baseline;gap:10px;font-size:13px;font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--q);}
.mx b{color:var(--v);font-weight:600;}
.rline{border-top:1px dashed var(--dash);padding-top:12px;}
.slot{position:relative;background:var(--p);display:flex;align-items:center;justify-content:center;}
.slot .lab{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.05em;color:var(--q);text-align:center;line-height:1.7;}
.cm{position:absolute;width:16px;height:16px;border-color:var(--mark);border-style:solid;border-width:0;}
.cm.tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;}
.cm.tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;}
.cm.bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;}
.cm.br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;}
.sect{padding:150px 0 0;}
.stepn{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--q);letter-spacing:.02em;}

/* ── scene 1 · the ledger ── */
#sc1-outer{height:calc(100vh + 2150px);}
#sc1-pin{position:sticky;top:0;height:100vh;height:100svh;background:var(--i);color:var(--p);overflow:hidden;display:flex;align-items:center;}
#sc1-pin .grid{max-width:1240px;margin:0 auto;padding:64px 40px;display:grid;grid-template-columns:470px minmax(0,1fr);gap:56px;align-items:center;width:100%;box-sizing:border-box;}
#stack-svg{display:block;width:100%;max-height:82vh;height:auto;margin:0 auto;overflow:visible;}
#stack{transform-box:view-box;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.3,.7,.3,1);}
.sl{transition:opacity .24s ease-out;}
.sl.off{opacity:0;}
/* assembled defaults (no-JS / static / reduced-motion) */
#sh-qu{transform:translate(-206px,103px);}
#sh-dn{transform:translateY(-164px);}
#sh-dn .dn-grey{display:none;}
#sh-dn.pre .dn-grey{display:inline;}
#sh-dn.pre .dn-green{display:none;}

/* the lit material — near-black grounds, per-slab atmosphere; quiet is unlit */
#sc1-pin,#sc2-pin{background:#0A0A0A;}
#sh-en{filter:drop-shadow(0 0 16px rgba(252,252,251,.28)) drop-shadow(0 0 48px rgba(252,252,251,.12));}
#sh-dn:not(.pre){filter:drop-shadow(0 0 18px rgba(32,200,100,.45)) drop-shadow(0 0 54px rgba(32,200,100,.2));}
#sh-dn.pre{filter:drop-shadow(0 0 16px rgba(252,252,251,.26)) drop-shadow(0 0 44px rgba(252,252,251,.11));}
#sh-qu{filter:none;}

/* ── scene 2 · one thread ── */
#sc2-outer{height:calc(100vh + 1500px);}
#sc2-pin{position:sticky;top:0;height:100vh;height:100svh;background:var(--i);color:var(--p);overflow:hidden;display:flex;align-items:center;}
#sc2-pin .grid{max-width:1240px;margin:0 auto;padding:64px 40px;display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:72px;align-items:center;width:100%;box-sizing:border-box;}
.convo{display:flex;flex-direction:column;gap:14px;min-height:520px;justify-content:flex-end;}
.ev{transition:opacity .55s cubic-bezier(.3,.7,.3,1),transform .55s cubic-bezier(.3,.7,.3,1);}
.ev.off{opacity:0;transform:translateY(16px);}
.cmsg{border:1px solid rgba(252,252,251,.4);border-radius:4px;padding:13px 16px;max-width:88%;font-size:15px;line-height:1.55;background:#0A0A0A;box-shadow:0 0 16px rgba(252,252,251,.14),0 0 44px rgba(252,252,251,.07);}
.cmsg.them{align-self:flex-end;color:var(--pl62);}
.cmsg .meta{display:block;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.02em;color:var(--pl62);margin-top:7px;}
.cswitch{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.02em;color:var(--pl62);align-self:center;}
.ccall{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(252,252,251,.4);border-radius:4px;padding:14px 16px;max-width:88%;background:#0A0A0A;box-shadow:0 0 16px rgba(252,252,251,.14),0 0 44px rgba(252,252,251,.07);}
.ccall svg{flex:none;margin-top:3px;}
.ccall .t{font-size:15px;font-weight:600;}
.ccall .m{display:block;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.02em;color:var(--pl62);margin-top:5px;}
.ccall .n{display:block;font-size:13px;color:var(--pl62);margin-top:7px;}
.crec{border-top:1px dashed rgba(252,252,251,.45);padding-top:12px;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12.5px;letter-spacing:.01em;color:var(--pl62);}
.crec b{color:var(--p);font-weight:600;}
.sc2-note{font-family:var(--sans);font-size:9px;letter-spacing:.05em;color:var(--pl62);opacity:.7;margin-top:18px;}

/* nav — the black bar; THREAD hugs the page edge (full-bleed row) */
#topnav{background:#0A0A0A;border-bottom:1px solid rgba(252,252,251,.18);}
#topnav a{color:var(--pl62);} #topnav a:hover{color:var(--p);}
#topnav .nv-on{color:var(--p);font-weight:500;}
#topnav .wordmark{font-size:13.5px;font-weight:700;letter-spacing:.34em;color:var(--p);}
#topnav .btn-line{border-color:rgba(252,252,251,.4);color:var(--p);background:transparent;}
#topnav .btn-ink{background:var(--p);color:var(--i);}

/* scene-2 channel hues — email white, sms blue, voice violet; no green:
   the call never verifies, so nothing in this scene may wear it */
.ch-em{border-color:rgba(252,252,251,.4);}
.ch-sms{border-color:rgba(122,168,255,.5);box-shadow:0 0 16px rgba(61,126,255,.22),0 0 44px rgba(61,126,255,.10);}
.ch-vo{border-color:rgba(190,172,252,.55);box-shadow:0 0 16px rgba(154,134,240,.26),0 0 44px rgba(154,134,240,.12);}
.sw-sms{color:rgba(160,196,255,.85);}
.sw-vo{color:rgba(205,195,251,.9);}

/* lit panels on paper ground — portal, voice */
.lpanel{background:#0A0A0A;color:var(--p);border:1px solid rgba(252,252,251,.28);border-radius:4px;padding:26px 28px;box-shadow:0 0 22px rgba(252,252,251,.09),0 0 60px rgba(252,252,251,.04);}
.lp-label{font-size:12.5px;font-weight:500;color:var(--pl62);}
.lp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14.5px;}
.lp-st{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.02em;color:var(--pl62);white-space:nowrap;}
.lp-ok{color:#45D07E;}
.lp-track{height:3px;background:rgba(252,252,251,.14);border-radius:2px;overflow:hidden;}
.lp-track i{display:block;height:100%;width:75%;background:var(--p);box-shadow:0 0 8px rgba(252,252,251,.5);}
.lp-rec{border-top:1px dashed rgba(252,252,251,.45);padding-top:11px;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11.5px;letter-spacing:.01em;color:var(--pl62);}
.lp-rec b{color:var(--p);font-weight:600;}

/* industries — the dark band of cards */
.dark-band{background:#0A0A0A;color:var(--p);margin-top:150px;padding:120px 0;}
.icards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px;}
.icard{border:1px solid rgba(252,252,251,.22);border-radius:4px;padding:24px 26px;display:flex;flex-direction:column;gap:12px;background:#0A0A0A;transition:border-color .3s,box-shadow .3s;}
.icard:hover{border-color:rgba(252,252,251,.55);box-shadow:0 0 18px rgba(252,252,251,.12),0 0 48px rgba(252,252,251,.05);}
.icard .tag{font-size:12px;font-weight:500;color:var(--pl62);}
.icard h3{font-size:23px;color:var(--p);}
.icard p{font-size:13.5px;line-height:1.6;color:var(--pl62);margin:0;}
.icard .meta{font-size:12px;color:var(--pl62);margin-top:auto;padding-top:6px;}
.icard .meta a{color:var(--p);font-weight:600;}

/* first-paint guard: html.pre is set by an inline head script (only when
   motion is allowed); home.js removes it once scene state is applied, and a
   2.5s failsafe removes it regardless — so nothing assembled ever flashes
   before the scrub hides it, and no-JS still paints the full page */
html.pre #sh-eg,html.pre #sh-ve,html.pre #sh-qu,html.pre #sh-dn{opacity:0;}
html.pre .ev{opacity:0;transform:translateY(16px);}
html.pre .rv .rv-i{opacity:0;transform:translateY(14px);}
html.pre .cb-cap,html.pre .cb-ctr,html.pre .cb-src{opacity:0;}

/* the comeback — lit reskin of hero/comeback.css */
.cb-stage{height:100vh;position:relative;}
body.anim .cb-stage{height:500vh;}
.cb-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
.cb-root{position:relative;overflow:hidden;background:#0A0A0A;color:var(--p);}
.cb-root canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.cb-cap{position:absolute;left:4.5%;right:4.5%;top:min(7vh,64px);font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(27px,3.6vw,46px);line-height:1.14;letter-spacing:-0.008em;max-width:26ch;color:var(--p);}
.cb-cap .cb-cap2{margin-top:.55em;}
.cb-ctr,.cb-src{position:absolute;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;line-height:1.5;letter-spacing:.01em;}
.cb-ctr{right:4.5%;bottom:calc(20px + env(safe-area-inset-bottom,0px));text-align:right;color:var(--p);}
.cb-src{left:4.5%;bottom:calc(20px + env(safe-area-inset-bottom,0px));color:var(--pl62);}

/* scroll-in reveals (active only when the scrub runs — body.anim) */
body.anim .rv .rv-i{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.3,.7,.3,1),transform .6s cubic-bezier(.3,.7,.3,1);}
body.anim .rv.on .rv-i{opacity:1;transform:none;}
.rv .rv-i:nth-child(2){transition-delay:.07s;}
.rv .rv-i:nth-child(3){transition-delay:.14s;}
.rv .rv-i:nth-child(4){transition-delay:.21s;}
.rv .rv-i:nth-child(5){transition-delay:.28s;}
.rv .rv-i:nth-child(6){transition-delay:.35s;}
.rv .rv-i:nth-child(7){transition-delay:.42s;}

/* the black footer + sinking THREAD moved to foot.css — the shared,
   site-wide source of truth (every page links it last). Edit it there. */

@media (max-width:960px){
  /* MOBILE: the scrubs are off (home.js gates on width) — every scene serves
     its assembled state. No pinned scene may become a nested scroll trap. */
  #sc1-outer,#sc2-outer{height:auto;}
  #sc1-pin,#sc2-pin{position:static;height:auto;min-height:0;padding:72px 0;overflow:visible;}
  #sc1-pin .grid,#sc2-pin .grid{grid-template-columns:minmax(0,1fr);gap:36px;padding:0 24px;}
  .cb-stage{height:auto;}
  .cb-stick{position:static;height:78svh;min-height:520px;}
  #portal-row,#voice-row,#floor-row{grid-template-columns:minmax(0,1fr)!important;gap:36px!important;}
  .m1col{grid-template-columns:minmax(0,1fr)!important;}
  h2[style*="font-size:40px"]{font-size:clamp(29px,7.6vw,40px)!important;}
  /* nav: THREAD + the primary CTA only */
  #topnav > div{justify-content:space-between;gap:14px;padding:14px 20px;}
  #topnav .navlinks{display:none!important;}
  #topnav .btn-line{display:none!important;}
  #topnav a[href^="https://stitch"]{display:none!important;}
  #topnav .btn-ink{padding:10px 14px;font-size:12.5px;}
  .shell{padding-left:24px;padding-right:24px;}
  .icards{grid-template-columns:minmax(0,1fr);}
  .grids4{grid-template-columns:minmax(0,1fr) !important;}
  /* chapter seams — a plumb line so every ground change reads as a
     transition on mobile (desktop gets this from the scenes themselves) */
  .sect.seam{position:relative;padding-top:132px!important;}
  .sect.seam::before{content:"";position:absolute;top:48px;left:50%;transform:translateX(-50%);width:1px;height:44px;background:var(--bord);}
  .dark-band{position:relative;padding-top:118px;}
  .dark-band::before{content:"";position:absolute;top:40px;left:50%;transform:translateX(-50%);width:1px;height:44px;background:rgba(252,252,251,.32);}
  #sc2-pin{position:relative;padding-top:118px;}
  #sc2-pin::before{content:"";position:absolute;top:40px;left:50%;transform:translateX(-50%);width:1px;height:44px;background:rgba(252,252,251,.32);}
  /* glow budget: drop the blurred SVG strokes, keep crisp rims + one shadow */
  #stack path[filter]{display:none;}
  #sh-en,#sh-eg,#sh-ve,#sh-dn.pre{filter:drop-shadow(0 0 12px rgba(252,252,251,.16))!important;}
  #sh-dn:not(.pre){filter:drop-shadow(0 0 14px rgba(32,200,100,.3))!important;}
}
@media (prefers-reduced-motion: reduce){
  #sc1-outer,#sc2-outer{height:auto;}
  #sc1-pin,#sc2-pin{position:static;height:auto;min-height:0;padding:80px 0;}
  #stack,.sl,.ev,.rv .rv-i{transition:none;}
}
/* ?rm=1 — assembled/static preview, mirrors the reduced-motion layout */
body.rm #sc1-outer,body.rm #sc2-outer{height:auto;}
body.rm #sc1-pin,body.rm #sc2-pin{position:static;height:auto;min-height:0;padding:80px 0;}
body.rm .cb-stage{height:640px;}
body.rm .cb-stick{position:static;height:640px;}


/* ════════════════════════════════════════════════════════════════════════
   WIDGETS — the voice modal + agent builder (voice.js), ported VERBATIM
   from guide.css (btn rules + lines 511–660). They keep the old design on
   purpose: product widgets; restyling them lit is migration phase 1.
   Vars scoped to the overlay so nothing leaks into the page.
   ════════════════════════════════════════════════════════════════════════ */
.vg-overlay{
  --ground:#FAF9F4;--panel:#FFFFFF;--panel-2:#F3F1E9;--ink-well:#161615;--ink-well-2:#212120;
  --border:#E6E3D8;--border-strong:#D4D0C2;--line:var(--border);--fg:#161615;--muted:#5F5B51;--faint:#8B8678;
  --brand:#2E9E53;--green-deep:#15803D;--cta:#22C55E;--cta-hover:#1DB255;--cta-ink:#08130B;
  --slate:100,116,139;--blue:59,130,246;--indigo:99,102,241;--violet:139,92,246;--green:22,163,74;--green-bright:52,211,153;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(0.23,1,0.32,1);
  color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;
}
.vg-overlay .btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  font-family: var(--sans); letter-spacing: -.005em;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .12s;
}
/* primary: the earned green, deep — white text, quiet shadow, no glow */
.vg-overlay .btn-green { background: var(--ink-well); color: #fff; border-color: rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(22,22,21,.18); }
.vg-overlay .btn-green:hover { background: #000; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(22,22,21,.16); }
.vg-overlay .btn-ghost { border-color: var(--border-strong); color: var(--fg); background: transparent; }
.vg-overlay .btn-ghost:hover { border-color: var(--faint); background: var(--panel); }
.vg-overlay .btn .tel { font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: inherit; opacity: .8; }
.btn-voice { border-color: var(--border-strong); color: var(--fg); background: var(--panel); display: inline-flex; align-items: center; gap: 9px; }
.btn-voice:hover { border-color: var(--faint); }
.btn-voice .gdw { position: relative; width: 16px; height: 14px; flex: none; }
.btn-voice .gd { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #7ADFA4, var(--cta) 58%, var(--green-deep)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .3s var(--ease), opacity .25s; }
.btn-voice .gw { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 0; transition: opacity .25s; }
.btn-voice .gw i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #7ADFA4, var(--green-deep)); transform: scaleY(.35); }
.btn-voice:hover .gd { transform: translate(-50%,-50%) scale(.3); opacity: 0; }
.btn-voice:hover .gw { opacity: 1; }
.btn-voice:hover .gw i { animation: vg-eq .85s ease-in-out infinite; }
.btn-voice:hover .gw i:nth-child(2) { animation-delay: .14s; }
.btn-voice:hover .gw i:nth-child(3) { animation-delay: .28s; }
.btn-voice:hover .gw i:nth-child(4) { animation-delay: .42s; }
@keyframes vg-eq { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .btn-voice:hover .gw i { animation: none; transform: scaleY(.7); } }

.vg-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(22,22,21,.42); display: none; align-items: center; justify-content: center; padding: 24px; }
.vg-overlay.open { display: flex; }
.vg-modal { position: relative; width: min(620px, 100%); max-height: 90vh; overflow: auto; background: var(--ground); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 80px rgba(22,22,21,.25); }
.vg-close { position: absolute; top: 10px; right: 12px; z-index: 2; appearance: none; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--faint); cursor: pointer; padding: 6px; }
.vg-close:hover { color: var(--fg); }
.vg-session { padding: 44px 36px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; justify-content: center; }
.vg-orb { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #7ADFA4, var(--cta) 58%, var(--green-deep)); box-shadow: 0 2px 10px rgba(20,60,35,.3), inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .3s; }
.vg-orb.speaking { animation: vg-speak 1s ease-in-out infinite; }
.vg-orb.listening { animation: vg-listen 2.4s ease-in-out infinite; }
@keyframes vg-speak { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes vg-listen { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .vg-orb.speaking, .vg-orb.listening { animation: none; } }
.vg-status { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); min-height: 16px; }
.vg-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vg-alt { font-size: 12.5px; color: var(--muted); }
.vg-alt a { color: var(--green-deep); font-family: var(--mono); font-size: 12px; }
.vg-kb { border-top: 1px solid var(--border); background: var(--panel); padding: 14px 28px 18px; border-radius: 0 0 18px 18px; }
.vg-kb-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--faint); margin-bottom: 9px; }
.vg-kb-chips { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.vg-kb-chips::-webkit-scrollbar { display: none; }
.vg-kb-chips + .vg-kb-chips { margin-top: 7px; }
.vg-kb-cat { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--faint); flex: none; width: 128px; }
.vg-kb-item { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 8px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-decoration: none; transition: background .25s, border-color .25s, color .25s; }
.vg-kb-item:hover { border-color: var(--border-strong); color: var(--fg); }
.vg-kb-item i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); flex: none; transition: background .3s; }
.vg-kb-item.reading { background: rgba(var(--green),.07); border-color: rgba(var(--green),.4); color: var(--green-deep); }
.vg-kb-item.reading i { background: rgb(var(--green)); }



/* ── build your own activation agent ─────────────────────────────────────── */
.ab-card { max-width: 640px; }
.ab-row { display: flex; gap: 10px; margin-top: 20px; }
.ab-url { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--fg); background: var(--panel); }
.ab-url:focus { outline: none; border-color: var(--green-deep); }
.ab-url::placeholder { color: var(--faint); }
.ab-status { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 14px; min-height: 16px; }
.ab-found { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ab-chip { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.ab-chip.on { opacity: 1; transform: none; }
.ab-test { margin-top: 18px; }
@media (max-width: 560px) { .ab-row { flex-direction: column; } }


/* suggested questions in the custom-agent modal */
.vg-ask { width: 100%; max-width: 400px; text-align: left; margin-top: 4px; }
.vg-ask-h { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--faint); margin-bottom: 6px; }
.vg-ask-q { font-family: var(--serif); font-size: 14px; line-height: 1.45; color: var(--muted); padding: 3px 0; }


/* ── builder wizard ──────────────────────────────────────────────────────── */
.bw-modal { width: min(840px, 100%); padding: 40px 36px 32px; }
.bw-grid { display: grid; grid-template-columns: 1fr 264px; gap: 32px; align-items: start; }
.bw-left { min-width: 0; }
/* the agent, assembling on the right — persists from build through the call */
.bw-agent { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bw-orb { width: 62px; height: 62px; border-radius: 50%; opacity: .38; filter: saturate(.25); transition: opacity .8s var(--ease), filter .8s var(--ease); }
.bw-agent.live .bw-orb { opacity: 1; filter: none; }
.bw-a-name { margin-top: 14px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-well); }
.bw-a-dom { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--faint); margin-top: 3px; }
.bw-a-sec { width: 100%; margin-top: 16px; text-align: left; animation: readout-in .5s var(--ease); }
.bw-a-h { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--faint); margin-bottom: 7px; }
.bw-a-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bw-a-chips .vg-kb-item { flex: none; }
.bw-a-fine { font-family: var(--mono); font-size: 8.5px; letter-spacing: .05em; color: var(--faint); margin-top: 7px; }
/* step 4 — after the call */
.bw-s4-status { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--green-deep); }
.bw-live { border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 14px; margin-top: 16px; background: var(--panel); }
.bw-live-lede { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; }
.bw-live-note { margin-top: 10px; }
.bw-step { display: none; }
.bw-step.on { display: block; }
.bw-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--green-deep); margin: 0 0 12px; }
.bw-h { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -.01em; margin: 0 0 8px; }
.bw-sub { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 18px; max-width: 40ch; }
.bw-row { display: flex; gap: 8px; margin-bottom: 10px; }
.bw-row input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--fg); background: var(--panel); }
.bw-row input:focus { outline: none; border-color: var(--green-deep); }
.bw-row input.err { border-color: #C2410C; }
.bw-note { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 8px; }
.bw-build { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.bw-p { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 9px 12px; font-size: 12.5px; font-weight: 500; color: var(--fg); opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .35s, background .35s; }
.bw-p.on { opacity: 1; transform: none; }
.bw-p i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: none; }
.bw-p.on:not(.done) i { background: rgb(var(--blue)); animation: fx-soft 1.4s ease-in-out infinite; }
.bw-p.done { border-color: rgba(var(--green),.4); background: rgba(var(--green),.05); }
.bw-p.done i { background: rgb(var(--green)); animation: none; }
.bw-p em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--green-deep); white-space: nowrap; }
.bw-est { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; animation: readout-in .5s var(--ease); }
.bw-est span { color: var(--faint); font-size: 8.5px; letter-spacing: .1em; margin-left: 6px; }
.bw-err { font-family: var(--mono); font-size: 10.5px; color: #C2410C; margin-top: 8px; }
/* country code embedded in the phone field, inline caret */
.bw-phonewrap { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--panel); }
.bw-phonewrap:focus-within { border-color: var(--green-deep); }
.bw-phonewrap:has(.err) { border-color: #C2410C; }
.bw-cc { flex: none; width: 62px; padding: 11px 20px 11px 12px; border: 0; border-right: 1px solid var(--border); border-radius: 10px 0 0 10px; font-family: var(--mono); font-size: 13px; color: var(--fg); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%238B8678' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center; appearance: none; cursor: pointer; }
.bw-cc:focus { outline: none; }
.bw-phonewrap .bw-phone { border: 0 !important; background: transparent; flex: 1; min-width: 0; padding: 11px 12px; font-family: var(--mono); font-size: 13px; color: var(--fg); }
.bw-phonewrap .bw-phone:focus { outline: none; }
.bw-found { margin-top: 14px; }
.bw-skip { appearance: none; border: 0; background: none; font-family: var(--mono); font-size: 10.5px; color: var(--faint); cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.bw-skip:hover { color: var(--fg); }
@media (max-width: 760px) { .bw-grid { grid-template-columns: 1fr; } .bw-agent { flex-direction: row; flex-wrap: wrap; text-align: left; gap: 0 14px; padding: 16px; } .bw-orb { width: 44px; height: 44px; } .bw-a-name { margin-top: 0; } .bw-a-sec { margin-top: 12px; } }
@media (max-width: 560px) { .bw-row { flex-direction: column; } .bw-modal { padding: 32px 22px 26px; } }


/* jade orbs in CTAs and the modal (canvas from guide.js ThreadOrb) */
.btn-voice .gd.gd-orb { background: none; box-shadow: none; width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; }
.btn-voice .gw { display: none !important; }
.btn-voice:hover .gd { transform: translate(-50%,-50%); opacity: 1; }
.vg-orb.has-orb { background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; }


/* orbiting electrons on a nucleus orb (atom.tsx grammar) */
.gd-orb, .vg-orb.has-orb, .bw-orb { position: relative; }
.gd-orb canvas, .vg-orb.has-orb > canvas, .bw-orb > canvas { position: relative; z-index: 2; }
.orb-eholder { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.btn-voice, .btn-voice .gdw { overflow: visible; }
/* done-with-call fallback sits quiet under the status line */
.bw-done { margin-top: 4px; }


/* impact estimates — tinted, with the value set heavy */
.vg-kb-item.imp b { font-weight: 700; margin: 0 1px; }
.vg-kb-item.imp-g { background: #ECFDF3; border-color: #BBE7C8; color: #15803D; }
.vg-kb-item.imp-g i { background: #22C55E; }
.vg-kb-item.imp-b { background: #EEF2FF; border-color: #C7D2FE; color: #4338CA; }
.vg-kb-item.imp-b i { background: #6366F1; }
.vg-kb-item.imp-v { background: #F5F3FF; border-color: #DDD6FE; color: #6D28D9; }
.vg-kb-item.imp-v i { background: #8B5CF6; }
.vg-kb-more { color: var(--faint); }
.vg-kb-more::before { content: none; }
/* product list never stretches the panel — two rows of pills, tops */
.bw-a-products .bw-a-chips { max-height: 76px; overflow: hidden; }



/* ════════════════════════════════════════════════════════════════════════
   WIDGETS, LIT — the restyle over the ported block above (migration plan
   Phase 1.2, done): dark panels, paper text, 4px radius, glow edges, paper
   primary button. The var remap feeds every ported rule; the few hardcoded
   old values are overridden below it.
   ════════════════════════════════════════════════════════════════════════ */
.vg-overlay{
  --ground:#0A0A0A;--panel:#141414;--panel-2:#1A1A19;--ink-well:#101010;--ink-well-2:#1C1C1B;
  --border:rgba(252,252,251,.22);--border-strong:rgba(252,252,251,.4);--line:rgba(252,252,251,.22);
  --fg:#FCFCFB;--muted:rgba(252,252,251,.62);--faint:rgba(252,252,251,.45);
  --green-deep:#45D07E;--cta:#0F7B3B;--cta-hover:#128a44;--cta-ink:#FCFCFB;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Public Sans",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Public Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  background:rgba(5,5,5,.6);
}
.vg-overlay .vg-modal{
  border-radius:4px;
  box-shadow:0 0 24px rgba(252,252,251,.10),0 0 72px rgba(252,252,251,.05);
}
.vg-overlay .btn-green{background:#FCFCFB;color:#141414;border-color:transparent;box-shadow:none;}
.vg-overlay .btn-green:hover{background:#FFFFFF;transform:none;box-shadow:none;}
.vg-overlay .btn-ghost{border-color:rgba(252,252,251,.4);color:#FCFCFB;background:transparent;}
.vg-overlay .btn-ghost:hover{border-color:rgba(252,252,251,.7);background:rgba(252,252,251,.06);}
.vg-overlay input,.vg-overlay textarea{background:#141414;color:#FCFCFB;border:1px solid rgba(252,252,251,.3);border-radius:4px;}
.vg-overlay input::placeholder{color:rgba(252,252,251,.4);}
.vg-overlay input,.vg-overlay select,.vg-overlay textarea{font-size:16px;} /* iOS: no focus zoom */
.vg-overlay .vg-close{top:2px;right:2px;padding:10px 14px;min-width:44px;min-height:44px;font-size:24px;}
.vg-overlay .vg-modal{overscroll-behavior:contain;}
.vg-overlay a{color:#45D07E;}
.vg-overlay .bw-a-name{color:#FCFCFB;}
.vg-overlay .btn{border-radius:4px;}


/* ── portal choreography — the steps complete while you watch ── */
#pp .lp-track i{transition:width .6s cubic-bezier(.3,.7,.3,1);}
body.anim #pp{transition:opacity .7s;}
body.anim #pp.pre{opacity:.45;}
body.anim #pp [data-b]{opacity:0;transition:opacity .45s;}
body.anim #pp [data-b].on{opacity:1;}

/* ── voice beats — the check enacted in time; green is landed, not shown ── */
.vgo{color:#45D07E;}
body.anim #vp [data-vb]{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.3,.7,.3,1),transform .5s cubic-bezier(.3,.7,.3,1);}
body.anim #vp [data-vb].on{opacity:1;transform:none;}
body.anim #vp .vgo{color:var(--pl62);transition:color .45s;}
body.anim #vp .vgo.on{color:#45D07E;}

/* ── the phone chip — the demo is real ── */
.telchip{display:inline-flex;align-items:center;gap:12px;margin-top:18px;background:var(--i);color:var(--p);border:1px solid rgba(252,252,251,.14);border-radius:4px;padding:10px 18px 10px 12px;font-size:14.5px;font-weight:600;transition:box-shadow .3s,border-color .3s;}
.telchip:hover{color:var(--p);border-color:rgba(252,252,251,.35);box-shadow:0 0 18px rgba(20,20,20,.25);}
.telchip #orbslot{width:28px;height:28px;flex:none;display:block;}
.telchip .telchip-l{font-size:11px;font-weight:500;color:rgba(252,252,251,.62);letter-spacing:.01em;}

/* ── the pay line — centered; the second sentence gains weight as it lands
   (Newsreader's variable wght axis 400–600 is loaded, so font-weight
   transitions render as true variable-weight motion) ── */
#paidline .paid-b{color:var(--i);font-weight:600;}
body.anim #paidline .paid-b{font-weight:400;transition:font-weight .9s cubic-bezier(.3,.7,.3,1) .25s;}
body.anim #paidline.on .paid-b{font-weight:600;color:var(--i);}

/* ── nav — the case-studies hover card (the old gnav menu, lit) ── */
#topnav{position:relative;z-index:50;}
.nv-drop{position:relative;display:flex;align-items:center;}
.nv-drop>a{display:inline-block;}
.nv-drop .nv-menu{position:absolute;top:100%;left:-14px;padding-top:18px;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;z-index:60;}
.nv-drop:hover .nv-menu,.nv-drop:focus-within .nv-menu{opacity:1;visibility:visible;}
.nv-card{background:#141414;border:1px solid rgba(252,252,251,.22);border-radius:4px;box-shadow:0 0 24px rgba(252,252,251,.10),0 0 72px rgba(252,252,251,.05);width:300px;padding:6px;}
#topnav .nv-card a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:4px;color:var(--p);}
#topnav .nv-card a:hover{background:rgba(252,252,251,.06);color:var(--p);}
.nv-card img{width:34px;height:34px;border-radius:6px;display:block;flex:none;}
.nv-mt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.nv-mt b{font-size:13.5px;font-weight:600;color:var(--p);}
.nv-mt span{font-size:12px;line-height:1.45;color:var(--pl62);white-space:normal;}
#topnav .nv-card .nv-all{border-top:1px solid rgba(252,252,251,.14);margin-top:4px;font-size:12.5px;color:var(--pl62);}
#topnav .nv-card .nv-all:hover{color:var(--p);}


/* ── mobile polish (research rounds 3-4) ── */
@media (max-width:640px){
  .cb-ctr{bottom:calc(20px + env(safe-area-inset-bottom,0px));}
  .cb-src{bottom:calc(46px + env(safe-area-inset-bottom,0px));}
}
.vg-overlay .vg-modal{max-height:90vh;max-height:90dvh;}
.vg-overlay .vg-kb-item,.vg-overlay .vg-kb-cat,.vg-overlay .vg-kb-more{font-size:11px;}
@media (hover:none){
  .icard:hover{border-color:rgba(252,252,251,.22);box-shadow:none;}
  .telchip:hover{border-color:rgba(252,252,251,.14);box-shadow:none;}
}
@media (max-width:960px){
  .foot-mark svg{filter:drop-shadow(0 0 22px rgba(252,252,251,.14));}
}

/* ── mobile nav: burger + drawer (injected by guide.js on lit pages) ── */
.nv-burger{display:none;background:transparent;border:0;padding:10px 6px;cursor:pointer;flex-direction:column;gap:6px;align-items:flex-end;}
.nv-burger span{display:block;width:20px;height:1.7px;background:var(--p);transition:transform .28s ease,opacity .28s ease,width .28s ease;}
.nv-burger[aria-expanded="true"] span:first-child{transform:translateY(3.8px) rotate(45deg);}
.nv-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.9px) rotate(-45deg);width:20px;}
.nv-drawer{display:none;position:fixed;left:0;right:0;top:0;bottom:0;z-index:49;background:#0A0A0A;padding:86px 24px 34px;box-sizing:border-box;overflow-y:auto;flex-direction:column;}
.nv-drawer.open{display:flex;}
.nv-drawer-links{display:flex;flex-direction:column;}
.nv-drawer-links a{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:27px;line-height:1.2;color:var(--p);text-decoration:none;padding:17px 2px;border-bottom:1px solid rgba(252,252,251,.16);}
.nv-drawer-links a:last-child{border-bottom:0;}
.nv-drawer-ctas{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:28px;}
.nv-drawer-ctas .btn{justify-content:center;}
.nv-drawer-ctas .btn-ink{background:var(--p);color:var(--i);}
.nv-drawer-ctas .btn-line{border-color:var(--q);color:var(--p);background:transparent;}
body.nav-open{overflow:hidden;}
@media (max-width:960px){
  .nv-burger{display:flex;}
}