/* ============================================================
   TOTAL marketing site — shared stylesheet
   ------------------------------------------------------------
   Layout: design tokens → reset → fonts → buttons → nav (desktop + mobile drawer)
           → hero/scrolly → layered explainer → use-case grid → forms → footer
   Page-scoped CSS lives in matching {page}.css files.

   Breakpoint scale (canonical — use these in @media values):
     520px   xs  brand-tag hides, smallest phones tighten
     760px   sm  general mobile cutoff (footer cols stack)
     860px   md  desktop nav → hamburger drawer
     980px   lg  major two-col layouts stack (forms, hero splits)
     1100px  xl  hero scrim shifts, layered explainer loosens
   Note: CSS custom properties aren't allowed inside @media (spec limit),
   so these live as documented constants. New CSS should pick the
   closest canonical value rather than inventing new ones.
   ============================================================ */
:root{
  --bg:#0b0b0c;            /* neutral near-black */
  --base:#0f0f10;          /* base-bg */
  --surface:#171718;       /* surface-1 / card */
  --nav-bg:#100f0f;
  --border:#282828;
  --border-hover:#3a3a3a;
  --text:rgba(255,255,255,.9);
  --text-2:#a8a8a8;
  --text-3:#5f5f5f;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --primary:#f5f5f5; --primary-hover:#d7d7d7; --primary-fg:#0f0f10;
  --success:#22c55e; --info:#5c85e6; --destructive:#ef4444; --warning:#f59e0b; --drift:#cf558c;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overscroll-behavior-y:none stops the whole-page elastic bounce on iOS Safari — that
   rubber-band is what let scrolled content peek above the fixed header at the top edge. */
html{background:var(--bg);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-y:none}
html::-webkit-scrollbar{width:0;height:0;display:none}
body{
  background:var(--bg);color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"onum" 1,"liga" 1,"calt" 1;
  line-height:1.6;overflow-x:hidden;overscroll-behavior-y:none;
}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.005em;line-height:1.06}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:3px;border-radius:3px}

/* ---- Film grain: matte, tactile overlay over the whole composition ---- */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}

/* ---- Fixed living canvas (Act I shows through; Act II covers it) ---- */
/* Static mesh net (hero-mess.svg) is the network; the canvas sits ABOVE it and draws
   only the scroll-driven verdict pathway (which now rides the mesh's real lines). */
.hero-mess{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-mess img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-mess svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Phone: drop the fixed 2D mesh backdrop — attack-graph / tower viz stay; desktop unchanged. */
@media (max-width:760px){.hero-mess{display:none}}
#graph{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
.graph-fade{position:fixed;inset:0;z-index:1;pointer-events:none;background:transparent;transition:background .6s ease}

/* ---- Skip-to-content (a11y) — hidden until keyboard focus ---- */
.skip-link{position:absolute;top:0;left:0;z-index:10000;padding:10px 16px;background:var(--text);color:var(--primary-fg);font-family:"Inter",sans-serif;font-size:13px;font-weight:500;border-radius:0 0 6px 0;transform:translateY(-110%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0);outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Safari tint anchor: iOS Safari 26 tints the status-bar / notch strip from the fixed
   element nearest the top edge (within 4px of the top, >=80% viewport width, >=3px tall).
   Give it a dead-simple, unambiguous candidate in the page background color so it never
   falls back to sampling scrolled content — the intermittent bleed above the header.
   Ref: github.com/andesco/safari-color-tinting */
.tint-anchor{position:fixed;top:0;left:0;right:0;height:4px;background:var(--bg);z-index:51;pointer-events:none}

/* ---- Top nav ---- */
/* The ::before bleeds header's background above itself, covering any gap that iOS Safari's
   overscroll bounce might reveal above y:0. (No transform/will-change here — #navMobile is
   a fixed-position descendant of header, and a transform on header would make header its
   containing block instead of the viewport, collapsing the mobile menu to header's own height.) */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--bg);border-bottom:.5px solid var(--border);transition:border-color .25s ease}
header::before{content:"";position:absolute;top:-100vh;left:0;right:0;height:100vh;background:var(--bg)}
header.scrolled{border-bottom:.5px solid var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:11px;padding:18px 40px}
.mark{display:flex;align-items:center;gap:12px}
.mark-logo{height:21px;width:auto;display:block}
.brand-sep{width:1px;height:18px;background:#3c3c3c;margin:0 4px;flex:none}
.brand-tag{font-family:"Inter",sans-serif;font-weight:400;font-size:15px;letter-spacing:.005em;color:var(--text-2);white-space:nowrap}
.nav-spacer{flex:1}
.navlinks{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--text-2);white-space:nowrap}
.navlinks>a{position:relative;color:inherit;text-decoration:none;padding:8px 14px;border-radius:999px}
.navlinks>a:hover{color:var(--text);background-color:rgba(255,255,255,.08)}
.navlinks>a.active{color:var(--text);background-color:rgba(255,255,255,.06)}

/* Platform dropdown */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop-btn{font-family:inherit;font-size:14px;color:var(--text-2);background:none;border:0;padding:8px 14px;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-radius:999px}
.navdrop:hover .navdrop-btn,.navdrop:focus-within .navdrop-btn{color:var(--text);background-color:rgba(255,255,255,.08)}
.navdrop-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease,margin-top .2s ease}
.navdrop:hover .navdrop-caret,.navdrop:focus-within .navdrop-caret{margin-top:1px}
.navdrop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(38px);width:580px;max-width:calc(100vw - 48px);background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;opacity:0;visibility:hidden;box-shadow:0 24px 62px rgba(0,0,0,.6);transition:opacity .18s ease,transform .18s ease;z-index:60}
.navdrop-menu::before{content:"";position:absolute;left:0;right:0;top:-30px;height:30px}
.navdrop-menu::after{content:"";position:absolute;top:-6.5px;left:50%;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);background:var(--surface);border-left:1px solid var(--border);border-top:1px solid var(--border);border-top-left-radius:3px}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(30px)}
.prod-card{display:block;padding:8px;border-radius:11px;text-decoration:none}
.prod-card:hover{background:var(--base)}
.prod-thumb{display:block;width:100%;height:auto;aspect-ratio:320/200;border-radius:8px;background:#0e0f12;filter:grayscale(.6) brightness(.9);transition:filter .15s ease-out}
.prod-card:hover .prod-thumb{filter:grayscale(0) brightness(1)}
.prod-name{display:block;font-size:13.5px;font-weight:500;color:var(--text);margin:11px 2px 3px}
/* Platform dropdown: the Persona foundation — one icon, the model every product rests on */
.prod-base{grid-column:1/-1;margin-top:12px;display:flex;align-items:center;gap:16px;padding:17px 20px;border-radius:13px;text-decoration:none;border:1px solid rgba(226,99,46,.55);background:rgba(226,99,46,.02);box-shadow:0 0 22px -7px rgba(226,99,46,.34);transition:border-color .2s var(--ease),background 0s,box-shadow .2s var(--ease)}
.prod-base:hover{border-color:rgba(226,99,46,.88);background:rgba(226,99,46,.06);box-shadow:0 0 30px -5px rgba(226,99,46,.48)}
.pb-logo{width:36px;height:36px;border-radius:50%;flex:none;display:block}
.pb-text{flex:1;font-family:"Inter",sans-serif;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.pb-text strong{color:var(--text);font-weight:600;letter-spacing:.01em}
.pb-sep{margin:0 8px;color:var(--text-3)}
.pb-arr{color:rgba(226,99,46,.9);font-size:15px;flex:none;transition:transform .2s var(--ease),color .2s var(--ease)}
.prod-base:hover .pb-arr{color:#ef7a43;transform:translateX(3px)}
.prod-desc{display:block;font-size:12px;line-height:1.35;color:var(--text-3);margin:0 2px;white-space:normal}

.btn-primary{font-size:14px;font-weight:500;color:var(--primary-fg);background:var(--primary);border:.5px solid transparent;padding:10px 18px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;transition:background .25s var(--ease),transform .12s var(--ease),box-shadow .25s var(--ease)}
.btn-primary:hover{background:var(--primary-hover);box-shadow:0 8px 24px -10px rgba(255,255,255,.22)}
.btn-primary:active{transform:translateY(1px)}
.btn-lg{font-size:15px;padding:14px 26px}
.btn-link{font-size:15px;color:var(--text);display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.btn-link .arr{color:var(--text-3);transition:transform .3s var(--ease),color .3s var(--ease)}
.btn-link:hover .arr{transform:translateX(4px);color:var(--text-2)}
/* Persona button — small persona logo on the left + "How Personas reason". Original
   treatment: orange hairline border, dark warm fill, soft orange glow (matches the
   .uc-foundation "Persona" button). Hover (pointer devices only): brighter border/glow + lift. */
.btn-persona{display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border-radius:14px;text-decoration:none;font-family:"Inter Tight",sans-serif;font-size:14.5px;font-weight:500;letter-spacing:.005em;color:#fff;border:1px solid rgba(226,99,46,.7);background:#1a1416;box-shadow:0 0 28px -10px rgba(226,99,46,.55);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s var(--ease)}
/* Logo runs a touch larger than the text line — negative vertical margin keeps the button's
   padding from shrinking it, without growing the button height. */
.btn-persona-mark{flex:none;width:28px;height:28px;margin:-3px 0;border-radius:50%;display:block}
.btn-persona-label{white-space:nowrap}
.btn-persona-arr{display:inline-flex;align-items:center;color:rgba(226,99,46,.95);flex:none;margin-left:2px;transition:transform .2s var(--ease),color .2s var(--ease)}
.btn-persona-arr svg{display:block}
.btn-persona:focus-visible{outline:none;border-color:rgba(226,99,46,1);background:#241719;box-shadow:0 0 0 3px rgba(226,99,46,.35),0 0 38px -6px rgba(226,99,46,.7)}
@media (hover:hover){
  .btn-persona:hover{background:#241719;border-color:rgba(226,99,46,1);box-shadow:0 0 38px -6px rgba(226,99,46,.7);transform:translateY(-1px)}
  .btn-persona:hover .btn-persona-arr{color:#ef7a43;transform:translateX(2px)}
}
/* ---- Mobile hamburger + drawer ---- */
.nav-toggle{display:none;background:none;border:0;padding:0;cursor:pointer;color:var(--text);width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.nav-toggle-bar{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .25s var(--ease),opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav-mobile{position:fixed;inset:60px 0 0;z-index:49;background:var(--bg);overflow-y:auto;padding:24px 24px 60px;-webkit-overflow-scrolling:touch}
.nav-mobile[hidden]{display:none}
.nav-mobile-list{display:flex;flex-direction:column;gap:2px;max-width:520px;margin:0 auto;font-family:"Inter",sans-serif}
.nav-mobile-list>a{display:block;font-size:20px;font-weight:500;color:var(--text);text-decoration:none;padding:18px 0;border-bottom:.5px solid var(--border)}
.nav-mobile-platform{border-bottom:.5px solid var(--border)}
.nav-mobile-platform summary{list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:20px;font-weight:500;color:var(--text);padding:18px 0;cursor:pointer}
.nav-mobile-platform summary::-webkit-details-marker{display:none}
.nav-mobile-platform summary::after{content:"+";font-size:24px;color:var(--text-3);line-height:1;transition:transform .25s var(--ease)}
.nav-mobile-platform[open] summary::after{transform:rotate(45deg)}
.nav-mobile-platform-inner{display:flex;flex-direction:column;padding:0 0 12px 6px}
.nav-mobile-platform-inner a{font-size:16px;color:var(--text-2);text-decoration:none;padding:11px 0}
.nav-mobile-list .btn-primary{display:flex;margin-top:22px;font-size:16px;padding:11px 22px;justify-content:center;color:var(--primary-fg);background:var(--primary);border-bottom:0}
body.nav-locked{overflow:hidden}

@media (max-width:860px){
  .navlinks{display:none}
  .nav-toggle{display:flex}
  .nav-inner>.btn-primary{display:none}
  .nav-inner{padding:16px 22px;gap:12px}
}
@media (max-width:520px){.brand-sep,.brand-tag{display:none}}

/* ---- Sections ---- */
.section{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:120px 40px}
.section .inner{max-width:var(--maxw);margin:0 auto;width:100%}
.copy{max-width:640px}
.copy.center{margin:0 auto;text-align:center}
.copy.right{margin-left:auto}
.eyebrow{font-size:18px;letter-spacing:.085em;font-variant-caps:all-small-caps;font-feature-settings:"smcp" 1,"c2sc" 1,"lnum" 1;color:var(--text-3);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.copy.center .eyebrow{justify-content:center}
.eyebrow .tick{width:6px;height:6px;border-radius:50%;background:var(--success)}
.section[data-mode="hero"] .copy{max-width:960px}
h1.hero-h{font-size:clamp(34px,4.2vw,60px);font-weight:300;letter-spacing:-.02em;white-space:nowrap;line-height:1.14}
h1.hero-h .l2{display:block;color:var(--text-2);font-weight:300;margin-top:4px}
h2{font-size:clamp(34px,4.6vw,60px);font-weight:400;color:var(--text)}
h2 .dim{color:var(--text-2);font-weight:300}
h2.cap-long{font-size:clamp(28px,3.4vw,46px);line-height:1.14;letter-spacing:-.012em}
h2.cap-long em{font-style:normal;font-weight:500;color:var(--text)}
.lede{margin-top:32px;font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--text-2);max-width:800px}
.hero-h+.lede{margin-top:56px}
/* Mobile swaps in a shorter close for the hero's second lede paragraph — see the
   <=760px block below. */
.lede-tail-short{display:none}
.copy.center .lede{margin-left:auto;margin-right:auto}
.cta-row{display:flex;align-items:center;gap:26px;margin-top:40px}
.copy.center .cta-row{justify-content:center}
/* Hero: slim the Schedule button so it matches the persona button beside it. */
.scrolly .cta-row .btn-primary{padding:13px 24px;font-size:14.5px;border-radius:14px}

/* ---- Behavioral pathway: one pinned, scroll-driven scrollytelling stage ---- */
.scrolly{position:relative;z-index:2;height:320vh}
.scrolly-stage{position:sticky;top:0;height:100vh;height:100dvh;display:flex;align-items:center;overflow:hidden}
.scrolly-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,rgba(11,11,12,.98) 0%,rgba(11,11,12,.94) 54%,rgba(11,11,12,.68) 60%,rgba(11,11,12,.22) 65%,rgba(11,11,12,.04) 70%,rgba(11,11,12,0) 76%)}
/* Cursor-following aurora — soft persona-orange glow tracks the pointer. */
.scrolly-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(420px circle at var(--cx,50%) var(--cy,50%),rgba(226,99,46,.07) 0%,rgba(226,99,46,.03) 35%,transparent 70%);mix-blend-mode:screen;transition:opacity .3s ease}
.scrolly-stage .inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 40px}
.cap-col{position:relative;width:56%;max-width:800px;min-height:400px}
/* Each cap is centered on the viewport height (the -50% is composed with the
   16px slide-in offset so the entry animation still travels the same distance). */
.cap{position:absolute;left:0;top:50%;width:100%;opacity:0;transform:translateY(calc(-50% + 16px));transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.cap.cap-instant{transition:none}
.cap.in{opacity:1;transform:translateY(-50%);pointer-events:auto}
/* The How-it-works title is a mobile-only swipe screen; desktop keeps it inside #how. */
.cap-how{display:none}
/* Desktop: a soft, feathered blur backdrop sits behind each cap's text so the network mesh
   reads calmly behind it instead of busy. The radial mask feathers all four edges so there's
   no hard rectangle — it just dissolves into the scene. Sits behind the text (z-index:-1) and
   fades in/out with the cap. Mobile has its own .cap::before scrim (see the <=760px block). */
@media (min-width:761px){
  .cap::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-12% -12% -14% -10%;
    background:radial-gradient(125% 100% at 36% 50%,rgba(11,11,12,.42) 46%,rgba(11,11,12,0) 80%);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    -webkit-mask-image:radial-gradient(122% 98% at 36% 50%,#000 48%,rgba(0,0,0,0) 82%);
    mask-image:radial-gradient(122% 98% at 36% 50%,#000 48%,rgba(0,0,0,0) 82%)}
}
@media (max-width:1100px){
  /* Lighter mobile/tablet scrim so the constellation graph stays visible behind the cap text. */
  .scrolly-stage::before{background:radial-gradient(120% 80% at 50% 38%,rgba(11,11,12,.72) 0%,rgba(11,11,12,.5) 38%,rgba(11,11,12,.18) 70%,rgba(11,11,12,0) 100%)}
  .cap-col{width:100%;max-width:none}
}
/* ---- Phone: stack the pinned story vertically ----
   The base cloud canvas stays full-screen; engine.js remaps the pathway overlay into a
   centered upper band (also gated at <=760px). Here we drop the Problem/Cost captions to
   the bottom as text blocks, keep the hero's text up top, and give each caption its own
   legibility scrim so the cloud + pathway read clearly above it. Desktop is untouched. */
@media (max-width:760px){
  /* One swipe = one screen. The story becomes its own 100dvh scroll-snap container holding
     three full-height screens; mandatory snap + scroll-snap-stop:always make even a hard
     fling stop on the next screen (Safari honours this in a dedicated scroller). At the last
     screen a swipe overscroll-chains to the page, so "How it works" and the rest stay free —
     no snap trap, no JS toggle. */
  .scrolly{height:100dvh;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .scrolly::-webkit-scrollbar{width:0;height:0;display:none}
  .scrolly-stage{position:static;height:auto;display:block;overflow:visible;align-items:initial}
  .scrolly-stage::before,.scrolly-stage::after{display:none}
  .scrolly-stage .inner{display:block;padding:0;max-width:none}
  .cap-col{display:block;position:static;width:100%;max-width:none;height:auto;min-height:0}
  /* transition:none — opacity here is scroll-driven per frame by app.js (caption fade-out) */
  .cap{position:relative;left:auto;top:auto;bottom:auto;width:100%;min-height:100dvh;opacity:1;transform:none;pointer-events:auto;transition:none;
    display:flex;flex-direction:column;padding:0;
    padding-right:max(20px,env(safe-area-inset-right));padding-left:max(20px,env(safe-area-inset-left));
    scroll-snap-align:start;scroll-snap-stop:always}
  /* desktop centers caps via .cap.in translateY(-50%); phones must stay untransformed */
  .cap.in{transform:none}
  /* per-screen legibility scrim, fading toward the pathway */
  .cap::before{content:"";position:absolute;inset:0 -20px;z-index:-1;pointer-events:none}
  /* Opening: clear the fixed header, then use a bounded optical gap. A raw 20dvh
     pushed the copy farther down on taller phones and left compact phones with
     almost no room below the actions. */
  .cap[data-step="0"]{justify-content:flex-start;
    padding-top:calc(64px + env(safe-area-inset-top) + clamp(32px,6dvh,52px));
    padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .cap[data-step="0"]::before{background:radial-gradient(150% 62% at 50% 26%,rgba(11,11,12,.94) 0%,rgba(11,11,12,.7) 46%,rgba(11,11,12,0) 80%)}
  /* problem + cost: text starts right below the fixed attack-graph panel (see .hero-viz
     mobile rules above) instead of bottom-anchoring — padding-top reserves its space. */
  .cap[data-step="1"],.cap[data-step="2"]{justify-content:flex-start;
    padding-top:calc(64px + env(safe-area-inset-top) + 40dvh)}
  .cap[data-step="1"]::before,.cap[data-step="2"]::before{background:linear-gradient(180deg,rgba(11,11,12,0) 48%,rgba(11,11,12,.72) 72%,rgba(11,11,12,.92) 100%)}
}
@media (max-width:520px){
  /* The attack graph is 960:683, so its phone height is 71.15vw. Tie the caption
     offset to that real geometry instead of viewport height; a modest optical gap
     below the graph keeps copy clear without colliding on short phones. */
  .cap[data-step="1"],.cap[data-step="2"]{
    padding-top:calc(48px + env(safe-area-inset-top) + clamp(20px,4dvh,28px) + 71.15vw)}
}

/* Act I sections sit over the live graph with a local scrim for legibility */
.actI::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.actI.left::before{background:linear-gradient(100deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.9) 42%,rgba(11,11,12,.6) 54%,rgba(11,11,12,.12) 66%,rgba(11,11,12,.04) 100%)}
.actI.right::before{background:linear-gradient(260deg,rgba(11,11,12,.93) 0%,rgba(11,11,12,.82) 30%,rgba(11,11,12,.32) 64%,rgba(11,11,12,.10) 100%)}
.actI.center::before{background:radial-gradient(120% 90% at 50% 50%,rgba(11,11,12,.86) 0%,rgba(11,11,12,.6) 45%,rgba(11,11,12,.18) 100%)}

/* Act II sections are opaque and cover the canvas */
.actII{background:var(--base);border-top:.5px solid var(--border)}

/* ---- Verdict readout (drift onLog lines), brand restraint ---- */
.readout{margin-top:34px;display:flex;flex-direction:column;gap:7px;max-width:580px;min-height:150px}
.readout .ev{font-size:12.5px;line-height:1.5;color:var(--text);padding:10px 13px;border-radius:7px;background:rgba(13,13,14,.92);border:.5px solid var(--border);border-left:2px solid var(--text-3);backdrop-filter:blur(4px);opacity:0;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease}
.readout .ev.show{opacity:1;transform:none}
.readout .ev b{color:#fff;font-weight:500}
.readout .ev i{color:var(--text-2);font-style:normal}
.readout .ev.info{border-left-color:var(--info)}
.readout .ev.warn{border-left-color:var(--warning)}
.readout .ev.danger{border-left-color:var(--destructive)}
.readout .ev.success{border-left-color:var(--success)}
.readout .ev .ts{color:var(--text-3);font-variant-numeric:tabular-nums;margin-right:8px;font-size:12px}

/* ---- Layered explainer: the four layers fused into ONE connected tower ---- */
.section.layers{display:block;min-height:auto;padding:96px 40px 110px;align-items:initial;position:relative;z-index:3;background:transparent}
.section.layers::before{content:"";position:absolute;left:0;right:0;top:-170px;height:170px;background:linear-gradient(to bottom,rgba(11,11,12,0),var(--bg));pointer-events:none;z-index:3}
/* Section bg with a porthole over the substrate oval — canvas dots show through there. */
.section.layers::after{content:"";position:absolute;inset:0;background:var(--bg);z-index:-1;pointer-events:none;-webkit-mask-image:var(--portMask,none);mask-image:var(--portMask,none);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.layers-lead{max-width:var(--maxw);margin:0 auto 5vh}
.layers-lead .eyebrow{margin-bottom:16px}
.layers-lead h2{font-size:clamp(28px,3vw,40px);margin-bottom:0}

/* one tower on the right; copy cells absolutely aligned to its four tiers */
.layers-build{position:relative;max-width:var(--maxw);margin:0 auto}
/* Wrapper around the cells + tower. Transparent on desktop (just the positioning context
   for the absolute cells); becomes the pinned stage on phones (see the <=760px block). */
.layers-stage{position:relative}
.build-viz{width:48%;max-width:540px;margin-left:auto}
.build-viz .tower{display:block;width:100%;height:auto;overflow:visible}
.bcell{position:absolute;left:0;width:44%;max-width:478px;transform:translateY(-50%)}
.bcell[data-layer="1"]{top:17.7%}
.bcell[data-layer="2"]{top:44.8%}
.bcell[data-layer="3"]{top:71.2%}
.bcell[data-layer="4"]{top:93.9%}
.bcell .lnum{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a8a8a8;margin-bottom:13px}
.bcell h3{font-size:clamp(23px,2.5vw,31px);font-weight:400;letter-spacing:-.01em;color:var(--text);margin-bottom:13px}

/* tower element styles */
.tower .card rect{fill:#141416;stroke:#333;stroke-width:1;transition:stroke .3s var(--ease),fill .3s var(--ease),filter .3s var(--ease)}
.tower .tier[data-tier="4"] .card rect{fill:transparent;stroke:none}
/* hit-target stays invisible — the highlight lives on the visible .l4-pill (see below). */
.tower .tier[data-tier="4"] .card.hit rect{stroke:none;fill:transparent}
/* Layer-4 outcome pills: the docked one gets a dark→orange gradient fill, an orange-red border,
   a 1.1x lift and a soft shadow (all set inline by js/app.js when the Persona lands on it).
   Transition + centred transform-box so it eases in and scales around its own centre. */
.tower .l4-pill{transform-box:fill-box;transform-origin:center;
  transition:transform .3s var(--ease),filter .3s var(--ease),stroke .3s var(--ease),fill .3s var(--ease)}
/* card icon+label: a real flex "hug" layout inside foreignObject so it centers and clips
   regardless of font metrics/load timing, instead of hand-tuned SVG text coordinates. */
.tower .card-hug{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:0 16px;overflow:hidden}
.tower .card-hug .ms{flex:0 0 auto;display:block;font-family:"Material Symbols Outlined";font-weight:normal;font-size:20px;line-height:1;overflow:hidden;color:#fff}
.tower .card-hug .lbl{flex:1 1 auto;min-width:0;font-family:"Inter",sans-serif;font-size:13px;line-height:1.25;color:#fff}
.tower text.case-h{font-family:"Inter",sans-serif;font-size:12px;font-weight:500;letter-spacing:.18em}
.tower text.case-sub{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:14.5px;fill:var(--text-2)}
.tower .case-li text{font-family:"Inter",sans-serif;font-size:13px;fill:#aeb7c8}
.tower text.case-foot{font-family:"Inter",sans-serif;font-size:11.5px;fill:var(--text-3)}
.tower .pg{filter:drop-shadow(0 0 7px rgba(34,197,94,.6))}
.tower .pb{filter:drop-shadow(0 0 7px rgba(92,133,230,.6))}
.tower .conduit-draw{filter:drop-shadow(0 0 4px rgba(198,214,239,.45))}
.tower .flow-line{filter:drop-shadow(0 0 4px rgba(205,221,244,.55))}
/* Layer-1 substrate: as the cloud above dissolves, these dots drift in from a scatter and
   settle into place. Per-dot offset (--dx,--dy) and stagger (--d) are set in app.js;
   the .in class (toggled once the cloud has faded) plays the settle. */
.sticky-substrate circle{opacity:0;transform:translate(var(--dx,0),var(--dy,0));transition:opacity .55s ease var(--d,0ms),transform .85s cubic-bezier(.22,.7,.2,1) var(--d,0ms)}
.sticky-substrate.in circle{opacity:1;transform:translate(0,0)}
@media (prefers-reduced-motion:reduce){.sticky-substrate circle{transform:none;transition:opacity .3s ease}}

/* active-layer spotlight: the layer you're on stays lit, the rest dim back */
.bcell{transition:opacity .55s ease}
.bcell.dim{opacity:.34}
.tower .tier{transition:opacity .55s ease}
.tower .tier.dim{opacity:.4}

/* Layer 3 trial: a weighted metal balance weighs precedent vs deviation, then tips to the verdict */
.tower .scale-beam{transform-box:fill-box;transform-origin:50% 50%;transition:transform .72s cubic-bezier(.4,0,.2,1)}
.tower .susp{transition:transform .72s cubic-bezier(.4,0,.2,1)}
.tower .weights{opacity:0;transition:opacity .7s ease}
.tower .case-def,.tower .case-pro{transition:opacity .7s ease}

/* Living flow: a Persona is minted along the descent, weighed in the balance, tips to the verdict, then routes */
.tower .defendant-token{transform:translate(232px,520px);opacity:0;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .45s ease}
.tower .defendant-token image{filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.tower .dt-ring{transition:stroke .5s ease,stroke-opacity .5s ease,filter .5s ease}
/* Guilty ruling: the red ring pulses once, then ripples outward and fades away. */
@keyframes dtGuiltyPulse{
  0%{stroke-opacity:1;transform:scale(.9);filter:drop-shadow(0 0 4px rgba(239,68,68,.55))}
  22%{stroke-opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 11px rgba(239,68,68,.95))}
  100%{stroke-opacity:0;transform:scale(1.4);filter:drop-shadow(0 0 2px rgba(239,68,68,0))}
}
.tower .dt-ring.pulsing{transform-box:fill-box;transform-origin:center;animation:dtGuiltyPulse 1.8s ease-out forwards}
.tower .mint-token{transform:translate(232px,300px);opacity:0;transition:transform 1.5s var(--ease),opacity .5s ease}
.tower .mint-dot{transition:opacity .5s ease}
.tower .mint-persona{transform-box:fill-box;transform-origin:center;transform:scale(.5);opacity:0;transition:transform .9s var(--ease),opacity .6s ease;filter:drop-shadow(0 2px 7px rgba(0,0,0,.5))}
.tower .clear-rail{stroke:#aebfdc;stroke-opacity:0;stroke-width:2.6;stroke-linecap:round;transition:stroke .5s ease,stroke-opacity .5s ease}
.tower .route.clear .clear-rail{stroke:#22c55e;stroke-opacity:.95;filter:drop-shadow(0 0 5px rgba(34,197,94,.5))}
@media (prefers-reduced-motion:reduce){
  .tower .scale-beam,.tower .susp,.tower .weights,.tower .case-def,.tower .case-pro{transition:none}
  .tower .defendant-token,.tower .mint-token,.tower .mint-persona{transition:none}
  .tower .weights{opacity:1}
  /* trial never runs without motion — park the persona in the balance so it isn't empty */
  .tower .defendant-token{opacity:1;transform:translate(232px,775px)}
}

/* stack on smaller screens */
@media (max-width:920px){
  .section.layers{padding:56px 22px 56px}
  .layers-lead{margin-bottom:3vh}
  .build-viz{width:100%;max-width:440px;margin:0 auto}
  .bcell{position:static;width:100%;max-width:100%;transform:none;margin-bottom:14px}
  .bcell[data-layer="1"],.bcell[data-layer="2"],.bcell[data-layer="3"],.bcell[data-layer="4"]{top:auto}
  .bcell h3{font-size:clamp(23px,6.5vw,30px)}
}
/* ---- Phone: pin "How it works" and step through it ----
   The tall tower shows through a window up top (edges fading to transparent) and scrolls
   tier-by-tier; the matching Layer text steps through below it. app.js drives the tower's
   translateY and toggles .is-shown on the active cell. (>760px keeps the layout above.) */
@media (max-width:760px){
  .section.layers{padding:0 22px 0}
  /* The "You can't predict…" title lives inside the story swipe as .cap-how instead — the
     original in-section lead is redundant on phones. */
  .layers-lead{display:none}
  /* Title swipe screen: centred, big text. The snap scroll provides the slide-up; we only
     fade it in (no transform — a translate here outlasts the snap and reads as the screen
     "correcting" itself to centre after it lands). */
  .cap-how{display:flex;justify-content:center;opacity:0;transition:opacity .3s var(--ease)}
  .cap-how.in{opacity:1}
  .cap-how .eyebrow{margin-bottom:18px}
  .cap-how h2{font-size:clamp(34px,8.5vw,48px);line-height:1.1}
  /* Window-scroll-driven sticky walkthrough (same model as the desktop tower and the hero
     #scrolly) — NOT a nested snap-scroller. The old nested scroller fighting the page scroll
     was what broke natural scroll-down. A tall track gives the scroll distance (~1 screen per
     layer); the stage pins to the viewport across it while js/app.js scrubs the tower's
     translateY and crossfades the matching Layer text. */
  .layers-build{position:relative;height:400dvh;max-width:none}
  /* Pinned stage, just below the fixed header, split in two: top half = diagram, bottom = text. */
  .layers-stage{position:sticky;top:66px;height:calc(100dvh - 66px);overflow:hidden;max-width:560px;margin:0 auto;z-index:1}
  /* Diagram window = the top half. Fades BOTH edges so the tower dissolves into the scene
     instead of a hard cut — top fade kept gentle so the Layer-1 identity boxes stay legible,
     bottom fade deeper so the text reads on clean space below. */
  .build-viz{position:absolute;top:0;left:0;right:0;width:100%;max-width:none;height:50%;margin:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 80%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 80%,transparent 100%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  /* Tower blown up to fill the window without clipping the Layer-3 INNOCENT/GUILTY labels
     (106% keeps both inside). Keep MOBILE_ZOOM in js/app.js in sync with this multiplier. */
  .build-viz .tower{will-change:transform;width:106%;margin-left:-3%}
  /* Layer text = the bottom half; the active layer's copy crossfades in as the tower reaches it. */
  .bcell{position:absolute;left:0;right:0;top:50%;bottom:0;width:100%;max-width:100%;margin:0;padding:20px 0 0;
    display:flex;flex-direction:column;justify-content:flex-start;
    opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
  .bcell[data-layer="1"],.bcell[data-layer="2"],.bcell[data-layer="3"],.bcell[data-layer="4"]{top:50%;bottom:0}
  .bcell.is-shown{opacity:1;transform:none}
  .bcell .lnum{margin-bottom:8px}
  .bcell h3{margin-bottom:8px}
  .bcell .lede{margin-top:8px}
}

/* ---- Use-case cards ---- */
.uc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.uc-card{background:var(--surface);border:.5px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.uc-card:hover{border-color:#404040;background:#1c1c1d;transform:translateY(-5px);box-shadow:0 22px 60px -30px rgba(0,0,0,.85)}
/* win over .reveal's transition so the card keeps its fade-in entrance and still gets a real hover lift + shadow */
.uc-card.reveal{transition:opacity .6s var(--ease),transform .4s var(--ease),border-color .25s var(--ease),box-shadow .4s var(--ease)}
.uc-visual{position:relative;aspect-ratio:16/10;background:#0e0e0f;border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}
.uc-visual svg,.uc-visual .uc-shot{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.uc-visual .uc-shot{filter:grayscale(.7) brightness(.85);transition:filter .15s ease-out}
.uc-card:hover .uc-shot{filter:grayscale(0) brightness(1)}
.prod-thumb{object-fit:cover;object-position:center}
.uc-tag{position:absolute;top:12px;left:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);z-index:1}
.uc-body{padding:20px 22px 22px}
.uc-body h3{font-family:"Inter Tight";font-size:19px;font-weight:500;color:var(--text);margin-bottom:8px}
.uc-body p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.uc-foundation{margin:36px 0 0;display:flex;width:100%;align-items:center;gap:14px;padding:14px 22px 14px 14px;border-radius:999px;text-decoration:none;color:#fff;border:1px solid rgba(226,99,46,.7);background:#1a1416;box-shadow:0 0 26px -10px rgba(226,99,46,.4);transition:border-color .25s var(--ease),background 0s,box-shadow .25s var(--ease),transform .15s var(--ease)}
.uc-foundation:hover{border-color:rgba(226,99,46,1);background:#241719;box-shadow:0 0 36px -6px rgba(226,99,46,.55);transform:translateY(-1px)}
.ucf-logo{width:34px;height:34px;border-radius:50%;flex:none;display:block}
.ucf-text{font-family:"Inter Tight",sans-serif;font-size:14.5px;line-height:1.3;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucf-text strong{color:var(--text);font-weight:600;letter-spacing:.005em}
.ucf-sep{margin:0 11px;color:var(--text-3)}
.ucf-arr{color:rgba(226,99,46,.95);font-size:16px;flex:none;margin-left:auto;transition:transform .2s var(--ease),color .2s var(--ease)}
.uc-foundation:hover .ucf-arr{color:#ef7a43;transform:translateX(3px)}
.ucf-sep-mobile,.ucf-more{display:none}
@media (max-width:980px){.uc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ucf-text{white-space:normal}
  /* Mobile: the full description crowds the pill — collapse it to "Persona™ · Read more". */
  .ucf-sep-desktop,.ucf-desc{display:none}
  .ucf-sep-mobile,.ucf-more{display:inline}
  /* No hover on touch, so the grayscale-until-hover treatment would leave the product
     shots permanently muted — show them at full colour by default instead. */
  .uc-visual .uc-shot{filter:none}}
@media (max-width:640px){.uc-grid{grid-template-columns:1fr}}

/* ---- Trusted-by customer logo strip (b/w) ---- */
.trust-strip{position:relative;z-index:2;padding:120px 40px 130px;border-top:.5px solid var(--border);border-bottom:.5px solid var(--border);background:
  radial-gradient(ellipse 820px 280px at 50% 0%, rgba(226,99,46,.045) 0%, rgba(226,99,46,0) 70%),
  #08090c}
.trust-strip .inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:64px}
.trust-label{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(20px,1.9vw,26px);color:var(--text-2);letter-spacing:-.005em;text-align:center;line-height:1.3}
.trust-logos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;justify-items:center;gap:48px 64px;width:100%;padding:0;margin:0}
.trust-logos li{display:flex;align-items:center;justify-content:center;line-height:0;width:100%}
.trust-logos img{height:50px;width:auto;max-width:100%;display:block;filter:brightness(0) invert(1);opacity:.7;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.trust-logos img:hover{opacity:1}
@media (max-width:980px){.trust-logos{grid-template-columns:repeat(2,1fr);gap:56px 40px}}
@media (max-width:760px){.trust-strip{padding:84px 22px 90px}.trust-strip .inner{gap:48px}.trust-logos img{height:38px}}

/* ---- Footer ---- */
footer{position:relative;z-index:2;background:var(--nav-bg);border-top:.5px solid var(--border);padding:60px 40px 40px}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-brand{max-width:300px}
.foot-brand .tagline{margin-top:16px;font-size:13.5px;color:var(--text-3);line-height:1.6}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;font-weight:500}
.foot-col a{display:block;width:fit-content;font-size:14px;color:var(--text-2);margin-bottom:10px;transition:color .2s ease}
.foot-col a:hover{color:var(--text)}
.foot-base{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:.5px solid var(--border);display:flex;justify-content:space-between;gap:20px;font-size:12.5px;color:var(--text-3);flex-wrap:wrap}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---- Mobile ---- */
@media (max-width:760px){
  .nav-inner{padding-top:calc(12px + env(safe-area-inset-top));padding-right:max(20px,env(safe-area-inset-right));
    padding-bottom:12px;padding-left:max(20px,env(safe-area-inset-left))}
  .nav-mobile{inset:calc(64px + env(safe-area-inset-top)) 0 0;
    padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .section{min-height:auto;padding:78px 22px}
  .section[data-mode="hero"]{min-height:86vh;padding-top:118px}
  .copy,.copy.right,.section[data-mode="hero"] .copy{max-width:100%;margin:0}
  .copy.center{text-align:left}
  .copy.center .eyebrow,.copy.center .cta-row{justify-content:flex-start}
  .cta-final .copy.center .cta-row{justify-content:center}
  .copy.center .lede{margin-left:0;margin-right:0}
  h1.hero-h{font-size:clamp(30px,8vw,36px);white-space:normal}
  /* Smaller title needs less air before the first paragraph follows it, and the two
     paragraphs sit tighter together too. */
  .hero-h+.lede{margin-top:24px}
  .cap[data-step="0"] .lede{font-size:15px}
  .cap[data-step="0"] .lede+.lede{margin-top:16px}
  /* Shorter close for the hero paragraph — the full desktop sentence runs too long
     against how little of the hero mobile users actually scroll through. */
  .lede-tail-full{display:none}
  .lede-tail-short{display:inline}
  h2{font-size:clamp(30px,8vw,40px)}
  .actI::before{background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.88) 46%,rgba(11,11,12,.93) 100%) !important}
  .actI.center::before{background:radial-gradient(150% 80% at 50% 42%,rgba(11,11,12,.82),rgba(11,11,12,.94)) !important}
  .readout{max-width:100%}
  .cta-row{flex-wrap:wrap;gap:28px}
  .cap[data-step="0"] .cta-row{width:100%;margin-top:32px;flex-flow:column nowrap;align-items:stretch;gap:12px}
  .cap[data-step="0"] .cta-row .btn-primary,
  .cap[data-step="0"] .cta-row .btn-persona{width:100%;min-height:52px;justify-content:center}
  .section.layers{padding:0 22px 0}
  .lblock h3{font-size:clamp(24px,7vw,32px)}
  .viz .art{max-width:420px}
  footer{padding:48px 22px 34px}
  .foot-inner{flex-direction:column;gap:30px}
  .foot-cols{gap:36px}
}

/* ---- Accessibility / reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.uc-card.reveal{opacity:1;transform:none;transition:none}
  .viz{transition:none}
  .flow-spine .spine-fill,.flow-node{transition:none}
  .readout .ev{opacity:1;transform:none;transition:none}
  .btn-link .arr{transition:none}
}

/* ---- Closing CTA: its own background, never the live graph ---- */
.section.cta-final{background:radial-gradient(108% 78% at 50% 30%,rgba(64,69,80,.28) 0%,rgba(18,19,22,0) 58%),linear-gradient(180deg,#0b0c0e 0%,#08080a 100%);position:relative;z-index:3;overflow:hidden}
.section.cta-final::before{background:none !important}
.onboarding-row{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:52px auto 46px;max-width:880px;position:relative}
.onboarding-step{flex:1;max-width:240px;text-align:center;padding:0 18px;position:relative}
/* Hairline runs through the dot at the top of every step; lighter near the ends. */
.onboarding-step::after{content:"";position:absolute;left:50%;top:5px;width:9px;height:9px;border-radius:50%;background:rgba(245,245,247,.85);transform:translateX(-50%);z-index:2;box-shadow:0 0 0 4px var(--bg)}
.onboarding-step:not(:first-child)::before{content:"";position:absolute;left:-50%;top:9px;width:100%;height:1px;background:rgba(245,245,247,.18);z-index:1}
.step-label{font-family:"Inter Tight",sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,245,247,.95);margin-top:28px;margin-bottom:14px;display:block}
.step-text{font-family:var(--font-display);font-size:17px;line-height:1.45;color:var(--text-2);font-weight:300;letter-spacing:-.005em}
/* On mobile the horizontal timeline becomes a vertical one: a dot on the left rail per
   step, connected by a line, with the Day label as a white anchor and the copy beneath. */
@media (max-width:760px){
  .onboarding-row{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;max-width:none;margin:34px 0 30px;padding-left:2px}
  .onboarding-step{flex:none;max-width:none;text-align:left;padding:0 0 30px 28px;position:relative}
  .onboarding-step:last-child{padding-bottom:0}
  /* dot on the rail */
  .onboarding-step::after{left:0;top:4px;width:11px;height:11px;transform:none;box-shadow:0 0 0 4px var(--bg);z-index:2}
  /* line connecting each dot down to the next (none after the last) */
  .onboarding-step:not(:last-child)::before{content:"";display:block;position:absolute;left:5px;top:4px;width:1px;height:100%;background:rgba(245,245,247,.18);transform:none;z-index:1}
  .onboarding-step:last-child::before{display:none}
  .step-label{display:block;margin:0 0 5px}
  .step-text{font-size:16px;line-height:1.45}
  /* Closing CTA stays fully centred on mobile: heading, lede, day steps, button.
     The day timeline becomes a centred stack — dot above each label, no left rail. */
  .cta-final .copy.center{text-align:center}
  .cta-final .copy.center .lede{margin-left:auto;margin-right:auto}
  .cta-final .onboarding-row{align-items:center;padding-left:0;gap:54px;margin:42px auto 40px}
  .cta-final .onboarding-step{text-align:center;padding:18px 0 0}
  .cta-final .step-label{margin:0 0 5px}
  /* dot centred at the top of each step */
  .cta-final .onboarding-step::after{left:50%;top:0;transform:translateX(-50%)}
  /* connector lives in the gap above each step (not the first); it breaks around the blocks */
  .cta-final .onboarding-step::before{display:none}
  .cta-final .onboarding-step:not(:first-child)::before{display:block;content:"";position:absolute;left:50%;top:-48px;transform:translateX(-50%);width:1px;height:42px;background:rgba(245,245,247,.22);z-index:1}
}

/* ---- Stub / coming-soon page ---- */
.stub-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:140px 40px 90px;background:radial-gradient(120% 90% at 50% 22%,rgba(58,63,74,.22) 0%,rgba(13,14,17,0) 60%),var(--bg)}
.stub-wrap{max-width:640px;text-align:center}
.stub-wrap .eyebrow{justify-content:center;margin-bottom:24px}
.stub-h{font-size:clamp(40px,6vw,72px);line-height:1.04;letter-spacing:-.01em;margin-bottom:20px}
.stub-sub{font-size:18px;line-height:1.55;color:var(--text-2);margin-bottom:30px}
.stub-wrap .btn-link{justify-content:center}

/* ===== Hero attack-graph viz (desktop scroll-through) ===== */
/* The attack-graph scene replaces the old pathway canvas on the home hero (desktop
   only). The static bg mesh stays visible — full during the landing hero, faded to a
   subtle backdrop through Problem/Blind-spot by the inline script in index.html. */
@media (min-width:761px){
  body[data-page="home"] #graph,
  body[data-page="home"] .graph-fade{display:none}
}

/* Right-side visualization stage, pinned opposite the captions */
.hero-viz{position:absolute;top:50%;right:-20px;transform:translateY(-50%);
  width:47%;max-width:640px;height:74vh;max-height:700px;z-index:1;pointer-events:none;
  opacity:1;transition:opacity .2s ease}
.hviz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .4s var(--ease)}
body[data-hero-viz="a"] .hviz-a{opacity:1}
/* Hides the whole panel fast on the hero screen instead of waiting for the GSAP timeline's
   own scrub-smoothing to rewind every element's alpha back to zero (js/hero-viz-a.js toggles
   this the moment scroll returns to p<=0.08 — see warp()'s sleep cutoff). */
.hero-viz.hviz-hide{opacity:0}
/* Mobile: same scene, pinned as a fixed panel below the header instead of embedded in either
   swipe screen — it stays in place and keeps animating as you swipe from Problem to Blind-spot
   (js/hero-viz-a.js toggles .hviz-mshow and autoplays the same GSAP timeline across both; see
   the .hviz-a .graphic mobile scaling rule in css/hero-viz.css). Hidden on the hero and the
   How-it-works title screen either side of it. */
@media (max-width:760px){
  .hero-viz{position:fixed;top:0;left:0;right:0;width:100%;max-width:none;height:auto;max-height:none;
    z-index:1;transform:none;
    padding-top:calc(64px + env(safe-area-inset-top) + clamp(8px,2dvh,16px));
    opacity:0;pointer-events:none;
    transition:opacity .3s ease}
  .hero-viz.hviz-mshow{opacity:1}
  .hviz{position:relative;inset:auto;width:100%;aspect-ratio:960/683;overflow:hidden}
}