/* ===== EMMA SITE CSS - BUILD 36 ===== */
/* ============================================================================
   Emma — landing page
   Theme brief: Cartesia / Runlayer / Mistral / Cofounder. Light-dominant,
   very generous whitespace, near-black type, one accent (brand blue), product
   UI shown in frames, two dark sections for rhythm. Monospace only for labels,
   timestamps and numbers.

   The wordmark rule holds everywhere: Inter 800 at -.03em with the final "a"
   in blue — so the display face and the logo are the same system.
   ========================================================================= */

:root{
  --white:#fff; --paper:#f7f7f5; --paper-2:#efefec;
  --black:#0a0a0b; --ink-d:#131316; --ink-d2:#1c1c21;

  --ink:#0a0a0b; --ink-mute:#55555e; --ink-dim:#87878f;
  --on-d:#f2f2f0; --on-d-mute:#a0a0a8; --on-d-dim:#6e6e77;

  --blue:#1d4ed8; --blue-lit:#5b8cff; --blue-06:rgba(29,78,216,.06); --blue-20:rgba(91,140,255,.22);

  --line:#e5e5e0; --line-2:#d3d3cc;
  --line-d:rgba(255,255,255,.12); --line-d2:rgba(255,255,255,.22);

  --disp:'Inter',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.16,.84,.44,1); --t1:.16s; --t2:.28s;

  /* generous rhythm — the reference sites separate with air, not rules */
  --gut:clamp(1.25rem,5vw,5.5rem);
  --secy:clamp(5.5rem,11vh,9rem);
  --headgap:clamp(2.75rem,6vh,4.5rem);
  --maxw:78rem;

  --z-body:10; --z-hud:40; --z-nav:60; --z-boot:100;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--white)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--disp);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,ul,li{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-200%);background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600}
.skip-link:focus{transform:none}

/* ------------------------------------------------------------- wordmark */
.wordmark{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1;font-size:1.4rem;color:var(--ink)}
.wordmark .dot{color:var(--blue)}
.markbox{width:29px;height:29px;border-radius:8px;background:var(--black);display:grid;place-items:center;flex:none;
  font-family:var(--disp);font-weight:800;font-size:18px;color:#fff;line-height:1;padding-bottom:2px}
.on-dark .wordmark{color:#fff}
.on-dark .wordmark .dot{color:var(--blue-lit)}
.on-dark .markbox{background:#fff;color:var(--black)}

/* ------------------------------------------------------------------ type */
.h1,.h2,.h3{font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.h1{font-size:clamp(3rem,8.2vw,6.75rem);line-height:.9;letter-spacing:-.05em}
.h1 span{display:block}
.h2{font-size:clamp(2rem,4vw,3.35rem)}
.h3{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.03em;line-height:1.12}
.em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;font-variation-settings:'SOFT' 40,'WONK' 1}
.em--blue{color:var(--blue)}
.on-dark .em--blue{color:var(--blue-lit)}
.lede{font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.62;color:var(--ink-mute);max-width:46ch}
.on-dark .lede{color:var(--on-d-mute)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.eyebrow .t{color:var(--blue)}
.eyebrow .sep{width:1.5rem;height:1px;background:currentColor;opacity:.4}
.on-dark .eyebrow{color:var(--on-d-dim)}
.on-dark .eyebrow .t{color:var(--blue-lit)}

/* announcement pill — Cartesia's "Meet Sonic-3.5" device */
.pill{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .5rem .42rem .85rem;border-radius:999px;
  border:1px solid var(--line);background:var(--white);font-size:.83rem;color:var(--ink-mute);
  transition:border-color var(--t1) linear,transform var(--t1) var(--ease)}
.pill:hover{border-color:var(--line-2);transform:translateY(-1px)}
.pill b{color:var(--ink);font-weight:600}
.pill .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;background:var(--blue);color:#fff;
  padding:.2rem .45rem;border-radius:999px}
.pill svg{width:14px;height:14px;color:var(--ink-dim)}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;padding:0 1.5rem;border-radius:999px;
  background:var(--black);color:#fff;font-size:.94rem;font-weight:600;letter-spacing:-.01em;
  transition:transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease),background-color var(--t1) linear;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(10,10,11,.6)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:17px;height:17px;flex:none}
.btn--blue{background:var(--blue)}
.btn--blue:hover{box-shadow:0 16px 34px -16px rgba(29,78,216,.65)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn--ghost:hover{background:var(--paper);box-shadow:none}
.on-dark .btn{background:#fff;color:var(--black)}
.on-dark .btn--blue{background:var(--blue);color:#fff}
.on-dark .btn--ghost{background:transparent;color:var(--on-d);border-color:var(--line-d2)}
.on-dark .btn--ghost:hover{background:rgba(255,255,255,.06)}

/* ------------------------------------------------------------------ boot */
/* Text and a hairline, nothing else — modelled on arc's splash: the status
   word steps through the stages, and the bar only fills once they're done. */
.boot{position:fixed;inset:0;z-index:var(--z-boot);display:grid;place-items:center;background:var(--white)}
.boot__in{display:grid;gap:1.5rem;justify-items:center;text-align:center}
.boot__word{font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-mute);
  min-height:1em;white-space:nowrap}
.boot__bar{width:min(180px,48vw);height:1px;background:var(--line)}
.boot__bar i{display:block;height:100%;width:0;background:var(--ink)}

/* =================================================================== NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem var(--gut);transition:background-color var(--t2) linear,border-color var(--t2) linear;border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav__brand{display:inline-flex;align-items:center;gap:.6rem;min-height:44px}
.nav__pill{position:relative;display:none;align-items:center;padding:.26rem;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.nav__pill a{position:relative;z-index:1;padding:.5rem .9rem;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--ink-mute);
  transition:color var(--t1) linear;white-space:nowrap}
.nav__pill a:hover,.nav__pill a.is-on{color:var(--ink)}
.nav__ind{position:absolute;top:.26rem;bottom:.26rem;left:0;width:0;border-radius:999px;background:var(--white);
  box-shadow:0 1px 3px rgba(10,10,11,.09);transition:transform .42s var(--ease),width .42s var(--ease);pointer-events:none}
.nav__end{display:flex;align-items:center;gap:.5rem}
.nav__signin{display:none;min-height:44px;align-items:center;padding:0 .8rem;font-size:.88rem;color:var(--ink-mute)}
.nav__signin:hover{color:var(--ink)}
.nav .btn{min-height:44px;padding:0 1.15rem;font-size:.88rem}
@media(min-width:1060px){.nav__pill{display:flex}.nav__signin{display:inline-flex}}

/* =================================================================== HUD
   Scroll progress as call duration — the one thing kept from the old page,
   because Emma is literally logged and billed by the minute. */
.hud{position:fixed;z-index:var(--z-hud);left:var(--gut);bottom:clamp(1.75rem,4.5vh,3rem);display:flex;align-items:center;gap:.75rem;
  padding:.45rem .85rem .45rem .7rem;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 40px -24px rgba(10,10,11,.4);opacity:0}
.hud__rec{position:relative;width:8px;height:8px;flex:none}
.hud__rec i{position:absolute;inset:0;border-radius:999px;background:var(--blue);animation:lamp 2s var(--ease) infinite}
@keyframes lamp{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--blue-20)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(91,140,255,0)}}
.hud__time{font-family:var(--mono);font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--ink);min-width:4.2ch}
.hud__wave{width:56px;height:18px}
.hud__label{display:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  max-width:15ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(min-width:700px){.hud__label{display:block}}
.hud.on-dark{background:rgba(15,15,17,.82);border-color:var(--line-d)}
.hud.on-dark .hud__time{color:#fff}
.hud.on-dark .hud__label{color:var(--on-d-mute)}
.hud.on-dark .hud__rec i{background:var(--blue-lit)}

/* ============================================================== SECTIONS */
.sect{position:relative;z-index:var(--z-body);padding-block:var(--secy)}
.sect--paper{background:var(--paper)}
.sect--dark{background:var(--black);color:var(--on-d)}
.head{display:grid;gap:1.1rem;max-width:44rem;margin-bottom:var(--headgap)}
.head--mid{margin-inline:auto;text-align:center;justify-items:center}

/* ================================================================== HERO */
/* Asymmetric and layered: type hard left at poster scale, a live call card
   floating right, the full demo beneath, and a ticker running along the
   bottom edge. Everything overlaps slightly so it reads as depth, not slides. */
.hero{position:relative;padding-top:clamp(7.5rem,16vh,11rem);padding-bottom:0;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__bg .grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 22%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 22%,#000 20%,transparent 78%)}
.hero__bg .glow{position:absolute;left:50%;top:-28%;transform:translateX(-50%);width:min(70rem,130vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(29,78,216,.09),transparent 62%)}
.hero__top{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media(min-width:1000px){.hero__top{grid-template-columns:1.12fr .88fr;gap:clamp(2.5rem,4vw,4.5rem)}}
.hero__copy{display:grid;gap:1.5rem;justify-items:start}
.hero .h1{margin-block:.2rem}
.hero .lede{max-width:46ch;font-size:clamp(1.05rem,1.35vw,1.25rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.25rem}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.35rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-top:.3rem}

/* the call card that answers itself, floating with a slight tilt */
.hero__aside{position:relative;display:grid;justify-items:center}
.ringcard{position:relative;width:min(24rem,100%);border-radius:18px;background:var(--white);border:1px solid var(--line);
  box-shadow:0 50px 100px -55px rgba(10,10,11,.55),0 2px 8px -5px rgba(10,10,11,.1);padding:1.35rem;
  transform:rotate(-1.4deg);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.ringcard:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 60px 120px -55px rgba(10,10,11,.6)}
.ringcard__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ringcard__state{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);transition:color var(--t2) linear}
.ringcard.is-live .ringcard__state{color:var(--blue)}
.ringcard__state i{width:7px;height:7px;border-radius:999px;background:currentColor;animation:lamp 2s var(--ease) infinite}
.ringcard__clock{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.ringcard__num{font-family:var(--mono);font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:1rem;letter-spacing:-.01em}
.ringcard__sub{font-size:.82rem;color:var(--ink-mute);margin-top:.2rem}
.ringcard__wave{width:100%;height:46px;margin-top:1rem}
.ringcard__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:.9rem;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
/* the little card peeking out behind — the lead she just filed */
.hero__chip{position:absolute;right:-.5rem;bottom:-1.4rem;display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;
  border-radius:12px;background:var(--black);color:#fff;font-size:.8rem;font-weight:500;
  box-shadow:0 24px 50px -28px rgba(10,10,11,.7);transform:rotate(2deg)}
.hero__chip svg{width:14px;height:14px;color:var(--blue-lit)}
@media(max-width:520px){.hero__chip{right:0;bottom:-1.2rem;font-size:.74rem}}

.hero__stage{position:relative;z-index:1;margin-top:clamp(3rem,7vh,5rem)}

/* the ticker along the bottom edge of the hero */
.hero__ticker{position:relative;z-index:1;margin-top:clamp(2.5rem,6vh,4rem);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden;white-space:nowrap}
.hero__ticker .t__track{display:inline-flex;align-items:center;gap:2rem;padding:.85rem 0;will-change:transform}
.hero__ticker .t__i{display:inline-flex;align-items:center;gap:.55rem;font-size:.84rem;color:var(--ink-mute)}
.hero__ticker .t__t{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.hero__ticker .t__tag{font-family:var(--mono);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.18rem .4rem;border-radius:5px;background:var(--blue);color:#fff}
.hero__ticker .t__tag--q{background:var(--paper-2);color:var(--ink-mute)}
.hero__meta b{color:var(--ink);font-weight:500}
.hero__meta .d{width:3px;height:3px;border-radius:999px;background:currentColor;opacity:.5}

/* the live call card sitting under the hero, in a frame */
.hero__stage{margin-top:clamp(2.5rem,6vh,4rem)}
.stagecard{border-radius:20px;border:1px solid var(--line);background:var(--white);overflow:hidden;
  box-shadow:0 60px 120px -70px rgba(10,10,11,.55),0 2px 6px -4px rgba(10,10,11,.08)}
.stagecard__bar{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--paper)}
.stagecard__dot{width:8px;height:8px;border-radius:999px;background:var(--blue);flex:none;animation:lamp 2s var(--ease) infinite}
.stagecard__t{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.stagecard__time{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.stagecard__body{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:880px){.stagecard__body{grid-template-columns:1.12fr .88fr}}
.stagecard__side{padding:1.5rem;text-align:left}
.stagecard__side+.stagecard__side{border-top:1px solid var(--line)}
@media(min-width:880px){.stagecard__side+.stagecard__side{border-top:0;border-left:1px solid var(--line)}}

/* transcript */
.script{display:grid;gap:1rem;align-content:start;min-height:15rem}
.turn{display:grid;grid-template-columns:4.2rem 1fr;gap:.8rem;align-items:baseline}
.turn__s{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);padding-top:.2rem}
.turn--e .turn__s{color:var(--blue)}
.turn__x{font-size:.96rem;line-height:1.55;color:var(--ink-mute)}
.turn--e .turn__x{color:var(--ink)}
@media(max-width:520px){.turn{grid-template-columns:1fr;gap:.15rem}}
.toolcall{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-left:5rem;
  padding:.45rem .7rem;border-radius:9px;background:var(--blue-06);border:1px solid rgba(29,78,216,.2);
  font-family:var(--mono);font-size:.66rem;color:var(--blue)}
@media(max-width:520px){.toolcall{margin-left:0}}
.toolcall i{width:5px;height:5px;border-radius:999px;background:var(--blue);animation:lamp 1.2s var(--ease) infinite}
.toolcall b{color:var(--ink);font-weight:500}

/* the form filling itself in */
.frow{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line)}
.frow:last-of-type{border-bottom:0}
@media(max-width:400px){.frow{grid-template-columns:1fr;gap:.2rem}}
.frow__k{font-size:.84rem;color:var(--ink-dim)}
.frow__v{position:relative;min-height:1.4rem;font-family:var(--mono);font-size:.86rem;color:var(--ink);font-variant-numeric:tabular-nums}
.frow__v .ph{position:absolute;top:50%;left:0;transform:translateY(-50%);height:9px;width:60%;border-radius:5px;
  background:repeating-linear-gradient(90deg,var(--paper-2) 0 7px,transparent 7px 13px)}
.frow__v .v{opacity:0;display:inline-block}
.frow.is-filled .ph{opacity:0}
.fsaved{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;opacity:0}
.fstamp{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .7rem;border-radius:999px;background:var(--blue);color:#fff;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.fstamp svg{width:13px;height:13px}
.fms{font-family:var(--mono);font-size:.64rem;color:var(--ink-dim)}

/* ========================================================== THE LOG TABLE
   Scrub-driven: one evening's missed calls rewriting themselves into what
   Emma would have made of each. Grey + strikethrough = lost, blue = caught. */
.missed__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){
  .missed__grid{grid-template-columns:.88fr 1.12fr}
  .missed__copy{position:sticky;top:22vh}
}
.missed__copy{display:grid;gap:1.25rem;align-content:start}
.tally{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.75rem 1.15rem;padding-top:1.4rem;margin-top:.4rem;border-top:1px solid var(--line)}
.tally__n{font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(2.75rem,5.5vw,4rem);
  line-height:1;letter-spacing:-.055em;color:var(--blue)}
.tally__l{font-size:.92rem;color:var(--ink-mute);max-width:26ch;line-height:1.55}

.log{border:1px solid var(--line);border-radius:16px;background:var(--white);overflow:hidden;
  box-shadow:0 50px 100px -70px rgba(10,10,11,.5),0 2px 6px -4px rgba(10,10,11,.06)}
.log__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.15rem;border-bottom:1px solid var(--line);background:var(--paper)}
.log__t{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.log__badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .55rem;border-radius:999px;
  background:var(--paper-2);color:var(--ink-mute);transition:background-color var(--t2) linear,color var(--t2) linear}
.log--on .log__badge{background:var(--blue);color:#fff}
.log__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem 1rem;padding:.95rem 1.15rem;
  border-bottom:1px solid var(--line);border-left:2px solid var(--line-2);
  transition:border-left-color var(--t2) linear,background-color var(--t2) linear}
.log__row:last-of-type{border-bottom:0}
.log__row.is-on{border-left-color:var(--blue);background:var(--blue-06)}
.log__when{font-family:var(--mono);font-size:.78rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.log__num{font-family:var(--mono);font-size:.84rem;color:var(--ink);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log__state{position:relative;min-width:13rem;height:2.3rem}
.log__face{position:absolute;inset:0;display:flex;align-items:center;gap:.5rem;justify-content:flex-end}
.log__face svg{width:14px;height:14px;flex:none}
.log__face--miss{color:var(--ink-dim)}
.log__face--miss .lbl{text-decoration:line-through;text-decoration-thickness:1px}
.log__face--got{color:var(--blue);opacity:0}
.log__face .lbl{font-size:.84rem;font-weight:500;white-space:nowrap}
.log__face .what{font-size:.84rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log__foot{padding:.85rem 1.15rem;background:var(--paper);border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-dim)}
@media(max-width:560px){
  .log__row{grid-template-columns:auto 1fr;row-gap:.45rem}
  .log__state{grid-column:1/-1;min-width:0;height:1.5rem}
  .log__face{justify-content:flex-start}
}

/* ================================================================ MARQUEE */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden;white-space:nowrap;
  position:relative;z-index:var(--z-body)}
.marq__track{display:inline-flex;align-items:center;gap:2.25rem;padding:1.1rem 0;will-change:transform}
.marq span{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,2vw,1.5rem);letter-spacing:-.035em;color:var(--ink)}
.marq i{width:5px;height:5px;border-radius:999px;background:var(--blue);flex:none;display:inline-block}

/* =========================================================== THE CARD FAN
   Three of tonight's calls, stacked. Scroll swipes through them. */
.fan__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:980px){.fan__grid{grid-template-columns:.9fr 1.1fr}}
.fan{position:relative;height:clamp(19rem,40vh,23rem);perspective:1200px}
.fcard{position:absolute;left:50%;bottom:0;width:min(24rem,88%);border-radius:16px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(10,10,11,.55),0 2px 6px -4px rgba(10,10,11,.07);
  transform-origin:50% 92%;will-change:transform;cursor:pointer;
  transition:box-shadow .45s var(--ease),border-color .3s linear}
.fcard.is-front{border-color:var(--line-2);box-shadow:0 50px 100px -50px rgba(10,10,11,.6),0 0 0 1px rgba(29,78,216,.14)}
.fcard__bar{display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--paper)}
.fcard__dot{width:7px;height:7px;border-radius:999px;background:var(--blue);flex:none;animation:lamp 2s var(--ease) infinite}
.fcard__ttl{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.fcard__time{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.fcard__body{padding:1rem 1.05rem 1.15rem;display:grid;gap:.6rem}
.fcard__who{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.fcard__num{font-family:var(--mono);font-size:.88rem;color:var(--ink);font-variant-numeric:tabular-nums}
.fcard__tag{font-family:var(--mono);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;padding:.22rem .45rem;border-radius:5px;
  background:var(--blue);color:#fff}
.fcard__line{font-size:.9rem;color:var(--ink-mute);line-height:1.5}
.fcard__line b{color:var(--ink);font-weight:600}
.fcard__wave{width:100%;height:28px}
.fan__hint{position:absolute;left:50%;bottom:-2rem;transform:translateX(-50%);font-family:var(--mono);font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}

/* the fan on the dark section */
.on-dark .fcard{background:var(--ink-d);border-color:var(--line-d);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),0 2px 8px -5px rgba(0,0,0,.6)}
.on-dark .fcard.is-front{border-color:var(--line-d2);box-shadow:0 50px 110px -50px rgba(0,0,0,1),0 0 0 1px rgba(91,140,255,.28)}
.on-dark .fcard__bar{background:rgba(255,255,255,.03);border-bottom-color:var(--line-d)}
.on-dark .fcard__dot{background:var(--blue-lit)}
.on-dark .fcard__ttl,.on-dark .fcard__time{color:var(--on-d-dim)}
.on-dark .fcard__num{color:#fff}
.on-dark .fcard__line{color:var(--on-d-mute)}
.on-dark .fcard__line b{color:#fff}
.on-dark .fan__hint{color:var(--on-d-dim)}

/* ============================================================= MANIFESTO */
.mani{text-align:center}
.mani .h2{max-width:24ch;margin-inline:auto}
.mani .lede{margin-inline:auto;margin-top:1.5rem;text-align:center}
.mani__cta{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:2.25rem}

/* ================================================================== TABS
   Cartesia's industry switcher: pick a trade, the scene changes. */
/* The pinned stage: badge, heading, switcher and card all inside one viewport,
   vertically centred, so nothing is cut off while the section is held. */
#who{padding-block:0}
.who__stage{min-height:100svh;display:grid;align-content:center;gap:clamp(.9rem,2vh,1.5rem);
  padding-block:clamp(4.5rem,10vh,6.5rem)}
.who__stage .head{margin-bottom:0;gap:.7rem}
.who__stage .tabs{margin-bottom:0}
/* short windows: drop the sub-paragraph and tighten the panel so the card
   still fits whole rather than running off the bottom */
@media(max-height:780px){.who__stage .head .lede{display:none}}
@media(max-height:700px){
  .who__stage .h2{font-size:clamp(1.5rem,3vw,2.1rem)}
  .who__stage .scene__copy,.who__stage .scene__vis{padding:clamp(1rem,2vw,1.35rem)}
  .who__stage .scene__list{gap:.5rem}
  .who__stage .sline{padding:.5rem .7rem}
}

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
.tab{padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);font-size:.88rem;font-weight:500;color:var(--ink-mute);
  min-height:46px;transition:background-color var(--t1) linear,color var(--t1) linear,border-color var(--t1) linear}
.tab:hover{border-color:var(--line-2);color:var(--ink)}
.tab.is-on{background:var(--black);color:#fff;border-color:var(--black)}
/* All four panels share one grid cell, so the stage is as tall as the tallest
   and nothing reflows when the template changes — which matters while the
   section is pinned. */
.scenes{display:grid}
.scene{grid-area:1/1;display:grid;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.scene.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
@media(min-width:900px){.scene{grid-template-columns:.95fr 1.05fr}}
.scene__copy{padding:clamp(1.5rem,3vw,2.5rem);display:grid;gap:1rem;align-content:center}
.scene__list{display:grid;gap:.75rem;margin-top:.5rem}
.scene__list li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;font-size:.92rem;color:var(--ink-mute)}
.scene__list svg{width:16px;height:16px;color:var(--blue);margin-top:.24rem;flex:none}
.scene__vis{background:var(--paper);border-top:1px solid var(--line);padding:clamp(1.25rem,2.5vw,2rem);display:grid;align-content:center;gap:.6rem}
@media(min-width:900px){.scene__vis{border-top:0;border-left:1px solid var(--line)}}
.sline{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.7rem .85rem;border-radius:11px;
  background:var(--white);border:1px solid var(--line);font-size:.86rem}
.sline .t{font-family:var(--mono);font-size:.7rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.sline .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .45rem;border-radius:5px;
  background:var(--blue);color:#fff;white-space:nowrap}
.sline .tag--q{background:var(--paper-2);color:var(--ink-mute)}

/* =========================================================== STACK CARDS
   Cartesia's Ink / Sonic / Line trio: three things she is. */
.stack{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:900px){.stack{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.scard{position:relative;display:grid;gap:.9rem;align-content:start;padding:clamp(1.5rem,2.4vw,2rem);border-radius:18px;
  border:1px solid var(--line);background:var(--white);transition:transform .38s var(--ease),border-color .3s linear,box-shadow .38s var(--ease)}
.scard:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 30px 60px -44px rgba(10,10,11,.5)}
.scard__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.scard__d{font-size:.94rem;color:var(--ink-mute);line-height:1.6}
.scard__go{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600;margin-top:.2rem}
.scard__go svg{width:15px;height:15px;transition:transform var(--t2) var(--ease)}
.scard:hover .scard__go svg{transform:translateX(3px)}
.scard__wave{width:100%;height:34px;margin-top:.3rem}

/* ==================================================== FEATURE + UI BLOCKS
   Mistral / Cofounder: full-width alternating copy and a real screen. */
.fblock{display:grid;gap:clamp(2rem,4.5vw,4rem);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){
  .fblock{grid-template-columns:.88fr 1.12fr}
  .fblock--flip .fblock__copy{order:2}
  .fblock--flip .fblock__vis{order:1}
}
.fblock+.fblock{margin-top:var(--secy)}
.fblock__copy{display:grid;gap:1.1rem;align-content:start;justify-items:start}
.fblock__list{display:grid;gap:.6rem;margin-top:.3rem}
.fblock__list li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.92rem;color:var(--ink-mute)}
.fblock__list svg{width:15px;height:15px;color:var(--blue);margin-top:.26rem;flex:none}

/* the product frame */
.frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--white);
  box-shadow:0 50px 100px -66px rgba(10,10,11,.55),0 2px 6px -4px rgba(10,10,11,.07)}
.frame__bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;border-bottom:1px solid var(--line);background:var(--paper)}
.frame__tl{width:9px;height:9px;border-radius:999px;background:var(--line-2);flex:none}
.frame__url{flex:1;text-align:center;font-family:var(--mono);font-size:.63rem;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame__body{padding:1.1rem}
.dsub{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:1px solid var(--line)}
.dsub h4{font-size:.96rem;font-weight:700;letter-spacing:-.02em}
.dsub span{font-family:var(--mono);font-size:.62rem;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase}
.drow{display:grid;grid-template-columns:auto 1fr auto auto;gap:.8rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.85rem}
.drow:last-child{border-bottom:0}
.drow .t{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.drow .n{font-family:var(--mono);font-size:.78rem;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow .dur{font-family:var(--mono);font-size:.74rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.dpill{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .45rem;border-radius:5px;
  background:var(--paper-2);color:var(--ink-mute);white-space:nowrap}
.dpill--blue{background:var(--blue);color:#fff}
@media(max-width:640px){.drow{grid-template-columns:auto 1fr auto}.drow .dur{display:none}}
.dcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dcal .dow{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);padding:.2rem;text-align:center}
.dcell{min-height:56px;border:1px solid var(--line);border-radius:8px;padding:.3rem;display:grid;gap:3px;align-content:start}
.dcell .d{font-family:var(--mono);font-size:.6rem;color:var(--ink-dim)}
.dchip{font-size:.57rem;line-height:1.3;padding:.16rem .28rem;border-radius:4px;background:var(--blue);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dchip--ghost{background:var(--paper-2);color:var(--ink-mute)}
@media(max-width:640px){.dcell{min-height:42px}}
.dfield{display:grid;grid-template-columns:auto 1fr auto auto;gap:.65rem;align-items:center;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:10px;margin-bottom:.45rem;font-size:.85rem}
.dgrip{color:var(--ink-dim);font-family:var(--mono);font-size:.7rem}
.dsel{font-family:var(--mono);font-size:.66rem;color:var(--ink-mute);border:1px solid var(--line);border-radius:5px;padding:.15rem .4rem}
.dsw{width:32px;height:18px;border-radius:999px;background:var(--blue);position:relative;flex:none}
.dsw::after{content:'';position:absolute;top:2px;left:16px;width:14px;height:14px;border-radius:999px;background:#fff}
.dsw.off{background:var(--line-2)}.dsw.off::after{left:2px}

/* ================================================================= TILES
   Cartesia's Cloud / On-prem / On-device toggles, as forwarding modes. */
.tiles{display:grid;gap:.85rem;grid-template-columns:1fr}
@media(min-width:820px){.tiles{grid-template-columns:repeat(3,1fr);gap:1rem}}
.tile{text-align:left;display:grid;gap:.7rem;align-content:start;padding:clamp(1.35rem,2.2vw,1.85rem);border-radius:16px;
  border:1px solid var(--line);background:var(--white);opacity:.55;
  transition:opacity .35s linear,border-color .3s linear,transform .35s var(--ease),box-shadow .35s var(--ease)}
.tile:hover{opacity:.85}
.tile.is-on{opacity:1;border-color:var(--blue);transform:translateY(-3px);box-shadow:0 26px 54px -40px rgba(29,78,216,.6)}
.tile__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.tile.is-on .tile__k{color:var(--blue)}
.tile__t{font-size:1.06rem;font-weight:700;letter-spacing:-.025em}
.tile__d{font-size:.88rem;color:var(--ink-mute);line-height:1.55}
.tile__code{font-family:var(--mono);font-size:.86rem;color:var(--ink);padding:.55rem .7rem;border-radius:9px;background:var(--paper);
  border:1px solid var(--line);font-variant-numeric:tabular-nums}
.tile.is-on .tile__code{background:var(--blue-06);border-color:rgba(29,78,216,.25);color:var(--blue)}

/* ================================================================= QUOTE
   Runlayer runs testimonials here. We have one live tenant, so this is a
   real transcript instead of an invented customer. */
.quote{max-width:52rem;margin-inline:auto;text-align:center;display:grid;gap:1.5rem;justify-items:center}
.quote__q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.28;
  letter-spacing:-.02em;font-variation-settings:'SOFT' 40,'WONK' 1}
.quote__m{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:center;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-d-dim)}
.quote__m b{color:var(--on-d);font-weight:500}

/* ================================================================= GLOBE */
.globe__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.globe__grid{grid-template-columns:.95fr 1.05fr}}
.globe__stage{position:relative;display:grid;place-items:center;min-height:clamp(17rem,42vh,25rem)}
.globe__stage canvas{width:100%;height:auto;max-width:28rem;aspect-ratio:1/1;opacity:0;transition:opacity .9s var(--ease);cursor:grab}
.globe__stage canvas:active{cursor:grabbing}
.glist{display:grid;gap:.55rem;margin-top:1.5rem}
.gitem{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.7rem .85rem;border:1px solid var(--line-d);border-radius:11px}
.gitem i{width:6px;height:6px;border-radius:999px;background:var(--blue-lit)}
.gitem .c{font-size:.92rem}
.gitem .l{font-family:var(--mono);font-size:.68rem;color:var(--on-d-dim)}

/* =============================================================== PRICING */
.price__grid{display:grid;gap:clamp(2.25rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.price__grid{grid-template-columns:1fr 1fr}}
.minb{display:flex;height:56px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--white)}
.minb i{display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums;width:0}
.minb .s1{background:var(--black)}.minb .s2{background:var(--blue)}.minb .s3{background:var(--ink-dim)}
.mkey{display:grid;gap:.6rem;margin-top:1.1rem}
.mrow{display:grid;grid-template-columns:11px 1fr auto;gap:.75rem;align-items:center;font-size:.9rem}
.mrow i{width:11px;height:11px;border-radius:3px}
.mrow span{color:var(--ink-mute)}
.mrow b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.mtot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line)}
.mtot .big{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,4.4vw,2.6rem);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.mtot .l{font-size:.85rem;color:var(--ink-mute)}
.packs{display:grid;gap:.55rem}
.pack{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-radius:12px;background:var(--white);
  border:1px solid var(--line);transition:transform var(--t1) var(--ease),border-color var(--t1) linear,box-shadow var(--t2) var(--ease)}
.pack:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 18px 38px -30px rgba(10,10,11,.5)}
/* both are spans — without display:block they run together on one line and
   the margin below is silently dropped */
.pack__t{display:block;font-weight:600;font-size:.94rem}
.pack__d{display:block;font-size:.8rem;color:var(--ink-mute);margin-top:.2rem;line-height:1.45}
.pack__p{font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums}
.pnote{font-size:.82rem;color:var(--ink-mute);margin-top:1.25rem;line-height:1.6}

/* =================================================================== FAQ */
/* A switchboard, not an accordion: the questions are a compact directory on
   the left and the answer lands in one panel on the right. Half the height of
   a stacked accordion and it matches the rest of the page's call-log language. */
.qa{display:grid;gap:clamp(1.25rem,2.5vw,2.25rem);grid-template-columns:1fr;align-items:start}
@media(min-width:860px){.qa{grid-template-columns:.95fr 1.05fr}}
.qa__list{display:grid;border-top:1px solid var(--line)}
.qa__q{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;
  padding:.85rem .2rem;text-align:left;border-bottom:1px solid var(--line);min-height:52px;
  font-size:.95rem;font-weight:500;letter-spacing:-.015em;color:var(--ink-mute);
  transition:color var(--t1) linear,padding-left var(--t2) var(--ease)}
.qa__q .n{font-family:var(--mono);font-size:.66rem;color:var(--ink-dim);font-variant-numeric:tabular-nums;transition:color var(--t1) linear}
.qa__q .go{width:15px;height:15px;opacity:0;transform:translateX(-4px);transition:opacity var(--t2) linear,transform var(--t2) var(--ease);color:var(--blue)}
.qa__q:hover{color:var(--ink);padding-left:.5rem}
.qa__q.is-on{color:var(--ink);font-weight:600;padding-left:.55rem}
.qa__q.is-on .n{color:var(--blue)}
.qa__q.is-on .go{opacity:1;transform:none}
/* the blue rule that rides down the list to whichever question is open */
.qa__list{position:relative}
.qa__rule{position:absolute;left:0;width:2px;background:var(--blue);border-radius:2px;
  transition:transform .38s var(--ease),height .38s var(--ease);pointer-events:none}
.qa__panel{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--white);
  padding:clamp(1.25rem,2.4vw,1.85rem);min-height:13rem;display:grid;align-content:start;gap:.9rem;
  box-shadow:0 30px 70px -60px rgba(10,10,11,.5)}
.qa__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.qa__meta b{color:var(--blue);font-weight:500}
.qa__body{display:grid}
.qa__a{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.qa__a.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.qa__a h4{font-size:1.05rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem}
.qa__a p{font-size:.94rem;color:var(--ink-mute);line-height:1.65}

/* ========================================================== CTA CLUSTER
   Cartesia's "Get started today": three doors, not one button. */
.cluster{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:880px){.cluster{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.door{display:grid;gap:.75rem;align-content:start;padding:clamp(1.5rem,2.4vw,2rem);border-radius:18px;border:1px solid var(--line-d);
  background:var(--ink-d);transition:transform .38s var(--ease),border-color .3s linear,background-color .3s linear}
.door:hover{transform:translateY(-4px);border-color:var(--line-d2);background:var(--ink-d2)}
.door__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-lit)}
.door__t{font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
.door__d{font-size:.9rem;color:var(--on-d-mute);line-height:1.55}
.door__go{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600;margin-top:.3rem}
.door__go svg{width:15px;height:15px;transition:transform var(--t2) var(--ease)}
.door:hover .door__go svg{transform:translateX(3px)}
.door__num{font-family:var(--mono);font-size:1.02rem;font-variant-numeric:tabular-nums;color:#fff}

/* ================================================================ FOOTER */
.foot{background:var(--black);color:var(--on-d);padding-top:clamp(3rem,6vh,4.5rem)}
.foot__top{display:flex;flex-wrap:wrap;gap:2.25rem 3rem;justify-content:space-between;padding-bottom:2.75rem}
.foot__col{display:grid;gap:.55rem;align-content:start}
.foot__h{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-d-dim);margin-bottom:.25rem}
.foot__col a{font-size:.9rem;color:var(--on-d-mute);min-height:34px;display:inline-flex;align-items:center}
.foot__col a:hover{color:#fff}
.foot__fine{font-size:.84rem;color:var(--on-d-dim);max-width:32ch;line-height:1.6}
.foot__num{font-family:var(--mono);font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums}
.foot__mark{overflow:hidden;border-top:1px solid var(--line-d);padding:clamp(1.25rem,3vh,2.25rem) 0 clamp(.5rem,2vh,1rem)}
/* Two stacked copies: an outline that's always there, and a solid one that
   fills in on scroll. The final letter takes the blue last. */
.foot__word{position:relative;font-family:var(--disp);font-weight:800;letter-spacing:-.06em;line-height:.72;
  font-size:clamp(5rem,23vw,19rem);text-align:center;user-select:none}
.foot__word .fw{display:block}
.foot__word .fw--out{position:absolute;inset:0;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.32)}
.foot__word .fw--out .dot{color:transparent}
.foot__word .fw--in{color:#fff;opacity:0}
.foot__word .fw--in .dot{color:#fff}
.foot__bot{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;padding:1.15rem 0 calc(1.15rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-d);font-size:.78rem;color:var(--on-d-dim)}

/* ------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .boot{display:none}
  .hud{opacity:1!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO v2 — paste at the END of the stylesheet (these rules override the
   original .hero block above by source order).

   Brings the hero into the same pattern every other section follows:
   eyebrow → headline → body → ONE card. No new font, colour, radius or
   shadow: every value below is either an existing custom property or a
   number already used elsewhere in this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* same vertical rhythm as every other section (+3rem at the top only, to
   clear the fixed navbar — without it the badge sits under the nav) */
.hero{padding-block:var(--secy);padding-top:calc(var(--secy) + 3rem)}

/* two columns on desktop, 52 / 48; one column on mobile with the card last */
.hero__top{display:grid;grid-template-columns:1fr;gap:clamp(2.25rem,4.5vw,3.5rem);align-items:center}
@media(min-width:1000px){.hero__top{grid-template-columns:minmax(0,52fr) minmax(0,48fr)}}
.hero__copy{display:grid;gap:1.3rem;justify-items:start}
.hero .h1{margin-block:0;font-size:clamp(2.5rem,5.4vw,4.5rem)}
.hero .lede{max-width:44ch;font-size:clamp(1rem,1.25vw,1.15rem)}
.hero__cta{margin-top:.3rem}

/* the badge, one step quieter, above the eyebrow */
.pill--sm{padding:.28rem .45rem .28rem .7rem;font-size:.76rem;gap:.5rem}
.pill--sm .tag{font-size:.55rem;padding:.16rem .38rem}
.pill--sm svg{width:13px;height:13px}

/* language / ring / price as ONE quiet meta line, in the page's small-meta
   style (identical values to .eyebrow) */
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .85rem;margin-top:.1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.hero__meta b{color:var(--ink-mute);font-weight:500}
.hero__meta .d{width:3px;height:3px;border-radius:999px;background:currentColor;opacity:.45}

/* the single visual — capped to the same height as the tallest card in 00:44
   (.fan uses this exact clamp), so the hero can't dominate the page */
.hero__aside{display:block}
.ringcard{width:100%;transform:none;display:flex;flex-direction:column;
  max-height:clamp(19rem,40vh,23rem);overflow:hidden;padding:0}
.ringcard:hover{transform:translateY(-3px)}

/* mac window chrome — same treatment as the product frames elsewhere on the
   page (.frame__bar), so the hero card reads as the same family of object */
.ringcard__chrome{display:flex;align-items:center;gap:.45rem;flex:none;
  padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--paper)}
.ringcard__chrome .tl{width:10px;height:10px;border-radius:999px;background:var(--line-2);flex:none}
.ringcard__title{flex:1;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ringcard__body{flex:1;min-height:0;display:flex;flex-direction:column;padding:1.25rem}

.ringcard__num{margin-top:.7rem;font-size:1.05rem}
.ringcard__wave{height:26px;margin-top:.65rem;flex:none}

/* transcript lives inside the card and takes the remaining height */
.ringcard .script{flex:1;min-height:0;overflow:hidden;gap:.5rem;margin-top:.85rem;padding-top:.85rem;
  border-top:1px solid var(--line)}
.ringcard .turn{grid-template-columns:3.4rem 1fr;gap:.55rem}
.ringcard .turn__x{font-size:.875rem;line-height:1.45}
.ringcard .toolcall{margin-left:3.95rem;font-size:.62rem;padding:.32rem .5rem}
@media(max-width:520px){
  .ringcard .turn{grid-template-columns:1fr}
  .ringcard .toolcall{margin-left:0}
}

/* reduced motion: the hero holds completely still */
@media(prefers-reduced-motion:reduce){
  .ringcard,.ringcard:hover{transform:none;transition:none}
  .ringcard__state i,.toolcall i{animation:none}
  .ringcard{max-height:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   00:31 TRADES — breathing room
   The stage had been squeezed to guarantee it fits the viewport while pinned,
   which left it tighter than every other section. Spacing is now tied to vh:
   generous wherever there's height to spend, and the existing max-height
   rules above still clamp it down on genuinely short windows.
   ══════════════════════════════════════════════════════════════════════════ */
/* Explicit margins, not vh-based gaps. The clamps collapsed to their floor on
   ordinary laptop heights, which is why the heading sat ~20px off the pills
   and the pills ~18px off the card (see mistake.png). #who prefix so these
   beat every earlier rule regardless of source order. */
#who .who__stage{gap:0;padding-block:clamp(5rem,11vh,7rem)}
#who .who__stage .head{gap:1.2rem;max-width:52rem;margin:0 0 2.25rem}
#who .who__stage .tabs{gap:.7rem .9rem;margin:0 0 1.75rem}
#who .who__stage .tab{padding:.7rem 1.35rem;min-height:48px}
#who .who__stage .scenes{margin:0}
/* only tighten when the window genuinely cannot fit it */
@media(max-height:760px){
  #who .who__stage .head{margin-bottom:1.4rem}
  #who .who__stage .tabs{margin-bottom:1.1rem}
}
.who__stage .scenes{margin-top:clamp(.15rem,1.1vh,.9rem);min-width:0}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — the card expands as you scroll, then the page carries on
   Desktop only: the hero holds, the copy column collapses to nothing and the
   call card grows into the full width while the transcript writes itself out.
   Then it releases. Driven by a CSS custom property so the grid genuinely
   re-lays-out — no scaling, so nothing inside the card is distorted.
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:1000px) and (min-height:640px){
  .hero{min-height:100svh;display:grid;align-content:center;padding-block:clamp(6rem,12vh,8rem)}
  /* FLEX, not grid: flex-basis is a plain animatable length, so the collapse
     is something GSAP can drive reliably. Animating grid-template-columns
     (or a custom property feeding it) means GSAP has to parse and re-serialise
     a track list — if that doesn't take, the layout silently never moves. */
  .hero__top{display:flex;align-items:center;gap:clamp(2.25rem,4.5vw,3.5rem)}
  .hero__copy{flex:0 0 52%;min-width:0;will-change:flex-basis,opacity}
  .hero__aside{flex:1 1 0%;min-width:0}
  .ringcard{will-change:max-height}
}

/* ── overflow fix (mistake.png) ────────────────────────────────────────────
   Grid tracks are min-width:auto by default, so the nowrap call rows inside
   .scene__vis were forcing that column wider than the card and pushing the
   status chips off the right edge. Every track that holds text now gets an
   explicit minmax(0,…) / min-width:0 so it is allowed to shrink. */
/* THE actual culprit: .scenes is a grid whose single implicit column is sized
   to its content. All four panels are stacked in that one cell, so the column
   grew to the widest panel's min-content — nowrap call rows and all — and blew
   straight through .wrap. An explicit minmax(0,1fr) forbids that. */
.scenes{grid-template-columns:minmax(0,1fr);min-width:0}
.scene{min-width:0;max-width:100%}
@media(min-width:900px){.scene{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.scene__copy,.scene__vis{min-width:0}
.sline{grid-template-columns:auto minmax(0,1fr) auto;min-width:0}
.sline > span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene__list li{min-width:0}
.scene__list li span{min-width:0}
/* belt and braces: nothing in this section may exceed its container */
.who__stage .wrap{max-width:min(var(--maxw),100%);overflow-x:clip}

/* inside the panel, on screens with room for it */
@media(min-height:781px){
  .who__stage .scene__copy{padding:clamp(1.75rem,3vw,2.75rem);gap:1.15rem}
  .who__stage .scene__vis{padding:clamp(1.5rem,2.6vw,2.25rem);gap:.8rem}
  .who__stage .scene__list{gap:.9rem}
  .who__stage .sline{padding:.8rem 1rem}
}