/* ============================================================
   CaptivaHQ — landing page styles · LIGHT MODE ONLY
   Tokens ported from the product's globals.css (light half).
   Components must reference tokens (var(--…)) — never raw hex.
   ============================================================ */

@import url('/css/horizon-tokens.css');
@font-face{font-family:Geist;src:url('/assets/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope-Variable.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{
 --c-line:var(--line);--c-line-strong:var(--line-strong);
 --c-pos-text:var(--c-pos);--c-warn-text:var(--c-warn);--c-neg-text:var(--c-neg);
 --chart-1:oklch(0.55 0.20 272);--chart-2:oklch(0.60 0.17 210);--chart-3:oklch(0.70 0.14 155);--chart-4:oklch(0.72 0.14 75);--chart-5:oklch(0.63 0.20 25);--chart-6:oklch(0.60 0.20 295);--chart-7:oklch(0.65 0.20 340);
 --ease:cubic-bezier(0.2,0.8,0.2,1);--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.45,0.5,1);
 --maxw:1200px;--sh-card:var(--shadow-sm);--sh-lift:var(--shadow-md);--sh-brand:var(--shadow-sm);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  /* Ambient wash — three large brand-tinted gradients anchored off-canvas.
     Sizes MUST be vw/vh, not px or %: percentage offsets resolve against the
     whole body, which on a page this tall pushes the gradient centres far
     off-screen and leaves only their weakest tails in view. vw/vh plus
     background-attachment:fixed keeps them anchored to the viewport.
     Three hues, not one — --c-ai is indigo, --c-ai-2 derives to magenta
     (h+38), --c-ai-3 to teal (h-80). That hue variation is what stops this
     reading as a flat tint. The teal is louder than its number suggests (only
     cool hue against a warm-neutral base): 8-12% usable, never past 15%.
     Tokens only, no new colours.

     Change round 02: the wash was dialled DOWN (24/10/14 → 15/6/9) and pulled
     tighter to the edges. The page now gets its colour from saturated,
     hard-edged UI — brand buttons, accent bars, lit chips — rather than from a
     soft field everything sinks into. Do not push these back up. */
  background-color:var(--c-bg-0);
  background-image:
    radial-gradient(58vw 48vh at 88% -10%,
      color-mix(in oklch, var(--c-ai)   15%, transparent), transparent 58%),
    radial-gradient(50vw 44vh at -8% 24%,
      color-mix(in oklch, var(--c-ai-3) 6%, transparent), transparent 56%),
    radial-gradient(46vw 38vh at 48% 110%,
      color-mix(in oklch, var(--c-ai-2) 9%, transparent), transparent 54%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--c-fg-1);
  font-family:var(--f-sans);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fine film grain across the whole viewport — inline SVG feTurbulence,
   desaturated (colour noise would cast a rainbow over the indigo).
   Fixed so it sits on the screen like grain on a lens instead of
   swimming against the scroll. Static by design — never animate it.

   opacity 0.28 is deliberate and tuned on the built page. It looks high next
   to the 0.03-0.05 quoted for grain everywhere online, because every one of
   those references is a DARK theme. feTurbulence writes noise into the alpha
   channel as well as RGB, so the tile is already semi-transparent before this
   opacity applies — and over a near-white base (--c-bg-0 is L 0.988) dark
   noise has very little contrast range to work with. Light themes need ~5x
   the value quoted online — so 0.16 here is still "high", not a typo.

   Change round 02: dropped 0.28 → 0.16. Grain veils saturated colour; with the
   stronger brand/chart tokens the page reads cleaner with less of it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='cgrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23cgrain)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media (prefers-contrast: more){
  body::after{display:none}
}
@media print{
  body::after{display:none}
}

::selection{background:color-mix(in oklch, var(--c-ai) 22%, transparent);color:var(--c-fg-0)}

img,canvas,svg,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* Vertical rhythm (change round 02): every block-level gap on the page was cut
   roughly 40-45%. --sec-y is the single knob for section padding — retune here,
   not per-section, so the page keeps one rhythm. */
:root{--sec-y:clamp(52px,6vw,78px)}
section{padding:var(--sec-y) 0;position:relative}
.muted{color:var(--c-fg-3)}
[hidden]{display:none!important}

h1,h2,h3{color:var(--c-fg-0);font-weight:700;line-height:1.05;letter-spacing:-0.03em;text-wrap:balance}
h1{font-size:clamp(42px,6.8vw,84px);font-weight:800}
h2{font-size:clamp(32px,4.4vw,54px)}
h3{font-size:22px;letter-spacing:-0.02em;line-height:1.2}
p.lead{font-size:clamp(17px,1.8vw,19px);color:var(--c-fg-2);max-width:660px;margin-top:14px;text-wrap:pretty}
section>.wrap>h2{max-width:900px}
section>.wrap>h2+.lead{max-width:760px}

.eyebrow{
  font-family:var(--f-mono);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in oklch, var(--c-ai) 62%, var(--c-fg-2));margin-bottom:10px;
}
.grad{
  background:var(--g-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- reveal on scroll (JS adds .in; opacity/transform only → no layout shift) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in oklch, var(--c-bg-0) 94%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in oklch, var(--c-ai) 16%, var(--c-line-strong));
  box-shadow:0 8px 28px -24px color-mix(in oklch, var(--c-ai) 42%, transparent);
}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.logo{font-family:var(--f-mono);font-weight:600;font-size:16px;letter-spacing:.02em;text-decoration:none;color:var(--c-fg-0)}
.logo b{color:var(--c-ai);text-shadow:0 0 18px color-mix(in oklch, var(--c-ai) 30%, transparent)}
.beta-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in oklch, var(--c-ai) 72%, var(--c-fg-0));
  border:1px solid color-mix(in oklch, var(--c-ai) 34%, var(--c-line));
  background:color-mix(in oklch, var(--c-ai) 9%, transparent);
  border-radius:999px;padding:5px 11px;white-space:nowrap;
}
.beta-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--c-ai);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--c-ai) 22%, transparent);
  animation:beta-pulse 2.4s var(--ease) infinite;
}
@keyframes beta-pulse{50%{opacity:.35;transform:scale(.82)}}
@media(max-width:1120px){.beta-tag{display:none}}
.navlinks{display:flex;gap:26px;font-size:14px}
.navlinks a{color:var(--c-fg-2);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--c-fg-0)}
.navlinks a:focus-visible{outline:2px solid var(--c-ai);outline-offset:3px;border-radius:2px}
@media(max-width:820px){.navlinks{display:none}}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15.5px;padding:14px 28px;border-radius:999px;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease-spring),box-shadow .25s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
  will-change:transform;
}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--c-bg-0),0 0 0 4px color-mix(in oklch, var(--c-ai) 60%, transparent)}
.btn-primary{
  background:linear-gradient(115deg,var(--c-ai),color-mix(in oklch, var(--c-ai-2) 72%, var(--c-ai)) 74%,color-mix(in oklch, var(--c-ai-3) 30%, var(--c-ai-2)) 130%);
  color:oklch(0.99 0 0);
  border-color:color-mix(in oklch, white 20%, var(--c-ai));
  box-shadow:var(--sh-brand),inset 0 1px 0 oklch(1 0 0 / 0.24);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px -12px color-mix(in oklch, var(--c-ai) 68%, transparent),inset 0 1px 0 oklch(1 0 0 / 0.28)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:color-mix(in oklch, var(--c-bg-0) 72%, transparent);border-color:var(--c-line-strong);color:var(--c-fg-0);box-shadow:inset 0 1px 0 color-mix(in oklch, white 70%, transparent)}
.btn-ghost:hover{border-color:color-mix(in oklch, var(--c-ai) 45%, var(--c-line-strong));color:var(--c-ai);transform:translateY(-1px)}
.btn-sm{padding:9px 20px;font-size:14px}

/* ---------- hero ---------- */
/* transparent — the body's fixed ambient wash supplies the hero's depth
   (a second local gradient here would stack and band) */
.hero{min-height:0;display:flex;align-items:center;padding:52px 0 48px}
.hero .wrap{max-width:960px}
.hero h1{margin-top:2px;filter:drop-shadow(0 14px 30px oklch(0.25 0.04 262 / .08))}
.hero .lead{max-width:720px;font-size:clamp(17px,2vw,19.5px)}
.hero .lead strong{color:var(--c-fg-0)}
.cta-row{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}

/* ---------- hero aperture mark — the spinning logo ----------
   Moved here from the flow scene's pre-roll (change round 02): it now greets
   the visitor above the headline instead of gating the animation, which opens
   on beat 01 already drawn. Pure CSS motion, no JS, no GSAP.
   Orbits are circular here (the pre-roll's were elliptical) — an ellipse would
   need a scale wrapper that squashes the particles themselves. */
.hero-head{display:flex;align-items:center;gap:clamp(18px,3vw,32px);margin-bottom:18px}
.hero-head .eyebrow{margin-bottom:0}

/* The login screen's "signal": a tilted glass tile, the orbit-lens mark
   floating over it, and three brand-triad satellites on their own clocks.
   Ported 1:1 from .captiva-login-signal* in the product's globals.css —
   radii 82/72/62px and periods 8s/11s/6.5s are the product's numbers,
   scaled here by --sig. */
.hero-signal{
  --sig: clamp(132px,15vw,174px);
  position:relative;width:var(--sig);height:var(--sig);flex-shrink:0;
  display:grid;place-items:center;
}
.hero-signal::before{
  content:"";position:absolute;inset:calc(var(--sig) * .103);
  border-radius:calc(var(--sig) * .276);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklch, white 56%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in oklch, var(--c-ai) 14%, var(--c-bg-1)), color-mix(in oklch, var(--c-ai-2) 11%, var(--c-bg-1)));
  border:1px solid color-mix(in oklch, var(--c-ai) 20%, var(--c-line));
  box-shadow:var(--sh-lift), inset 0 1px 0 color-mix(in oklch, white 52%, transparent);
  transform:rotate(-6deg);
}
.hero-signal-mark{
  position:relative;z-index:2;display:grid;place-items:center;
  filter:drop-shadow(0 14px 20px color-mix(in oklch, var(--c-ai) 28%, transparent));
  animation:cap-signal-float 5.2s var(--ease) infinite alternate;
}
.hero-signal-mark svg{width:calc(var(--sig) * .6);height:auto}
.hero-signal-orbit{
  position:absolute;z-index:3;width:8px;height:8px;border-radius:99px;
  transform-origin:0 0;box-shadow:0 0 12px currentColor;background:currentColor;
}
.hero-signal-orbit.is-primary{color:var(--c-ai);animation:cap-signal-orbit-a 8s linear infinite}
.hero-signal-orbit.is-secondary{color:var(--c-ai-2);animation:cap-signal-orbit-b 11s linear infinite reverse}
.hero-signal-orbit.is-tertiary{color:var(--c-ai-3);animation:cap-signal-orbit-c 6.5s linear infinite}
@keyframes cap-signal-float{to{transform:translateY(-5px) rotate(2deg) scale(1.025)}}
@keyframes cap-signal-orbit-a{from{transform:rotate(0deg) translateX(calc(var(--sig) * .471))}to{transform:rotate(360deg) translateX(calc(var(--sig) * .471))}}
@keyframes cap-signal-orbit-b{from{transform:rotate(50deg) translateX(calc(var(--sig) * .414)) scale(.8)}to{transform:rotate(410deg) translateX(calc(var(--sig) * .414)) scale(.8)}}
@keyframes cap-signal-orbit-c{from{transform:rotate(160deg) translateX(calc(var(--sig) * .356)) scale(.65)}to{transform:rotate(520deg) translateX(calc(var(--sig) * .356)) scale(.65)}}
@media(max-width:560px){.hero-head{gap:14px}}
/* the global reduced-motion rule collapses durations rather than stopping
   loops — an infinite 1ms orbit would strobe, so stop these outright */
@media (prefers-reduced-motion:reduce){
  .hero-signal-mark,.hero-signal-orbit{animation:none!important}
}

/* ---------- modules — grid + zoom-to-use-cases ----------
   Structure adapted from C3POperator's categories grid; the zoom panel
   reveals a module's use cases. --acc is set per card from docs/modules.json. */
.mod-stage{position:relative;margin-top:30px;min-height:520px}
.mod-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  transition:opacity .45s var(--ease),transform .5s var(--ease);
}
.mod-stage.zoomed .mod-grid{opacity:.24;transform:scale(.972)}
/* the grid stays interactive while a panel is open (change round 03): the
   panel only covers the top rows, so moving to any still-visible card should
   switch panels rather than force a close-then-open. */
@media(max-width:1020px){.mod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:470px){.mod-grid{grid-template-columns:1fr}}

/* The card is the colour (change round 03): the old 4px accent bar is gone —
   each card is a soft tint of its own --acc with a matching hairline and a
   corner bloom, so a wall of 31 cards reads as one spectrum rather than a
   grid of white boxes with stripes on top. */
.mod-card{
  --acc:var(--c-ai);
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;min-height:164px;padding:20px;border-radius:var(--r-4);
  background:
    radial-gradient(110% 88% at 100% 0%, color-mix(in oklch, var(--acc) 13%, transparent), transparent 60%),
    linear-gradient(158deg,color-mix(in oklch, var(--acc) 7%, var(--c-bg-0)) 0%,color-mix(in oklch, var(--c-ai) 3%, var(--c-bg-1)) 72%,var(--c-bg-1) 100%);
  border:1px solid color-mix(in oklch, var(--acc) 22%, var(--c-line));
  box-shadow:var(--sh-card);
  transition:transform .28s var(--ease-spring),border-color .25s var(--ease),box-shadow .3s var(--ease);
}
/* the bloom brightens on hover instead of the whole card jumping colour */
.mod-card::after{
  content:"";position:absolute;inset:-40% -30% auto auto;width:70%;aspect-ratio:1;z-index:-1;
  border-radius:50%;background:radial-gradient(circle,color-mix(in oklch, var(--acc) 30%, var(--c-ai-soft)),transparent 68%);
  opacity:.42;filter:blur(28px);transition:opacity .3s var(--ease);
}
.mod-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in oklch, var(--acc) 48%, var(--c-ai));
  box-shadow:var(--sh-lift),0 18px 40px -26px color-mix(in oklch, var(--acc) 48%, var(--c-ai));
}
.mod-card:hover::after{opacity:.95}
.mod-card:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.mod-card h3{font-size:17.5px;padding-right:8px;line-height:1.25;color:color-mix(in oklch, var(--acc) 18%, var(--c-fg-0))}
.mod-card p{font-size:13.5px;line-height:1.55;color:var(--c-fg-2);margin-top:8px;text-wrap:pretty}
.mod-card[hidden]{display:none}
/* "Coming soon" tag on a card that has not shipped yet (modules.json `soon`) */
.mod-soon{
  align-self:flex-start;margin-bottom:9px;
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in oklch, var(--acc) 74%, var(--c-fg-0));
  border:1px solid color-mix(in oklch, var(--acc) 44%, var(--c-line));
  background:color-mix(in oklch, var(--c-bg-0) 62%, transparent);
  border-radius:999px;padding:3px 9px;
}
.mod-card h3:first-child{margin-top:2px}

/* ---------- shipping next ---------- */
.soon-strip{
  margin-top:26px;padding:20px 22px;border-radius:var(--r-4);
  border:1px dashed color-mix(in oklch, var(--c-ai) 34%, var(--c-line-strong));
  background:color-mix(in oklch, var(--c-ai) 5%, var(--c-bg-1));
}
.soon-strip-label{
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in oklch, var(--c-ai) 66%, var(--c-fg-2));margin-bottom:14px;
}
.soon-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
@media(max-width:760px){.soon-list{grid-template-columns:1fr}}
.soon-list li{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.soon-list strong{font-size:15px;letter-spacing:-0.01em;color:var(--c-fg-0)}
.soon-tag{
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:oklch(0.99 0 0);background:var(--c-ai);border-radius:999px;padding:3px 9px;
}
.soon-note{flex:1 1 100%;font-size:13px;color:var(--c-fg-2)}

/* zoomed panel — FLIP-scales out of the hovered card to fill the stage */
.mod-zoom{
  --acc:var(--c-ai);
  position:absolute;top:0;left:0;width:100%;z-index:5;
  min-height:min(420px,100%);max-height:100%;
  overflow:auto;overscroll-behavior:contain;
  padding:26px 28px 24px;border-radius:var(--r-5);
  background:
    radial-gradient(100% 75% at 50% 0%, color-mix(in oklch, var(--acc) 8%, transparent), transparent 64%),
    var(--c-bg-1);
  border:1px solid color-mix(in oklch, var(--acc) 36%, var(--c-line));
  box-shadow:0 30px 80px -24px oklch(0.25 0.04 262 / 0.30), 0 0 44px color-mix(in oklch, var(--acc) 10%, transparent);
  transform-origin:0 0;will-change:transform;
  transition:transform .56s cubic-bezier(.22,.8,.24,1);
}
.mod-zoom-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.mod-zoom-head h3{font-size:clamp(22px,2.6vw,30px)}
.mod-zoom-head p{font-size:15px;color:var(--c-fg-2);margin-top:8px;max-width:62ch;text-wrap:pretty}
.mod-close{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in oklch, var(--acc) 40%, var(--c-line));color:var(--c-fg-0);
  transition:border-color .2s,box-shadow .3s,transform .2s var(--ease-spring);
}
.mod-close:hover{border-color:var(--acc);transform:scale(1.06)}
.mod-close:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mod-close svg{width:16px;height:16px}

.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
@media(max-width:560px){.uc-grid{grid-template-columns:1fr}}
.uc-card{
  padding:18px 18px 16px;border-radius:var(--r-3);
  background:var(--c-bg-2);
  border:1px solid color-mix(in oklch, var(--acc) 20%, var(--c-line));
  transition:border-color .25s var(--ease),box-shadow .3s var(--ease),transform .25s var(--ease-spring);
}
.uc-card:hover{border-color:color-mix(in oklch, var(--acc) 45%, var(--c-line));box-shadow:var(--sh-card);transform:translateY(-2px)}
.uc-card h4{font-size:15.5px;font-weight:600;letter-spacing:-0.01em;color:var(--c-fg-0)}
.uc-card p{font-size:13.5px;line-height:1.55;color:var(--c-fg-2);margin-top:6px;text-wrap:pretty}

/* panel contents stagger in once the zoom has (mostly) landed */
.mod-zoom .mod-zoom-head,.mod-zoom .uc-card{
  opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .45s var(--ease-out);
}
.mod-zoom.in .mod-zoom-head,.mod-zoom.in .uc-card{
  opacity:1;transform:none;transition-delay:var(--d,0ms);
}

/* ---------- "One platform, one scroll" — pinned 2D SVG flow scene ----------
   js/flow-2d.js rigs the SVG in code and scrubs one GSAP timeline.
   Light-theme scene: dark marks on light surfaces, elevation not glow.
   All colors from the :root tokens; classes prefixed fl-. */
.flow-intro{padding-top:var(--sec-y);padding-bottom:30px}
.flow-skip{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;
  color:var(--c-fg-3);text-decoration:none;border-bottom:1px solid var(--c-line-strong);
}
.flow-skip:hover{color:var(--c-ai);border-color:color-mix(in oklch, var(--c-ai) 45%, transparent)}
.flow-skip:focus-visible{outline:2px solid var(--c-ai);outline-offset:3px;border-radius:2px}

.flow-stage{
  position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;
  /* backdrop stays transparent — the page's ambient wash shows through */
}
#flow-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#flow-svg text{font-family:var(--f-sans)}

/* screen-reader narration */
.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;
}

/* -- persistent chrome: hint + beat caption + brand progress underline -- */
.fl-overlay{position:absolute;inset:0;pointer-events:none}
.fl-hint{
  position:absolute;top:26px;left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-fg-3);transition:opacity .5s;
}
.fl-hint.hide{opacity:0}
.fl-caption{
  position:absolute;left:50%;transform:translateX(-50%);bottom:20px;
  display:flex;align-items:center;gap:12px;white-space:nowrap;overflow:hidden;
  font-family:var(--f-mono);font-size:11.5px;color:var(--c-fg-2);
  background:color-mix(in oklch, var(--c-bg-0) 78%, transparent);
  border:1px solid var(--c-line-strong);border-radius:999px;padding:8px 16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  max-width:calc(100% - 32px);
}
.fl-caption .tnum{color:var(--c-ai);letter-spacing:.1em}
.fl-caption i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--g-brand)}

/* -- scene surfaces (light: elevation, not glow) -- */
.fl-shell{fill:var(--c-bg-1);stroke:var(--c-line-strong);stroke-width:1.25}
.fl-panel{fill:var(--c-bg-2);stroke:var(--c-line);stroke-width:1.25}
.fl-panel-over{fill:var(--c-bg-1);stroke:var(--c-line-strong);stroke-width:1.25}
.fl-card{fill:var(--c-bg-1);stroke:var(--c-line);stroke-width:1.25}
.fl-card-0{fill:var(--c-bg-0);stroke:var(--c-line-strong);stroke-width:1.25}
.fl-card-ai{fill:color-mix(in oklch, var(--c-ai) 7%, var(--c-bg-0));stroke:color-mix(in oklch, var(--c-ai) 45%, var(--c-line));stroke-width:1.5}
.fl-col{fill:color-mix(in oklch, var(--c-bg-3) 55%, var(--c-bg-2));stroke:var(--c-line)}
.fl-row{fill:var(--c-bg-1);stroke:var(--c-line)}
.fl-input{fill:var(--c-bg-0);stroke:color-mix(in oklch, var(--c-ai) 40%, var(--c-line));stroke-width:1.5}
.fl-logo{fill:color-mix(in oklch, var(--chart-2) 16%, var(--c-bg-0));stroke:color-mix(in oklch, var(--chart-2) 45%, var(--c-line));stroke-width:1.25}
.fl-logo-glyph{fill:color-mix(in oklch, var(--chart-2) 70%, var(--c-fg-1))}
.fl-hairline{stroke:var(--c-line);stroke-width:1.25}
.fl-hairline-strong{stroke:var(--c-line-strong);stroke-width:1.25}
.fl-shadow-f{flood-color:var(--c-fg-0);flood-opacity:.10}
.fl-orb-s0{stop-color:var(--c-ai-3)}
.fl-orb-s1{stop-color:var(--c-ai)}
.fl-orb-ring{fill:none;stroke:color-mix(in oklch, var(--c-ai) 35%, transparent);stroke-width:1.25}

/* -- scribble marks: dark-on-light (inverted from the dark scenes) -- */
.fl-mk{filter:blur(1.1px)}
.fl-mk-steel{fill:color-mix(in oklch, var(--c-fg-2) 48%, transparent)}
.fl-mk-faint{fill:color-mix(in oklch, var(--c-fg-3) 36%, transparent)}
.fl-mk-ai{fill:color-mix(in oklch, var(--c-ai) 55%, transparent)}
.fl-mk-pos{fill:color-mix(in oklch, var(--c-pos) 60%, transparent)}

/* -- text -- */
.fl-t-wordmark{font-family:var(--f-mono);font-weight:600;fill:var(--c-fg-0);letter-spacing:.02em}
.fl-t-wordmark-hq{fill:var(--c-ai)}
.fl-t-head{font-weight:600;fill:var(--c-fg-0);letter-spacing:-.01em}
.fl-t-body{fill:var(--c-fg-1)}
.fl-t-num{font-variant-numeric:tabular-nums;font-weight:700}
.fl-t-mono-dim{font-family:var(--f-mono);fill:var(--c-fg-3);letter-spacing:.04em}
.fl-eyebrow{font-family:var(--f-mono);letter-spacing:.16em;fill:var(--c-fg-3)}
.fl-eyebrow-strong{font-family:var(--f-mono);letter-spacing:.14em;fill:var(--c-fg-1);font-weight:600}
.fl-t-aiacc{fill:var(--c-ai);font-weight:600}
.fl-t-ai-mono{font-family:var(--f-mono);fill:var(--c-ai);letter-spacing:.05em}
.fl-t-pos{fill:var(--c-pos-text);font-weight:600}
.fl-t-pos-mono{font-family:var(--f-mono);fill:var(--c-pos-text);letter-spacing:.05em}
.fl-t-warn{fill:var(--c-warn-text);font-weight:600}
.fl-t-warn-mono{font-family:var(--f-mono);fill:var(--c-warn-text);letter-spacing:.05em}
.fl-t-neg{fill:var(--c-neg-text)}
.fl-t-final{font-weight:800;fill:var(--c-fg-0);letter-spacing:-.02em}
.fl-t-final-sub{fill:var(--c-fg-2)}

/* -- module rail -- */
.fl-chip-dim{opacity:.35}
.fl-chip-icon-dim{fill:none;stroke:var(--c-fg-3);stroke-width:1.25}
.fl-chip-glyph-dim{fill:var(--c-fg-3)}
.fl-chip-label-dim{font-family:var(--f-mono);letter-spacing:.06em;fill:var(--c-fg-3)}
.fl-chip-glyph-lit{fill:var(--c-bg-0)}
.fl-chip-label-lit{font-family:var(--f-mono);letter-spacing:.06em;fill:var(--c-fg-0);font-weight:600}
.fl-conn{stroke-width:1.5;opacity:.8}

/* -- chips / pills / status -- */
.fl-chip-ai{fill:color-mix(in oklch, var(--c-ai) 9%, transparent);stroke:color-mix(in oklch, var(--c-ai) 40%, transparent);stroke-width:1.25}
.fl-chip-pos{fill:color-mix(in oklch, var(--c-pos) 12%, transparent);stroke:color-mix(in oklch, var(--c-pos) 40%, transparent);stroke-width:1.25}
.fl-chip-warn{fill:color-mix(in oklch, var(--c-warn) 14%, transparent);stroke:color-mix(in oklch, var(--c-warn) 48%, transparent);stroke-width:1.25}
.fl-dot-ai{fill:var(--c-ai)}
.fl-dot-dim{fill:color-mix(in oklch, var(--c-fg-3) 45%, transparent)}
.fl-dot-pos{fill:var(--c-pos)}
.fl-dot-warn{fill:var(--c-warn)}
.fl-avatar{fill:color-mix(in oklch, var(--c-ai) 22%, var(--c-bg-3));stroke:color-mix(in oklch, var(--c-ai) 40%, var(--c-line));stroke-width:1.25}

/* -- conversation layer: Dana (green) · Atlas (blue — the brand indigo) -- */
.fl-orb-dana{fill:color-mix(in oklch, var(--c-pos) 16%, var(--c-bg-0));stroke:var(--c-pos);stroke-width:1.5}
.fl-orb-atlas{fill:color-mix(in oklch, var(--c-ai) 14%, var(--c-bg-0));stroke:var(--c-ai);stroke-width:1.5}
.fl-halo-dana{fill:color-mix(in oklch, var(--c-pos) 20%, transparent)}
.fl-halo-atlas{fill:color-mix(in oklch, var(--c-ai) 20%, transparent)}
.fl-orb-dot-dana{fill:var(--c-pos-text)}
.fl-orb-dot-atlas{fill:var(--c-ai)}
.fl-orb-label{font-family:var(--f-mono);letter-spacing:.1em;fill:var(--c-fg-3)}
.fl-orb-dots circle{animation:fl-dotpulse 1s ease-in-out infinite}
.fl-orb-dots circle:nth-child(2){animation-delay:.18s}
.fl-orb-dots circle:nth-child(3){animation-delay:.36s}
@keyframes fl-dotpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.fl-bubble{fill:var(--c-bg-2);stroke-width:1.25}
.fl-bubble-dana{stroke:color-mix(in oklch, var(--c-pos) 55%, var(--c-line-strong))}
.fl-bubble-atlas{stroke:color-mix(in oklch, var(--c-ai) 55%, var(--c-line-strong))}
.fl-bubble-text{font-family:var(--f-sans);fill:var(--c-fg-0)}

/* (change round 02: the .fl-pre-* pre-roll idle state is gone — the scene now
   opens on beat 01 already drawn, and the spinning aperture mark it used lives
   in the hero as .hero-mark) */

/* -- cursor + click feedback -- */
.fl-ptr{fill:var(--c-fg-0);stroke:var(--c-bg-0);stroke-width:1.2;stroke-linejoin:round}
.fl-hover{fill:none;stroke:var(--c-ai);stroke-width:1.5}
.fl-click-ring{fill:none;stroke:var(--c-ai);stroke-width:1.25}
.fl-btn-ai{fill:var(--c-ai)}
.fl-btn-label{font-family:var(--f-mono);letter-spacing:.1em;fill:oklch(0.99 0 0);font-weight:600}
.fl-btn-dot{fill:oklch(0.99 0 0)}
.fl-flash{fill:color-mix(in oklch, var(--c-ai) 10%, transparent)}

/* -- role colours: roster dots, gantt bars, timesheets share one key -- */
.fl-gr-0{fill:color-mix(in oklch, var(--c-fg-3) 45%, transparent)}
.fl-gr-1{fill:color-mix(in oklch, var(--chart-1) 75%, transparent)}
.fl-gr-2{fill:color-mix(in oklch, var(--chart-2) 75%, transparent)}
.fl-gr-3{fill:color-mix(in oklch, var(--chart-3) 75%, transparent)}
.fl-grd-1{fill:var(--chart-1)}
.fl-grd-2{fill:var(--chart-2)}
.fl-grd-3{fill:var(--chart-3)}

/* -- scene details -- */
.fl-t-desc{fill:var(--c-fg-1)}
.fl-arc{fill:none;stroke:var(--c-ai-3);stroke-width:2;stroke-linecap:round}
.fl-sig{fill:none;stroke:var(--c-fg-0);stroke-width:2;stroke-linecap:round}
.fl-seal{fill:color-mix(in oklch, var(--c-pos) 10%, transparent);stroke:var(--c-pos);stroke-width:2}
.fl-seal-check{fill:none;stroke:var(--c-pos-text);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.fl-won-halo{fill:color-mix(in oklch, var(--c-pos) 8%, transparent)}
.fl-won{fill:color-mix(in oklch, var(--c-pos) 14%, var(--c-bg-0));stroke:var(--c-pos);stroke-width:2.5}
.fl-won-check{fill:none;stroke:var(--c-pos-text);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.fl-dep{fill:none;stroke:color-mix(in oklch, var(--c-fg-2) 55%, transparent);stroke-width:1.5}
.fl-bubble-user{fill:var(--c-bg-3);stroke:var(--c-line-strong);stroke-width:1.25}
.fl-bubble-ai{fill:color-mix(in oklch, var(--c-ai) 6%, var(--c-bg-0));stroke:color-mix(in oklch, var(--c-ai) 35%, var(--c-line));stroke-width:1.25}
.fl-hl{fill:color-mix(in oklch, var(--c-warn) 30%, transparent)}
.fl-axis{stroke:var(--c-line-strong);stroke-width:1.25}
.fl-budget-line{stroke:color-mix(in oklch, var(--c-fg-2) 60%, transparent);stroke-width:1.5;stroke-dasharray:6 6}
.fl-burn{fill:none;stroke:var(--c-ai);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fl-flow-arrow{fill:none;stroke:color-mix(in oklch, var(--c-fg-2) 60%, transparent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fl-wire{stroke:color-mix(in oklch, var(--c-ai) 55%, var(--c-line-strong));stroke-width:2;stroke-linecap:round}

/* -- stepped static fallback: the same 16 beats, top to bottom -- */
.fl-fallback{display:none}
.nofl .fl-fallback{display:block;padding-top:6px;padding-bottom:var(--sec-y)}
.nofl .flow-stage{display:none}
.fl-steps{display:flex;flex-direction:column;gap:10px;margin-top:6px;max-width:760px}
.fl-step{background:var(--c-bg-1);border:1px solid var(--c-line);border-radius:var(--r-4);padding:15px 20px;box-shadow:var(--sh-card)}
.fl-step .num{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--c-ai)}
.fl-step h3{font-size:18px;margin:6px 0 4px}
.fl-step>p:last-child{font-size:14.5px;color:var(--c-fg-2)}

/* ---------- AI capabilities — alternating rows ---------- */
.airows{margin-top:36px;display:flex;flex-direction:column;gap:clamp(32px,4vw,54px)}
.airow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.airow:nth-child(even) .airow-copy{order:2}
.airow:nth-child(even) .airow-vis{order:1}
@media(max-width:860px){
  .airow{grid-template-columns:1fr;gap:24px}
  .airow:nth-child(even) .airow-copy{order:1}
  .airow:nth-child(even) .airow-vis{order:2}
}
.airow-copy .eyebrow{margin-bottom:12px}
.airow-copy h3{font-size:clamp(24px,2.8vw,32px)}
.airow-copy p{margin-top:14px;color:var(--c-fg-2);font-size:16.5px;max-width:54ch;text-wrap:pretty}
.airow-vis svg{width:100%;height:auto;border-radius:var(--r-5)}
.airow-vis{padding:10px;border:1px solid color-mix(in oklch, var(--c-ai) 15%, var(--c-line));border-radius:calc(var(--r-5) + 4px);background:color-mix(in oklch, var(--c-bg-0) 72%, transparent);box-shadow:var(--sh-card)}

/* SVG vocabulary for the capability visuals — tokens only */
.v-panel{fill:var(--c-bg-2);stroke:var(--c-line-strong);stroke-width:1}
.v-bubble-user{fill:var(--c-bg-3)}
.v-bubble-ai{fill:color-mix(in oklch, var(--c-ai) 12%, var(--c-bg-2));stroke:color-mix(in oklch, var(--c-ai) 30%, transparent);stroke-width:1}
.v-input{fill:var(--c-bg-1);stroke:color-mix(in oklch, var(--c-ai) 40%, var(--c-line));stroke-width:1.2}
.v-chip{fill:var(--c-bg-1);stroke:var(--c-line-strong);stroke-width:1}
.v-text{font-family:var(--f-sans);font-size:11px;fill:var(--c-fg-1)}
.v-text.ai{fill:color-mix(in oklch, var(--c-ai) 80%, var(--c-fg-0))}
.v-text.mono{font-family:var(--f-mono);font-size:10px;fill:var(--c-fg-2)}
.v-text.mono.faint{fill:var(--c-fg-3)}
.v-text.mono.onhub{fill:oklch(0.99 0 0);font-size:12px;font-weight:600}
.v-dot{fill:color-mix(in oklch, var(--c-ai) 55%, var(--c-bg-3))}
.v-bar{fill:color-mix(in oklch, var(--c-ai) 70%, transparent)}
.v-bar.b2{fill:color-mix(in oklch, var(--c-ai-2) 70%, transparent)}
.v-bar.b3{fill:var(--c-ai)}
.v-bar.b4{fill:color-mix(in oklch, var(--c-ai-3) 80%, transparent)}
.v-bar.b5{fill:color-mix(in oklch, var(--c-ai-2) 55%, transparent)}
.v-axis{stroke:var(--c-line-strong);stroke-width:1}
.v-spark{fill:none;stroke:var(--c-ai);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.v-flag.warn{fill:var(--c-warn)}
.v-flag.neg{fill:var(--c-neg)}
.v-node{fill:var(--c-bg-1);stroke:color-mix(in oklch, var(--c-ai) 45%, var(--c-line));stroke-width:1.2}
.v-node.ok{stroke:color-mix(in oklch, var(--c-pos) 60%, var(--c-line))}
.v-wire{stroke:color-mix(in oklch, var(--c-ai) 45%, var(--c-line-strong));stroke-width:1.6}
.v-hub{fill:var(--c-ai)}

/* ---------- comparison ledger ---------- */
/* Section rhythm: alternate bg-0 / bg-1 down the page so consecutive
   sections don't merge (hero + modules + AI ride the bg-0 body wash;
   the anim stage and proof strip are already bg-1). Pricing alone gets
   bg-2 so it reads as the most panel-like block on the page. */
#compare{background:var(--c-bg-1);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
#pricing{
  background:
    radial-gradient(60% 110% at 100% 0%,color-mix(in oklch, var(--c-ai-2) 10%, transparent),transparent 62%),
    radial-gradient(55% 100% at 0% 100%,color-mix(in oklch, var(--c-ai-3) 9%, transparent),transparent 64%),
    var(--c-bg-2);
  border-bottom:1px solid var(--c-line);
}
.ledger{margin-top:28px;border:1px solid var(--c-line-strong);border-radius:var(--r-4);overflow:hidden;background:var(--c-bg-0);box-shadow:var(--sh-card)}
.ledger-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
th,td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--c-line);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
thead th{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-fg-3)}
tbody th{font-weight:600;color:var(--c-fg-0);font-size:14px}
td.us{background:color-mix(in oklch, var(--c-ai) 11%, transparent)}
thead th.us{color:var(--c-ai)}
.mark{font-weight:600;white-space:nowrap}
.mark.yes{color:var(--c-pos-text)}
.mark.part{color:var(--c-warn-text)}
.mark.no{color:var(--c-neg-text)}
td small{display:block;color:var(--c-fg-3);font-weight:400;margin-top:2px;white-space:normal}
.ledger-fomo{
  margin-top:20px;padding:16px 18px;border-radius:var(--r-3);
  font-size:15px;line-height:1.6;color:var(--c-fg-1);text-wrap:pretty;
  border:1px solid color-mix(in oklch, var(--c-ai) 30%, var(--c-line));
  background:color-mix(in oklch, var(--c-ai) 6%, var(--c-bg-1));
}
.ledger-fomo strong{color:var(--c-fg-0)}
.ledger-note{font-size:13px;color:var(--c-fg-3);margin-top:14px}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;margin-top:30px;align-items:start}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
/* .solo — the price calculator is gone (the site quotes no prices); the
   included-modules card centres on its own instead of sitting in a
   half-empty two-up. */
.price-grid.solo{grid-template-columns:minmax(0,760px)}
.price-base{
  position:relative;overflow:hidden;
  background:color-mix(in oklch, var(--c-bg-0) 78%, var(--c-bg-1));border:1px solid color-mix(in oklch, var(--c-ai) 30%, var(--c-line-strong));border-radius:var(--r-5);
  padding:30px 32px;box-shadow:var(--sh-lift);
}
.price-base::after{content:"";position:absolute;right:-90px;top:-110px;width:260px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in oklch, var(--c-ai) 17%, transparent),transparent 68%);pointer-events:none}
.price-cta{display:flex;margin-top:20px}
.price-base .eyebrow{margin-bottom:8px}
.price-base h3{font-size:24px}
.price-base>p{color:var(--c-fg-2);font-size:15px;margin-top:10px}
.base-list{list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
@media(max-width:520px){.base-list{grid-template-columns:1fr}}
.base-list li{position:relative;padding-left:24px;font-size:14px;color:var(--c-fg-1)}
.base-list li::before{content:"✓";position:absolute;left:0;color:var(--c-pos-text);font-family:var(--f-mono);font-size:13px}


/* ---------- social proof ---------- */
/* Dark band on purpose: Poma's and Alliant's only public logos are
   light-on-dark assets, so they vanish on paper. On ink they read at full
   strength — and the strip gives the page a beat between sections. The CAC
   file is a white-background JPEG, so it keeps a white plate of its own. */
.proof{
  padding:clamp(38px,4.6vw,56px) 0;
  background:
    radial-gradient(70% 140% at 8% 0%, color-mix(in oklch, var(--c-ai) 26%, transparent), transparent 62%),
    radial-gradient(60% 130% at 96% 100%, color-mix(in oklch, var(--c-ai-2) 20%, transparent), transparent 60%),
    oklch(0.19 0.025 265);
  border-top:1px solid color-mix(in oklch, var(--c-ai) 30%, transparent);
  border-bottom:1px solid color-mix(in oklch, var(--c-ai) 30%, transparent);
}
.proof-row{display:flex;justify-content:center;align-items:center;gap:clamp(28px,6vw,72px);flex-wrap:wrap}
.proof-logo{display:inline-flex;align-items:center;justify-content:center;opacity:.92;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.proof-logo:hover{opacity:1;transform:translateY(-2px)}
.proof-logo:focus-visible{outline:2px solid var(--c-ai-3);outline-offset:5px;border-radius:6px}
.proof-logo img{display:block;width:auto;height:clamp(40px,4.6vw,56px);object-fit:contain}
.proof-logo.is-wide img{height:clamp(26px,3.1vw,36px)}
/* UTS locks a tagline under the mark, so it needs more box to read at the
   same optical weight as the wordmark-only logos beside it. */
.proof-logo.is-tall img{height:clamp(50px,5.6vw,68px)}
.proof-logo.is-plate{background:oklch(0.99 0 0);border-radius:10px;padding:9px 13px;box-shadow:0 10px 30px -14px oklch(0 0 0 / .5)}
.proof-logo.is-plate img{height:clamp(24px,2.9vw,34px)}

/* ---------- product overview video ---------- */
/* The frame is a lit plate, not a bare rectangle: the video is a dark,
   blue-heavy asset dropped onto a near-white page, so it needs a brand-tinted
   bloom under it to belong rather than look pasted on. Aspect-ratio is fixed
   at 16/9 from the source (1920x1080) so the poster reserves its box and the
   section never shifts when the file arrives. */
.vid{margin-top:clamp(26px,3vw,38px)}
.vid-frame{
  position:relative;
  border-radius:var(--r-5);
  overflow:hidden;
  background:oklch(0.19 0.025 265);
  border:1px solid color-mix(in oklch, var(--c-ai) 26%, var(--c-line-strong));
  box-shadow:var(--sh-lift),0 40px 90px -50px color-mix(in oklch, var(--c-ai) 70%, transparent);
}
.vid-el{width:100%;height:auto;aspect-ratio:16/9;display:block;background:oklch(0.19 0.025 265)}
.vid-fallback{padding:24px;color:oklch(0.95 0 0);text-align:center}
.vid-fallback a{color:var(--c-ai-3);text-decoration:underline}

/* Unmute pill — top-right, clear of the native control bar at the bottom.
   js/video.js toggles [hidden]; it is a real <button> so it is tab-reachable
   and announces itself. */
.vid-sound{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:oklch(0.99 0 0);
  background:var(--g-brand);
  box-shadow:var(--sh-brand);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.vid-sound:hover{transform:translateY(-2px)}
.vid-sound:focus-visible{outline:none;box-shadow:0 0 0 2px oklch(0.19 0.025 265),0 0 0 4px var(--c-ai-3)}
.vid-sound svg{flex:none}
.vid-sound-t{white-space:nowrap}

.vid-cap{margin-top:12px;font-size:13px;color:var(--c-fg-3);text-align:center;text-wrap:pretty}

/* On a phone the label eats most of the frame — the icon alone carries it,
   and the button keeps its aria-label so it still announces properly. */
@media (max-width:560px){
  .vid-frame{border-radius:var(--r-4)}
  .vid-sound{top:10px;right:10px;padding:0;width:38px;height:38px;justify-content:center;gap:0}
  .vid-sound-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq h2{margin-bottom:16px}
details{border-bottom:1px solid var(--c-line);padding:14px 4px}
summary{
  cursor:pointer;font-size:18px;font-weight:600;color:var(--c-fg-0);letter-spacing:-0.01em;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-mono);font-size:19px;color:var(--c-ai);flex-shrink:0;transition:transform .25s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
summary:focus-visible{outline:2px solid var(--c-ai);outline-offset:3px;border-radius:2px}
details p{color:var(--c-fg-2);margin-top:12px;font-size:15.5px;max-width:62ch}

/* ---------- final CTA ---------- */
.final{
  text-align:center;
  border-top:1px solid var(--c-line);
  background:
    radial-gradient(55% 125% at 50% 100%,color-mix(in oklch, var(--c-ai) 22%, transparent),transparent 66%),
    radial-gradient(40% 100% at 12% 100%,color-mix(in oklch, var(--c-ai-3) 10%, transparent),transparent 70%),
    radial-gradient(40% 100% at 88% 100%,color-mix(in oklch, var(--c-ai-2) 10%, transparent),transparent 70%),
    linear-gradient(180deg,transparent,color-mix(in oklch, var(--c-ai) 5%, var(--c-bg-1)));
}
.final h2{margin-inline:auto;max-width:760px}
.final .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.final .lead{margin:14px auto 0;max-width:560px}

/* ---------- footer ---------- */
footer{padding:34px 0;color:var(--c-fg-3);font-size:14px}
.foot-row{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-tag{margin-top:8px;max-width:340px}
.foot-row nav{display:flex;gap:22px;height:auto;padding:0;flex-wrap:wrap;max-width:none}
.foot-row nav a{color:var(--c-fg-3);text-decoration:none}
.foot-row nav a:hover{color:var(--c-fg-0)}
.foot-row nav a:focus-visible{outline:2px solid var(--c-ai);outline-offset:3px;border-radius:2px}
.foot-legal{margin-top:22px;padding-top:16px;border-top:1px solid var(--c-line);font-size:12.5px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- consent banner ----------
   Injected by js/analytics.js, and only when an analytics id is actually
   configured — with no id the page loads no tag, sets no cookie and shows
   nothing here. Bottom-anchored, never a full-screen interstitial (Google
   treats those as an intrusive-interstitial ranking problem on mobile). */
.consent{
  position:fixed;left:50%;bottom:16px;z-index:200;
  width:min(720px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:14px 18px;border-radius:var(--r-4);
  background:color-mix(in oklch, var(--c-bg-0) 94%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--c-line-strong);
  box-shadow:var(--sh-lift);
  transform:translate(-50%,120%);opacity:0;
  transition:transform .45s var(--ease-out),opacity .35s var(--ease);
}
.consent.in{transform:translate(-50%,0);opacity:1}
.consent-copy{font-size:13.5px;color:var(--c-fg-2);flex:1 1 340px;min-width:0;text-wrap:pretty}
.consent-copy a{color:var(--c-ai);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:8px;flex-shrink:0}
@media(max-width:520px){
  .consent{bottom:10px;padding:13px 15px}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .consent{transition:none;transform:translate(-50%,0);opacity:1}
}

/* ---------- legal pages (/privacy, /terms) ----------
   Same shell, same tokens; the body copy is mirrored from captivahq.com so the
   two properties never disagree. Re-sync both pages when the product's legal
   pages change. */
.legal{padding:40px 0 var(--sec-y)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(34px,4.6vw,52px);margin-top:6px}
.legal-updated{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in oklch, var(--c-ai) 62%, var(--c-fg-2));
}
.legal-intro{font-size:17px;color:var(--c-fg-1);margin-top:18px;max-width:70ch}
.legal h2{
  font-size:21px;letter-spacing:-0.01em;margin-top:32px;padding-top:18px;
  border-top:1px solid var(--c-line);
}
.legal h3{font-size:16.5px;margin-top:20px}
.legal p,.legal li{font-size:15.5px;color:var(--c-fg-1);max-width:70ch}
.legal p{margin-top:12px}
.legal ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.legal ul li{position:relative;padding-left:20px}
.legal ul li::before{
  content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--c-ai);
}
.legal a{color:var(--c-ai);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{text-decoration-thickness:2px}
.legal-table{margin-top:16px;border:1px solid var(--c-line-strong);border-radius:var(--r-4);overflow:hidden;background:var(--c-bg-0);box-shadow:var(--sh-card)}
.legal-table .ledger-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal-table table{min-width:700px;font-size:14px}
.legal-table tbody th{width:38%;font-weight:500}
.legal-table th,.legal-table td{padding:12px 14px}
.legal-table code{font-family:var(--f-mono);font-size:12.5px;color:var(--c-ai);overflow-wrap:anywhere}
.legal-sens{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;white-space:nowrap;
  border:1px solid color-mix(in oklch, var(--acc,var(--c-ai)) 55%, var(--c-line));
  background:color-mix(in oklch, var(--acc,var(--c-ai)) 14%, transparent);
  color:color-mix(in oklch, var(--acc,var(--c-ai)) 88%, var(--c-fg-0));
}
.legal-sens.restricted{--acc:var(--c-neg)}
.legal-sens.sensitive{--acc:var(--c-warn)}
.legal-sens.basic{--acc:var(--c-pos)}
.legal-contact{
  margin-top:32px;padding:20px 22px;border-radius:var(--r-4);
  background:var(--c-bg-1);border:1px solid var(--c-line-strong);
}
.legal-contact p{margin-top:4px}
.legal-note{
  margin-top:28px;padding:16px 18px;border-radius:var(--r-3);
  background:color-mix(in oklch, var(--c-ai) 8%, transparent);
  border:1px solid color-mix(in oklch, var(--c-ai) 30%, var(--c-line));
  font-size:14px;color:var(--c-fg-2);
}

/* ---------- documentation (/docs) ---------- */
.docs{padding:40px 0 var(--sec-y)}
.docs .wrap{max-width:1040px}
.docs h1{font-size:clamp(38px,5.4vw,64px);margin-top:6px}
.docs-intro{font-size:18px;color:var(--c-fg-1);margin-top:18px;max-width:72ch}
.docs-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:48px;margin-top:38px;align-items:start}
.docs-toc{position:sticky;top:88px;padding:18px;border:1px solid var(--c-line);border-radius:var(--r-3);background:var(--c-bg-1)}
.docs-toc strong{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-fg-3);margin-bottom:10px}
.docs-toc a{display:block;padding:6px 0;color:var(--c-fg-2);font-size:14px;text-decoration:none}
.docs-toc a:hover{color:var(--c-ai)}
.docs-content section{padding:0 0 36px;scroll-margin-top:90px}
.docs-content section+section{padding-top:30px;border-top:1px solid var(--c-line)}
.docs-content h2{font-size:28px}
.docs-content h3{font-size:18px;margin-top:24px}
.docs-content p,.docs-content li{font-size:15.5px;line-height:1.7;color:var(--c-fg-1);max-width:74ch}
.docs-content p{margin-top:12px}
.docs-content ol,.docs-content ul{margin:12px 0 0 22px;display:flex;flex-direction:column;gap:7px}
.docs-content a{color:var(--c-ai);text-underline-offset:3px}
.docs-content pre{margin-top:14px;padding:18px;overflow-x:auto;border:1px solid var(--c-line-strong);border-radius:var(--r-3);background:var(--c-bg-1);color:var(--c-fg-1);font:13px/1.65 var(--f-mono)}
.docs-content code{font-family:var(--f-mono);font-size:.9em}
.docs-callout{margin-top:16px;padding:16px 18px;border:1px solid color-mix(in oklch,var(--c-ai) 28%,var(--c-line));border-radius:var(--r-3);background:color-mix(in oklch,var(--c-ai) 7%,transparent)}
.docs-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.docs-link{padding:16px;border:1px solid var(--c-line);border-radius:var(--r-3);background:var(--c-bg-1);text-decoration:none}
.docs-link strong{display:block;color:var(--c-fg-0)}
.docs-link span{display:block;margin-top:4px;color:var(--c-fg-3);font-size:13px}
@media(max-width:760px){.docs-layout{grid-template-columns:1fr;gap:26px}.docs-toc{position:static}.docs-links{grid-template-columns:1fr}}

/* ---------- reduced motion — static fallback for every animated block ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* Horizon component treatment, aligned with shared/design/controls.css. */
body{background-image:var(--canvas-wash);letter-spacing:-.012em}
body::after{display:none}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.035em;font-weight:550;line-height:1.16}
h1{font-size:clamp(44px,6.6vw,80px)}
h2{font-size:clamp(30px,4vw,48px)}
.logo{font-family:var(--f-display);font-size:20px;letter-spacing:-.04em}
.logo b{text-shadow:none}
header{background:color-mix(in srgb,var(--c-bg-1) 96%,transparent);border-color:var(--line);box-shadow:var(--shadow-sm)}
header nav{height:76px;gap:18px}
header .beta-tag{display:none}
.navlinks{align-items:center;gap:22px}
.btn{border-radius:var(--r-2);font-weight:500;letter-spacing:-.01em}
.btn-primary{background:linear-gradient(180deg,var(--c-action),color-mix(in oklch,var(--c-action) 92%,black));box-shadow:var(--shadow-sm);border-color:transparent}
.btn-primary:hover{background:var(--color-primary-hover);transform:none;box-shadow:0 3px 9px var(--c-ai-glow)}
.btn-ghost{background:var(--surface-sheen);border-color:var(--line);box-shadow:var(--shadow-sm)}
.hero{padding:64px 0 72px}
.hero .wrap{width:100%;max-width:var(--maxw);position:relative;padding-right:300px}
.hero-head{margin-bottom:24px}
.hero-head .eyebrow{font-size:11px;letter-spacing:.1em;max-width:440px}
.hero-signal{position:absolute;right:48px;top:65px;--sig:220px}
.hero .lead{max-width:680px;margin-top:24px}
.hero h1{filter:none}
.eyebrow{letter-spacing:.1em}
.mod-card{background:linear-gradient(150deg,color-mix(in oklch,var(--acc) 6%,var(--c-bg-1)),var(--c-bg-1));border-color:color-mix(in oklch,var(--acc) 18%,var(--line))}
.mod-card::after{opacity:.16}
.airow-vis,.ledger,.price-base{background:var(--surface-sheen);border-color:var(--line);box-shadow:var(--shadow-sm)}
:where(a,button,summary):focus-visible{outline:2px solid var(--c-ai);outline-offset:4px}
[id]{scroll-margin-top:100px}
.industry-menu{position:relative;border:0;padding:0;font-size:14px}
.industry-menu summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;color:var(--c-fg-2);padding:10px 0;font-weight:500}
.industry-menu summary::-webkit-details-marker{display:none}
.industry-menu summary::after{display:none}
.industry-menu[open] summary{color:var(--c-ai)}
.industry-dropdown{position:absolute;top:100%;left:-22px;width:530px;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;background:var(--c-bg-1);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:var(--shadow-lg);max-height:70vh;overflow-y:auto}
.industry-menu-label{grid-column:1/-1;font:11px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--c-fg-3);margin:0 10px 8px}
.industry-dropdown a{padding:10px;border-radius:var(--r-2);line-height:1.4;font-size:13px}
.industry-dropdown a:hover{background:var(--nav-surface);color:var(--c-ai)}
.industry-dropdown .industry-all{grid-column:1/-1;border-top:1px solid var(--line);border-radius:0;margin-top:8px;padding-top:14px;color:var(--c-ai)}
#industries{background:var(--c-bg-0);border-bottom:1px solid var(--line)}
.industry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.industry-card{display:flex;flex-direction:column;padding:26px;background:var(--surface-sheen);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:var(--shadow-sm)}
.industry-number{font:12px var(--f-mono);color:var(--c-ai);margin-bottom:24px}
.industry-card h3{font-size:20px;font-weight:600}
.industry-card p{font-size:14px;color:var(--c-fg-2);margin:12px 0 24px}
.industry-card a{margin-top:auto;font-size:13px;font-weight:600;text-decoration:none;color:var(--c-ai);display:flex;justify-content:space-between;gap:12px}
.industry-card:target{border-color:var(--c-ai);box-shadow:0 0 0 2px var(--c-ai-soft)}
@media(max-width:1000px){
 .navlinks{gap:14px}.hero .wrap{padding-right:240px}.hero-signal{--sig:170px;right:28px}
}
@media(max-width:820px){
 header nav{height:auto;min-height:72px;flex-wrap:wrap;padding-top:14px;padding-bottom:10px;gap:10px}
 header .nav-actions{margin-left:auto;order:1}header .navlinks{display:flex;order:2;flex-basis:100%;justify-content:space-between;gap:12px;font-size:13px;padding-top:8px;border-top:1px solid var(--line)}
 .industry-menu{font-size:13px}.industry-menu summary{padding:4px 0}
 .industry-dropdown{left:0;width:min(530px,calc(100vw - 48px));max-height:65vh}
 .hero .wrap{padding-right:24px}.hero-signal{position:relative;top:auto;right:auto;--sig:112px}
 .hero{padding:32px 0 44px}.hero-head{gap:20px}.hero-head .eyebrow{max-width:250px}
 .industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 [id]{scroll-margin-top:140px}
}
@media(max-width:520px){
 header .navlinks{flex-wrap:wrap;justify-content:flex-start;gap:10px 18px}
 .industry-dropdown{grid-template-columns:1fr;max-height:60vh}
 .industry-grid{grid-template-columns:1fr}.industry-card{padding:22px}
 .hero-head .eyebrow{font-size:10px}.hero h1{font-size:44px}
}
@media(prefers-reduced-motion:reduce){.btn,.industry-card{transition:none}}