/* Order is the cascade: finish.css restyles controls the earlier files already styled. */
:root{
  --sky:#FFFFFF;          /* page: cool, screen-like, not paper */
  --white:#FFFFFF;
  --ink:#132338;          /* deep navy, never black */
  --ink-2:#3F5570;
  --ink-3:#77899E;
  --line:#D6E0EB;
  --line-2:#C2D1E0;
  --blue:#3A6DA2;         /* from the neuron plate already in the brand */
  --blue-lt:#93BBD8;
  --blue-dk:#2B5480;
  --ember:#B04559;
  --nv:#76B900;
  --nv-d:#639B00;
  --nv-ink:#0F1E08;        /* signal only */
  --ember-soft:#F6E9EB;
  --disp:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1220px;
  --gut:clamp(20px,5vw,64px);
}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
body{background:var(--sky);color:var(--ink);font-family:var(--disp);font-optical-sizing:auto;font-size:17px;line-height:1.62;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;scrollbar-width:none;-ms-overflow-style:none}
body::-webkit-scrollbar{display:none}
/* the grid the whole page sits on, drawn on the page so it scrolls with the content; it holds through
   the readouts and thins toward the foot (--dots-until is set by scroll-life.ts) */
body::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(19,35,56,.13) 1px,transparent 1.4px);background-size:12px 12px;
  -webkit-mask-image:linear-gradient(#000 0,#000 var(--dots-until,100%),rgba(0,0,0,.1) 100%);
          mask-image:linear-gradient(#000 0,#000 var(--dots-until,100%),rgba(0,0,0,.1) 100%)}
body>*{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
::selection{background:var(--nv);color:var(--nv-ink)}
:focus-visible{outline:2px solid var(--nv);outline-offset:3px}
canvas{display:block}
img{max-width:100%}

.w{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(38px,5vw,72px);position:relative;overflow:hidden}
/* a sprite from the set, large and almost gone, sitting in the empty margin */
.wash{position:absolute;pointer-events:none;opacity:.32;z-index:0}
.w{position:relative;z-index:1}
@media(max-width:1080px){.wash{display:none}}
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* every part stands on its own ground */
.band-t{background:#EFF0F3}
.band-t .plate{border-color:#D3DFEB}

h1,h2{font-family:var(--disp);font-weight:650;letter-spacing:-.03em;line-height:1.06}
h3{font-family:var(--disp);font-weight:600;font-stretch:112%;letter-spacing:-.02em}
.oneline{white-space:nowrap}
@media(max-width:720px){.oneline{white-space:normal}.bk{display:none}}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--nv-d);background:rgba(118,185,0,.12);display:inline-block;padding:5px 12px;font-weight:600;margin-bottom:14px}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px);margin-top:10px}
@media(max-width:820px){.hgrid{grid-template-columns:1fr}}
/* ── the system: a thesis pinned on the left, four figures moving past it ── */
/* sticky needs a scrollable ancestor; clip bounds the section without making one */
#system{overflow:clip;padding-block:clamp(58px,7.5vw,112px) clamp(34px,4vw,64px)}
.sygrid{display:grid;grid-template-columns:minmax(0,clamp(238px,24vw,326px)) minmax(0,1fr);
  gap:clamp(28px,4.2vw,66px);align-items:start}
/* the composer docks at top:8 and stands ~118px tall; the pinned head starts below it */
.syhead{position:sticky;top:clamp(130px,15vh,164px)}
.symark{display:block;width:clamp(166px,17vw,222px);aspect-ratio:1;
  margin-bottom:clamp(10px,1.2vw,16px)}
.sytitle{font-size:clamp(30px,3.7vw,53px);line-height:1.03;max-width:13ch}
.sytitle em{font-style:normal;color:var(--nv-d)}
/* the pinned head lets go against empty page, not against the next headline */
.sybody{padding-bottom:clamp(24px,4vw,72px)}
.syx{padding-block:clamp(32px,4.2vw,60px)}
.syx:first-child{padding-top:0}
.syx+.syx{border-top:1px solid var(--line)}
/* the number leads the block, and is read as a number */
.syh{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,19px);margin-bottom:15px}
.syh i{font-style:normal;font-family:var(--mono);font-size:clamp(27px,3vw,42px);font-weight:500;
  line-height:1;letter-spacing:-.02em;color:var(--nv);font-variant-numeric:tabular-nums}
.syh h3{font-size:clamp(20px,2vw,27px);font-stretch:100%}
.syx p{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:var(--ink-2);max-width:58ch}
.syx p+p{margin-top:13px}
.syfig{margin-top:clamp(22px,2.8vw,38px)}
.syfig canvas{display:block;width:min(100%,440px);aspect-ratio:1;margin-inline:auto}
.syfig > svg{display:block;width:100%;height:auto;overflow:visible}
.syfig .sy-pixel{max-width:560px;shape-rendering:crispEdges}
.sy .science-fig{max-width:680px;overflow:hidden}
.sy .science-fig .s-frame{fill:var(--white);stroke:var(--line);stroke-width:1}
.sy .science-fig .s-rule{fill:none;stroke:var(--line);stroke-width:1}
.sy .science-fig .s-grid{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.sy .science-fig .s-ink{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sy .science-fig .s-accent{fill:none;stroke:var(--nv);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sy .science-fig .s-soft{fill:rgba(118,185,0,.13)}.sy .science-fig .s-green{fill:var(--nv)}.sy .science-fig .s-dark{fill:var(--ink)}
.sy .science-fig .s-cell{fill:var(--white);stroke:var(--line-2);stroke-width:1}.sy .science-fig .s-empty{fill:#F4F7FA;stroke:var(--line-2);stroke-width:1}
.sy .science-fig .s-dot{fill:var(--white);stroke:#4F7C00;stroke-width:2}.sy .science-fig .s-dot.cur{fill:var(--nv-d)}
.sy .science-fig .s-label{fill:var(--ink);font-family:var(--disp);font-size:13px;font-weight:650;letter-spacing:.01em}
.sy .science-fig .s-note{fill:var(--ink-3);font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.1em}
.sy .science-fig .s-key{fill:var(--nv-d);font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em}
.sy .delta-fig{display:block;width:100%;max-width:940px;margin-inline:0;overflow:visible}
.sy .delta-fig .delta-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4}
/* Distinct tracks in a conceptual illustration, not measured or forecast customer results. */
.sy .delta-fig .delta-sim{stroke:var(--ink);stroke-dasharray:14 11}
.sy .delta-fig .delta-prod{stroke:var(--nv)}
/* the fidelity gap in the house pixel material; it ends at the threshold, where it stops meaning error */
.sy .delta-fig .delta-gap{fill:url(#sy-d);stroke:none}
.sy .delta-fig .ddot{fill:#fff;stroke:var(--nv-d);stroke-width:2;transform-box:fill-box;transform-origin:center}
.sy .delta-fig .dthr{fill:none;stroke:var(--ink-3);stroke-width:2.4;stroke-dasharray:6 7}
.sy .delta-fig .dthrl{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.18em;fill:var(--ink-2)}
/* each label is its track's colour, so it needs no leader to belong to it */
.sy .delta-fig .s-label{font-size:17px}.sy .delta-fig .s-label.p{fill:var(--nv-d)}
/* one wipe on arrival, then the chart is complete for good; only light moves after that */
.syx.rv .delta-fig .dstage{clip-path:inset(0 100% 0 0)}
.syx.rv.in .delta-fig .dstage{animation:dreveal 0.90s cubic-bezier(.32,.72,.28,1) both}
.syx.rv.in .delta-fig .ddot{animation:dping 3.2s ease-out infinite var(--d)}
.syx.rv.in .delta-fig .dthr{animation:dflare 3.2s ease-out infinite 2.40s}
@keyframes dreveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -4% 0 0)}}
@keyframes dping{0%{transform:scale(1)}7%{transform:scale(1.5)}20%,100%{transform:scale(1)}}
@keyframes dflare{0%{opacity:.78}7%{opacity:1}22%,100%{opacity:.78}}
@media(prefers-reduced-motion:reduce){.syx.rv .delta-fig .dstage{clip-path:none}.syx.rv.in .delta-fig .dstage,.syx.rv.in .delta-fig .ddot,.syx.rv.in .delta-fig .dthr{animation:none}}
@media(min-width:961px){.sy .delta-wrap{width:calc(100% + 24px);max-width:700px;margin-left:-24px}.sy .delta-wrap .delta-fig{max-width:700px}}

/* Figures are named things made of our matter: the shapes are filled with the pixel
   patterns in #sy-mat, the labels are real text, and the two are drawn together. */
.sy .ax{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-linecap:round}
.sy .st{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sy .gd{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 4}
.sy .wire{fill:none;stroke:var(--nv);stroke-width:1.6;stroke-dasharray:5 5}
.sy .sg{fill:none;stroke:var(--nv);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sy .ar{fill:var(--nv-d)}
.sy .fw{fill:#fff;stroke:var(--ink);stroke-width:1.3}
.sy .fi{fill:var(--ink)}
.sy .fg{fill:var(--nv)}
/* the situation field has two states and no third: a cell has run, or it has not */
.sy .cv{fill:var(--nv)}
.sy .cu{fill:none;stroke:var(--line-2);stroke-width:1}
.sy .cs{fill:none;stroke:var(--ink);stroke-width:1.6}
/* labels are uppercase and tracked; notes, verbs and axis titles stay lowercase */
.sy text{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--ink-3)}
.sy text.k{fill:var(--ink)}
.sy text.g{fill:#4F7C00}
.sy text.lead{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;fill:var(--ink)}
.sy text.big{font-size:12.5px;letter-spacing:.12em}
.sy text.on{fill:#0F1E08}
.sy text.note{font-size:9.5px;letter-spacing:.04em;text-transform:none;fill:var(--ink-3)}
.sy text.verb{font-size:9px;letter-spacing:.08em;text-transform:none;fill:var(--nv-d)}
.sy text.num{letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums}

/* fig 1: extra rules, scoped like the section's own */

/* the sandbox: a bounded white chamber on the dotted page, cornered in green */
.sy .f1box{fill:#fff;stroke:var(--line);stroke-width:1}
/* a word never has a line running through it */
.sy .f1chip{fill:#fff}
/* where the execution passes through a course */
.sy .f1pt{fill:#fff;stroke:var(--nv);stroke-width:1.6}
/* the run waits for the system it runs through to finish standing up */
.syx.rv.in .wire.f1late{transition-delay:1.15s}

/* the execution keeps running: one pass of the route every cycle, and the layer it is
   passing through catches light. Every rule is scoped to .rv.in, so a reader who asked
   for stillness gets the finished drawing and the loop never starts. */
.sy .f1pulse{fill:none;stroke:var(--nv-d);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:.07 .93;stroke-dashoffset:.07;opacity:0}
.sy .f1fire{fill:none;stroke:var(--nv);stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:center}
.syx.rv.in .f1pulse{opacity:1;transition:opacity .5s ease 1.6s;animation:f1run 6s linear infinite 1.9s}
/* every phase is the node's own distance along the route, so the light never leads the pulse */
.syx.rv.in .f1fire,.syx.rv.in .ar{animation-duration:6s;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-delay:calc(1.9s + var(--t,1) * 3.92s)}
.syx.rv.in .f1fire{animation-name:f1ping}
.syx.rv.in .ar{animation-name:f1tip;transform-box:fill-box;transform-origin:center}
/* the stack is a solid object seen from a viewpoint that drifts. A slab's shift is proportional
   to its height, which for the route threading them is the same thing as a shear about the base,
   so the wire and its nodes stay welded to the layers they pass through. Only the shapes move:
   the leaders and their type are annotation, and annotation does not sway. */
.sy .f1rig{transform-origin:0 348px}
.syx.rv.in .lay .body,.syx.rv.in .lay .nick{animation:f1orbit 18s ease-in-out infinite 2s}
.syx.rv.in .lay .pl{animation:f1lit 6s linear infinite calc(1.9s + var(--t,1) * 3.92s),
  f1orbit 18s ease-in-out infinite 2s}
.syx.rv.in .f1rig{animation:f1skew 18s ease-in-out infinite 2s}
@keyframes f1run{0%{stroke-dashoffset:.07}70%,100%{stroke-dashoffset:-1}}
@keyframes f1ping{0%{transform:scale(.5);opacity:.9}13%{transform:scale(3.2);opacity:0}13.01%,100%{opacity:0}}
@keyframes f1lit{0%{fill:#fff}5%{fill:rgba(118,185,0,.17)}20%,100%{fill:#fff}}
@keyframes f1tip{0%,100%{transform:none}5%{transform:translateY(-4px)}14%{transform:none}}
@keyframes f1orbit{0%,50%,100%{transform:none}25%{transform:translateX(calc(var(--i) * 0.95px))}
  75%{transform:translateX(calc(var(--i) * -0.95px))}}
/* tan(1.296deg) = 0.95 / 42, the slab pitch: the shear and the slabs are the same motion */
@keyframes f1skew{0%,50%,100%{transform:none}25%{transform:skewX(-1.296deg)}75%{transform:skewX(1.296deg)}}
/* the layer slabs: a lit top face over a shaded body, and the parts read off its cut edge */
.sy .pl{fill:#fff;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.sy .body{fill:rgba(19,35,56,.07);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.sy .body.mdl,.sy .pl.mdl{stroke:var(--nv)}
.sy .body.mdl{fill:rgba(118,185,0,.12)}
.sy .nick{fill:none;stroke:var(--line-2);stroke-width:1}
.sy .pt{fill:#fff;stroke:var(--nv);stroke-width:1.5}
/* a wire that must wait for the structure it runs through to stand up first */
.syx.rv.in .wire.late{transition:opacity .5s ease 1.25s}

/* ── how the figures come alive ──────────────────────────────────
   Every rule is scoped to .rv, which the page only sets when motion is welcome,
   so a reader who asked for stillness gets the finished drawing and nothing moves. */
.syx.rv .draw{stroke-dasharray:1;stroke-dashoffset:1}
.syx.rv.in .draw{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.25s cubic-bezier(.32,.7,.28,1) var(--d,.25s)}
.syx.rv .fade{opacity:0}
.syx.rv.in .fade{opacity:1;transition:opacity .62s ease var(--d,.4s)}
.syx.rv .lay{opacity:0;transform:translateY(-20px)}
.syx.rv.in .lay{opacity:1;transform:none;transition:opacity .5s ease,
  transform .72s cubic-bezier(.22,.68,.32,1);transition-delay:calc(var(--i) * 95ms)}
.syx.rv .pop{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center}
.syx.rv.in .pop{opacity:1;transform:none;transition:opacity .3s ease,
  transform .5s cubic-bezier(.22,1.25,.36,1);transition-delay:calc(.45s + var(--i) * 80ms)}
.syx.rv .wipeR{transform:scaleX(0);transform-box:fill-box;transform-origin:left}
.syx.rv.in .wipeR{transform:none;transition:transform 1.5s cubic-bezier(.25,.7,.25,1) .3s}
.syx.rv .wire{opacity:0}
.syx.rv.in .wire{opacity:1;transition:opacity .5s ease .55s;animation:symarch 5s linear infinite}
@keyframes symarch{to{stroke-dashoffset:-20}}
@media(max-width:960px){
  .sygrid{grid-template-columns:1fr;gap:24px}
  .syhead{position:static}
  .sytitle{max-width:17ch}
}
@media(max-width:640px){
  .sy text{font-size:14px;letter-spacing:.1em}
  .sy text.lead{font-size:17px}
  .sy text.note,.sy text.verb{font-size:13px}
  .sy .delta-fig .s-label{font-size:30px}
  .sy .delta-fig .dthrl{font-size:23px}
}
/* a short window has no room for both the title and its rail */
/* ── behavior → metric: a full-width ticker of readouts, no background ──── */
#deploy{position:relative;padding-block:clamp(56px,7vw,100px) clamp(22px,3vw,42px)}
.mptitle{font-size:clamp(29px,3.8vw,50px);max-width:19ch}
.mptitle em{font-style:normal;color:var(--nv-d)}
.mplede{margin-top:16px;max-width:62ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:var(--ink-2)}
/* the ticker runs the full width of the page, past the text column */
.bmq{position:relative;z-index:1;margin-top:clamp(30px,3.6vw,46px);overflow:hidden;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.bmq::-webkit-scrollbar{display:none}
.bmq+.bmq{margin-top:14px}
.bmqrow{display:flex;width:max-content;animation:bmqrun 58s linear infinite}
.bmqrow.rev{animation-direction:reverse}
@property --glow{syntax:'<number>';inherits:false;initial-value:0}
.bmqset{display:flex;gap:14px;padding-right:14px}
@keyframes bmqrun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* one readout: sharp, bracketed, instrument-panel */
.bt{position:relative;flex:0 0 clamp(252px,25vw,336px);display:flex;flex-direction:column;
  padding:clamp(18px,1.8vw,24px);border:1px solid var(--line);background:var(--white);
  transition:border-color .24s ease}
.bt::before,.bt::after{content:'';position:absolute;width:11px;height:11px;border:1px solid var(--nv)}
.bt::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.bt::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.btart{width:clamp(100px,9.5vw,132px);height:clamp(100px,9.5vw,132px);margin-bottom:14px}
.btm{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.btd{flex:0 0 auto;font-family:var(--mono);font-style:normal;font-size:13px;font-weight:600;line-height:1;
  color:var(--nv-d);background:rgba(118,185,0,.12);padding:4px 6px}
.btp{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);max-width:none}
/* on a phone it becomes a swipeable rail, not a treadmill */
/* the phone keeps the ticker running; a static rail read as broken */
@media(max-width:760px){
  .bt{flex-basis:min(74vw,266px);padding:18px}
  .btart{width:88px;height:88px;margin-bottom:12px}
  .bmqrow{animation-duration:34s}
  .bmq+.bmq{margin-top:12px}
}
/* only a stated preference for less motion turns it into a swipe rail */
@media(prefers-reduced-motion:reduce){
  .bmq{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    -webkit-mask-image:none;mask-image:none}
  .bmqrow{animation:none}
  .bmqdup{display:none}
  .bt{scroll-snap-align:start}
}
h1{font-size:clamp(20px,3vw,40px)}
@media(max-width:640px){.h1-brk{display:none}}
@media(max-width:600px){h1{white-space:normal}}
h2{font-size:clamp(29px,4vw,50px)}
h3{font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-.02em}
p{max-width:64ch}
.lede{font-size:clamp(16px,1.25vw,18.5px);color:var(--ink-2);line-height:1.65}
.lede+.lede{margin-top:16px}
.lede strong{font-weight:600;color:var(--ink)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ── nav ─────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:60;background:transparent}
nav.s{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;pointer-events:none}
nav.s .logo,nav.s #navConnect{pointer-events:auto}
nav.s .nav-l,nav.s .nav-inc{opacity:0;pointer-events:none}
.nav-l,.nav-inc{transition:opacity .25s ease}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:64px;display:flex;align-items:center;gap:34px}
/* once the bar itself goes transparent, the mark keeps its own ground so it
   never dissolves into whatever is scrolling underneath it */
.logo{display:flex;align-items:center;font-stretch:112%;font-weight:700;font-size:30px;line-height:1;letter-spacing:.03em;
  position:relative;height:41px;padding:0 12px 0 10px;margin-left:-10px;border-radius:0;transform-origin:left center;
  background:transparent;transition:background .28s ease,color .28s ease,box-shadow .28s ease,
  transform .38s cubic-bezier(.22,1,.36,1)}
/* it keeps its ground once the bar goes transparent: green block with white
   type over the page; over a green section it takes the ink block the hero
   button wears, so the two read as one set rather than two whites */

/* over the green panel the plate would sink into it, so both take ink */

/* the flask lives inside the word: BRAINS · flask · LESS */
.wm{display:inline-flex;align-items:baseline}
.wm.side .fslot{margin-right:6px}
.fslot{position:relative;display:inline-block;width:1em;height:1em;flex:0 0 auto}
.fmark{width:1em;height:1em;flex:0 0 auto}
/* the word is set in the pixel face the flask is drawn in; Jersey runs small, so it takes 4/3 of the
   mark's size while the flask keeps sizing off the logo itself */
.wn{font-family:'Jersey 10',var(--disp);font-weight:400;font-stretch:100%;font-size:1.33em;letter-spacing:.01em;line-height:1}
/* sized in em so the flask tracks the wordmark at every width instead of staying 42px tall on a phone */
#logofx{position:absolute;left:-.1em;top:50%;margin-top:-.7em;pointer-events:none;z-index:2;image-rendering:pixelated}
.nav-l{display:flex;gap:24px;margin-left:auto;font-size:15px;color:var(--ink-2)}
.nav-l a:hover{color:var(--nv-d)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--nv);color:#fff;border:0;border-radius:0;padding:12px 20px;font-family:var(--disp);font-size:15px;font-weight:600;font-stretch:105%;cursor:pointer;transition:background .16s,transform .16s}
.btn:hover{background:var(--nv-d);transform:translateY(-1px)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--white);border-color:var(--nv);color:var(--nv-d)}
/* over the green hero or any dark section the CTA flips to white with green
   type so it never sinks into the panel */
/* the same face the Run button wears in the Lab: green plate, darker rule,
   a hard bottom edge instead of a soft drop */
#navConnect{border:1px solid #527E08;border-radius:8px;background:#6FAE00;color:#112006;
  box-shadow:0 2px 0 #4F760C;
  transition:background .28s ease,color .28s ease,border-color .28s ease,transform .12s,box-shadow .28s ease}
#navConnect:hover{background:#7CBA0D;transform:translateY(-1px)}
#navConnect:active{transform:translateY(1px);box-shadow:0 1px 0 #4F760C}


.nav-inc{display:flex;align-items:center;margin-left:-22px}
.nav-inc img{height:38px;width:auto;display:block;opacity:.85;transition:opacity .16s}
.nav-inc:hover img{opacity:1}
.nav-in>.btn{flex:0 0 auto}
@media(max-width:940px){.nav-l{display:none}.nav-in>.btn{margin-left:auto}}
/* the badge stays on a phone; it just shrinks with everything else */
@media(max-width:560px){.nav-in{gap:10px}.logo{font-size:19px;gap:2px;height:39px}.nav-in>.btn{padding:9px 13px;font-size:13px}
  .nav-inc{margin-left:-8px}.nav-inc img{height:31px}
  /* Floating desktop marks become a real bar on a phone. Transparent sticky chrome let the hero
     headline show through the wordmark and CTA, reading as clipped type. */
  nav.s{background:rgba(252,251,247,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:auto}
  nav.s .logo{background:transparent;color:var(--ink);box-shadow:none}
  nav.s .nav-inc{display:none}
  nav.s #navConnect{background:var(--nv);color:#fff}}
@media(max-width:380px){.nav-inc img{height:36px}.nav-in>.btn{padding:8px 11px;font-size:12.5px}}
/* ── hero: an inset green panel, edges never touch ───────────── */
.hero{position:relative;padding:clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px) 0;overflow:hidden}
.hero .w{text-align:center}
/* the hero's green ground, which the demo also stands on until its video arrives */
.hero-panel,.demo-frame.hold{background:radial-gradient(110% 70% at 50% 108%,rgba(255,255,255,.14),transparent 60%),
    url('/assets/hero-ground.jpg') center/cover no-repeat,
    linear-gradient(165deg,#82C40D 0%,#72B300 46%,#5C9400 100%)}
.hero-panel{--film-share:.46;position:relative;overflow:hidden;border-radius:clamp(14px,1.8vw,22px);
  padding:clamp(44px,6vw,98px) 0 clamp(46px,6.2vw,104px)}
#herofilm{position:absolute;left:0;right:0;bottom:0;width:100%;height:40%;pointer-events:none}
.hero-panel h1{color:#17260C;font-size:clamp(28px,4.4vw,56px);max-width:26ch;margin-inline:auto;text-wrap:balance}
.hero-go{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:none;margin:clamp(26px,3.4vw,44px) auto 0}
/* the nav button's shape and pressed edge, in white: same object, bigger and on the green */
.hero-cta{background:#fff;color:#112006;border:1px solid #D6DECB;border-radius:8px;box-shadow:0 2px 0 #C3CDB5;
  padding:16px 30px;font-size:17px;transition:background .28s ease,transform .12s,box-shadow .28s ease}
.hero-cta:hover{background:#F4F7EE;transform:translateY(-1px)}
.hero-cta:active{transform:translateY(1px);box-shadow:0 1px 0 #C3CDB5}
.hero-note{color:rgba(23,38,12,.72);font-size:16px}
/* the clock a first run actually takes, counted in real seconds rather than claimed in a word */
.hero-clock{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;font-size:14px;color:rgba(23,38,12,.72)}
.hero-clock .bar{width:96px;height:3px;background:rgba(23,38,12,.22)}
.hero-clock .bar i{display:block;height:100%;width:0;background:#101214}
.hero-panel .hl{color:#fff}
.hero-panel ::selection{background:#fff;color:var(--nv-ink)}
.hero-panel :focus-visible{outline-color:#fff}
/* a phone reads a left-ranged sentence faster than a centred one, and the room
   there is a strip, so the panel only owes it the height it uses */
@media (max-width:560px){
  .hero-cta{padding:12px 18px;font-size:14.5px}
  .hero-cta svg{width:16px;height:16px}
  .hero-note{font-size:13.5px}
  .hero .w{text-align:left}
  .hero-panel h1{text-wrap:pretty}
  .hero-go{align-items:flex-start}
  .hero-panel{--film-share:.34;padding-bottom:clamp(104px,30vw,132px)}
}
/* the demo shares the panel's width and its gutter, one card stacked under
   another, on the same spacing the hero sets */
.demo{padding:clamp(22px,2.6vw,40px) 0 0}
/* until the hero has opened, the frame is empty green ground */
.demo-frame.hold>*{opacity:0}
.demo-top{transition:opacity .5s ease}
/* one bar across the top of the video: the sentence on the left, the controls on
   the right, on dark glass that fades down into the picture */
.demo-top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(12px,2vw,32px);
  padding:clamp(8px,1vw,14px) clamp(8px,1vw,14px) clamp(18px,2.4vw,36px) clamp(16px,2.2vw,32px)}
.demo-top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(10,14,9,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);
  transition:opacity .35s ease}
.demo-say{margin:0;max-width:none;pointer-events:none;color:#fff;
  font-family:var(--disp);font-size:clamp(13px,1.5vw,22px);font-weight:500;line-height:1.3;letter-spacing:-.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.45);text-wrap:balance;transition:opacity .35s ease,transform .35s ease}
.demo-frame[data-run] .demo-say{opacity:0;transform:translateY(-8px)}
.demo-frame[data-run] .demo-top::before{opacity:0}
/* The opening. The hero opens out from a smaller rounded window while its words
   are wiped on left to right through a soft mask, coming out of blur. The demo
   only fades in when it is reached. */
.hero-panel{--r:clamp(14px,1.8vw,22px)}
@keyframes unveil{from{clip-path:inset(9% 11% round 48px)}to{clip-path:inset(0 round var(--r))}}
@keyframes wipe{
  from{-webkit-mask-position:100% 0;mask-position:100% 0;transform:translateY(.22em);filter:blur(14px)}
  to{-webkit-mask-position:0 0;mask-position:0 0;transform:none;filter:none}}
@keyframes lift{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes surface{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
.hero-panel h1{
  -webkit-mask-image:linear-gradient(90deg,#000 33%,transparent 66%);mask-image:linear-gradient(90deg,#000 33%,transparent 66%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%}
.hero-panel{animation:unveil .9s cubic-bezier(.76,0,.24,1) backwards}
.hero-panel h1{animation:wipe .9s cubic-bezier(.22,1,.36,1) .25s both}
.hero-go{animation:lift .7s cubic-bezier(.16,1,.3,1) .55s both}
.demo-frame[hidden]{display:none}
.demo-frame{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(14px,1.8vw,22px);
  background:#0E1511}
.demo-frame{position:relative;cursor:pointer}
.dv{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  transition:opacity .22s ease}
.dv-run{opacity:0;pointer-events:none}
.demo-frame[data-run] .dv-run{opacity:1}
.demo-frame[data-run] #demoVid{opacity:0}
/* no browser autoplays a clip with sound, so the run starts silent and this is
   how the visitor turns it on */
.demo-ctl{display:flex;gap:8px;flex:0 0 auto}
.demo-sound,.dfull{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:clamp(38px,3vw,44px);border:0;border-radius:999px;background:rgba(10,14,9,.84);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-family:var(--disp);font-size:clamp(13px,1vw,14.5px);font-weight:600;
  cursor:pointer;transition:background .16s,color .16s}
.demo-sound{padding:0 clamp(15px,1.3vw,19px) 0 clamp(12px,1.1vw,15px)}
.dfull{width:clamp(38px,3vw,44px)}
.demo-sound:hover,.dfull:hover{background:#0A0E09}
.demo-sound:focus-visible,.dfull:focus-visible{outline:2px solid #76B900;outline-offset:2px}
.demo-sound svg{width:19px;height:19px;flex:0 0 auto}
.dfull svg{width:16px;height:16px}
.demo-sound[aria-pressed="true"]{background:#76B900;color:#0A0E09}
.demo-sound .wave{display:none}
.demo-sound[aria-pressed="true"] .wave{display:inline}
.demo-sound[aria-pressed="true"] .cross{display:none}
@media(max-width:480px){.demo-sound span{display:none}.demo-sound{width:38px;padding:0}}
.demo-frame:fullscreen{border-radius:0;background:#000}
.demo-frame:fullscreen .dv{object-fit:contain}
.demo-frame:-webkit-full-screen{border-radius:0;background:#000}
.demo-frame:-webkit-full-screen .dv{object-fit:contain}
.hero .sub{margin:18px auto 0;max-width:68ch;color:var(--ink-2);font-size:clamp(16px,1.25vw,18.5px)}
.proof-badge{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;padding:5px 13px 5px 10px;background:rgba(118,185,0,.12);color:var(--nv-d);font-family:var(--disp);font-size:11.5px;font-weight:600}
.proof-badge canvas{width:18px;height:18px;flex:0 0 18px}

/* ── brand marks, in their own colours ───────────────────────── */
.lg{width:18px;height:18px;flex:0 0 auto}
.tmg{flex:0 0 auto;width:18px;height:18px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:7.5px;font-weight:500;color:#101010;letter-spacing:-.02em}

/* The opening: the copy box stands as its skeleton from the first frame; the headline box opens and
   eases into its place beside it, then the sentence writes over the skeleton and the button follows.
   Final states are the base rules and the motion only runs from the first state, so a reader who asked
   for less motion gets the end layout. */
.hero-row{display:flex;align-items:stretch}
.hero-row .hero-panel{--film-share:.22;flex:0 0 56%;min-width:0;display:flex;align-items:center;padding:clamp(62px,6.4vw,92px) 0;
  animation:unveil .9s cubic-bezier(.76,0,.24,1) backwards,narrow 1s cubic-bezier(.65,0,.35,1) .35s backwards}
/* the headline box wears the pixel waves (hero-ground-pixel.png: the photo mirrored, smoothed and stepped
   into six greens of the brand ramp); hero-film.js paints its forest over them */
.hero-row .hero-panel{background:url('/assets/hero-ground-pixel.png') center/cover no-repeat,#6AA210;image-rendering:pixelated}
.hero-row .hero-panel .w{width:100%}
/* the white words keep a hard one-step shadow in the art's deepest green, the way pixel titles stay
   legible over a bright scene; the art itself is left alone */
.hero-row .hero-panel .hl{text-shadow:0 .06em 0 #2C4A07}
.hero-row .hero-panel h1{max-width:13em;margin-inline:auto;text-align:center;font-size:clamp(28px,2.9vw,42px);line-height:1.08}
/* the copy's own box wears the headline's pixel art in a deeper palette (hero-ground-pixel-deep.png, the
   same shapes), framed into its lower right so every word sits on a band white reads on */
.hero-aside{position:relative;isolation:isolate;flex:1 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:clamp(20px,2.2vw,28px);margin-left:clamp(8px,1.2vw,14px);padding:clamp(24px,2.6vw,40px) 0;
  border-radius:clamp(14px,1.8vw,22px);color:#fff;background:#26400A;box-shadow:inset 0 0 0 1px rgba(23,38,12,.12)}
/* the side inset lives on the words, not the box, so the box can start at no width at all; the top and
   bottom inset lets the row grow on narrow screens instead of clipping the sentence */
.hero-aside > *{margin-left:clamp(40px,4vw,64px);margin-right:clamp(28px,3vw,48px)}
.hero-aside::before{content:'';position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;pointer-events:none;
  background:url('/assets/hero-ground-pixel-deep.png') 100% 100%/150% auto no-repeat;image-rendering:pixelated}
@media (min-width:861px){
  .hero-row{container-type:inline-size}
  .hero-row #herofilm{right:auto;width:100cqw}
  /* fixed at the box's final size and anchored to its right edge, so the box uncovers the waves as it
     opens and nothing inside it moves */
  .hero-aside::before{left:auto;width:calc(44cqw - clamp(8px,1.2vw,14px))}
}
.hero-aside ::selection{background:#fff;color:#2E4A08}
.hero-say{margin-top:0;margin-bottom:0;width:clamp(280px,27vw,410px);max-width:none;font-family:var(--disp);font-size:clamp(17px,1.4vw,20px);
  line-height:1.5;font-weight:450;letter-spacing:-.005em;color:rgba(255,255,255,.94);text-wrap:pretty}
.hero-say .wd{white-space:nowrap}
.hero-say .ch{animation:ink .36s ease-out both;animation-delay:calc(1.45s + var(--i) * 9ms)}
.hero-aside .hero-cta{animation:lift .8s cubic-bezier(.16,1,.3,1) 2.4s both}
/* the second way in, quieter than the button above it */
.hero-aside .hero-demo{margin-top:-6px;font-family:var(--disp);font-size:15px;font-weight:500;color:rgba(255,255,255,.9);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.35);
  transition:color .2s,text-decoration-color .2s;animation:lift .8s cubic-bezier(.16,1,.3,1) 2.55s both}
.hero-aside .hero-demo:hover{color:#fff;text-decoration-color:#fff}
@keyframes narrow{from{flex-basis:74%}}
@keyframes ink{from{opacity:0;filter:blur(5px)}}
@media (max-width:860px){
  .hero-row{flex-direction:column}
  .hero-row .hero-panel{--film-share:.34;flex-basis:auto;padding:26px 0 92px;animation:unveil .9s cubic-bezier(.76,0,.24,1) backwards}
  .hero-row .hero-panel h1{text-align:left;margin-inline:0;font-size:clamp(22px,6.2vw,28px);line-height:1.12;max-width:12em}
  .hero-aside{flex:none;overflow:hidden;align-items:stretch;gap:16px;margin:8px 0 0;padding:24px 0 20px}
  .hero-aside > *{margin-left:18px;margin-right:18px}
  .hero-aside::before{left:0;background-size:auto 185%}
  .hero-say{width:auto;font-size:14px;line-height:1.55;color:rgba(255,255,255,.94)}
  .hero-say .ch{animation-delay:calc(1s + var(--i) * 7ms)}
  .hero-aside .hero-cta{animation-delay:1.85s;align-self:stretch}
  .hero-aside .hero-demo{margin-top:-4px;font-size:14px;animation-delay:2s}
  .hero-aside #heroConnect{font-size:14px;padding:8px 18px 9px}
  .hero-aside #heroConnect .hero-clock{font-size:10.5px}
}

/* Trusted by: one quiet sentence where the customers are the words, arriving after the hero. */
/* the same space above as the demo keeps below, so the line sits centred between the hero and the video */
.trusted{padding:clamp(22px,2.6vw,40px) var(--gut) 0}
.trusted-line{margin:0 auto;max-width:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px clamp(12px,1.2vw,18px);font-family:var(--disp);font-size:clamp(13.5px,1.05vw,15px);font-weight:450;
  letter-spacing:-.01em;line-height:1.2;color:var(--ink-3)}
.tlogos{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px clamp(14px,1.4vw,20px)}
.trusted-line > .tw,.tlogos > *{animation:lift .7s cubic-bezier(.16,1,.3,1) both;animation-delay:1.25s}
.trusted-line > .ttail{animation-delay:1.6s}
.tcomma{margin-left:calc(-1 * clamp(14px,1.4vw,20px) + 1px)}
.tlogos > :nth-child(1){animation-delay:1.32s}
.tlogos > :nth-child(2){animation-delay:1.39s}
.tlogos > :nth-child(3){animation-delay:1.46s}
.tlogos > :nth-child(4){animation-delay:1.53s}
.tlogo{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;border-radius:8px;color:inherit;text-decoration:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
.tlogo:hover{transform:translateY(-2px)}
.tlogos:hover .tlogo:not(:hover){opacity:.55}
.tlogo:focus-visible{outline:2px solid var(--nv);outline-offset:4px}
.tlogo img{display:block;height:clamp(15px,1.2vw,17px);width:auto}
.t-databuddy > img{height:clamp(14px,1.15vw,16px)}
.t-databuddy .yc{display:inline-flex;align-items:center;gap:5px;margin-left:4px}
.t-databuddy .yc img{height:clamp(12px,1vw,14px);border-radius:2px}
.t-databuddy .yc b{font-size:clamp(10.5px,.85vw,12px);font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.t-mark span{font-size:clamp(13px,1.05vw,15px);font-weight:650;letter-spacing:-.01em;color:#111}
.t-pipeit span{font-size:clamp(11px,.9vw,12.5px);letter-spacing:.14em;margin-right:-.14em}
@media (max-width:640px){
  .trusted{padding:22px 10px 0}
  .trusted-line{flex-direction:column;gap:10px}
  .trusted-line > .tw:first-child{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
  .tlogos{flex-wrap:nowrap;gap:16px}
  .tcomma{display:none}
  .ttail{font-size:13px;max-width:30ch;text-align:center;line-height:1.45}
  .tlogo{gap:5px}
  .tlogo img{height:13px}
  .t-databuddy > img{height:12.5px}
  .t-databuddy .yc{margin-left:2px;gap:4px}
  .t-databuddy .yc img{height:10.5px}
  .t-databuddy .yc b{font-size:9.5px}
  .t-mark span{font-size:11.5px}
  .t-pipeit span{font-size:10px}
}
.hero-say .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* until hero-intro.ts marks the hero ready, the row stands as its own skeleton, every motion held at its
   first frame except the shimmer, and Trusted by waits hidden */
.hero-wait .hero:not(.ready) .trusted{visibility:hidden}
.hero-wait .hero:not(.ready) .hero-row,.hero-wait .hero:not(.ready) .hero-row *,
.hero-wait .hero:not(.ready) .trusted,.hero-wait .hero:not(.ready) .trusted *{animation-play-state:paused}
.hero-say:not([data-written]){visibility:hidden}

/* the copy box's skeleton: the shape of the sentence and the button, shimmering from the moment the box
   is uncovered, each bar giving way as its line writes over it. Hidden is the resting state, so reduced
   motion never leaves it on top of the words */
.hero-aside .hero-skel{position:absolute;left:0;top:50%;transform:translateY(-50%);width:clamp(280px,27vw,410px);
  display:flex;flex-direction:column;gap:clamp(13px,1.1vw,17px);pointer-events:none;opacity:0}
.hero-skel i,.hero-skel b{display:block;height:clamp(11px,.95vw,13px);border-radius:7px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,.14) 100%) 0 0/220% 100%;
  animation:skel-hold var(--hold) linear both,shimmer 1.2s linear infinite}
.hero-skel i:nth-child(1){width:100%;--hold:1.9s}
.hero-skel i:nth-child(2){width:94%;--hold:2.35s}
.hero-skel i:nth-child(3){width:97%;--hold:2.8s}
.hero-skel i:nth-child(4){width:58%;--hold:3.15s}
.hero-skel b{width:170px;height:48px;border-radius:999px;margin-top:clamp(7px,1.1vw,11px);--hold:2.65s}
.hero-aside .hero-skel{opacity:1}
@keyframes skel-hold{0%,82%{opacity:1}100%{opacity:0}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-120% 0}}
@media (max-width:860px){
  .hero-aside .hero-skel{left:18px;right:18px;width:auto;margin:0;gap:12px}
  .hero-skel i{height:10px}
  .hero-skel i:nth-child(1){--hold:1.32s}
  .hero-skel i:nth-child(2){--hold:1.64s}
  .hero-skel i:nth-child(3){--hold:1.96s}
  .hero-skel i:nth-child(4){--hold:2.2s}
  .hero-skel b{width:100%;height:46px;margin-top:6px;--hold:2.1s}
}
@media(prefers-reduced-motion:reduce){.hero-aside .hero-skel{display:none}}
.hero-wait .hero:not(.ready) .hero-skel i,.hero-wait .hero:not(.ready) .hero-skel b{animation-play-state:paused,running}
/* ── the composer ────────────────────────────────────────────── */
.ask{max-width:680px;margin:clamp(20px,2.6vw,30px) auto 0;text-align:left;position:relative}
.ask::before{content:'';position:absolute;inset:-12px;border-radius:0;z-index:0;
  background:linear-gradient(120deg,#5A8FBE,#B04559,#2E8B72,#5A8FBE);background-size:300% 300%;
  filter:blur(26px);opacity:.30;animation:glowShift 9s ease infinite}
.ask:focus-within::before{opacity:.55}
@keyframes glowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.ask::before{animation:none}}
.ask-box{position:relative;z-index:1;background:#F3F4F1;border:1px solid rgba(118,185,0,.5);border-radius:14px;padding:16px 16px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(19,35,56,.06),0 10px 18px -10px rgba(19,35,56,.16),0 26px 50px -26px rgba(118,185,0,.45);
  transition:border-color .18s,box-shadow .18s,padding .3s ease}
.ask-box:focus-within{border-color:rgba(118,185,0,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(19,35,56,.06),0 12px 22px -10px rgba(19,35,56,.2),0 28px 54px -24px rgba(118,185,0,.5)}
.ask-in{display:block;width:100%;min-height:46px;max-height:150px;overflow-y:hidden;border:0;background:none;resize:none;outline:none;
  font-family:var(--disp);font-size:clamp(16px,1.3vw,18px);line-height:1.4;color:var(--ink);transition:min-height .3s ease,font-size .3s ease}
@media(min-width:900px){
  .hero{padding-top:14px}
  .kicker{margin-bottom:26px}
  h1{margin-bottom:8px}
  .proof-badge{margin-top:28px}
  .ask{max-width:820px;margin-top:44px}
  .ask .ask-box{padding:24px 24px 18px}
  .ask .ask-in{min-height:64px;font-size:20px}
}
.ask-in::placeholder{color:#5C6A60}
.ask-bar{display:flex;align-items:center;gap:10px;margin-top:12px}
.send{margin-left:auto;height:36px;padding:0 16px;border-radius:10px;border:0;background:#101214;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .16s,transform .16s;
  font-family:var(--disp);font-size:13px;font-weight:600;white-space:nowrap}
.send:hover{background:#000;transform:translateY(-1px)}
.send svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor}
/* ── sign-in modal ────────────────────────────────────────────── */
.auth-overlay{position:fixed;inset:0;z-index:2147483640;background:rgba(19,35,56,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s ease}
.auth-overlay.open{opacity:1;pointer-events:auto}
/* Fixed height on the two-column layout: the art is background-size:cover, so anything that grows
   the form column re-crops the horse mid-interaction -- unfolding the email form and the human
   check appearing both cut its head off. The form scrolls instead; the picture holds still. */
.auth-modal{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);max-width:900px;width:100%;height:min(740px,90vh);
  background:var(--white);border-radius:0;overflow:hidden;box-shadow:0 40px 90px -30px rgba(19,35,56,.5);
  transform:scale(.96);transition:transform .22s ease}
.auth-left{order:2}
.auth-right{order:1}
.auth-overlay.open .auth-modal{transform:scale(1)}
.auth-left{padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;overflow-y:auto}
/* Flex children default to shrinking, so on a short window the column crushed the email form
   -- with overflow:hidden that ate the human check whole -- instead of scrolling. */
.auth-left>*{flex-shrink:0}
.auth-logo{display:flex;align-items:center;height:42px;margin-bottom:22px;position:relative}
.auth-logo .wm{font-stretch:112%;font-weight:700;font-size:30px;line-height:1;letter-spacing:.03em;color:var(--ink)}
.auth-left h2{font-family:var(--disp);font-size:26px;font-weight:650;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.auth-sub{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:14px}
.auth-buttons{display:flex;flex-direction:column;gap:10px}
.auth-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1px solid var(--line-2);border-radius:0;
  background:var(--white);font-family:var(--disp);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .16s,background .16s}
.auth-btn:hover{border-color:var(--ink-3);background:#F7F8F9}
.auth-ic{width:18px;height:18px;flex:0 0 auto}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-email-form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.auth-back{align-self:flex-start;margin:0 0 10px;font-family:var(--disp);font-size:13px;color:var(--ink-3);text-decoration:none}
.auth-back:hover{color:var(--ink)}
/* Its own height: a flex-basis of 100% inside this column took the whole card's height and pushed
   everything under it off the screen. */
.auth-error{flex:none;margin:10px 0 0;font-family:var(--disp);font-size:12.5px;line-height:1.45;color:var(--ember)}
.auth-sent{padding:6px 0 2px}
/* The house art, not a one-off drawing: the same envelope the page animates elsewhere. */
.auth-sent-art{display:block;width:72px;height:72px;margin:0 0 18px}
.auth-sent h2{font-family:var(--disp);font-size:21px;font-weight:650;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.auth-sent p{font-family:var(--disp);font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0}
.auth-sent .auth-sent-help{margin-top:16px;color:var(--ink-3)}.auth-sent .auth-sent-help.next{margin-top:4px}
.auth-sent-help a{color:var(--nv-d);font-weight:600;text-decoration:none}
.auth-sent-help a.held{color:var(--ink-3);font-weight:400;pointer-events:none}
.auth-email-form input{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--line-2);border-radius:0;font-family:var(--disp);font-size:13.5px}
.auth-email-form input:focus{outline:none;border-color:var(--nv)}
/* The fields are the whole card once they are open: the two provider buttons and their divider fold
   away rather than pushing the form under the fold, which is what made this card scroll. */
.auth-rule{font-family:var(--disp);font-size:12px;line-height:1.45;color:var(--ink-3);margin:-2px 0 2px}
.auth-email-form button{width:100%;padding:10px 16px;border:0;border-radius:0;background:var(--ink);color:#fff;font-family:var(--disp);font-size:13px;font-weight:600;cursor:pointer}
.auth-turnstile{flex:none;min-height:0;margin-top:12px}.auth-legal{margin:13px 0 0;color:var(--ink-3);font-size:10.5px;line-height:1.45}.auth-legal a{color:var(--ink-2);text-underline-offset:3px}
.auth-foot{margin:14px 0 24px;font-family:var(--disp);font-size:13px;color:var(--ink-3)}
.auth-foot a{color:var(--nv-d);font-weight:600;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
/* The art is already a tight crop with the head at its right edge; centring it in a pane this
   narrow cuts the head off. Anchor right so the subject survives every window size. */
.auth-right{position:relative;background-size:cover;background-position:right center;min-height:280px}
.auth-close{position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:0;border:0;background:rgba(19,35,56,.35);
  color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
.auth-close:hover{background:rgba(19,35,56,.55)}
.auth-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.auth-quote{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 26px 22px;
  background:linear-gradient(180deg,rgba(20,30,18,0) 0%,rgba(16,24,14,.82) 62%);
  font-family:var(--serif);font-size:27px;font-style:italic;line-height:1.28;color:#F3F6EE}
.auth-quote span{display:block;margin-top:9px;font-family:var(--disp);font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;color:#C9DBB4}
.auth-quote-mark{display:block;width:26px;height:20px;fill:var(--nv-d);opacity:1;margin-bottom:8px}
@media(max-width:720px){
  /* The picture is decoration. Above the form it pushed every field off a phone screen, so the
     card was a photograph you had to scroll past to find the thing you came to do. */
  .auth-modal{grid-template-columns:1fr;height:auto;max-height:92vh}
  .auth-right{display:none}
  .auth-quote{padding:18px;font-size:21px}
}
@media(max-width:560px){
  .ask-bar{flex-wrap:nowrap;gap:6px}
  .ask-in{min-height:64px}
}
/* neuron plate: the world, as an object */
.nplate{position:relative;border-radius:0;overflow:hidden;min-height:clamp(230px,26vw,320px);background:#E4EDF6;display:grid;place-items:center}
.nplate::before{content:'';position:absolute;inset:0;background:linear-gradient(155deg,var(--blue-lt),var(--blue) 55%,var(--blue-dk));
  -webkit-mask:url('/assets/neurons_mask.png') center/cover no-repeat;mask:url('/assets/neurons_mask.png') center/cover no-repeat}
.nplate canvas{position:relative;width:clamp(96px,11vw,132px);height:clamp(96px,11vw,132px)}
.nplate figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-family:var(--mono);font-size:11.5px;color:#1B3A5C;
  background:linear-gradient(transparent,rgba(228,237,246,.92) 55%)}

/* ── the reviewer: three parts, each opening on its own film ─────── */
#reviewer{padding:clamp(56px,7vw,110px) 0 clamp(40px,5vw,80px)}
.rv-block+.rv-block{margin-top:clamp(64px,8vw,128px)}
.rv-film{display:block;width:100%;margin-bottom:clamp(20px,2.6vw,34px)}
.rv-title{font-size:clamp(30px,3.7vw,53px);line-height:1.03;max-width:20ch}
.rv-title em{font-style:normal;color:var(--nv-d)}
.rv-copy p{margin-top:16px;max-width:64ch;font-size:clamp(16.5px,1.3vw,19.5px);line-height:1.6;color:var(--ink-2)}
.rv-copy h2+p{margin-top:18px}

/* ── plate: a white card that holds a section ────────────────── */
.plate{background:var(--white);border:1px solid var(--line);border-radius:0;padding:clamp(26px,3.4vw,44px)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(30px,4.6vw,66px);align-items:start}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:36px}}

/* the simulated road sits tight under the ticker: its frame already holds the world */
#world{padding-top:clamp(14px,1.8vw,26px)}
/* the road runs edge to edge so the world never ends at the content column */
#waymofilm{display:block;width:100vw;margin-inline:calc(50% - 50vw);margin-bottom:clamp(22px,3vw,36px)}

/* headline + sprite pairing (this replaces eyebrow labels) */
.head{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,22px)}
.head canvas{flex:0 0 auto;width:clamp(52px,5vw,72px);height:clamp(52px,5vw,72px);margin-top:-6px}

/* spec rows */
.specs{margin-top:30px}
.spec{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.spec:last-child{border-bottom:1px solid var(--line)}
.specs.bare .spec{border:0;padding:13px 0}
#platform .spec{border-top:0;border-bottom:1px solid var(--line)}
.spec canvas{width:52px;height:52px}
.spec h3{font-size:17px;margin-bottom:5px}
.spec p{font-size:14.5px;color:var(--ink-2);line-height:1.58}

/* ── steering ────────────────────────────────────────────────── */
/* ── evidence board ──────────────────────────────────────────── */
.swings{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,36px);margin-top:clamp(32px,4.2vw,52px)}
@media(max-width:1120px){.swings{grid-template-columns:repeat(3,1fr);gap:32px}}
@media(max-width:820px){.swings{grid-template-columns:repeat(2,1fr)}.sw:last-child{grid-column:1/-1}}
@media(max-width:560px){.swings{grid-template-columns:1fr}}
.sw{background:none;border:0;border-radius:0;padding:0}
.swbars{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}
.swbars span{display:block;height:10px;border-radius:0}
.swbars .b1{background:repeating-linear-gradient(90deg,#B9C6D6 0 8px,transparent 8px 11px)}
.swbars .b2{background:repeating-linear-gradient(90deg,var(--nv) 0 8px,transparent 8px 11px)}
.swrow{display:flex;align-items:center;gap:8px}
.swrow .b1,.swrow .b2{flex:0 0 auto}
.swbars .swv{height:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);line-height:1;white-space:nowrap}
.sw b{display:block;font-size:clamp(34px,3.2vw,52px);font-weight:600;font-stretch:112%;letter-spacing:-.035em;color:#4F7C00;line-height:1}
.sw p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:10px;max-width:none;min-height:0}
.sw em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:10px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,3vw,40px);max-width:980px}
@media(max-width:700px){.stats{grid-template-columns:1fr}}
.stat{background:var(--white);padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px}
.stat b{font-family:var(--mono);font-size:clamp(26px,2.6vw,34px);font-weight:500;color:#4F7C00;letter-spacing:-.02em}
.stat p{font-size:13px;line-height:1.55;color:var(--ink-2);max-width:36ch}
.closeline{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:none;text-align:center}
.closeline strong{color:var(--ink);font-weight:650}
.doi{display:inline-block;margin-top:12px;position:relative;z-index:2}
.doi img{display:block;height:20px}
.dchart{margin-top:clamp(24px,3vw,38px);max-width:980px;position:relative}
.dax{position:relative;height:16px;margin-left:186px;margin-right:90px;font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.dax i{position:absolute;top:0;transform:translateX(-50%)}
.dax i:nth-child(1){left:0}.dax i:nth-child(2){left:25%}.dax i:nth-child(3){left:50%}.dax i:nth-child(4){left:75%}.dax i:nth-child(5){left:100%}
.dr{display:grid;grid-template-columns:170px minmax(0,1fr) 74px;gap:16px;align-items:center;padding:7px 0;transition:background .15s}
.dr:hover{background:#F6F8F4}
.dl{font-size:13.5px;font-weight:600;line-height:1.2}
.dl em{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--ink-3)}
.dt{position:relative;height:30px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#EDF0EA calc(25% - 1px) 25%)}
.dt .seg{position:absolute;top:14px;left:var(--a);width:0;height:3px;background:var(--nv);transition:width .8s cubic-bezier(.25,.7,.3,1)}
.dchart.go .dt .seg{width:calc(var(--b) - var(--a))}
.dt i{position:absolute;top:10px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);opacity:0;transition:opacity .4s}
.dchart.go .dt i{opacity:1}
.dt .d1{background:#fff;border:2px solid #9FAC9D}
.dt .d2{background:var(--nv);border:2px solid #4F7C00;transition-delay:.5s}
.dt u{position:absolute;top:-3px;transform:translateX(-50%);text-decoration:none;font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.dt .v2{color:#4F7C00;font-weight:600}
.dr b{font-size:16px;font-weight:650;color:#4F7C00;text-align:right;white-space:nowrap}
@media(max-width:700px){.dr{grid-template-columns:minmax(0,1fr) 64px;row-gap:2px}.dt{grid-column:1/-1}.dax{display:none}}
.ctip{position:fixed;z-index:10000;max-width:300px;background:var(--ink);color:#fff;font-size:12.5px;line-height:1.5;padding:10px 12px;pointer-events:none}
@media(max-width:700px){.cr{grid-template-columns:minmax(0,1fr) 64px}.ct{grid-column:1/-1;grid-row:2}.cr{row-gap:6px}}
.swnote{font-size:14px;color:var(--ink-3);margin-top:clamp(26px,3.2vw,40px);max-width:none}
.simbody{margin-top:14px;max-width:78ch;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:var(--ink-2)}
.simbody a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(118,185,0,.55);text-underline-offset:3px;transition:color .2s}
.simbody a:hover{color:var(--blue-dk)}
/* ── steps ───────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(26px,3.2vw,40px)}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.stp{background:var(--white);border:1px solid var(--line);border-radius:0;padding:20px}
.stp .n{font-family:var(--mono);font-size:12px;color:var(--blue);letter-spacing:.06em}
.stp canvas{width:46px;height:46px;margin:10px 0 12px}
.stp h3{font-size:17px;margin-bottom:7px}
.stp p{font-size:14px;color:var(--ink-2);line-height:1.55}
.stp.two{grid-column:span 2}
@media(max-width:600px){.stp.two{grid-column:span 1}}

/* ── model catalog ───────────────────────────────────────────── */
.mtools{display:flex;gap:10px;margin-top:clamp(24px,3vw,36px)}
#msearch{flex:1;max-width:340px;background:var(--white);border:1px solid var(--line-2);border-radius:0;padding:11px 14px;font-family:var(--disp);font-size:14.5px;color:var(--ink);outline:none;transition:border-color .16s}
#msearch:focus{border-color:var(--nv)}
#msearch::placeholder{color:#9AACC0}
#mall{background:none;border:1px solid var(--line-2);border-radius:0;padding:11px 16px;font-family:var(--disp);font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:.16s}
#mall:hover{border-color:var(--nv);color:var(--nv-d)}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
@media(max-width:1020px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mgrid{grid-template-columns:1fr}}
.mc{background:var(--white);border:1px solid var(--line);border-radius:0;padding:16px 16px 14px;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s}
.mc:hover{transform:translateY(-2px);border-color:var(--blue-lt);box-shadow:0 12px 30px -20px rgba(58,109,162,.7)}
.mc.morec{display:none}
.mgrid.all .mc.morec{display:block}
.mgrid:not(.all) .mc:not(.morec):nth-child(n+5){display:none}
@media(max-width:560px){.mgrid:not(.all) .mc:not(.morec):nth-child(n+4){display:none}}
.mc-t{display:flex;align-items:center;gap:9px;min-width:0}
.mc-t .lg{width:18px;height:18px;flex:0 0 auto}
.mc-t b{font-weight:600;font-size:15px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.mtags i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-2);background:#EFF3F7;border-radius:0;padding:3px 7px}
.mc p{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:8px;max-width:none;flex:1}
.mc em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:9px}
.byok{margin-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.byok p{font-size:15px;color:var(--ink-2)}
.byok p b{color:var(--ink);font-weight:600}
.byok .marks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.mk{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2)}

/* ── research ────────────────────────────────────────────────── */
.finds{margin-top:4px}
.find{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.find:last-child{border-bottom:1px solid var(--line)}
.find p{font-size:15px;color:var(--ink-2);line-height:1.5}
.find b{font-family:var(--mono);font-size:16px;color:var(--ink);white-space:nowrap}.papers{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:clamp(24px,3vw,36px)}
@media(max-width:760px){.papers{grid-template-columns:1fr}}
.paper{background:var(--white);border:1px solid var(--line);border-radius:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.paper:hover{transform:translateY(-3px);box-shadow:0 16px 40px -28px rgba(19,35,56,.55);border-color:var(--blue-lt)}
.paper img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top;border-bottom:1px solid var(--line);background:#fff}
.paper .pb{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.paper .pid{font-family:var(--mono);font-size:11px;color:var(--blue);margin-bottom:8px}
.paper h3{font-size:20px;margin-bottom:8px}
.paper p{font-size:14.5px;color:var(--ink-3);line-height:1.55;flex:1}
.paper .rd{margin-top:14px;font-size:13.5px;color:var(--ink-2);font-weight:600}
.paper:hover .rd{color:var(--blue-dk)}
.paper .pmain{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.papers .pmain>img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top;border-bottom:1px solid var(--line);background:#fff}
.paper .doirow{padding:0 22px 20px;margin-top:-4px}
.paper .doirow img{width:auto;height:20px;max-width:none;aspect-ratio:auto;object-fit:contain;object-position:center;border:none;display:inline-block;background:transparent}
.paper .doirow{display:flex;align-items:center;gap:14px}
.paper .doirow .ghl{font-size:12.5px;font-weight:600;color:var(--blue-dk);text-decoration:none}
.paper .doirow .ghl:hover{text-decoration:underline}


.relpanel{font-family:var(--mono);display:flex;flex-direction:column;gap:13px;padding:22px 24px}
.rl-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:12px}
.rl-top i{font-style:normal;font-size:10px;font-weight:500;letter-spacing:.12em;padding:4px 10px;background:#F4EBDC;color:#8A6320;transition:background .4s,color .4s}
.relpanel.done .rl-top i{background:#E2F3EA;color:#2F6E52}
.rl-you{font-size:13.5px;color:var(--ink);font-weight:500}
.rl-count{display:flex;align-items:baseline;gap:10px}
.rl-count b{font-family:var(--disp);font-size:clamp(34px,3.4vw,48px);font-weight:600;font-stretch:112%;letter-spacing:-.03em;color:var(--blue-dk);font-variant-numeric:tabular-nums;line-height:1}
.rl-count span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rl-bar{height:6px;background:#E4EAF1;overflow:hidden}
.rl-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 9px)}
.relpanel.play .rl-bar i{width:100%;transition:width 1.6s cubic-bezier(.3,.6,.3,1)}
.rl-line{display:flex;gap:9px;align-items:baseline;font-size:12px;line-height:1.55;color:var(--ink-2);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.rl-line u{flex:0 0 8px;width:8px;height:8px;text-decoration:none;transform:translateY(1px)}
.rl-line u.w{background:#C77A44}
.rl-line u.f{background:var(--blue)}
.rl-line u.g{background:#37D08A}
.relpanel.play .rl-line{opacity:1;transform:none}
.relpanel.play .rl-line[data-step="1"]{transition-delay:1.2s}
.relpanel.play .rl-line[data-step="2"]{transition-delay:1.8s}
.relpanel.play .rl-line[data-step="3"]{transition-delay:2.4s}
.rl-diff{font-size:12px;line-height:1.8;border-left:2px solid var(--line);padding-left:12px;opacity:0;transition:opacity .4s ease 2.9s}
.relpanel.play .rl-diff{opacity:1}
.rl-diff s{display:block;text-decoration:none;color:#A8677A}
.rl-diff b{display:block;font-weight:500;color:#2F6E52}
.rl-foot{display:flex;gap:18px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px}
@media(prefers-reduced-motion:reduce){.rl-line,.rl-diff{opacity:1;transform:none}.relpanel .rl-bar i{width:100%}}

/* ── planless ────────────────────────────────────────────────── */
.pless{display:flex;align-items:center;gap:clamp(26px,4.6vw,64px)}
.pless>canvas{flex:0 0 auto;width:clamp(110px,13vw,170px);height:clamp(110px,13vw,170px);transition:transform .3s ease}
.pless:hover>canvas{transform:translateY(-6px)}
.pless:hover h2{color:var(--blue-dk)}
.pgo{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--blue-dk)}
.pgo i{font-style:normal;transition:transform .25s ease}
.pless:hover .pgo i{transform:translateX(5px)}
@media(max-width:700px){.pless{flex-direction:column;align-items:flex-start;gap:20px}.pless>canvas{width:96px;height:96px}}

/* ── faq ─────────────────────────────────────────────────────── */
.faq-duo{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
@media(max-width:900px){.faq-duo{grid-template-columns:1fr;gap:18px}}
@media(max-width:560px){summary{font-size:16px;padding:16px 36px 16px 0}details p{font-size:14.5px;padding-bottom:16px}}
details p a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(118,185,0,.55);text-underline-offset:3px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-size:17px;font-weight:600;font-stretch:108%;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:'';position:absolute;right:8px;top:26px;width:11px;height:2px;background:var(--ink-3);box-shadow:0 0 0 0 transparent;transition:transform .2s}
summary::before{content:'';position:absolute;right:13px;top:21px;width:2px;height:11px;background:var(--ink-3);transition:transform .2s,opacity .2s}
details[open] summary::before{opacity:0;transform:rotate(90deg)}
details p{font-size:15px;color:var(--ink-2);padding-bottom:20px;max-width:72ch}

/* ── close + footer ──────────────────────────────────────────── */
.close{text-align:center;position:relative;overflow:hidden}
.close canvas{width:74px;height:74px;margin:0 auto 22px}
footer{border-top:1px solid var(--line);padding-block:34px;background:var(--white)}
.f-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.f-l{display:flex;flex-wrap:wrap;gap:20px;font-size:14px;color:var(--ink-3)}
.f-l a:hover{color:var(--nv-d)}.footer-link{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}.footer-link:hover{color:var(--nv-d)}
.f-in img{height:44px;opacity:.8}
.f-c{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.f-c a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.f-c a:hover{color:var(--nv-d)}
/* ── one interaction language ─────────────────────────────────
   every panel on the page lights under the pointer, same green,
   same falloff. --glow is registered so it can be animated. */
.glow{position:relative;transition:border-color .24s ease,transform .18s ease,box-shadow .18s ease}
.glow:hover:not(.mc,.paper),.glow:focus-within:not(.mc,.paper){border-color:var(--nv)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Floating header: full width at the top, a glass island once the page moves ── */
#nav{height:64px;padding:0;transition:padding .5s cubic-bezier(.25,.46,.45,.94)}
#nav .nav-in{border-radius:0;transition:max-width .5s cubic-bezier(.25,.46,.45,.94),height .5s cubic-bezier(.25,.46,.45,.94),
  border-radius .5s cubic-bezier(.25,.46,.45,.94),background-color .3s ease-out,box-shadow .3s ease-out}
#nav.s{padding:8px 16px 0;background:transparent;border-bottom:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
#nav.s .nav-in{max-width:1040px;height:52px;padding:0 8px 0 14px;border-radius:16px;pointer-events:auto;
  background:rgba(255,255,255,.74);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 2px 20px rgba(19,35,56,.08),0 1px 2px rgba(19,35,56,.08),0 0 0 1px rgba(19,35,56,.08)}
#nav.s .logo{background:transparent;color:var(--ink);border-color:transparent;box-shadow:none}
#nav.s .nav-l{opacity:1;pointer-events:auto}
#nav .nav-l a{padding:8px 10px;border-radius:8px;transition:background-color .2s ease-out,color .2s ease-out}
#nav .nav-l a:hover{background:rgba(118,185,0,.1);color:var(--ink)}

/* ── Primary action: glossy pill with a halo ── */
@property --g1{syntax:'<color>';inherits:false;initial-value:#8FCC1F}
@property --g2{syntax:'<color>';inherits:false;initial-value:#76B900}
#navConnect,.auth-email-form button{--g1:#8FCC1F;--g2:#76B900;border:0;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,var(--g1),var(--g2));
  box-shadow:0 0 0 5px rgba(118,185,0,.18),0 1px 2px rgba(19,35,56,.1),0 0 0 1px rgba(79,118,12,.45);
  transition:--g1 .2s ease-out,--g2 .2s ease-out,transform .16s cubic-bezier(.25,.46,.45,.94)}
#navConnect:hover,.auth-email-form button:hover{--g2:#639B00;background:linear-gradient(180deg,var(--g1),var(--g2));transform:none}
#navConnect:active,.auth-email-form button:active{--g1:#76B900;--g2:#4F7A00;transform:translateY(1px) scale(.98);box-shadow:0 0 0 5px rgba(118,185,0,.18)}

/* ── Sign-in card: the same pill, in white for the ways in and green for the one that sends ── */
.auth-btn{--g1:#FFFFFF;--g2:#F1F4EC;border:0;border-radius:999px;padding:11px 18px;
  background:linear-gradient(180deg,var(--g1),var(--g2));
  box-shadow:0 0 0 4px rgba(19,35,56,.04),0 1px 2px rgba(19,35,56,.1),0 0 0 1px rgba(19,35,56,.14);
  transition:--g1 .2s ease-out,--g2 .2s ease-out,transform .16s cubic-bezier(.25,.46,.45,.94)}
.auth-btn:hover{--g2:#E4EAD9;background:linear-gradient(180deg,var(--g1),var(--g2))}
.auth-btn:active{transform:translateY(1px) scale(.98)}
.auth-buttons{gap:14px}
.auth-email-form input{border-radius:12px}
.auth-email-form button{margin-top:6px;padding:11px 16px;font-size:14px}
/* Working: the pill goes quiet and a ring turns beside the words, so a press visibly took. */
.auth-email-form button:disabled{--g1:#EEF4E2;--g2:#E3ECD2;color:var(--nv-d);cursor:progress;transform:none;
  box-shadow:0 0 0 1px rgba(79,118,12,.25)}
.auth-email-form button:disabled::before{content:'';display:inline-block;width:13px;height:13px;margin-right:9px;vertical-align:-2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:auth-turn .7s linear infinite}
@keyframes auth-turn{to{transform:rotate(360deg)}}

/* ── Footer: tinted card, dithered wave, the wordmark sinking below the edge ── */
footer.foot{border-top:0;background:transparent;padding:clamp(40px,5vw,72px) clamp(8px,1.2vw,14px) 0}
.foot-card{position:relative;isolation:isolate;max-width:1480px;margin:0 auto;overflow:hidden;border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,rgba(118,185,0,.05),rgba(118,185,0,.2));
  box-shadow:0 1px 2px rgba(19,35,56,.08),0 0 0 1px #E6ECF1}
.foot-dither{position:absolute;z-index:-1;left:0;right:0;bottom:0;width:100%;height:80%;pointer-events:none;image-rendering:pixelated}
.foot-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(24px,4vw,64px);
  padding-top:clamp(40px,5vw,64px)}
.foot-about p{max-width:34ch;margin-top:16px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.foot-inc{display:inline-block;margin-top:20px}
.foot-inc img{height:34px;width:auto;opacity:.85;transition:opacity .16s}
.foot-inc:hover img{opacity:1}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.foot-cols h3{margin:0;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--nv-d)}
.foot-cols ul{margin:10px 0 0;padding:0;list-style:none}
.foot-cols a,.foot-cols .footer-link{display:inline-block;padding:8px 0;font-size:15.5px;color:var(--ink-2);text-decoration:none;transition:color .2s ease-out}
.foot-cols a:hover,.foot-cols .footer-link:hover{color:var(--nv-d)}
.foot-c{padding-top:28px;padding-bottom:clamp(150px,24vw,380px);font-size:13.5px;color:var(--ink-3)}
.foot-c a{color:var(--ink-2)}
.foot-giant{position:absolute;z-index:-1;left:50%;bottom:0;translate:-50% 18%;margin:0;pointer-events:none;
  font-family:'Jersey 10',var(--disp);font-size:clamp(150px,30vw,500px);line-height:.8;white-space:nowrap;
  color:rgba(118,185,0,.14);
  background:radial-gradient(rgba(99,155,0,.55) 1px,transparent 1.5px) 0 0/5px 5px;
  -webkit-background-clip:text;background-clip:text}
@media (max-width:760px){
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Hero action: white glossy pill with a halo on the green panel ── */
#heroConnect{--g1:#FFFFFF;--g2:#EEF2E7;border:0;border-radius:999px;color:var(--ink);padding:14px 26px;font-size:16px;
  background:linear-gradient(180deg,var(--g1),var(--g2));
  box-shadow:0 0 0 4px rgba(255,255,255,.26),0 1px 2px rgba(19,35,56,.12),0 0 0 1px rgba(19,35,56,.08);
  transition:--g1 .2s ease-out,--g2 .2s ease-out,transform .16s cubic-bezier(.25,.46,.45,.94)}
#heroConnect:hover{--g2:#E0E8D2;background:linear-gradient(180deg,var(--g1),var(--g2));transform:none}
#heroConnect:active{transform:translateY(1px) scale(.98)}
@media (max-width:640px){#heroConnect{padding:9px 20px 10px;font-size:14.5px}}

/* ── Closing action: the same green pill as the header ── */
form.ask .ask-bar .send{--g1:#8FCC1F;--g2:#76B900;border:0;border-radius:999px;color:#fff;padding:10px 18px;
  background:linear-gradient(180deg,var(--g1),var(--g2));
  box-shadow:0 0 0 5px rgba(118,185,0,.18),0 1px 2px rgba(19,35,56,.1),0 0 0 1px rgba(79,118,12,.45);
  transition:--g1 .2s ease-out,--g2 .2s ease-out,transform .16s cubic-bezier(.25,.46,.45,.94)}
form.ask .ask-bar .send:hover{--g2:#639B00;background:linear-gradient(180deg,var(--g1),var(--g2))}
form.ask .ask-bar .send:active{transform:translateY(1px) scale(.98)}

/* ── Research: numbers and papers as soft cards instead of ruled boxes ── */
.stats{gap:12px;background:none;border:0}
.stat{border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 20px rgba(19,35,56,.04)}
.paper{border-radius:16px;box-shadow:0 2px 20px rgba(19,35,56,.04)}
.paper:hover{box-shadow:0 18px 40px -26px rgba(19,35,56,.45)}

/* ── Time to first results: a quiet second line inside the action ── */
#heroConnect{position:relative;overflow:hidden;flex-direction:column;gap:3px;padding:9px 22px 10px;font-size:15px;line-height:1.1}
#heroConnect .hero-clock{gap:7px;font-size:11.5px;font-weight:500;color:rgba(19,35,56,.5)}
#heroConnect .hero-clock .bar{position:absolute;left:0;right:0;bottom:0;width:auto;height:3px;border-radius:0;background:rgba(19,35,56,.08)}
#heroConnect .hero-clock .bar i{border-radius:0 99px 99px 0;background:#76B900}
#heroConnect .hero-clock b{display:inline-block;min-width:3ch;text-align:right;font-weight:500;color:inherit}
/* Cortad motion grammar: sample -> excite -> settle.
   It is intentionally crisp and mechanical. No generic spinners, glowing strips, or layout motion. */
:root{
  --bl-motion-press:120ms;
  --bl-motion-fast:180ms;
  --bl-motion-settle:280ms;
  --bl-motion-spring:cubic-bezier(.2,.82,.2,1);
  --bl-motion-exit:cubic-bezier(.4,0,1,1);
}

button,a.btn,.go,.send,.auth-btn,.production-connect,.production-copy{
  touch-action:manipulation;
  transform-origin:center;
  transition-property:transform,background-color,border-color,color,box-shadow,opacity;
  transition-duration:var(--bl-motion-fast);
  transition-timing-function:var(--bl-motion-spring);
}
button:not(:disabled):active,a.btn:active,.go:not(:disabled):active,.send:not(:disabled):active{
  transform:scale(.975);
  transition-duration:var(--bl-motion-press);
}

/* A five-cell spectrogram replaces dots and generic circular spinners. */
.bl-signal,.pend{
  --bl-signal-color:var(--held,var(--nv,#76B900));
  display:inline-grid;
  grid-template-columns:repeat(5,3px);
  align-items:center;
  gap:3px;
  min-width:27px;
  min-height:18px;
}
.bl-signal>i,.pend>i{
  display:block;
  width:3px;
  height:var(--cell-h,6px);
  border-radius:3px;
  background:color-mix(in srgb,var(--bl-signal-color) 28%,transparent);
  transform-origin:center;
  animation:bl-read-signal 1.15s var(--bl-motion-spring) infinite;
}
.bl-signal>i:nth-child(1),.pend>i:nth-child(1){--cell-h:5px;animation-delay:-.36s}
.bl-signal>i:nth-child(2),.pend>i:nth-child(2){--cell-h:10px;animation-delay:-.24s}
.bl-signal>i:nth-child(3),.pend>i:nth-child(3){--cell-h:16px;animation-delay:-.12s}
.bl-signal>i:nth-child(4),.pend>i:nth-child(4){--cell-h:10px;animation-delay:0s}
.bl-signal>i:nth-child(5),.pend>i:nth-child(5){--cell-h:5px;animation-delay:.12s}
@keyframes bl-read-signal{
  0%,100%{opacity:.28;transform:scaleY(.62)}
  44%{opacity:1;transform:scaleY(1)}
}

/* Async buttons keep their label, gain a small measured signal, and never resize. */
.bl-busy,[aria-busy="true"].bl-motion{
  position:relative;
  cursor:wait!important;
}
.bl-busy .bl-button-label,[aria-busy="true"].bl-motion .bl-button-label{opacity:.72}
/* Inside a button the signal sits on the button's own background, so the brand green is the one
   colour it must not assume: on a filled green control it was green on green and simply vanished.
   currentColor is the ink the label already proves readable there. Standalone .pend keeps green. */
.bl-busy .bl-signal,[aria-busy="true"].bl-motion .bl-signal{margin-left:3px;--bl-signal-color:var(--held-on,currentColor)}
.bl-complete{animation:bl-confirm var(--bl-motion-settle) var(--bl-motion-spring) both}
@keyframes bl-confirm{0%{transform:scale(.98)}55%{transform:scale(1.018)}100%{transform:none}}

/* Loading rows are sampled by one narrow beam rather than washed by a SaaS shimmer. */
.skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--line,#d9dcd6) 58%,transparent)!important;background-image:none!important}
.skel::after{
  content:'';position:absolute;inset:0 auto 0 -22%;width:18%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--held,var(--nv,#76B900)) 42%,transparent),transparent);
  transform:skewX(-12deg);animation:bl-scan 1.65s var(--bl-motion-spring) infinite;
}
@keyframes bl-scan{to{transform:translateX(690%) skewX(-12deg)}}

/* Text-only waits receive a quiet instrument readout. */
.wait,.production-loading{
  position:relative;padding-left:40px!important;min-height:24px;display:flex;align-items:center;
}
.wait::before,.production-loading::before{
  content:'';position:absolute;left:2px;top:50%;width:27px;height:16px;transform:translateY(-50%);
  background:linear-gradient(90deg,
    var(--ink-3,#788692) 0 3px,transparent 3px 6px,
    var(--ink-3,#788692) 6px 9px,transparent 9px 12px,
    var(--held,var(--nv,#76B900)) 12px 15px,transparent 15px 18px,
    var(--ink-3,#788692) 18px 21px,transparent 21px 24px,
    var(--ink-3,#788692) 24px 27px);
  clip-path:polygon(0 38%,11% 38%,11% 62%,22% 62%,22% 19%,33% 19%,33% 81%,44% 81%,44% 0,56% 0,56% 100%,67% 100%,67% 28%,78% 28%,78% 72%,89% 72%,89% 42%,100% 42%,100% 58%,0 58%);
  animation:bl-instrument 1.25s steps(5,end) infinite;
}
@keyframes bl-instrument{50%{opacity:.38;transform:translateY(-50%) scaleY(.72)}}

@media(prefers-reduced-motion:reduce){
  button,a.btn,.go,.send,.auth-btn,.production-connect,.production-copy{transition-duration:0s}
  button:not(:disabled):active,a.btn:active,.go:not(:disabled):active,.send:not(:disabled):active{transform:none}
  .bl-signal>i,.pend>i,.skel::after,.wait::before,.production-loading::before{animation:none!important}
  .bl-signal>i,.pend>i{opacity:.72;transform:none}
  .skel::after{left:42%;transform:none}
}