/* Ovae Live landing page, v3. Tokens come from ovae-tokens.css (brand book version 2).
   Type scale, 8 steps: 14 / 16 / 18 / 24 / 26-36 / 32-56 / 36-64 / 42-84. Spacing: 4, 8, 16, 24, 32, 48, 64 and the 12 half-step.
   Breakpoints: 600, 900 (and 1100 for the pinned sequence). One 2-column split everywhere, 1 three-column grid. No blur, no generated imagery, nothing scales. */
:root{--wrap:1200px;--pad:32px;--bar-h:56px;--r:20px;
  --fs-s:14px;--fs-b:16px;--fs-l:18px;--fs-h3:24px;--fs-st:clamp(26px,3vw,36px);--fs-h2:clamp(32px,4.4vw,56px);--fs-xl:clamp(36px,5vw,64px);--fs-d:clamp(42px,6vw,84px);
  --rule:1px solid var(--ov-line-soft);--sec:64px;--gap:64px;--split:minmax(0,5fr) minmax(0,7fr);--split-flip:minmax(0,7fr) minmax(0,5fr);--cols3:repeat(3,minmax(0,1fr));--gap3:32px;--tr:420ms}
@media(min-width:900px){:root{--sec:96px}}
@media(min-width:1280px){:root{--sec:112px}}
@media(max-width:600px){:root{--pad:20px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px;scrollbar-gutter:stable}
html.js{scroll-behavior:smooth}
body{margin:0;font-size:var(--fs-b);line-height:1.5;overflow-x:clip;min-width:320px}
body.ov-ground{background:var(--ov-ground)}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd,pre{margin:0}
ul,ol{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:var(--ov-teal-text);text-underline-offset:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-72px;z-index:100;background:var(--ov-teal-fill);color:var(--ov-on-fill);font-weight:600;padding:12px 16px;border-radius:var(--ov-r-pill);text-decoration:none}
.skip:focus{top:8px}
:focus-visible{outline:var(--ov-focus);outline-offset:4px;border-radius:8px}
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}
.fine{font-size:var(--fs-s);line-height:1.5;color:var(--ov-mute);margin-top:16px}
.cap{margin-top:16px;font-size:var(--fs-s);line-height:1.4;color:var(--ov-mute);text-align:center}
.eb,.ov-eyebrow{font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ov-teal-text)}
.ov-eyebrow{margin-bottom:16px}
.band-deep{background:var(--ov-ground-deep)}
.split{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:var(--split);gap:var(--gap)}.split.flip{grid-template-columns:var(--split-flip)}}
.inline{white-space:nowrap}

/* ---------- lockups (brand book chapter 2) ---------- */
.lock{display:inline-flex;align-items:center;gap:calc(var(--s) * .5);font:var(--ov-fw-medium) var(--s)/1 var(--ov-font);letter-spacing:var(--ov-track-brand);color:var(--ov-ink);white-space:nowrap;text-decoration:none}
.lock svg{width:calc(var(--s) * .93);height:calc(var(--s) * .93);fill:var(--ov-teal);flex:none}
.lock b{color:var(--ov-teal);font-weight:var(--ov-fw-medium)}
.plock{display:inline-flex;align-items:center;gap:calc(var(--s) * .5);white-space:nowrap;text-decoration:none}
.plock .div{width:1px;height:calc(var(--s) * .9);background:var(--ov-glass-line)}
.plock .pn{font:var(--ov-fw-medium) max(14px,calc(var(--s) * .6))/1 var(--ov-font);letter-spacing:var(--ov-track-title);color:var(--ov-ink-soft)}
.bar .plock{min-height:44px}

/* ---------- top bar: solid, a hairline only once you scroll ---------- */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar-h);background:var(--ov-ground);border-bottom:1px solid transparent;z-index:60;transition:border-color 300ms var(--ov-ease)}
.bar.stuck{border-bottom-color:var(--ov-line-soft)}
.bar-in{max-width:var(--wrap);height:100%;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:16px}
.nav{margin-left:auto;display:none;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ov-ink-soft);text-decoration:none;font-size:var(--fs-s);transition:color 200ms var(--ov-ease)}
.bar .btn{margin-left:auto}
@media(min-width:900px){.nav{display:flex}.bar .btn{margin-left:8px}}
@media(hover:hover){.nav a:hover{color:var(--ov-ink)}}
main{padding-top:var(--bar-h)}

/* ---------- buttons and links: no control ever changes size ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--ov-r-pill);border:1px solid transparent;font:var(--ov-fw-semi) var(--fs-b)/1 var(--ov-font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color 200ms var(--ov-ease),border-color 200ms var(--ov-ease),color 200ms var(--ov-ease)}
.btn.sm{min-height:40px;padding:0 16px;font-size:var(--fs-s)}
@media(max-width:899px){.btn.sm{min-height:44px}}
.btn.lg{min-height:56px;padding:0 32px;font-size:var(--fs-l);border-radius:28px}
.btn.primary{background:var(--ov-teal-fill);color:var(--ov-on-fill)}
.btn.ghost{background:transparent;border-color:var(--ov-glass-line);color:var(--ov-ink)}
.btn .ic{width:18px;height:18px;vertical-align:0}
.btn:active{transform:translateY(1px)}
.btn.primary:active{background:var(--ov-teal-soft)}
.btn.ghost:active{background:var(--ov-teal-tint)}
@media(hover:hover){.btn.primary:hover{background:var(--ov-teal-soft)}.btn.ghost:hover{background:var(--ov-teal-tint);border-color:var(--ov-teal-edge)}}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--ov-teal-text);font:var(--ov-fw-semi) var(--fs-b)/1 var(--ov-font);text-decoration:none;cursor:pointer;transition:color 200ms var(--ov-ease)}
.link .ic{width:18px;height:18px;vertical-align:0}
.link:active{color:var(--ov-ink)}
@media(hover:hover){.link:hover{color:var(--ov-ink)}}
a.inline{font-weight:var(--ov-fw-semi)}

/* ---------- tags, chips ---------- */
.tag{display:inline-flex;align-items:center;min-height:24px;padding:3px 12px;border-radius:var(--ov-r-pill);font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:8px;flex:none}
.tag.teal{background:var(--ov-teal-tint);border:1px solid var(--ov-teal-edge);color:var(--ov-teal-soft)}
.tag.amber{background:var(--ov-amber-tint);border:1px solid var(--ov-amber-edge);color:var(--ov-amber-text)}
.tag.open{background:transparent;border:1px solid var(--ov-glass-line);color:var(--ov-ink-soft)}
.chip{display:inline-flex;align-items:center;min-height:24px;padding:0 12px;border-radius:999px;border:1px solid var(--ov-glass-line);background:var(--ov-well);font:var(--ov-fw-semi) var(--fs-s)/1 var(--ov-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ov-ink-soft);white-space:nowrap}
.chip.own{color:var(--ov-ink);background:var(--ov-teal-tint);border-color:var(--ov-teal-edge)}

/* ---------- motion: reveal 420 ms, 12 px, stagger at most 3 steps of 50 ms ---------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.js .rv{opacity:0;transform:translateY(12px);transition:opacity var(--tr) var(--ov-ease) calc(var(--i,0) * 50ms),transform var(--tr) var(--ov-ease-out) calc(var(--i,0) * 50ms)}
.js .rv.in{opacity:1;transform:none}

/* ---------- section scaffolding ---------- */
.sec{padding:var(--sec) 0;overflow-x:clip}
h2{font-size:var(--fs-h2);line-height:1.04;font-weight:var(--ov-fw-medium);letter-spacing:-.025em;text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:1.2;font-weight:var(--ov-fw-medium);letter-spacing:-.01em}
.intro{font-size:var(--fs-l);line-height:1.5;color:var(--ov-ink-soft);max-width:54ch;margin-top:24px;text-wrap:pretty}
.sec-head{max-width:800px;margin-bottom:clamp(40px,5vw,64px)}
.center-head{margin-left:auto;margin-right:auto;text-align:center}
.center-head .intro{margin-left:auto;margin-right:auto}

/* ---------- product stills. .shot = a whole screen with a thin bezel. .crop = 1 idea, 1 edge, no bezel ---------- */
.lit{position:relative;isolation:isolate}
.lit::before{content:"";position:absolute;inset:-8% -6% -10%;z-index:-1;pointer-events:none;background:radial-gradient(40% 38% at 50% 46%,rgba(123,201,196,.17),transparent 100%),radial-gradient(22% 22% at 80% 78%,rgba(227,184,115,.08),transparent 100%)}
.shot img{width:100%;height:auto;border-radius:var(--r);border:6px solid #070B0F;outline:1px solid rgba(216,231,243,.16);outline-offset:-1px;background:#070B0F;box-shadow:0 40px 80px -24px rgba(0,0,0,.75),0 12px 24px -12px rgba(0,0,0,.5)}
.crop img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--ov-glass-line);background:var(--ov-ground-deep);box-shadow:0 32px 64px -24px rgba(0,0,0,.7)}

/* ---------- 1. hero ---------- */
.hero{position:relative;overflow-x:clip;padding:clamp(40px,6vw,72px) 0 0}
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:var(--fs-d);line-height:1.02;font-weight:var(--ov-fw-medium);letter-spacing:-.04em;margin:0 0 24px}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{font-style:normal;color:var(--ov-teal-text);text-wrap:balance}
.lede{font-size:clamp(18px,1.9vw,24px);line-height:1.45;color:var(--ov-ink-soft);max-width:36ch;text-wrap:balance}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 32px;margin:32px 0 0}
@media(max-width:600px){.cta-row{flex-direction:column;gap:8px;width:min(100%,320px)}.cta-row .btn{width:100%}}
.hero-stage{position:relative;max-width:1040px;margin:clamp(32px,4vw,48px) auto 0;padding-bottom:48px}
.hs-desk{width:76%;margin-top:48px}
.hs-desk img{aspect-ratio:2400/1500;object-fit:cover;object-position:50% 0;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.hs-phone{position:absolute;right:0;top:0;width:26%}
.hs-phone img{border-radius:36px;border-width:7px;box-shadow:0 48px 96px -16px rgba(0,0,0,.85),0 12px 24px rgba(0,0,0,.5)}
@media(max-width:600px){.hs-desk{display:none}.hs-phone{position:relative;right:auto;top:auto;width:70%;margin:0 auto}.hs-phone img{border-radius:32px}}
.js .b1{animation:rise 360ms var(--ov-ease-out) both}
.js .lede.b2{animation:rise 360ms var(--ov-ease-out) 80ms both}
.js .cta-row.b2{animation:fade 360ms var(--ov-ease-out) 80ms both}
.js .b3{animation:fade 480ms var(--ov-ease-out) 160ms both}

/* ---------- 2. the felt problem and the turn ---------- */
.problem{padding-bottom:calc(var(--sec) * .6)}
.problem h2{max-width:16ch}
.pb-copy{display:grid;gap:16px;font-size:var(--fs-l);color:var(--ov-ink-soft);max-width:40ch;padding-top:8px}
.pb-copy p:first-child{color:var(--ov-ink)}
.wedge-text{font-size:var(--fs-xl);line-height:1.04;font-weight:var(--ov-fw-medium);letter-spacing:-.035em;margin-top:clamp(64px,9vw,128px);max-width:20ch}
.wedge-text .ws{display:block}
.wedge-text .ws+.ws{margin-top:.1em}
.wedge-text .w{color:var(--ov-mute);transition:color 450ms var(--ov-ease)}
.wedge-text .w.on{color:var(--ov-ink)}
.wedge-text .ws.t .w.on{color:var(--ov-teal-text)}

/* ---------- 3. the signature: spoken words settle into the page as you scroll ---------- */
.seq{position:relative;padding:calc(var(--sec) * .5) 0 var(--sec)}
.seq-head{margin-bottom:40px}
.seq-stage{position:relative;display:grid;gap:32px;align-items:start}
@media(min-width:900px){.seq-stage{grid-template-columns:var(--split);gap:var(--gap)}}
.seq-lab{font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ov-mute);margin-bottom:16px}
.tl-row{padding:0 0 24px}
.tl{position:relative;z-index:2;color:var(--ov-ink);font-size:var(--fs-b);line-height:1.5;width:var(--mw,auto);max-width:100%}
.tl b{display:block;font-size:var(--fs-s);font-weight:var(--ov-fw-semi);letter-spacing:.06em;text-transform:uppercase;color:var(--ov-mute);margin-bottom:4px}
.tt{display:block}
.fill{display:none}
.seq-page{background:var(--ov-surface);border-radius:var(--r);padding:24px;box-shadow:0 40px 80px -24px rgba(0,0,0,.65)}
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding-bottom:16px}
.sp-as{font-size:var(--fs-s);color:var(--ov-mute)}
.prow{padding:16px 0;border-top:var(--rule)}
.pr-k{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:24px}
.pr-what{font-size:var(--fs-l);line-height:1.3;font-weight:var(--ov-fw-medium);margin-top:8px}
.pr-q{margin-top:16px;padding-left:16px;border-left:3px solid var(--ov-teal)}
.pr-t{display:block;font-size:var(--fs-b);line-height:1.5;color:var(--ov-ink)}
.pr-q cite{display:block;margin-top:4px;font-style:normal;font-size:var(--fs-s);color:var(--ov-mute)}
.sp-act{display:flex;flex-wrap:wrap;gap:8px;padding-top:24px;border-top:var(--rule)}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;font:var(--ov-fw-semi) var(--fs-s)/1 var(--ov-font);border:1px solid transparent}
.b.a{background:var(--ov-teal-fill);color:var(--ov-on-fill)}
.b.g{border-color:var(--ov-teal-edge);color:var(--ov-teal-soft)}
.seq-end{font-size:var(--fs-st);line-height:1.12;font-weight:var(--ov-fw-medium);letter-spacing:-.025em}
.seq-end span,.seq-end em{display:block}
.seq-end em{font-style:normal;color:var(--ov-teal-text)}
@media(max-width:899px){.seq-end{margin-top:8px}}
@media(min-width:900px){.seq-end{grid-column:1/-1;margin-top:8px}}
.tl-row[data-k="1"],.prow[data-k="1"]{--k:1}.tl-row[data-k="2"],.prow[data-k="2"]{--k:2}.tl-row[data-k="0"],.prow[data-k="0"]{--k:0}
/* Pinned: --p (0 to 1) drives the scene. Each grey fill fades before its line moves; the line drifts toward its row and is gone before it reaches the card, while its quote settles into the card; the card finishes, then the scrub holds on it.
   Below 1100 px wide, below 640 px tall, on phones and with reduced motion nothing travels: the 3 quotes stay in view above the page card and the page rows build by scroll. */
@media(min-width:1100px) and (min-height:640px){
  .js .seq{--p:0;height:280vh;padding:0}
  .js .seq-pin{position:sticky;top:var(--bar-h);height:calc(100svh - var(--bar-h));display:flex;align-items:center}
  .js .seq-wrap{width:100%}
  .js .seq-head{margin-bottom:24px}
  .js .seq-talk{position:relative}
  .js .seq-lab{display:flex;align-items:center;height:var(--ofs,72px);margin:0;opacity:calc(1 - clamp(0,calc((var(--p) - .62) / .06),1))}
  .js .tl-row{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 16px;--t:clamp(0,calc((var(--p) - .05 - var(--k) * .19) / .17),1);--e:calc(var(--t) * var(--t) * (3 - 2 * var(--t)))}
  .js .fill{display:block;position:absolute;left:0;top:24px;height:8px;border-radius:4px;width:var(--w);background:var(--ov-line-soft);opacity:calc(1 - clamp(0,calc((var(--p) - .01 - var(--k) * .19) / .04),1))}
  .js .mv{transform:translate(calc(var(--dx,0) * var(--e) * 1px),calc(var(--dy,0) * var(--e) * 1px));opacity:calc(1 - clamp(0,calc((var(--t) - .35) / .3),1));will-change:transform}
  .js .mv b{opacity:calc(1 - clamp(0,calc(var(--t) * 4),1))}
  .js .prow,.js .prow.rv{--t:clamp(0,calc((var(--p) - .05 - var(--k) * .19) / .17),1);opacity:1;transform:none;transition:none}
  .js .pr-k{opacity:calc(.3 + .7 * clamp(0,calc((var(--t) - .3) / .3),1))}
  .js .pr-what,.js .pr-q cite{opacity:clamp(0,calc((var(--t) - .4) / .3),1)}
  .js .pr-t{opacity:clamp(0,calc((var(--t) - .55) / .3),1);transform:translateX(calc((1 - clamp(0,calc((var(--t) - .55) / .3),1)) * -12px))}
  .js .pr-q{border-left-color:rgba(123,201,196,clamp(0,calc((var(--t) - .6) / .2),1))}
  .js .sp-act{opacity:clamp(0,calc((var(--p) - .62) / .06),1)}
  .js .seq-end{position:absolute;left:0;top:50%;grid-column:auto;margin:0;transform:translateY(-50%);opacity:clamp(0,calc((var(--p) - .7) / .08),1);pointer-events:none}
  .seq.measure .mv{transform:none!important}
}
/* Short screens (13-inch laptops): the same scene, tighter, so it fits inside the pin. */
@media(min-width:1100px) and (min-height:640px) and (max-height:880px){
  .js .seq-head{margin-bottom:12px}
  .js .seq-head .ov-eyebrow{display:none}
  .js .seq-head h2{font-size:clamp(26px,3vw,36px)}
  .js .seq-page{padding:16px 24px}
  .js .sp-top{min-height:32px;padding-bottom:8px}
  .js .prow{padding:10px 0}
  .js .pr-what{margin-top:4px}
  .js .pr-q{margin-top:8px}
  .js .sp-act{padding-top:14px}
  .js .tl-row{padding-bottom:10px}
}

/* ---------- 4. how it works ---------- */
.how .sec-head{margin-bottom:48px}
.steps3{display:grid;gap:40px}
@media(min-width:900px){.steps3{grid-template-columns:var(--cols3);gap:var(--gap3)}}
.s3{border-top:var(--rule);padding-top:24px}
.sn{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--ov-teal-edge);color:var(--ov-teal-text);font-size:var(--fs-s);font-weight:var(--ov-fw-semi);margin-bottom:24px}
.s3 h3{margin-bottom:8px}
.s3 p{color:var(--ov-ink-soft);max-width:34ch}
.ways-h{font-size:var(--fs-st);line-height:1.1;letter-spacing:-.02em;margin:clamp(56px,7vw,96px) 0 32px}
.ways{display:grid;gap:48px}
@media(min-width:900px){.ways{grid-template-columns:var(--cols3);gap:var(--gap3)}}
.way{display:flex;flex-direction:column;gap:16px;min-width:0}
.way-fig{height:252px;margin:0 0 8px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--ov-glass-line);border-radius:var(--r);background:var(--ov-ground-deep)}
.way-fig img{display:block;width:100%;height:auto}
.wf-join{padding:0 20px}
.wf-join img{width:auto;max-width:100%;border-radius:999px}
.wf-page,.wf-live{align-items:flex-start;padding:20px 20px 0}
.wf-page img,.wf-live img{width:100%;height:auto;border-radius:10px 10px 0 0}
.wf-live img{-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
@media(max-width:899px){.way-fig{height:auto;max-width:440px}.wf-live{max-height:340px}.wf-join{padding:32px 20px}}
.way h3{font-size:var(--fs-h3)}
.way p{color:var(--ov-ink-soft)}
.how-b{margin-top:auto;display:grid;gap:8px}
.way .how-k{padding-top:16px;border-top:var(--rule);font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ov-mute)}
.way .how-k+.how-v+.how-k{margin-top:8px}
.way .how-v{color:var(--ov-ink)}
@media(min-width:900px){.how-b>:nth-child(2){min-height:4.5em}.how-b>:nth-child(4){min-height:3em}}

/* ---------- 5. what you leave with ---------- */
.pair{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:32px;align-items:center;max-width:1180px;margin:0 auto}
.pair-desk img{aspect-ratio:2400/1700;object-fit:cover;object-position:50% 100%}
.pair .cap{grid-column:1/-1;margin-top:0}
.pair-phone img{border-radius:36px;border-width:7px}
@media(max-width:600px){.pair{grid-template-columns:minmax(0,1fr)}.pair-desk{display:none}.pair-phone{width:70%;margin:0 auto}}
.gives{display:grid;gap:var(--gap3);margin-top:clamp(56px,7vw,96px)}
@media(min-width:900px){.gives{grid-template-columns:var(--cols3)}}
.give{border-top:var(--rule);padding-top:24px;display:grid;gap:8px;align-content:start}
.give b{font-size:var(--fs-h3);font-weight:var(--ov-fw-medium);letter-spacing:-.01em}
.give span{color:var(--ov-ink-soft)}
.out{display:grid;gap:40px;margin-top:clamp(56px,7vw,96px);align-items:start}
@media(min-width:900px){.out{grid-template-columns:var(--split-flip);gap:var(--gap)}}
.mail,.cal{display:grid;gap:16px;align-content:start}
.mail{background:var(--ov-surface);border:1px solid var(--ov-glass-line);border-radius:var(--r);padding:24px;box-shadow:0 32px 64px -24px rgba(0,0,0,.6)}
.mail-row{display:flex;gap:16px;padding-bottom:16px;border-bottom:var(--rule)}
.mk{flex:none;width:72px;color:var(--ov-mute);font-size:var(--fs-s);padding-top:2px}
.mv2{color:var(--ov-ink);font-weight:var(--ov-fw-medium)}
.mail-body{display:grid;gap:8px;color:var(--ov-ink)}
.mb-h{font-weight:var(--ov-fw-semi)}
.mail-body .mb-h:not(:first-child){margin-top:12px}
.mail-body ul{display:grid;gap:8px;color:var(--ov-ink-soft)}
.mail-body li{padding-left:16px;position:relative}
.mail-body li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:2px;background:var(--ov-mute)}
.mail-note{font-size:var(--fs-s);line-height:1.5;color:var(--ov-mute)}
.cal-card{display:flex;gap:16px;align-items:center;padding:16px 24px;border:1px solid var(--ov-teal-edge);background:var(--ov-teal-tint);border-radius:var(--r)}
.cal-card .ic{width:24px;height:24px;color:var(--ov-teal-soft)}
.cal-t{font-size:var(--fs-l);font-weight:var(--ov-fw-medium)}
.cal-s{font-size:var(--fs-s);color:var(--ov-ink-soft)}
.cal .btn{justify-self:start;margin-top:8px}
.cal .fine{margin-top:0}

/* ---------- quote check ---------- */
.qc-head .intro{max-width:46ch}
.qc-body{display:grid;gap:0}
.qc-fig{margin-bottom:32px;max-width:520px}
/* the capture already has the card's own edge: 1 edge per object */
.qc-fig img,.edged img{border:0;background:none}
.qrow{display:grid;gap:12px;padding:24px 0;border-top:var(--rule)}
.qlab{display:block;font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ov-mute);margin-bottom:8px}
.qsrc{font-size:var(--fs-l);line-height:1.45;color:var(--ov-ink)}
.qrow.pend .qsrc{color:var(--ov-mute)}
.qm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--fs-b);color:var(--ov-teal-soft);font-weight:var(--ov-fw-semi)}
.qm .ic{width:18px;height:18px;color:var(--ov-teal);vertical-align:0}
.qrow.pend .qm{color:var(--ov-ink-soft)}
.qc-sum{display:flex;align-items:flex-start;gap:12px;padding:24px 0 0;border-top:var(--rule);color:var(--ov-ink-soft)}
.qc-sum .ic{color:var(--ov-teal);vertical-align:0;margin-top:2px}

/* ---------- 6. the live room ---------- */
.room-big{max-width:1100px;margin:0 auto}
@media(max-width:600px){.room-big img{border-width:1px;border-radius:var(--r)}}
.scan-row{margin-top:clamp(72px,9vw,128px);align-items:center}
@media(min-width:900px){.scan-row{grid-template-columns:var(--split-flip)}.scan-row.mirror{grid-template-columns:var(--split)}.scan-row.mirror .scan-copy{order:-1}}
.scan-copy .eb{margin-bottom:16px}
.scan-copy h3{font-size:var(--fs-st);line-height:1.12;letter-spacing:-.02em;margin-bottom:16px;max-width:18ch}
.scan-copy p:not(.eb){font-size:var(--fs-l);color:var(--ov-ink-soft);max-width:38ch}
.tracker-row{margin:clamp(72px,9vw,128px) auto 0;max-width:640px;text-align:center}
.tracker-row .eb{margin-bottom:16px}
.tracker-row h3{font-size:var(--fs-st);line-height:1.12;letter-spacing:-.02em;margin-bottom:16px}
.tracker-row p:not(.eb){font-size:var(--fs-l);color:var(--ov-ink-soft)}
.tr-fig{max-width:420px;margin:48px auto 0}

/* voice commands: the product on the stage; the last command stays visible */
.voice{margin-top:clamp(96px,11vw,160px)}
.vstage{display:grid;justify-items:center;gap:24px}
.say{min-height:2.1em;font-size:var(--fs-xl);line-height:1.05;display:grid;place-items:center}
.say-t{font-weight:var(--ov-fw-medium);letter-spacing:-.035em;color:var(--ov-teal-soft);text-align:center;text-wrap:balance;transition:opacity 160ms var(--ov-ease)}
.say-t.sw{opacity:0}
@media(max-width:600px){.say{min-height:2.2em;font-size:32px}}
.vscreen{position:relative;width:min(100%,1000px)}
.vscreen img{width:100%;height:auto;border-radius:var(--r);border:6px solid #070B0F;outline:1px solid rgba(216,231,243,.16);outline-offset:-1px;background:#070B0F;box-shadow:0 40px 80px -24px rgba(0,0,0,.75)}
.v-paused,.v-qr{position:absolute;inset:0;opacity:0;transition:opacity var(--tr) var(--ov-ease)}
.vstage[data-vstep="1"] .v-paused,.vstage[data-vstep="3"] .v-qr{opacity:1}
@media(max-width:600px){.vscreen{display:none}}
.vpill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,264px);min-height:40px;padding:0 16px;border:0;background:transparent;color:var(--ov-ink-soft);font:var(--ov-fw-medium) var(--fs-s)/1 var(--ov-font);white-space:nowrap}
.vpill b{font-weight:inherit}
.vpill .dot{width:8px;height:8px;border-radius:50%;background:var(--ov-teal);flex:none}
.js .vstage[data-vstep="0"] .dot,.js .vstage[data-vstep="2"] .dot,.js .vstage[data-vstep="3"] .dot{animation:ov-breathe var(--ov-loop-breathe) ease-in-out infinite}
.vstage[data-vstep="1"] .dot{background:var(--ov-amber)}
.cmds{display:grid;gap:40px 32px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin-top:clamp(48px,6vw,80px)}
.cmd{border-top:var(--rule);padding-top:24px;display:grid;gap:8px;align-content:start;transition:border-color var(--tr) var(--ov-ease)}
.cmd p{color:var(--ov-ink-soft)}
.cmd.on{border-top-color:var(--ov-teal)}

/* ---------- 7. the film card: poster first, caption below ---------- */
.filmband{padding-top:var(--sec);padding-bottom:calc(var(--sec) * .6)}
.filmcard{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;border:1px solid var(--ov-glass-line);border-radius:var(--r);background:var(--ov-ground-deep);color:var(--ov-ink);cursor:pointer;box-shadow:0 40px 80px -24px rgba(0,0,0,.7);transition:border-color 300ms var(--ov-ease)}
.fc-poster{width:100%;height:100%;object-fit:cover}
/* The poster's centre holds Ovae's recommendation, so the button sits in the empty lower right of the frame. */
.fc-play{position:absolute;left:82%;top:76%;display:grid;place-items:center;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:var(--ov-teal-fill);color:var(--ov-on-fill);box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 8px rgba(123,201,196,0);transition:background-color 200ms var(--ov-ease),box-shadow 300ms var(--ov-ease)}
.fc-play .ic{width:30px;height:30px;margin-left:3px;vertical-align:0}
.filmcard:active .fc-play{background:var(--ov-teal-soft)}
@media(hover:hover){.filmcard:hover{border-color:var(--ov-teal-edge)}.filmcard:hover .fc-play{background:var(--ov-teal-soft);box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 8px rgba(123,201,196,.3)}}
@media(max-width:600px){.fc-play{width:64px;height:64px;margin:-32px 0 0 -32px;left:84%;top:84%}.fc-play .ic{width:24px;height:24px}}
.fc-cap{display:grid;gap:4px;margin-top:24px}
.fc-cap b{font-size:var(--fs-h3);font-weight:var(--ov-fw-medium);letter-spacing:-.01em}
.fc-cap span{color:var(--ov-ink-soft)}

/* ---------- 7b. the road ahead: 4 calm stacked bands; Today carries the amber edge, Next and The vision are dashed and softer ---------- */
.road{padding-top:calc(var(--sec) * .6);padding-bottom:calc(var(--sec) * .6)}
.road-list{display:grid;gap:16px}
.rd{display:grid;gap:12px;align-items:center;padding:24px;border:1px solid var(--ov-glass-line);border-radius:var(--r);background:var(--ov-surface)}
@media(min-width:700px){.rd{grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);gap:32px;padding:32px 40px}}
.rd-k{font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ov-teal-text);display:grid;gap:8px;justify-items:start}
.rd-k p{margin:0}
.rd-t{font-size:var(--fs-l);line-height:1.35;font-weight:var(--ov-fw-medium);letter-spacing:-.01em;color:var(--ov-ink);text-wrap:pretty}
@media(min-width:700px){.rd-t{font-size:var(--fs-h3)}}
.rd.now{border-color:var(--ov-amber-edge);box-shadow:inset 3px 0 0 var(--ov-amber),0 24px 48px -24px rgba(0,0,0,.6)}
.rd.now .rd-k{color:var(--ov-amber-text)}
.rd.soon{background:transparent;border-style:dashed}
.rd.soon .rd-t{color:var(--ov-ink-soft)}

/* ---------- 8. who it is for ---------- */
.who{padding-top:calc(var(--sec) * .6)}
.who-head h2{max-width:14ch}
@media(min-width:900px){.who-head{position:sticky;top:120px}}
.who-list{border-bottom:var(--rule)}
.who-list li{display:grid;gap:8px;padding:24px 0;border-top:var(--rule)}
@media(min-width:640px){.who-list li{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px}}
.who-list h3{font-size:var(--fs-l);line-height:1.3}
.who-list p{color:var(--ov-ink-soft)}

/* ---------- 9. next to a note-taker ---------- */
.cmp .sec-head{margin-bottom:48px}
.adds{display:grid;gap:0;border-bottom:var(--rule)}
.add{display:grid;gap:8px;padding:24px 0;border-top:var(--rule)}
@media(min-width:900px){.add{grid-template-columns:var(--split);gap:var(--gap)}}
.add h3{font-size:var(--fs-l);line-height:1.3}
.add p{color:var(--ov-ink-soft)}

/* ---------- 10. works with, for builders ---------- */
.connect .sec-head{margin-bottom:32px}
.works{display:grid}
.wrow{display:grid;gap:12px;padding:24px 0;border-top:var(--rule)}
@media(min-width:900px){.wrow{grid-template-columns:var(--split);column-gap:var(--gap);row-gap:8px;align-items:baseline}}
.wrow dt{font-size:var(--fs-s);color:var(--ov-mute);letter-spacing:.12em;text-transform:uppercase;font-weight:var(--ov-fw-semi)}
.wrow dd{display:flex;flex-wrap:wrap;gap:4px 32px;font-size:var(--fs-l);line-height:1.3;font-weight:var(--ov-fw-medium);color:var(--ov-ink)}
.wnote{font-size:var(--fs-s);color:var(--ov-mute);margin-top:-4px}
@media(min-width:900px){.wnote{grid-column:2}}
.dev{margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:var(--rule)}
.dev h3{font-size:var(--fs-h3);margin:16px 0}
.dev-copy>p:not(.eb){color:var(--ov-ink-soft);max-width:40ch}
.code{background:var(--ov-code-bg);border:1px solid var(--ov-line-soft);border-radius:var(--r);padding:24px;font:var(--ov-fs-code)/1.8 var(--ov-font-mono);color:var(--ov-code-ink);white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.code .c-p{color:var(--ov-teal)}.code .c-m{color:var(--ov-code-com)}.code .c-s{color:var(--ov-code-str)}

/* ---------- 11. pricing: Plus is the 1 hero plan; the other 3 sit in a compact row ---------- */
.plus{display:grid;gap:32px;padding:32px 24px;background:var(--ov-surface);border:1px solid var(--ov-teal-edge);border-radius:var(--r);box-shadow:0 40px 80px -24px rgba(0,0,0,.6)}
@media(min-width:900px){.plus{grid-template-columns:var(--split);gap:var(--gap);padding:48px;align-items:center}}
.tier-name{font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ov-ink-soft)}
.price{display:block;margin-top:16px}
.price b{font-size:var(--fs-h2);font-weight:var(--ov-fw-medium);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.price span{display:block;margin-top:8px;font-size:var(--fs-s);color:var(--ov-mute)}
.tier-blurb{margin-top:16px;font-size:var(--fs-l);line-height:1.3;font-weight:var(--ov-fw-medium)}
.plus .btn{margin-top:32px}
@media(max-width:600px){.plus .btn{width:100%}}
.plus ul,.tier ul{display:grid;gap:12px;align-content:start}
.plus li,.tier li{position:relative;padding-left:24px;font-size:var(--fs-b);line-height:1.45;color:var(--ov-ink-soft)}
.plus li{font-size:var(--fs-l);color:var(--ov-ink)}
.plus li::before,.tier li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;background:no-repeat center/16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237BC9C4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.plus li::before{top:6px}
.tiers{display:grid;gap:0 var(--gap3);margin-top:32px}
@media(min-width:900px){.tiers{grid-template-columns:var(--cols3)}}
.tier{padding:32px 0;border-top:var(--rule);min-width:0}
.tier .price b{font-size:var(--fs-st)}
.tier ul{margin-top:24px}

/* ---------- 12. consent notice and questions ---------- */
.notice{margin:0 auto clamp(72px,9vw,128px);max-width:760px;text-align:center}
.notice-t{font-size:var(--fs-st);line-height:1.22;font-weight:var(--ov-fw-medium);letter-spacing:-.02em;margin-top:24px}
.notice-s{margin-top:24px;color:var(--ov-mute)}
.faq-head h2{max-width:8ch}
@media(min-width:900px){.faq-head{position:sticky;top:120px}}
.faq-list{border-bottom:var(--rule)}
.qa{display:grid;gap:8px;padding:32px 0;border-top:var(--rule)}
@media(min-width:640px){.qa{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px}}
.qa dt{font-size:var(--fs-l);line-height:1.3;font-weight:var(--ov-fw-medium)}
.qa dd{color:var(--ov-ink-soft)}

/* ---------- 13. close: early access on the slate ground ---------- */
.cta{position:relative;overflow:hidden;padding:clamp(72px,10vw,128px) 0}
.cta-grid{display:grid;gap:48px;align-items:center}
@media(min-width:900px){.cta-grid{grid-template-columns:var(--split-flip);gap:var(--gap)}}
.cta h2{font-size:var(--fs-xl);line-height:1.02;letter-spacing:-.035em;text-wrap:pretty}
.cta .intro{margin-top:24px}
.signup{display:grid;margin-top:32px;min-height:112px;width:min(600px,100%)}
.sform,.sdone{grid-area:1/1}
.flabel{display:block;font:var(--ov-fw-semi) var(--fs-s)/1.2 var(--ov-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ov-ink-soft);margin-bottom:8px}
.frow{display:flex;gap:8px}
.frow input{flex:1;min-width:0;min-height:56px;padding:0 24px;border-radius:28px;border:1px solid var(--ov-glass-line);background:var(--ov-ground-deep);color:var(--ov-ink);font:var(--ov-fw-regular) var(--fs-l)/1 var(--ov-font);transition:border-color 200ms var(--ov-ease)}
.frow input::placeholder{color:var(--ov-mute)}
.frow input:focus{border-color:var(--ov-teal);outline:var(--ov-focus);outline-offset:2px}
.frow input[aria-invalid="true"]{border-color:var(--ov-crit)}
@media(hover:hover){.frow input:hover{border-color:var(--ov-teal-edge)}}
@media(max-width:600px){.frow{flex-direction:column}.frow .btn{width:100%}}
.msg{min-height:24px;margin-top:8px;font-size:var(--fs-s);color:var(--ov-crit-text)}
.msg.info{color:var(--ov-ink)}
.sdone{visibility:hidden;display:grid;place-content:start;justify-items:start;gap:4px}
.signup.done .sform{visibility:hidden}
.signup.done .sdone{visibility:visible;animation:rise 240ms var(--ov-ease-out) both}
.sd-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ov-teal);color:var(--ov-ink-on-accent);margin-bottom:8px}
.sd-ic .ic{width:22px;height:22px;vertical-align:0}
.sd-t{font-size:var(--fs-h3);font-weight:var(--ov-fw-medium)}
.sd-s{color:var(--ov-ink-soft)}
.cta .fine{color:var(--ov-ink-soft)}
.cta-alt{margin-top:8px}
.cta-phone{width:min(280px,60%);margin:0 auto}
.cta-phone img{border-radius:36px;border:7px solid #070B0F;outline:1px solid rgba(216,231,243,.16);outline-offset:-1px;width:100%;height:auto;box-shadow:0 48px 96px -16px rgba(0,0,0,.85),0 12px 24px rgba(0,0,0,.5)}
@media(max-width:600px){.cta-phone{display:none}}

/* ---------- footer ---------- */
.foot{background:var(--ov-ground-deep);padding:48px 0 64px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px}
.foot-l{display:grid;gap:16px}
.foot-l p{color:var(--ov-ink-soft)}
.foot-l .legal{font-size:var(--fs-s);color:var(--ov-mute)}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 8px;margin:0 -12px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ov-ink-soft);text-decoration:none;transition:color 200ms var(--ov-ease)}
@media(hover:hover){.foot-nav a:hover{color:var(--ov-ink)}}

/* ---------- the film modal: fades in and out, nothing scales ---------- */
html.modal-open{overflow:hidden}
.film-dlg{border:1px solid var(--ov-glass-line);border-radius:var(--r);background:var(--ov-ground-deep);color:var(--ov-ink);padding:0;width:min(1200px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7);opacity:0;transform:translateY(6px);transition:opacity 220ms var(--ov-ease),transform 220ms var(--ov-ease)}
.film-dlg[open]{opacity:1;transform:none}
.film-dlg.closing{opacity:0;transform:translateY(6px)}
.film-dlg:not([open]){display:none}
.film-dlg::backdrop{background:rgba(5,9,12,.92);opacity:0;transition:opacity 220ms var(--ov-ease)}
.film-dlg[open]::backdrop{opacity:1}
.film-dlg.closing::backdrop{opacity:0}
@starting-style{.film-dlg[open]{opacity:0;transform:translateY(6px)}.film-dlg[open]::backdrop{opacity:0}}
.film-frame{display:grid;gap:8px;padding:8px 16px 16px}
.film-x{justify-self:end;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ov-glass-line);background:transparent;color:var(--ov-ink);cursor:pointer;transition:background-color 200ms var(--ov-ease),border-color 200ms var(--ov-ease)}
.film-x:active{background:var(--ov-teal-tint)}
@media(hover:hover){.film-x:hover{background:var(--ov-teal-tint);border-color:var(--ov-teal-edge)}}
.film-screen{position:relative;justify-self:center;aspect-ratio:16/9;width:min(100%,calc((100svh - 176px) * 16 / 9));overflow:hidden;border-radius:12px;background:#000}
.film-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.film-big{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:80px;height:80px;margin:-40px 0 0 -40px;border:0;border-radius:50%;background:var(--ov-teal-fill);color:var(--ov-on-fill);cursor:pointer;box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 8px rgba(123,201,196,0);transition:background-color 200ms var(--ov-ease),box-shadow 300ms var(--ov-ease)}
.film-big:active{background:var(--ov-teal-soft)}
@media(hover:hover){.film-big:hover{background:var(--ov-teal-soft);box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 8px rgba(123,201,196,.3)}}
.film-big .ic{width:30px;height:30px;margin-left:3px;vertical-align:0}
.film-dlg.started .film-big,.film-dlg.ended .film-big{display:none}
.film-re{display:none;font-size:var(--fs-s);font-weight:var(--ov-fw-semi);color:var(--ov-ink-soft);white-space:nowrap}
.film-dlg.ended .film-re{display:inline}
.film-miss{position:absolute;left:0;right:0;bottom:0;padding:16px 24px;text-align:center;font-size:var(--fs-b);color:var(--ov-ink);background:rgba(11,17,22,.9)}
.film-miss[hidden]{display:none}
.film-bar{display:flex;align-items:center;gap:16px;width:min(100%,calc((100svh - 176px) * 16 / 9));justify-self:center}
.film-pp,.film-mute{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--ov-glass-line);background:transparent;color:var(--ov-ink);cursor:pointer;transition:background-color 200ms var(--ov-ease),border-color 200ms var(--ov-ease)}
.film-pp:active,.film-mute:active{background:var(--ov-teal-tint)}
@media(hover:hover){.film-pp:hover,.film-mute:hover{background:var(--ov-teal-tint);border-color:var(--ov-teal-edge)}}
.film-seek{flex:1;min-width:0;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.film-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ov-teal) var(--f,0%),var(--ov-line-soft) var(--f,0%))}
.film-seek::-moz-range-track{height:4px;border-radius:2px;background:var(--ov-line-soft)}
.film-seek::-moz-range-progress{height:4px;border-radius:2px;background:var(--ov-teal)}
.film-seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--ov-ink);border:0}
.film-seek::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ov-ink);border:0}
.film-time{font-size:var(--fs-s);color:var(--ov-ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:84px;text-align:right}
@media(max-width:560px){.film-time{display:none}}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}