/* ============================================================
   KUSP v6 — editorial / cinematic direction (shared stylesheet)

   Composition referenced from domu.ai (cinematic hero, bottom-aligned
   display type, live proof numeral, minimal chrome, band rhythm).
   Identity, type pairing, mark, accent discipline and all copy are Kusp's.

   LIGHT ONLY. There is no dark theme and no toggle — the page canvas is
   the warm-paper document theme throughout. The hero is a cinematic
   *plate* (a lit photographic surface), which is a composition device,
   not a theme.

   Accent discipline (kusp-brand §2.1): amber = the brand; cyan = live
   voice / interactive ONLY; teal = success. No accent rotation.
   ============================================================ */

:root {
  /* surfaces — warm paper (kusp-brand document theme) */
  --bg:        #FBFAF6;
  --bg-elev:   #F2F0E8;
  --bg-raised: #E9E6DA;
  --border:        rgba(23,23,27,.12);
  --border-strong: rgba(23,23,27,.26);

  /* ink — secondary tones darkened a step beyond the doc theme for
     readability (founder note: writing must be clearly visible) */
  --ink:   #17171B;   /* 17.1:1 */
  --ink-2: #3E3E46;   /* 10.2:1 */
  --ink-3: #575760;   /*  6.9:1 */
  --on-accent: #FBFAF6;

  /* accents — bronze carries small text on paper (eyebrows, proof numerals,
     card indices, icons, chips); pure gold is the official Kusp brand color
     and is reserved for the logo and primary buttons in EVERY theme/surface
     (founder decision 2026-09-01: the brand color must not shift between
     light and dark). --amber-mark/--on-amber-mark are deliberately NOT
     redefined in the dark-theme block below, so they resolve to the same
     values everywhere. */
  --amber:      #785A00;
  --amber-soft: #9A7B08;
  --amber-mark:       #E0C656;
  --amber-mark-hover: #F0DC8E;
  --on-amber-mark:    #17171B;
  --cyan:       #0D6882;
  --teal:       #0E6A63;
  --red:        #B3261E;

  /* chart slots — validated for light surfaces (kusp-brand §3b) */
  --chart-1: #9A7B08;
  --chart-2: #0891B2;
  --chart-3: #7C3AED;
  --chart-4: #059669;
  --chart-neutral: #9A9AA4;
  --chart-grid: rgba(23,23,27,.12);

  --display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --ease-fluid: cubic-bezier(.25,1,.5,1);
  --ease-snap:  cubic-bezier(.16,1,.3,1);
  --gutter: clamp(20px, 5vw, 88px);
  --maxw: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; margin: 0; text-wrap: balance; line-height: 1.06; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- dark theme (toggle) ---------- */
:root[data-theme="dark"] {
  --bg:        #0B0B0F;
  --bg-elev:   #131318;
  --bg-raised: #1B1B22;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.17);
  --ink:   #F5F5F7;
  --ink-2: #B4B4BD;
  --ink-3: #93939C;
  --on-accent: #0B0B0F;
  --amber:      #E0C656;
  --amber-soft: #F0DC8E;
  --cyan:       #22D3EE;
  --teal:       #2DD4BF;
  --red:        #F0475B;
  --chart-1: #AA9109;
  --chart-2: #06A4BA;
  --chart-3: #9973FE;
  --chart-4: #02A997;
  --chart-neutral: #4A4A55;
  --chart-grid: rgba(255,255,255,.10);
}
[data-theme="dark"] .nav.is-stuck { background: rgba(11,11,15,.86); }
[data-theme="dark"] .marquee__track img { filter: grayscale(1) invert(1) brightness(1.5); opacity: .5; }
[data-theme="dark"] .marquee__track img:hover { filter: grayscale(1) invert(1) brightness(1.9); opacity: .9; }
[data-theme="dark"] .studio { box-shadow: 0 30px 80px -40px rgba(0,0,0,.7); }
[data-theme="dark"] body::after { opacity: .05; }

.themetoggle {
  width: 52px; height: 28px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: transparent;
  position: relative; cursor: pointer; padding: 0; flex: none;
}
.themetoggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ink);
  transition: transform .34s var(--ease-fluid);
}
:root[data-theme="dark"] .themetoggle::after { transform: translateX(24px); }
.nav--onplate:not(.is-stuck) .themetoggle { border-color: rgba(255,255,255,.36); }
.nav--onplate:not(.is-stuck) .themetoggle::after { background: #fff; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.h1        { font-size: clamp(2.05rem, 4.2vw, 3.5rem); line-height: 1.06; letter-spacing: -.032em; }
.h2        { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.h3        { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.h4        { font-size: 1.0625rem; font-family: var(--body); font-weight: 700; letter-spacing: -.005em; }
.lede      { font-size: clamp(1.1rem, 1.4vw, 1.25rem); color: var(--ink-2); line-height: 1.6; max-width: 58ch; }
.body      { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.eyebrow   { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); font-family: var(--body); }
.micro     { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-family: var(--body); }
.num       { font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(66px, 8vw, 116px); }
.band--elev { background: var(--bg-elev); }
.band--hair { border-top: 1px solid var(--border); }
.band--tight { padding-block: clamp(44px, 5vw, 68px); }
.band-head { max-width: 820px; margin-bottom: clamp(34px, 4.2vw, 56px); }
.band-head .eyebrow { display: block; margin-bottom: 18px; }
.band-head .lede { margin-top: 20px; }

/* ---------- nav ----------
   .nav is the full-bleed fixed bar (background/blur/border span edge to
   edge, which is correct for a sticky bar). .nav__inner carries the same
   max-width + gutter as .wrap, so the brand mark and CTA line up with the
   page's actual content column instead of drifting out to the true
   viewport edges on wide/ultra-wide screens (founder note 2026-09-01). */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  animation: nav-in .6s cubic-bezier(.12,.23,.5,1) .15s backwards;
  padding-block: 14px;
  transition: background .4s var(--ease-fluid), border-color .4s var(--ease-fluid);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex; align-items: center; gap: 24px;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
.nav.is-stuck { background: rgba(251,250,246,.92); border-bottom-color: var(--border); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--amber-mark); }
.nav__brand svg { width: 20px; height: 20px; fill: currentColor; }
.nav__word { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink); }
.nav__links { display: none; gap: 30px; margin-inline: auto; }
.nav__links a { text-decoration: none; font-size: .9375rem; color: var(--ink-2); transition: color .2s var(--ease-snap); }
.nav__links a:hover { color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 980px) { .nav__links { display: flex; } .nav__right { margin-left: 0; } }

/* over the cinematic plate the chrome inverts to light */
.nav--onplate:not(.is-stuck) .nav__brand { color: var(--amber-mark); }
.nav--onplate:not(.is-stuck) .nav__word { color: #fff; }
.nav--onplate:not(.is-stuck) .nav__links a { color: rgba(255,255,255,.78); }
.nav--onplate:not(.is-stuck) .nav__links a:hover { color: #fff; }


/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 22px; border-radius: var(--r-pill);
  font-family: var(--body); font-size: .9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s var(--ease-snap), background .25s var(--ease-snap), border-color .25s var(--ease-snap), color .25s var(--ease-snap);
}
.btn:active { transform: scale(.975); }
.btn--primary { background: var(--amber-mark); color: var(--on-amber-mark); }
.btn--primary:hover { background: var(--amber-mark-hover); }
.btn--ghost { border-color: var(--border-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* "End the call" state for #preview-btn while a real call is live
   (assets/vapi-live.js toggles this class) — a live hang-up control reads
   as destructive, not as the brand's primary gold action. */
.btn--danger { background: var(--red); color: #fff; }
.btn--danger:hover { filter: brightness(1.08); }
.btn--sm { min-height: 38px; padding: 9px 18px; font-size: .8125rem; }
.btn--onplate { background: #FBFAF6; color: #0A0A0C; }
.btn--onplate:hover { background: #fff; }
.btn--plate-ghost { border-color: rgba(255,255,255,.32); color: #fff; }
.btn--plate-ghost:hover { border-color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }

/* ============================================================
   THE CINEMATIC PLATE
   A lit, atmospheric stage. Depth is built in separate layers so the
   whole thing drifts with parallax and reads as photographed, not drawn:
   sky wash -> horizon glow -> light shafts -> haze -> the mark (with
   rim light + floor reflection) -> particles -> lens vignette -> grain.
   ============================================================ */
.plate {
  position: relative; isolation: isolate; overflow: hidden;
  background: #07070A; color: #fff;
}
.plate__layers { position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none; will-change: transform; }

.pl { position: absolute; inset: 0; }
.pl--wash {
  background:
    radial-gradient(72% 52% at 50% 26%, rgba(224,198,86,.22), transparent 72%),
    radial-gradient(46% 38% at 16% 12%, rgba(13,104,130,.16), transparent 74%),
    radial-gradient(56% 44% at 86% 18%, rgba(224,198,86,.10), transparent 76%),
    linear-gradient(180deg, #0D0D12 0%, #08080B 54%, #050507 100%);
}
/* the horizon: a soft pool of light the mark stands in. Feathered at BOTH
   ends — a one-sided gradient leaves a visible seam where the layer starts. */
.pl--horizon {
  background: radial-gradient(46% 26% at 50% 62%, rgba(224,198,86,.20), rgba(224,198,86,.06) 46%, transparent 76%);
  filter: blur(26px);
}
/* volumetric light shafts raking down from upper-left */
.pl--shafts {
  background: repeating-linear-gradient(
    102deg,
    transparent 0 38px,
    rgba(224,198,86,.055) 38px 46px,
    transparent 46px 96px
  );
  -webkit-mask-image: radial-gradient(62% 58% at 44% 8%, #000 0%, transparent 78%);
          mask-image: radial-gradient(62% 58% at 44% 8%, #000 0%, transparent 78%);
  opacity: .85;
  animation: shaft-drift 26s ease-in-out infinite alternate;
}
@keyframes shaft-drift { from { transform: translate3d(-2%,0,0) rotate(-.4deg); } to { transform: translate3d(2%,1%,0) rotate(.4deg); } }

/* slow conic key light sweeping the stage */
.pl--sweep {
  background: conic-gradient(from 208deg at 50% 32%, transparent 0deg, rgba(224,198,86,.09) 44deg, transparent 100deg);
  animation: sweep 26s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

/* atmospheric haze drifting across */
.pl--haze {
  background:
    radial-gradient(38% 28% at 22% 62%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(44% 30% at 78% 54%, rgba(224,198,86,.05), transparent 72%);
  filter: blur(16px);
  animation: haze 32s ease-in-out infinite alternate;
}
@keyframes haze { from { transform: translate3d(-3%,1%,0) scale(1); } to { transform: translate3d(3%,-1%,0) scale(1.08); } }

/* lens vignette + bottom fall-off that the type sits on */
.pl--vignette {
  z-index: 4;
  background:
    radial-gradient(124% 92% at 50% 32%, transparent 40%, rgba(4,4,6,.76) 100%),
    linear-gradient(180deg, rgba(7,7,10,.66) 0%, transparent 22%, rgba(5,5,8,.34) 48%, rgba(4,4,6,.9) 80%, rgba(4,4,6,.97) 100%);
}
/* faint chromatic edge, the way a real lens fringes */
.pl--fringe {
  z-index: 5; mix-blend-mode: screen; opacity: .5;
  background:
    radial-gradient(120% 90% at 50% 34%, transparent 62%, rgba(13,104,130,.14) 88%, transparent 100%);
}

/* THE VOICE — a continuously flowing waveform field. The hero's subject
   is the thing we sell: live voice. Ribbons undulate forever; speech
   swells travel through them. Never plays-and-stops. */
.hero__ribbons { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }

/* drifting motes — depth cues, very sparse */
.motes { position: absolute; inset: 0; z-index: 3; }
.motes i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,190,.9), rgba(255,240,190,0) 68%);
  animation: mote-rise linear infinite;
}
@keyframes mote-rise {
  from { transform: translate3d(0, 18vh, 0); opacity: 0; }
  12%  { opacity: var(--o, .5); }
  88%  { opacity: var(--o, .5); }
  to   { transform: translate3d(var(--dx, 14px), -22vh, 0); opacity: 0; }
}

/* the mark, as the lit subject */
.plate__stage {
  position: absolute; left: 50%; top: 41%; z-index: 2;
  transform: translate(-50%,-50%);
  width: clamp(300px, 33vw, 500px); aspect-ratio: 278/273;
  pointer-events: none;
}
@keyframes breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .74; } 50% { transform: translate(-50%,-50%) scale(1.06); opacity: 1; } }

.plate__mark { width: 100%; height: 100%; opacity: .34; filter: drop-shadow(0 0 70px rgba(224,198,86,.34)); }
.plate__mark .sheen { mix-blend-mode: overlay; animation: rake 7s var(--ease-fluid) infinite; }
@keyframes rake { 0%,100% { opacity: .26; transform: translateX(-16%); } 50% { opacity: .7; transform: translateX(16%); } }

.plate__stage.is-formed .plate__halo, .pagehead @keyframes nav-in { from { transform: translateY(-60px); opacity: 0; } }
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fill { to { fill-opacity: 1; } }
.nav__brand svg { transition: transform .3s var(--ease-snap); }
.nav__brand:hover svg { transform: translateY(-1px) scale(1.06); }

/* the mark's reflection on the stage floor */

/* the one live element: the voice */
.plate__wave { display: none; }
.plate__wave--off {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 6;
  display: flex; align-items: flex-end; justify-content: center; gap: 5px;
  height: 44px; padding-inline: var(--gutter); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.plate__wave i {
  display: block; width: 3px; border-radius: var(--r-pill) var(--r-pill) 0 0;
  background: linear-gradient(180deg, #22D3EE, rgba(34,211,238,.10));
  animation: wave 1.6s var(--ease-fluid) infinite; opacity: .48;
}
@keyframes wave { 0%,100% { height: 5px; } 50% { height: var(--h,22px); } }

/* ---------- hero (home) ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  padding: 120px var(--gutter) clamp(44px, 6vh, 76px); text-align: center;
}
.hero__inner { position: relative; z-index: 7; max-width: 1280px; width: 100%; }
.hero .eyebrow { color: #F0DC8E; margin-bottom: 26px; display: block; font-size: .6875rem; }
.hero__title {
  color: #fff; text-shadow: 0 2px 44px rgba(0,0,0,.6);
  font-size: clamp(2.7rem, 5.7vw, 5.7rem); line-height: 1.02; letter-spacing: -.038em;
}
.hero__title .em { font-style: italic; font-weight: 400; color: #F0DC8E; }
/* kinetic reveal: each word rises out of its own mask */
.js .hero__title .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(10px); }
.hero__title.play .w { animation: word-up .9s var(--ease-fluid) forwards; animation-delay: calc(var(--i) * 60ms + 300ms); }
@keyframes word-up { to { opacity: 1; transform: none; filter: blur(0); } }
/* the rest of the hero stack follows the headline in one soft wave */
.js .hero__sub, .js .hero__proof, .js .hero__ctas, .js .hero__trust { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.hero.play .hero__sub    { animation: stack-in .8s var(--ease-fluid) 1.15s forwards; }
.hero.play .hero__proof  { animation: stack-in .8s var(--ease-fluid) 1.3s forwards; }
.hero.play .hero__ctas   { animation: stack-in .8s var(--ease-fluid) 1.45s forwards; }
.hero.play .hero__trust  { animation: stack-in .8s var(--ease-fluid) 1.6s forwards; }
@keyframes stack-in { to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero__title .w, .hero__sub, .hero__proof, .hero__ctas, .hero__trust { opacity: 1; transform: none; filter: none; }
}
.hero__sub { margin: 24px auto 0; max-width: 54ch; color: rgba(255,255,255,.92); font-size: clamp(1.1rem, 1.4vw, 1.25rem); text-wrap: balance; text-shadow: 0 1px 22px rgba(0,0,0,.7); }
.hero__proof { margin-top: 36px; }
.hero__proof .n { display: block; font-size: clamp(2rem, 3.3vw, 3rem); color: #fff; text-shadow: 0 1px 24px rgba(0,0,0,.7); }
.hero__proof .c { display: block; margin-top: 6px; color: rgba(255,255,255,.72); }
.hero__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__trust { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: rgba(255,255,255,.8); }
.hero__trust .dot { background: rgba(255,255,255,.4); }

/* ---------- subpage plate header ---------- */
.pagehead { padding: 156px var(--gutter) clamp(64px, 7vw, 100px); }
.pagehead__inner { position: relative; z-index: 7; max-width: 980px; margin-inline: auto; }
.pagehead .eyebrow { color: #F0DC8E; display: block; margin-bottom: 18px; }
.pagehead h1 { color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,.55); font-size: clamp(2.2rem, 4.4vw, 4.2rem); letter-spacing: -.034em; line-height: 1.05; }
.pagehead .lede { color: rgba(255,255,255,.9); margin-top: 22px; }

/* ---------- dots ---------- */
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot--ok { background: var(--teal); }
.dot--live { background: #22D3EE; animation: pulse 1.6s var(--ease-fluid) infinite; }
.is-stuck .dot--live, .band .dot--live { background: var(--cyan); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.25); } }

/* ---------- proof bar ---------- */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
@media (min-width: 860px) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof__n { display: block; font-size: clamp(2.1rem, 3.4vw, 2.9rem); color: var(--ink); }
.proof li:first-child .proof__n { color: var(--amber); }
.proof__l { display: block; margin-top: 10px; color: var(--ink-2); font-size: .975rem; line-height: 1.5; min-height: 2.7em; }
.proof-src { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: space-between; }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .875rem; font-weight: 600; color: var(--cyan); text-decoration: none; }
.link-arrow svg { transition: transform .25s var(--ease-snap); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- partner marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--border); background: var(--bg-elev); padding-block: 24px; }
.marquee__label { text-align: center; margin-bottom: 16px; }
.marquee__mask { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); }
.marquee__track { display: flex; align-items: center; gap: 60px; padding-right: 60px; width: max-content; animation: marquee 46s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__track img { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: opacity .3s var(--ease-fluid), filter .3s var(--ease-fluid); }
.marquee__track img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .g2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .g3 { grid-template-columns: repeat(3,1fr); } .g4 { grid-template-columns: repeat(4,1fr); } }

.card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 24px; transition: border-color .3s var(--ease-fluid), transform .3s var(--ease-fluid); }
.band--elev .card { background: var(--bg); }
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card__idx { font-family: var(--display); font-weight: 700; font-size: .8125rem; color: var(--amber); letter-spacing: .04em; display: block; margin-top: 16px; }
.card h3 { margin-top: 14px; }
.card p { margin-top: 12px; }

.icon { width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--amber); flex: none; }
.icon svg { width: 19px; height: 19px; }
.icon--cyan { color: var(--cyan); }
.icon--teal { color: var(--teal); }
.icon--sm { width: 34px; height: 34px; border-radius: var(--r-sm); }
.icon--sm svg { width: 16px; height: 16px; }

/* leaks / signals / rails */
.leaks li { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--border); }
.leaks li:last-child { border-bottom: 1px solid var(--border); }
.leaks .k { font-family: var(--display); font-weight: 700; font-size: .8125rem; color: var(--ink-3); flex: none; width: 30px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.leaks .t { color: var(--ink); font-size: 1.08rem; }

.rails { margin-top: 26px; column-gap: 46px; }
@media (min-width: 860px) { .rails { columns: 2; } }
.rails li { display: flex; gap: 11px; padding: 9px 0; break-inside: avoid; }
.rails li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-top: 9px; flex: none; }
.rails span { color: var(--ink-2); font-size: .975rem; line-height: 1.6; }

.signals li { display: flex; gap: 14px; padding: 22px 0; border-top: 1px solid var(--border); }

.step__n { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--on-accent); font-family: var(--display); font-weight: 700; font-size: .95rem; }

/* stat tiles */
.tile { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 24px; }
.band--elev .tile { background: var(--bg); }
.tile .v { display: block; font-size: clamp(1.9rem, 2.8vw, 2.5rem); color: var(--ink); }
.tile--hero .v { color: var(--amber); }
.tile .l { display: block; margin-top: 8px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.tile .s { display: block; margin-top: 12px; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }

/* pull quote */
.quote { background: var(--bg-elev); border-block: 1px solid var(--border); padding-block: clamp(54px, 6.5vw, 88px); }
.quote blockquote { max-width: 880px; margin: 0 auto; text-align: center; }
.quote q { font-family: var(--display); font-weight: 500; font-style: italic; font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.26; letter-spacing: -.025em; color: var(--ink); quotes: '\201C' '\201D'; display: block; }
.quote figcaption { margin-top: 26px; text-align: center; }

/* inline pull quote (inside bands / accordions) */
.pq { border-left: 3px solid var(--amber); background: var(--bg-elev); padding: 18px 22px; border-radius: 0 var(--r-md) var(--r-md) 0; }
.band--elev .pq { background: var(--bg); }
.pq p { color: var(--ink); font-size: 1rem; line-height: 1.55; }
.pq footer { margin-top: 12px; }
.verdict-grid { display: grid; gap: 18px; align-items: start; }
@media (min-width: 900px) { .verdict-grid { grid-template-columns: 2fr 1fr; } }

/* ---------- ops dashboard (live-site parity, dark) ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--border); }
@media (min-width: 860px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 18px 20px; border-right: 1px solid var(--border); }
.kpi:last-child { border-right: 0; }
.kpi .n { display: block; font-size: 1.6rem; color: var(--ink); }
.kpi .l { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.kpi .s { display: block; margin-top: 2px; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dash2 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dash2 { grid-template-columns: 1fr 1.2fr; } }
.dash2 > * { padding: 20px; border-bottom: 1px solid var(--border); }
@media (min-width: 900px) { .dash2 > :first-child { border-right: 1px solid var(--border); } }
.panel__t { font-family: var(--body); font-size: .875rem; font-weight: 700; color: var(--ink); }
.panel__n { margin-top: 3px; font-size: .8125rem; color: var(--ink-3); }

.donut-wrap { display: flex; align-items: center; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.donut-legend { display: grid; gap: 9px; }
.donut-legend .li { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; font-size: .875rem; color: var(--ink-2); }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; }
.donut-legend .v { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.shape-note { font-size: .6875rem; color: var(--ink-3); }
.nabar { display: grid; grid-template-columns: 118px 1fr 30px; gap: 10px; align-items: center; margin-top: 9px; }
.nabar .lbl { font-size: .84rem; color: var(--ink-2); text-align: right; }
.nabar .na { font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- dashboard mock ---------- */
.dash { border: 1px solid var(--border-strong); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-elev); }
.band--elev .dash { background: var(--bg); }
.dash__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.dash__bar .b { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); opacity: .6; }
.dash__bar .t { margin-left: 10px; font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.dash__panels { display: grid; gap: 1px; background: var(--border); grid-template-columns: 1fr; }
@media (min-width: 900px) { .dash__panels { grid-template-columns: 1.15fr 1fr 1fr; } }
.dash__panel { background: inherit; padding: 22px 20px; }
.dash .dash__panel { background: var(--bg-elev); }
.band--elev .dash .dash__panel { background: var(--bg); }
.dash__panel h4 { font-family: var(--body); font-size: .8125rem; font-weight: 700; color: var(--ink); }
.dash__panel .note { margin-top: 4px; font-size: .75rem; color: var(--ink-3); line-height: 1.45; }

/* horizontal bar rows */
.bars { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.bars .row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.bars .lbl { font-size: .8rem; color: var(--ink-2); }
.bars .val { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bars .track { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--bg-raised); overflow: hidden; }
.bars .fill { height: 100%; border-radius: var(--r-pill); background: var(--amber); transform-origin: left center; transition: transform 1.1s var(--ease-fluid); }
.js .bars.armed .fill { transform: scaleX(0); }
.js .bars.armed.grown .fill { transform: scaleX(1); }
.bars .fill--cyan { background: var(--cyan); }
.bars .fill.ghost { opacity: .72; }
.bars .fill--neutral { background: #9A9AA4; }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; }
.chip--good { background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal); }
.chip--live { background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan); }
.chip--watch { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }

/* ---------- call explorer (case study) ---------- */
.explorer { border-top: 1px solid var(--border); }
.explorer__row {
  display: grid; grid-template-columns: 1.1fr 1fr .9fr .7fr .7fr; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  font-size: .875rem; align-items: center; color: var(--ink);
}
.explorer__row--head { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--border-strong); }
.explorer__row:last-child { border-bottom: 0; }
.explorer__id { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.explorer__num { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .explorer__row { grid-template-columns: 1fr 1fr .8fr; } .explorer__row > :nth-child(4), .explorer__row > :nth-child(5) { display: none; } }

/* ---------- timeline ---------- */
.timeline { display: grid; gap: 30px 56px; }
@media (min-width: 900px) { .timeline { grid-template-columns: 1fr 1fr; } }
.timeline li { position: relative; padding-left: 26px; border-left: 1px solid var(--border-strong); }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink-3); border: 2px solid var(--bg); }
.band--elev .timeline li::before { border-color: var(--bg-elev); }
.timeline .w { display: block; margin-bottom: 5px; }

/* ---------- accordion ---------- */
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc li { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elev); overflow: hidden; }
.band--elev .acc li { background: var(--bg); }
.acc li:has(> details[open]) { border-color: var(--border-strong); }
.acc summary {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 1.0625rem; color: var(--ink);
  list-style: none; min-height: 44px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--bg-raised); }
.acc summary .chev { margin-left: auto; flex: none; color: var(--cyan); transition: transform .3s var(--ease-fluid); }
.acc details[open] summary .chev { transform: rotate(180deg); }
.acc .panel { padding: 0 20px 20px; }
.acc .panel p + p { margin-top: 12px; }
.acc .panel .pq { margin-top: 16px; }

/* ---------- final CTA ---------- */
.final { text-align: center; }
.final .h2 { max-width: 20ch; margin-inline: auto; }
.final .lede { margin: 22px auto 0; text-align: center; }
.final__ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.final__note { margin-top: 24px; color: var(--ink-3); font-size: .875rem; font-style: italic; }

/* ---------- try-an-agent band: the call studio ---------- */
.try__head { text-align: center; }
.try__badges { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center; }
.try__badges li { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 500; color: var(--ink); }
.try__points { display: grid; gap: 9px; text-align: left; }
.try__points li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.try__points .dot { margin-top: 7px; }
.try__ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.studio {
  margin-top: 44px; display: grid; border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); background: var(--bg); overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(23,23,27,.35);
}
@media (min-width: 1020px) { .studio { grid-template-columns: 1fr 1.15fr; } }
.studio__left { padding: clamp(26px, 3.4vw, 44px); }
.studio__cases { margin-top: 22px; display: grid; gap: 9px; }
.case {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); cursor: pointer; text-align: left; font-family: var(--body);
  transition: border-color .25s var(--ease-snap), background .25s var(--ease-snap), transform .15s var(--ease-snap);
}
.case:hover { border-color: var(--border-strong); }
.case:active { transform: scale(.99); }
/* can't swap which assistant you're talking to mid-call (assets/vapi-live.js
   disables these while a real call is live/connecting) */
.case:disabled { opacity: .5; cursor: not-allowed; }
.case:disabled:hover { border-color: var(--border); }
.case.is-on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.case__label { font-weight: 700; font-size: .9rem; color: var(--ink); }
.case__agent { font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.case.is-on .case__agent { color: var(--amber); }

/* the call side is a dark stage — the product lives on the plate. Kept as
   min-height (not a fixed height) so the grid's default row-stretch still
   matches .studio__left's natural height exactly, whatever that is — a
   fixed height here caused a visible gap under a shorter right column
   (screenshot, 2026-09-01). The transcript's own scroll cap lives directly
   on .studio__feed below instead, so it's independent of how tall this
   card ends up. */
.studio__right {
  background: #101015; color: #EDEDF2; display: flex; flex-direction: column;
  padding: 20px 22px 18px; min-height: 480px; position: relative;
}
.studio__chrome { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.studio__chrome .dot { background: rgba(255,255,255,.28); }
.studio__chrome .dot.is-live { background: #22D3EE; animation: pulse 1.6s var(--ease-fluid) infinite; }
.studio__title { font-size: .8125rem; font-weight: 600; color: #fff; }
.studio__timer { margin-left: auto; font-size: .8125rem; color: rgba(255,255,255,.55); }

.studio__wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 54px; margin: 14px 0 6px; }
.studio__wave i {
  display: block; width: 3px; height: 4px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #22D3EE, rgba(34,211,238,.25));
  transition: height .12s linear; opacity: .9;
}

/* flex:1 + overflow-y:auto here only actually bounds/scrolls once
   .studio__right has a real, definite pixel height — which is why
   assets/site.js sets that height explicitly (JS-measured to match
   .studio__left) rather than trusting CSS Grid's implicit row-stretch. A
   flat max-height here instead (tried 2026-09-01) caused the opposite bug:
   it always rendered at the cap even when a short conversation didn't
   need it, leaving dead black space below the last bubble. */
.studio__feed { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 4px 12px; scrollbar-width: thin; }
.studio__hint { margin: auto; max-width: 40ch; text-align: center; font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.55; }
/* the post-call status line (assets/vapi-live.js) — deliberately NOT
   .studio__hint's flex auto-margin centering, which is built for that
   element being the sole visible content of an empty feed. Reusing it here
   fought with the transcript bubbles still on screen from the call that
   just ended (hint floated to vertical-center, shoving the last bubble down
   past the fold — screenshot, 2026-09-01). This just sits in normal flow
   right after the last bubble instead. */
.studio__ended { margin: 18px 4px 4px; max-width: 40ch; margin-inline: auto; text-align: center; font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.55; }
.bubble {
  max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: .875rem; line-height: 1.5;
  opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease-fluid), transform .4s var(--ease-fluid);
}
.bubble.in { opacity: 1; transform: none; }
.bubble.ghost { opacity: .38; transform: none; transition: none; }
.bubble--agent { align-self: flex-start; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.2); color: #E8F7FA; border-bottom-left-radius: 4px; }
.bubble--cust { align-self: flex-end; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #EDEDF2; border-bottom-right-radius: 4px; }
.bubble .who { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; opacity: .6; }
.bubble.typing::after { content: "▍"; color: #22D3EE; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.studio__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.stile { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 10px 12px; }
.stile .micro { color: rgba(255,255,255,.58); }
.stile__v { display: block; margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: .95rem; color: #F0DC8E; font-variant-numeric: tabular-nums; }
.studio__tiles .stile { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-fluid), transform .5s var(--ease-fluid); }
.studio__tiles.in .stile { opacity: 1; transform: none; }
.studio__tiles.in .stile:nth-child(2) { transition-delay: .12s; }
.studio__tiles.in .stile:nth-child(3) { transition-delay: .24s; }
.studio__tiles.ghost .stile { opacity: .45; transform: none; }
.studio__tiles.ghost .stile__v { color: rgba(255,255,255,.4); }

.studio__note { margin-top: 12px; color: rgba(255,255,255,.55); text-align: center; font-size: .75rem; line-height: 1.5; font-family: var(--body); }

/* ---------- footer ---------- */
.foot { background: var(--bg-elev); border-top: 1px solid var(--border); padding-block: clamp(52px,6vw,80px) 34px; }
.foot__top { display: grid; gap: 40px; }
@media (min-width: 880px) { .foot__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }
.foot h4 { font-family: var(--body); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.foot a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-2); text-decoration: none; font-size: .95rem; transition: color .2s var(--ease-snap); }
.foot a:hover { color: var(--ink); }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--amber-mark); }
.foot__brand svg { width: 22px; height: 22px; fill: currentColor; }
.foot__brand span { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.foot__about { font-size: .9375rem; max-width: 46ch; }
.foot__bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: var(--ink-3); font-size: .8125rem; }

/* ---------- widescreen ---------- */
@media (min-width: 1800px) {
  :root { --maxw: 1560px; }
  .band { padding-block: clamp(84px, 8vw, 150px); }
  .band-head { max-width: 920px; }
  .lede { max-width: 62ch; }
  .pagehead__inner { max-width: 1120px; }
}

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-fluid), transform .7s var(--ease-fluid); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
  .plate__layers { transform: none !important; }
}

/* ---------- phone-call modal ----------
   "Receive a phone call instead" (assets/vapi-live.js) — new UI, needed to
   actually place the outbound call rather than link out to a calendar. Uses
   the same tokens/type/radii as the rest of the page so it reads as native,
   not a bolted-on component; themes automatically via --bg/--ink/--border. */
.phone-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(10,10,12,.55);
}
.phone-modal[hidden] { display: none; }
.phone-modal__card {
  position: relative; width: 100%; max-width: 520px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.45);
  padding: 32px;
}
.phone-modal__close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color .2s var(--ease-snap), border-color .2s var(--ease-snap);
}
.phone-modal__close:hover { color: var(--ink); border-color: var(--cyan); }

.field { margin-top: 20px; }
.field label { display: block; font-family: var(--body); font-weight: 600; font-size: .9375rem; color: var(--ink); }
.field input, .field select {
  margin-top: 8px; width: 100%; height: 46px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: .9375rem;
}
.field input:focus, .field select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.field__hint { margin-top: 6px; font-size: .8125rem; color: var(--ink-3); }

.phone-modal__consent {
  margin-top: 20px; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: var(--r-md); border: 1px solid var(--border);
  cursor: pointer; font-size: .8125rem; color: var(--ink-2); line-height: 1.5;
}
.phone-modal__consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--amber-mark); }

.phone-modal__status { margin-top: 14px; font-size: .875rem; color: var(--ink-2); min-height: 1.2em; }
.phone-modal__status.is-error { color: var(--red); }
.phone-modal__status.is-success { color: var(--teal); }