/* Product pages (home, pricing). Editorial system: warm paper, Newsreader display, Plex Sans text, Plex Mono labels,
   hairline rules instead of card shadows, grainy night panels for the product set pieces.
   Loaded after styles.css, which still supplies the lab-demo video player. */

:root {
  --paper: #f3f0e7;
  --paper-2: #ebe7db;
  --paper-3: #f8f6f0;
  --ink: #1b1a17;
  --ink-2: #46443e;
  --muted: #7a776d;
  --rule: rgba(27, 26, 23, 0.13);
  --rule-2: rgba(27, 26, 23, 0.26);
  --accent: #4c3a91;
  --accent-soft: rgba(76, 58, 145, 0.08);
  --night: #181614;
  --night-2: #1f1c19;
  --night-3: #26231f;
  --night-rule: rgba(239, 232, 220, 0.1);
  --on-night: #efe8dc;
  --on-night-2: #9b9183;
  --lilac: #d6ba84;          /* the night accent: champagne (Noir) */
  --miss: #d0835a;
  --wrong: #e5596a;
  --display: "Newsreader", Georgia, serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1280px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.product { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
.product :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd, dt) { margin: 0; }
.product :where(h1, h2, h3, h4) { font-family: var(--display); font-weight: 400; }
.product :where(ul, ol) { padding: 0; list-style: none; }
:where(.product a) { color: inherit; }
.product :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.product ::selection { background: rgba(76, 58, 145, 0.18); }

.wrap { width: min(var(--wrap), calc(100% - 64px)); margin-inline: auto; }
@media (max-width: 700px) { .wrap { width: calc(100% - 36px); } }

/* ---------- type ---------- */
.display-xl, .h1 {
  font-family: var(--display);
  font-size: clamp(50px, 7.2vw, 108px);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.display-l, .h2 {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}
.product em { font-style: italic; }
.lead { max-width: 58ch; color: var(--ink-2); font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.5; text-wrap: pretty; }

.section { padding-block: clamp(88px, 11vw, 160px); }
.section.tight { padding-top: 0; }
.wash-stone { background: linear-gradient(180deg, rgba(234, 229, 217, 0) 0%, #eae5d9 16%, #eae5d9 84%, rgba(234, 229, 217, 0) 100%); }
.wash-haze { background: radial-gradient(42% 60% at 12% 35%, rgba(184, 172, 242, 0.2), transparent 70%), radial-gradient(42% 60% at 90% 65%, rgba(236, 196, 170, 0.24), transparent 70%); }

/* Section header: a hairline, the label at left, the headline in the main column. */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 18px; margin-bottom: clamp(44px, 6vw, 80px); }
.sec-head > .label { grid-column: 1 / span 3; padding-top: 6px; }
.sec-head > .display-l, .sec-head > .h2 { grid-column: 1 / span 7; }
.sec-head > .lead { grid-column: 8 / span 5; grid-row: 1; align-self: end; }
.sec-head > .sec-aside { grid-column: 4 / span 9; }
@media (max-width: 860px) {
  .sec-head > .label, .sec-head > .display-l, .sec-head > .h2, .sec-head > .lead, .sec-head > .sec-aside { grid-column: 1 / -1; grid-row: auto; }
}



/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 6vh, 72px) 0 0; }
.hero-haze { position: absolute; inset: -10% -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 30% 38%, rgba(184, 172, 242, 0.42), transparent 72%),
    radial-gradient(34% 40% at 72% 30%, rgba(236, 196, 170, 0.45), transparent 72%),
    radial-gradient(40% 50% at 52% 70%, rgba(214, 206, 240, 0.35), transparent 75%);
}
.hero-haze::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.22; mix-blend-mode: multiply; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 30px; text-align: center; }
.announce { display: inline-block; max-width: 100%; padding: 9px 16px; border: 1px solid var(--rule-2); background: rgba(248, 246, 240, 0.55); font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: border-color 180ms, background 180ms; }
.announce:hover { border-color: var(--ink); background: var(--paper-3); }
.announce b { margin-right: 10px; font-weight: 500; color: var(--accent); }
.announce span { margin-left: 8px; }
.hero .display-xl { max-width: 13.5ch; }
.hero .lead { max-width: 54ch; margin-inline: auto; text-align: center; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-note { margin-top: -12px; font: 400 14px/1.3 var(--sans); color: var(--muted); }
.hero-wave { display: block; width: 100%; height: clamp(120px, 15vw, 200px); margin-top: clamp(28px, 4vw, 48px); }

.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.proof > * { display: grid; align-content: start; gap: 8px; padding: 26px 24px 30px 0; text-decoration: none; }
.proof > * + * { padding-left: 24px; border-left: 1px solid var(--rule); }
.proof b { font: 400 clamp(36px, 3.6vw, 52px)/1 var(--display); letter-spacing: -0.03em; font-variation-settings: "opsz" 72; color: var(--ink); transition: color 160ms; }
.proof span { max-width: 26ch; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
a.proof-item:hover b { color: var(--accent); }
@media (max-width: 760px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof > :nth-child(3) { padding-left: 0; border-left: 0; }
  .proof > :nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

/* ---------- night panels (shared) ---------- */
.night { position: relative; isolation: isolate; background: radial-gradient(70% 55% at 50% -5%, rgba(214, 186, 132, 0.09), transparent 62%), var(--night); color: var(--on-night); }
.night::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: 0.07; }
.night .label { color: var(--on-night-2); }
.night .label.dot::before { background: var(--lilac); }
.night .lead { color: var(--on-night-2); }

/* ---------- listening demo ----------
   Every color comes from the --d-* tokens, so a theme is just a block of tokens.
   data-theme="night" (default), "ivory", "midnight". The waveform canvas reads the same tokens. */
.demo-section { padding: clamp(88px, 10vw, 140px) 0 clamp(80px, 9vw, 128px); }
.demo {
  --d-bg: #131210;
  --d-glow: none;
  --d-grain: 0.07;
  --d-border: transparent;
  --d-shadow: 0 60px 120px -60px rgba(27, 26, 23, 0.55);
  --d-text: #f1eee6;
  --d-text-2: #a8a49a;
  --d-dim: rgba(241, 238, 230, 0.42);
  --d-rule: rgba(241, 238, 230, 0.11);
  --d-accent: #b8acf2;
  --d-accent-glow: none;
  --d-miss: #e07a3f;
  --d-wrong: #e5596a;
  --d-bar: rgba(241, 238, 230, 0.16);
  --d-bar-hi: rgba(241, 238, 230, 0.42);
  --d-wave: rgba(241, 238, 230, 0.32);
  --d-wave-on: rgba(241, 238, 230, 0.95);
  --d-overlap: rgba(224, 122, 63, 0.12);
  --d-overlap-line: rgba(224, 122, 63, 0.7);
  --d-lane: rgba(241, 238, 230, 0.05);
  --d-head: #f1eee6;
  --d-chip-ink: #131210;
  --d-play-border: rgba(241, 238, 230, 0.35);
  --d-play-fill: #f1eee6;
  --d-play-ink: #131210;
  --d-spk-1: #b8acf2; --d-spk-2: #93cbb8; --d-spk-3: #e5c07f; --d-spk-4: #e3a1ae;
  --d-spk-5: #9fbde0; --d-spk-6: #c8d08d; --d-spk-7: #e7a77f; --d-spk-8: #cfa6dd;
  --d-panel: transparent;
  --d-lane-h: 4;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--d-border);
  border-radius: 4px;
  background-color: var(--d-bg);
  background-image: var(--d-glow);
  box-shadow: var(--d-shadow);
  color: var(--d-text);
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.demo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: var(--d-grain); }

/* Gallery: warm stone paper, espresso ink, earth pigments; a printed catalogue */
.demo[data-theme="gallery"] {
  --d-bg: #e9e3d8;
  --d-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 45%);
  --d-grain: 0.12;
  --d-border: rgba(58, 46, 34, 0.12);
  --d-shadow: 0 50px 90px -60px rgba(70, 52, 34, 0.45);
  --d-text: #2b241d;
  --d-text-2: #877b6b;
  --d-dim: rgba(43, 36, 29, 0.34);
  --d-rule: rgba(58, 46, 34, 0.13);
  --d-accent: #4c3a91;
  --d-miss: #a9603a;
  --d-wrong: #9c3340;
  --d-bar: rgba(58, 46, 34, 0.2);
  --d-bar-hi: rgba(58, 46, 34, 0.45);
  --d-wave: rgba(43, 36, 29, 0.2);
  --d-wave-on: rgba(43, 36, 29, 0.82);
  --d-overlap: rgba(169, 96, 58, 0.1);
  --d-overlap-line: rgba(169, 96, 58, 0.45);
  --d-lane: rgba(58, 46, 34, 0.06);
  --d-lane-h: 2;
  --d-head: #2b241d;
  --d-play-border: rgba(43, 36, 29, 0.3);
  --d-play-fill: #2b241d;
  --d-play-ink: #e9e3d8;
  --d-panel: rgba(255, 255, 255, 0.22);
  --d-spk-1: #6a5b97; --d-spk-2: #5f846c; --d-spk-3: #a7823d; --d-spk-4: #a86352;
  --d-spk-5: #57728f; --d-spk-6: #7f8146; --d-spk-7: #93617c; --d-spk-8: #75604a;
}

/* Dusk: a soft peach-to-lilac haze behind frosted panels, plum ink */
.demo[data-theme="dusk"] {
  --d-bg: #f1e8e3;
  --d-glow: radial-gradient(60% 85% at 8% 0%, rgba(247, 196, 168, 0.85), transparent 66%), radial-gradient(55% 75% at 95% 8%, rgba(200, 182, 242, 0.85), transparent 66%), radial-gradient(70% 80% at 55% 115%, rgba(250, 216, 196, 0.7), transparent 70%);
  --d-grain: 0.16;
  --d-border: rgba(255, 255, 255, 0.7);
  --d-shadow: 0 60px 110px -60px rgba(130, 84, 110, 0.5);
  --d-text: #2c2231;
  --d-text-2: #7f6c7b;
  --d-dim: rgba(44, 34, 49, 0.36);
  --d-rule: rgba(44, 34, 49, 0.1);
  --d-accent: #563c9e;
  --d-miss: #bb5f37;
  --d-wrong: #b0324c;
  --d-bar: rgba(44, 34, 49, 0.16);
  --d-bar-hi: rgba(44, 34, 49, 0.38);
  --d-wave: rgba(44, 34, 49, 0.2);
  --d-wave-on: rgba(44, 34, 49, 0.82);
  --d-overlap: rgba(255, 255, 255, 0.4);
  --d-overlap-line: rgba(187, 95, 55, 0.5);
  --d-lane: rgba(44, 34, 49, 0.06);
  --d-lane-h: 2;
  --d-head: #563c9e;
  --d-play-border: rgba(44, 34, 49, 0.28);
  --d-play-fill: #2c2231;
  --d-play-ink: #f6eee9;
  --d-panel: rgba(255, 255, 255, 0.42);
  --d-spk-1: #6b54b0; --d-spk-2: #3f8471; --d-spk-3: #b98428; --d-spk-4: #bd5e4b;
  --d-spk-5: #4a73a3; --d-spk-6: #7a8a36; --d-spk-7: #a65686; --d-spk-8: #8b6847;
}

/* Noir: espresso black, ivory serif, a single champagne accent; quiet luxury */
.demo[data-theme="noir"] {
  --d-bg: #181614;
  --d-glow: radial-gradient(70% 55% at 50% -5%, rgba(214, 186, 132, 0.12), transparent 62%);
  --d-grain: 0.07;
  --d-border: rgba(214, 186, 132, 0.18);
  --d-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.6);
  --d-text: #efe8dc;
  --d-text-2: #9b9183;
  --d-dim: rgba(239, 232, 220, 0.34);
  --d-rule: rgba(239, 232, 220, 0.1);
  --d-accent: #d6ba84;
  --d-miss: #cf8a5c;
  --d-wrong: #d9727c;
  --d-bar: rgba(239, 232, 220, 0.2);
  --d-bar-hi: rgba(239, 232, 220, 0.45);
  --d-wave: rgba(239, 232, 220, 0.22);
  --d-wave-on: #efe8dc;
  --d-overlap: rgba(214, 186, 132, 0.08);
  --d-overlap-line: rgba(214, 186, 132, 0.45);
  --d-lane: rgba(239, 232, 220, 0.05);
  --d-lane-h: 2;
  --d-head: #d6ba84;
  --d-play-border: rgba(214, 186, 132, 0.5);
  --d-play-fill: #d6ba84;
  --d-play-ink: #181614;
  --d-spk-1: #b9a9d8; --d-spk-2: #9fc2b1; --d-spk-3: #d8bc8c; --d-spk-4: #d6a59b;
  --d-spk-5: #a2b6cf; --d-spk-6: #c3c594; --d-spk-7: #c9a2bd; --d-spk-8: #b9a68e;
}

/* The refined themes trade the technical details for editorial ones: serif transcripts,
   circled speaker numerals, sentence-case labels, slim stems instead of blocks. */
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-meta,
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-lanes-note,
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-col-score,
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-board-head,
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-time {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none;
}
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-clip { font: italic 400 17px/1.2 var(--display); letter-spacing: -0.005em; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-turn { grid-template-columns: 30px 1fr; font: 400 17.5px/1.58 var(--display); letter-spacing: -0.003em; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-spk {
  width: 24px; height: 24px; margin-top: 2px; border: 1px solid var(--c); border-radius: 50%;
  background: transparent; color: var(--c); font: italic 400 13px/1 var(--display);
}
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-col-name .dot { border-radius: 50%; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-words .w.now { text-decoration-thickness: 1px; text-underline-offset: 6px; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-words .sub,
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-words .ins { font-style: italic; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-words .del { font-style: italic; text-decoration-thickness: 1px; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-bars { gap: 18px; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-bar .col { width: 3px; border-radius: 2px; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-bar .n { font-size: 24px; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-foot .lg span::before { border-radius: 50%; }
.demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-lanes-note i { border-radius: 2px; }
.demo:is([data-theme="gallery"], [data-theme="dusk"]) .demo-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23776a62' stroke-width='1.2'/%3E%3C/svg%3E"); }
.demo[data-theme="dusk"] .demo-cols, .demo[data-theme="dusk"] .demo-board { -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); }
.demo[data-theme="dusk"]::before { mix-blend-mode: soft-light; }

.demo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 22px; border-bottom: 1px solid var(--d-rule); }
.demo-clips { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.demo-clip { position: relative; padding: 6px 0; border: 0; background: none; color: var(--d-text-2); font: 14px/1.2 var(--sans); cursor: pointer; transition: color 160ms; }
.demo-clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--d-text); transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; }
.demo-clip:hover, .demo-clip[aria-selected="true"] { color: var(--d-text); }
.demo-clip[aria-selected="true"]::after { transform: scaleX(1); }
.demo-meta { font: 500 13px/1.3 var(--sans); color: var(--d-text-2); }
.demo-wave { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 22px; }
.demo-play { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--d-play-border); border-radius: 50%; background: transparent; color: var(--d-text); cursor: pointer; transition: background 180ms, color 180ms, border-color 180ms; }
.demo-play:hover, .demo-play[aria-pressed="true"] { border-color: var(--d-play-fill); background: var(--d-play-fill); color: var(--d-play-ink); }
.demo-play svg { width: 18px; height: 18px; }
.demo-play .i-pause { display: none; }
.demo-play[aria-pressed="true"] .i-play { display: none; }
.demo-play[aria-pressed="true"] .i-pause { display: block; }
.demo-track { position: relative; height: 96px; cursor: pointer; touch-action: none; }
.demo-track canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-time { min-width: 88px; font: 500 13px/1 var(--sans); text-align: right; color: var(--d-text-2); font-variant-numeric: tabular-nums; }
.demo-lanes-note { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 22px 18px 98px; font: 500 13px/1.4 var(--sans); color: var(--d-text-2); }
.demo-lanes-note i { display: inline-block; width: 18px; height: 7px; margin-right: 8px; vertical-align: 0; background: repeating-linear-gradient(135deg, var(--d-overlap-line) 0 2px, transparent 2px 5px); }
.demo-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--d-rule); background: var(--d-panel); }
.demo-col { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.demo-col + .demo-col { border-left: 1px solid var(--d-rule); }
.demo-col-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 14px 22px; border-bottom: 1px solid var(--d-rule); }
.demo-col-name { display: flex; align-items: center; gap: 10px; min-width: 0; font: 400 21px/1.1 var(--display); letter-spacing: -0.01em; }
.demo-col-name .dot { flex: none; width: 7px; height: 7px; background: var(--d-text-2); }
.demo-col.us .dot { background: var(--d-accent); box-shadow: var(--d-accent-glow); }
.demo-col-score { font: 500 13px/1.3 var(--sans); color: var(--d-text-2); white-space: nowrap; }
.demo-col-score b { font-weight: 500; color: var(--d-text); }
.demo-col.us .demo-col-score b { color: var(--d-accent); }
.demo-select { max-width: 280px; padding: 2px 26px 4px 0; border: 0; border-bottom: 1px solid var(--d-play-border); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center; color: var(--d-text); font: 400 21px/1.1 var(--display); letter-spacing: -0.01em; appearance: none; cursor: pointer; }
.demo-select option { color: #1b1a17; font-family: var(--sans); font-size: 14px; }
.demo-text { height: clamp(170px, calc(100svh - 580px), 320px); overflow-y: auto; padding: 16px 22px 22px; scrollbar-width: thin; scrollbar-color: var(--d-bar) transparent; }
.demo-turn { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 7px 0; font-size: 15.5px; line-height: 1.62; }
.demo-spk { display: inline-grid; place-items: center; height: 21px; margin-top: 3px; border-radius: 2px; background: var(--c); font: 600 13px/1 var(--sans); color: var(--d-chip-ink); }
.demo-spk.invented { border: 1px dashed var(--d-wrong); background: transparent !important; color: var(--d-wrong); }
.demo-words { color: var(--d-dim); }
.demo-words .w { transition: color 140ms; }
.demo-words .w.on { color: var(--d-text); }
.demo-words .w.now { color: var(--d-text); text-decoration: underline; text-decoration-color: var(--d-accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.demo-words .sub, .demo-words .ins { color: var(--d-wrong) !important; }
.demo-words .del { color: var(--d-miss) !important; text-decoration: line-through; text-decoration-thickness: 1px; }
.demo-text.idle .demo-words { color: var(--d-text); }
.demo-board { padding: 14px 22px 16px; border-top: 1px solid var(--d-rule); background: var(--d-panel); }
.demo-board-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; font: 500 13px/1.4 var(--sans); color: var(--d-text-2); }
.demo-board-head b { font-weight: 500; color: var(--d-text); }
.demo-bars { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; align-items: end; height: 86px; }
.demo-bar { display: grid; grid-template-rows: 1fr auto auto; gap: 7px; height: 100%; padding: 0; border: 0; background: none; color: var(--d-text-2); font: 12px/1.2 var(--sans); text-align: left; cursor: pointer; }
.demo-bar .col { align-self: end; width: 100%; min-height: 2px; background: var(--d-bar); transition: height 600ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms; }
.demo-bar .n { font: 400 21px/1 var(--display); color: var(--d-text); font-variant-numeric: tabular-nums; }
.demo-bar:hover .col, .demo-bar.sel .col { background: var(--d-bar-hi); }
.demo-bar.sel .nm { color: var(--d-text); }
.demo-bar.us { cursor: default; }
.demo-bar.us .col { background: var(--d-accent); box-shadow: var(--d-accent-glow); }
.demo-bar.us .n, .demo-bar.us .nm { color: var(--d-accent); }
.demo-bar .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 14px 22px; border-top: 1px solid var(--d-rule); font-size: 12.5px; color: var(--d-text-2); }
.demo-foot .lg { display: flex; flex-wrap: wrap; gap: 18px; }
.demo-foot .lg span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 0; }
.demo-foot .lg .lw::before { background: var(--d-wrong); }
.demo-foot .lg .lm::before { background: var(--d-miss); }
.demo-foot .lg .lo::before { width: 16px; height: 7px; background: repeating-linear-gradient(135deg, var(--d-overlap-line) 0 2px, transparent 2px 5px); }
.demo-foot .lg .ll::before { width: 16px; height: 2px; vertical-align: 3px; background: linear-gradient(90deg, var(--d-spk-1) 0 45%, transparent 45% 55%, var(--d-spk-2) 55%); }
.demo-foot a { color: var(--d-text); text-underline-offset: 3px; }
.demo-fallback { padding: 64px 24px; text-align: center; color: var(--d-text-2); }

@media (max-width: 760px) {
  .demo-clips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -22px; padding-right: 22px; }
  .demo-clip { flex: none; }
  .demo-cols { grid-template-columns: minmax(0, 1fr); }
  .demo-col + .demo-col { border-left: 0; border-top: 1px solid var(--d-rule); }
  .demo-col-head { flex-wrap: wrap; }
  .demo-col-name { flex: 1 1 100%; min-width: 0; }
  .demo-select { width: 100%; min-width: 0; max-width: 100%; font-size: 18px; }
  .demo-text { height: 240px; }
  .demo-wave { grid-template-columns: auto minmax(0, 1fr); }
  .demo-time { grid-column: 1 / -1; text-align: left; }
  .demo-lanes-note { padding-left: 22px; }
  .demo-bars { gap: 5px; height: 92px; }
  .demo-bar .n { font-size: 15px; }
  .demo-bar .nm { font-size: 9.5px; }
}

/* ---------- compared-with line ---------- */
.versus { display: grid; justify-items: center; gap: 18px; padding: clamp(56px, 7vw, 88px) 0 0; text-align: center; }
.demo-section + .section { padding-top: clamp(64px, 7vw, 104px); }
.versus ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 34px; max-width: 980px; font: 400 clamp(22px, 2.2vw, 30px)/1.25 var(--display); letter-spacing: -0.015em; color: #a39f93; }

/* ---------- thesis ---------- */
.thesis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.thesis-copy { position: sticky; top: 112px; grid-column: 1 / span 5; display: grid; gap: 24px; }
.thesis-copy p { max-width: 50ch; font-size: 17px; color: var(--ink-2); }
.thesis-chart { grid-column: 7 / span 6; }
.samples { display: grid; margin-top: 8px; border-top: 1px solid var(--rule); }
.sample { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sample .pb { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-2); border-radius: 50%; transition: background 160ms, color 160ms, border-color 160ms; }
.sample:hover .pb, .sample[aria-pressed="true"] .pb { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sample .pb svg { width: 13px; height: 13px; }
.sample b { display: block; font: 400 21px/1.2 var(--display); letter-spacing: -0.01em; }
.sample span { font-size: 14px; color: var(--muted); }
.sample .tag { font: 500 13px/1 var(--sans); color: var(--muted); }
.sample .eq { display: none; gap: 2px; align-items: end; height: 13px; }
.sample .eq i { width: 2px; background: currentColor; animation: eq 900ms ease-in-out infinite; }
.sample .eq i:nth-child(2) { animation-delay: -300ms; }
.sample .eq i:nth-child(3) { animation-delay: -600ms; }
.sample[aria-pressed="true"] .pb svg { display: none; }
.sample[aria-pressed="true"] .eq { display: flex; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 13px; } }
@media (max-width: 960px) { .thesis-copy, .thesis-chart { grid-column: 1 / -1; } .thesis-copy { position: static; } }

.frame { border: 1px solid var(--rule); background: var(--paper-3); }
.chart-card { padding: clamp(22px, 3vw, 36px); }
.chart-title { font: 400 26px/1.15 var(--display); letter-spacing: -0.015em; }
.chart-sub { max-width: 60ch; margin-top: 8px; font-size: 14px; color: var(--muted); }
.chart-note { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--muted); }
.chart-note a { color: var(--ink-2); }

.dumbbell { display: grid; gap: 2px; margin-top: 28px; }
.db-axis, .db-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; }
.db-axis { margin-bottom: 6px; }
.db-scale { position: relative; height: 14px; font: 500 13px/1 var(--sans); color: var(--muted); }
.db-scale span { position: absolute; transform: translateX(-50%); }
.db-row { height: 36px; }
.db-name { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.db-row.us .db-name { color: var(--accent); font-weight: 600; }
.db-track { position: relative; height: 100%; border-bottom: 1px solid rgba(27, 26, 23, 0.06); background: linear-gradient(90deg, rgba(27, 26, 23, 0.08) 1px, transparent 1px) 0 0 / 14.2857% 100%; }
.db-line { position: absolute; top: 50%; height: 1px; background: rgba(27, 26, 23, 0.35); transform-origin: left; transition: width 90ms linear; }
.db-dot { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; }
.db-dot.clean { border: 1px solid var(--ink-2); background: var(--paper-3); }
.db-dot.real { background: var(--ink-2); transition: left 90ms linear; }
.db-val { position: absolute; top: 50%; margin-left: 12px; transform: translateY(-50%); font: 500 13px/1 var(--sans); color: var(--muted); transition: left 90ms linear; }
.db-row.us .db-line { height: 2px; background: var(--accent); }
.db-row.us .db-dot.clean { border-color: var(--accent); }
.db-row.us .db-dot.real { background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.db-row.us .db-val { color: var(--accent); }
.db-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.db-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 0; }
.db-legend .c::before { border: 1px solid var(--ink-2); background: var(--paper-3); }
.db-legend .r::before { background: var(--ink-2); }
.pre .db-line { transform: scaleX(0.02); }

/* ---------- night band: what other models miss ---------- */
.band { padding-block: clamp(96px, 12vw, 168px); }
.band-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: center; }
.band-copy { grid-column: 1 / span 5; display: grid; gap: 24px; }
.band-copy .display-l em { color: var(--miss); }
.band-viz { grid-column: 7 / span 6; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 22px; border-top: 1px solid var(--night-rule); }
.stat-pair b { display: block; font: 400 clamp(32px, 3.2vw, 48px)/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.stat-pair b.acc { color: var(--lilac); }
.stat-pair span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--on-night-2); }
.miss-grid { display: grid; }
.miss-row { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--night-rule); }
.miss-row:first-child { border-top: 1px solid var(--night-rule); }
.miss-name { font-size: 12.5px; color: var(--on-night-2); }
.miss-name b { display: block; font: 400 18px/1.2 var(--display); color: var(--on-night); }
.miss-row.us .miss-name b { color: var(--lilac); }
.miss-words { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); gap: 2px; }
.miss-words i { height: 18px; background: rgba(241, 238, 230, 0.26); transition: background 160ms ease, box-shadow 160ms ease; }
.miss-row.us .miss-words i { background: var(--lilac); }
.miss-words i.m { background: transparent; box-shadow: inset 0 0 0 1px var(--miss); }
.pre .miss-words i.m { background: rgba(241, 238, 230, 0.26); box-shadow: none; }
.pre .miss-row.us .miss-words i.m { background: var(--lilac); }
.miss-pct { font: 400 20px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.miss-row.us .miss-pct { color: var(--lilac); }
.miss-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font: 500 13px/1.4 var(--sans); color: var(--on-night-2); }
.miss-legend span::before { content: ""; display: inline-block; width: 8px; height: 13px; margin-right: 10px; vertical-align: -2px; background: rgba(241, 238, 230, 0.26); }
.miss-legend .m::before { background: transparent; box-shadow: inset 0 0 0 1px var(--miss); }
@media (max-width: 960px) { .band-copy, .band-viz { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .miss-row { grid-template-columns: 1fr 52px; gap: 8px 12px; }
  .miss-name { grid-column: 1 / -1; }
  .miss-words { grid-column: 1; gap: 1px; }
  .miss-words i { height: 14px; }
}

/* ---------- models: editorial rows ---------- */
.mrows { border-top: 1px solid var(--rule-2); }
.mrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 10px; align-items: baseline; padding: 30px 0 32px; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; transition: background 220ms ease; }
.mrow:hover { background: linear-gradient(90deg, transparent, rgba(76, 58, 145, 0.045) 30%, rgba(76, 58, 145, 0.045) 70%, transparent); }
.mrow-kind { grid-column: 1 / span 3; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.mrow-kind code { display: block; margin-top: 6px; font: 400 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.mrow-name { grid-column: 4 / span 3; font: 400 clamp(30px, 2.9vw, 42px)/1.02 var(--display); letter-spacing: -0.025em; font-variation-settings: "opsz" 72; transition: color 180ms; }
.mrow-desc { grid-column: 7 / span 3; font-size: 15px; color: var(--ink-2); }
.mrow-stat { grid-column: 10 / span 2; font-size: 13px; color: var(--muted); }
.mrow-stat b { display: block; margin-bottom: 4px; font: 400 24px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.mrow-go { grid-column: 12; justify-self: end; font: 500 13px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.mrow-go .arrow { display: inline-block; margin-left: 6px; transition: transform 180ms; }
.mrow:hover .mrow-go .arrow { transform: translateX(4px); }
.mrow:hover .mrow-name { color: var(--accent); }
@media (max-width: 1000px) {
  .mrow-kind { grid-column: 1 / -1; }
  .mrow-name { grid-column: 1 / span 6; }
  .mrow-desc { grid-column: 7 / span 6; }
  .mrow-stat { grid-column: 1 / span 9; }
  .mrow-go { grid-column: 10 / span 3; }
}
@media (max-width: 640px) {
  .mrow-name, .mrow-desc, .mrow-stat { grid-column: 1 / -1; }
  .mrow-go { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- benchmarks ---------- */
.bench { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.bench-main { grid-column: 1 / span 8; }
.bench-side { grid-column: 9 / span 4; display: grid; align-content: start; border-top: 1px solid var(--rule-2); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; border-bottom: 1px solid var(--rule); }
.tab { position: relative; padding: 0 0 12px; border: 0; background: none; font: 500 13px/1.2 var(--sans); color: var(--muted); cursor: pointer; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; }
.tab:hover, .tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.bars { display: grid; gap: 9px; margin-top: 26px; }
.bar-row { display: grid; grid-template-columns: minmax(150px, 240px) 1fr 56px; align-items: center; gap: 16px; font-size: 14px; }
.bar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.bar-name small { margin-left: 4px; font-size: 13px; color: var(--muted); }
.bar-track, .bar-fill { display: block; }
.bar-track { height: 8px; background: rgba(27, 26, 23, 0.06); }
.bar-fill { height: 100%; background: rgba(27, 26, 23, 0.3); transform-origin: left; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.bar-row.us .bar-name { color: var(--accent); font-weight: 600; }
.bar-row.us .bar-fill { background: var(--accent); }
.bar-val { font: 500 13px/1 var(--sans); text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-row.us .bar-val { color: var(--accent); }
.stat { display: grid; gap: 10px; padding: 26px 0 28px; border-bottom: 1px solid var(--rule); }
.stat b { font: 400 clamp(44px, 4vw, 60px)/1 var(--display); letter-spacing: -0.035em; font-variation-settings: "opsz" 72; }
.stat b.acc { color: var(--accent); }
.stat p { max-width: 34ch; font-size: 14.5px; color: var(--ink-2); }
.stat .text-link { justify-self: start; margin-top: 6px; }
@media (max-width: 1000px) { .bench-main, .bench-side { grid-column: 1 / -1; } .bench-side { grid-template-columns: repeat(3, 1fr); column-gap: 24px; } }
@media (max-width: 700px) { .bench-side { grid-template-columns: 1fr; } .bar-row { grid-template-columns: 116px 1fr 48px; gap: 10px; font-size: 13px; } .bar-name small { display: none; } }

/* ---------- use cases ---------- */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; }
.use { display: grid; align-content: start; gap: 14px; padding-top: 22px; border-top: 1px solid var(--rule-2); }
.use .k { font: 500 13px/1 var(--sans); color: var(--muted); }
.use h3 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.08; letter-spacing: -0.02em; }
.use p { max-width: 38ch; font-size: 15px; color: var(--ink-2); }
.use.more { align-content: space-between; padding: 22px; border: 1px solid var(--rule-2); text-decoration: none; transition: border-color 180ms, background 180ms; }
.use.more:hover { border-color: var(--ink); background: var(--paper-3); }
.use.more h3 em { color: var(--accent); }
@media (max-width: 960px) { .uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .uses { grid-template-columns: 1fr; row-gap: 40px; } }

/* ---------- mission ---------- */
.mission-block { display: grid; justify-items: center; gap: 26px; text-align: center; }
.mission-block .display-xl { max-width: 15ch; font-size: clamp(46px, 6vw, 92px); }
.mission-block .display-xl em { color: var(--accent); }
.mission-block .lead { margin-inline: auto; text-align: center; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; margin-top: clamp(56px, 7vw, 96px); text-align: left; }
.pillar { display: grid; align-content: start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--rule-2); }
.pillar h3 { font-size: 24px; letter-spacing: -0.015em; }
.pillar p { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- developers ---------- */
.dev { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.dev-copy { grid-column: 1 / span 5; display: grid; gap: 24px; }
.dev-code { grid-column: 7 / span 6; }
.dev-list { display: grid; border-top: 1px solid var(--rule); }
.dev-list li { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.dev-list li::before { content: "—"; margin-right: 12px; color: var(--muted); }
.dev-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.code { overflow: hidden; border-radius: 4px; }
.code-tabs { display: flex; gap: 24px; padding: 16px 22px 0; border-bottom: 1px solid var(--night-rule); }
.code-tab { position: relative; padding: 0 0 13px; border: 0; background: none; font: 500 13px/1 var(--sans); color: var(--on-night-2); cursor: pointer; }
.code-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--on-night); transform: scaleX(0); transform-origin: left; transition: transform 220ms; }
.code-tab[aria-selected="true"] { color: var(--on-night); }
.code-tab[aria-selected="true"]::after { transform: scaleX(1); }
.code pre { margin: 0; padding: 24px 22px 28px; overflow-x: auto; color: var(--on-night); font: 13px/1.75 var(--mono); tab-size: 4; }
.code pre[hidden] { display: none; }
.code .k { color: var(--lilac); }
.code .s { color: #b9c9a2; }
.code .c { color: #7b776d; }
.code .n { color: #d9a39a; }
@media (max-width: 960px) { .dev-copy, .dev-code { grid-column: 1 / -1; } }

/* ---------- pricing strip (home) ---------- */
.price-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.price-cell { display: grid; align-content: start; gap: 10px; padding: 26px 24px 30px 0; }
.price-cell + .price-cell { padding-left: 24px; border-left: 1px solid var(--rule); }
.price-cell .nm { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.price-cell .amt { font: 400 clamp(44px, 4.2vw, 64px)/1 var(--display); letter-spacing: -0.035em; font-variation-settings: "opsz" 72; }
.price-cell .amt small { margin-left: 4px; font: 400 14px/1 var(--sans); letter-spacing: 0; color: var(--muted); }
.price-cell .what { font-size: 14px; color: var(--ink-2); }
.price-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.price-foot p { color: var(--ink-2); }
@media (max-width: 860px) {
  .price-strip { grid-template-columns: 1fr 1fr; }
  .price-cell:nth-child(3) { padding-left: 0; border-left: 0; }
  .price-cell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

/* ---------- research notes ---------- */
.notes { border-top: 1px solid var(--rule-2); }
.note-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.note-row time { grid-column: 1 / span 3; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.note-row b { grid-column: 4 / span 4; font: 400 clamp(26px, 2.4vw, 34px)/1.08 var(--display); letter-spacing: -0.02em; transition: color 160ms; }
.note-row span { grid-column: 8 / span 4; font-size: 15px; color: var(--ink-2); }
.note-row .arr { grid-column: 12; justify-self: end; color: var(--muted); transition: transform 180ms, color 180ms; }
.note-row:hover b { color: var(--accent); }
.note-row:hover .arr { transform: translate(3px, -3px); color: var(--ink); }
@media (max-width: 860px) {
  .note-row { row-gap: 10px; }
  .note-row time, .note-row b, .note-row span { grid-column: 1 / span 11; }
  .note-row .arr { grid-row: 2; }
}

/* ---------- lab demos ---------- */
.lab-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.lab-demo { display: grid; gap: 14px; }
.lab-demos .video-frame { overflow: hidden; border-radius: 3px; }
.lab-demo figcaption { display: grid; gap: 4px; padding-top: 0; font-size: 13px; }
.lab-demo figcaption b { font: 400 21px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.lab-demo figcaption span { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.lab-more { margin-top: 40px; }
.lab-more summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.lab-more summary::-webkit-details-marker { display: none; }
.lab-more[open] summary { margin-bottom: 32px; }
@media (max-width: 900px) { .lab-demos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lab-demos { grid-template-columns: 1fr; } }

/* ---------- closing call to action ---------- */
.cta { overflow: hidden; padding: clamp(80px, 10vw, 140px) 24px clamp(48px, 6vw, 72px); border-radius: 4px; text-align: center; }
.cta-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 70% at 50% 100%, rgba(122, 104, 214, 0.32), transparent 70%), radial-gradient(30% 40% at 78% 90%, rgba(224, 122, 63, 0.14), transparent 70%); }
.cta-inner { display: grid; justify-items: center; gap: 26px; }
.cta .display-l em { color: var(--lilac); }
.cta p { max-width: 46ch; font-size: 18px; color: var(--on-night-2); }
.cta canvas { display: block; width: 100%; height: 150px; margin-top: 40px; }



/* where the surfaces are used */
.thesis-chart.surface-gallery { border-color: rgba(58, 46, 34, 0.12); }
.bench-main.surface-gallery { padding: clamp(22px, 3vw, 36px); }
.price-panel.surface-gallery { padding: clamp(8px, 1.5vw, 16px) clamp(20px, 3vw, 36px) clamp(24px, 3vw, 36px); }
.price-panel .price-strip { border-top: 0; border-bottom: 1px solid var(--rule); }
.price-panel .price-foot { margin-top: 24px; }
.use.more.surface-gallery { border-color: rgba(58, 46, 34, 0.14); }
.use.more.surface-gallery:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 50%), #ece7dd; }
.mission-panel { padding: clamp(64px, 9vw, 136px) clamp(22px, 6vw, 96px) clamp(48px, 6vw, 88px); }
.mission-panel .pillars { margin-top: clamp(56px, 7vw, 88px); }
.value-wrap.surface-gallery { padding: clamp(14px, 2.5vw, 30px) clamp(18px, 3vw, 36px) clamp(18px, 3vw, 30px); }
.cta.surface-dusk p { color: var(--ink-2); }
.cta.surface-dusk .display-l em { color: var(--accent); }

/* Dusk panels: the haze slides across as the panel scrolls through the screen */
.mission-panel.surface-plum, .cta.surface-dusk { background-size: 160% 160%; background-repeat: no-repeat; background-position: calc(var(--p, 0.5) * 100%) calc(30% + var(--p, 0.5) * 40%); }

/* ======================================================================
   Pricing page
   ====================================================================== */
.p-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 10vw, 136px) 0 clamp(56px, 7vw, 96px); text-align: center; }
.p-hero .wrap { display: grid; justify-items: center; gap: 26px; }
.p-hero .lead { margin-inline: auto; text-align: center; }
.free-line { font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.free-line b { font-weight: 500; color: var(--accent); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: 14px; padding: 30px 26px; }
.plan + .plan { border-left: 1px solid var(--rule); }
.plan.featured { --ink: #2b241d; --ink-2: #51483e; --muted: #877b6b; --rule: rgba(58, 46, 34, 0.13); background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 45%), #e9e3d8; }
.plan.featured::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); }
.plan-top { min-height: 16px; }
.plan .chip { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.plan.featured .chip { color: var(--accent); }
.plan h2 { font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }
.plan .model-id { margin-top: -8px; font: 400 13px/1.3 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.plan-price { display: flex; align-items: baseline; gap: 8px; padding: 10px 0 6px; }
.plan-price b { font: 400 clamp(52px, 4.6vw, 68px)/1 var(--display); letter-spacing: -0.04em; font-variation-settings: "opsz" 72; }
.plan-price span { font-size: 14px; color: var(--muted); }
.plan ul { display: grid; align-content: start; border-top: 1px solid var(--rule); }
.plan li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.plan li svg { display: none; }
.plan .btn { width: 100%; }
.plan-access { margin-top: -4px; font: 500 13px/1.4 var(--sans); text-align: center; color: var(--muted); }
@media (max-width: 1080px) { .plans { grid-template-columns: 1fr 1fr; } .plan:nth-child(3) { border-left: 0; } .plan:nth-child(n + 3) { border-top: 1px solid var(--rule); } }
@media (max-width: 620px) { .plans { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; border-top: 1px solid var(--rule); } }

.calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--rule); border-radius: 4px; }
.calc-in { grid-column: 1 / span 7; display: grid; gap: 34px; padding: clamp(26px, 3.6vw, 48px); background: var(--paper-3); }
.calc-out { grid-column: 8 / span 5; display: grid; align-content: center; gap: 12px; padding: clamp(26px, 3.6vw, 48px); }
.calc .lbl, .calc label { display: block; margin-bottom: 14px; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--rule-2); }
.seg button { padding: 11px 16px; border: 0; background: transparent; color: var(--ink-2); font: 14px/1.2 var(--sans); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.range-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.range-row label { margin: 0; }
.range-row output { font: 400 38px/1 var(--display); letter-spacing: -0.03em; }
.range-row output small { margin-left: 4px; font: 14px/1 var(--sans); letter-spacing: 0; color: var(--muted); }
input[type="range"].hours { width: 100%; height: 2px; margin: 22px 0 10px; background: linear-gradient(90deg, var(--ink) var(--fill, 50%), var(--rule-2) var(--fill, 50%)); appearance: none; cursor: pointer; }
input[type="range"].hours::-webkit-slider-thumb { width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-3); appearance: none; }
input[type="range"].hours::-moz-range-thumb { width: 16px; height: 16px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-3); }
.ticks { display: flex; justify-content: space-between; font: 500 13px/1 var(--sans); color: var(--muted); }
.calc-out .k { font: 500 13px/1.3 var(--sans); color: var(--on-night-2); }
.calc-out .total { font: 400 clamp(56px, 6vw, 84px)/1 var(--display); letter-spacing: -0.045em; font-variation-settings: "opsz" 72; }
.calc-out .total small { margin-left: 6px; font: 16px/1 var(--sans); letter-spacing: 0; color: var(--on-night-2); }
.calc-out p { max-width: 36ch; font-size: 14px; color: var(--on-night-2); }
.calc-out .btn { justify-self: start; margin-top: 14px; }
@media (max-width: 860px) { .calc-in, .calc-out { grid-column: 1 / -1; } }

.value-wrap { overflow-x: auto; }
.value-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.value-table th { padding: 0 14px 14px 0; border-bottom: 1px solid var(--rule-2); font: 500 13px/1.3 var(--sans); text-align: left; color: var(--muted); }
.value-table td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.value-table td.num { font: 400 22px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.value-table tr.us td { color: var(--accent); }
.value-table tr.us td:first-child { font-weight: 600; }
.value-table .bar-track { min-width: 90px; height: 6px; }
.value-table .bar-fill { transform: none; }
.value-table tr.us .bar-fill { background: var(--accent); }
.value-table .mini { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 14px; }
.value-table .mini .num { font: 500 13px/1 var(--sans); letter-spacing: 0; text-align: right; color: inherit; }

.enterprise { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; padding: clamp(40px, 6vw, 80px); border-radius: 4px; }
.enterprise .ent-copy { grid-column: 1 / span 6; display: grid; gap: 22px; }
.enterprise .ent-copy p { max-width: 44ch; color: var(--on-night-2); }
.enterprise .ent-copy .display-l em { color: var(--lilac); }
.enterprise ul { grid-column: 8 / span 5; display: grid; border-top: 1px solid var(--night-rule); }
.enterprise li { padding: 14px 0; border-bottom: 1px solid var(--night-rule); font-size: 15px; color: var(--on-night); }
.enterprise li svg { display: none; }
@media (max-width: 860px) { .enterprise .ent-copy, .enterprise ul { grid-column: 1 / -1; } }

.faq { border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 24px 0; font: 400 clamp(22px, 2vw, 27px)/1.2 var(--display); letter-spacing: -0.015em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--muted); transition: transform 220ms; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 68ch; padding: 0 0 26px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .product *, .product *::before, .product *::after { transition: none !important; animation: none !important; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ======================================================================
   Model pages (/models/*): a hero with a live artifact of the model's output, then proof, features, benchmark,
   uses, code, specs, research, questions and a closing call to action.
   ====================================================================== */
.tabs[hidden] { display: none; }
.m-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 7vh, 88px) 0 0; }
.m-hero .hero-haze { inset: -20% -10% 10%; }
.m-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: center; }
.m-hero-copy { grid-column: 1 / span 6; display: grid; justify-items: start; gap: 24px; }
.m-art { grid-column: 7 / span 6; }
.crumbs { display: flex; gap: 10px; font: 500 13px/1 var(--sans); color: var(--muted); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.m-title { font-family: var(--display); font-size: clamp(56px, 7vw, 104px); font-weight: 400; font-variation-settings: "opsz" 72; letter-spacing: -0.04em; line-height: 0.95; }
.m-title em { color: var(--accent); }
.m-line { max-width: 20ch; font: 400 clamp(26px, 2.6vw, 36px)/1.12 var(--display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.m-hero .lead { max-width: 48ch; }
.m-hero .ctas { justify-content: flex-start; }
.m-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); }
.m-meta code { font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.m-meta { column-gap: 22px; }
.m-hero .proof { margin-top: clamp(56px, 8vw, 96px); }
@media (max-width: 960px) { .m-hero-copy, .m-art { grid-column: 1 / -1; } }
@media (max-width: 760px) { .m-hero .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-hero .proof > :nth-child(3) { padding-left: 0; border-left: 0; } .m-hero .proof > :nth-child(n + 3) { border-top: 1px solid var(--rule); } }

/* the hero artifact: a framed piece of the model's output */
.m-art { position: relative; display: grid; align-content: start; gap: 18px; min-height: 440px; padding: clamp(20px, 2.4vw, 32px); }
.m-art.night { border-radius: 4px; box-shadow: 0 60px 110px -60px rgba(24, 22, 20, 0.7); }
.art-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font: 500 12.5px/1.3 var(--sans); color: var(--muted); }
.night .art-cap { border-color: var(--night-rule); color: var(--on-night-2); }
.art-cap b { font-weight: 500; color: var(--ink); }
.night .art-cap b { color: var(--on-night); }
.art-wave { display: flex; align-items: center; gap: 2px; height: 44px; }
.art-wave i { flex: 1; min-width: 1px; border-radius: 1px; background: currentColor; opacity: 0.22; transition: opacity 200ms; }
.art-wave i.on { opacity: 0.75; }
.who { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1px solid var(--c, currentColor); border-radius: 50%; font: 500 12px/1 var(--sans); color: var(--c, currentColor); }

/* Async: a transcript with speaker labels, written in as the clip plays */
.art-lines { display: grid; gap: 16px; }
.art-lines li { display: grid; grid-template-columns: 26px 44px 1fr; gap: 14px; align-items: start; opacity: 0.12; transform: translateY(6px); transition: opacity 500ms ease, transform 500ms ease; }
.art-lines li.on { opacity: 1; transform: none; }
.art-lines time { padding-top: 5px; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.art-lines p { font: 400 19px/1.35 var(--display); letter-spacing: -0.005em; color: var(--ink); }

/* Streaming: live captions, the pending words in italics until they are final */
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--on-night); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lilac); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.25; } }
.captions { display: grid; align-content: end; gap: 18px; min-height: 270px; }
.captions p { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font: 400 clamp(21px, 1.9vw, 25px)/1.32 var(--display); letter-spacing: -0.01em; color: var(--on-night); transition: opacity 400ms; }
.captions p.old { opacity: 0.38; }
.captions .who { margin-top: 3px; }
.captions .pending { font-style: italic; color: var(--on-night-2); }
.night .art-wave { color: var(--lilac); }

/* Diarization: who spoke when, lane by lane */
.lanes { display: grid; gap: 9px; }
.lane { display: grid; grid-template-columns: 26px 1fr 46px; gap: 12px; align-items: center; }
.lane-track { position: relative; height: 18px; border-radius: 2px; background: rgba(58, 46, 34, 0.05); }
.lane-track i { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; background: var(--c); opacity: 0.85; transform-origin: left; transform: scaleX(var(--g, 1)); }
.lane b { font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
.lanes-axis { display: flex; justify-content: space-between; margin-left: 38px; margin-right: 58px; padding-top: 6px; border-top: 1px solid var(--rule); font: 500 11.5px/1 var(--sans); color: var(--muted); }
.lanes-wrap { position: relative; display: grid; gap: 10px; }
.playhead { position: absolute; top: -6px; bottom: 16px; left: 38px; width: 1px; background: var(--ink); opacity: 0.5; pointer-events: none; }
.overlap-key { display: flex; gap: 18px; font-size: 12.5px; color: var(--muted); }
.overlap-key i { display: inline-block; width: 14px; height: 8px; margin-right: 7px; border-radius: 2px; background: repeating-linear-gradient(135deg, rgba(58, 46, 34, 0.35) 0 2px, transparent 2px 4px); vertical-align: 0; }
.lane-track .ov { top: 0; bottom: 0; border-radius: 0; background: repeating-linear-gradient(135deg, rgba(58, 46, 34, 0.22) 0 2px, transparent 2px 4px); opacity: 1; }

/* Speaker ID: one clip scored against every enrolled voice */
.scores { display: grid; gap: 4px; }
.score { display: grid; grid-template-columns: 34px minmax(0, 1fr) 54px; gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.score .who { width: 34px; height: 34px; font-size: 13px; grid-row: span 2; }
.score b { font: 400 21px/1.15 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.score b small { margin-left: 8px; font: 500 12px/1 var(--sans); color: var(--muted); }
.score .val { grid-column: 3; grid-row: 1 / span 2; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2); }
.score .track { grid-column: 2; height: 4px; border-radius: 2px; background: var(--rule); }
.score .track i { display: block; height: 100%; border-radius: 2px; background: var(--ink-2); transform-origin: left; transform: scaleX(0); transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.score.top b, .score.top span { color: var(--accent); }
.score.top .track i { background: var(--accent); }
.score-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.clip-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.clip-row .art-wave { height: 36px; color: var(--accent); }
.clip-tag { font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); }

/* features: two rows of three */
.m-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 52px; }
.m-feat { display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 1px solid var(--rule-2); }
.m-feat h3 { font-size: clamp(24px, 2.1vw, 29px); line-height: 1.1; letter-spacing: -0.02em; }
.m-feat p { max-width: 40ch; font-size: 15px; color: var(--ink-2); }
.m-feat code { font: 500 13.5px/1 var(--sans); color: var(--ink); }
@media (max-width: 860px) { .m-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .m-feats { grid-template-columns: 1fr; row-gap: 36px; } }

/* benchmark: one wide panel with the headline beside it */
.m-bench { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
.m-bench-copy { grid-column: 1 / span 4; display: grid; gap: 22px; justify-items: start; position: sticky; top: 110px; }
.m-bench-copy .stat b { display: block; margin-bottom: 10px; }
.m-bench-copy .stat p { max-width: 34ch; font-size: 15px; color: var(--ink-2); }
.m-bench .bench-main { grid-column: 5 / span 8; }
@media (max-width: 960px) { .m-bench-copy, .m-bench .bench-main { grid-column: 1 / -1; position: static; } }

/* field video (streaming) */
.m-video { overflow: hidden; border-radius: 4px; padding: 10px; }
.m-video video { display: block; width: 100%; height: auto; border-radius: 2px; }
.m-video figcaption { padding: 14px 6px 4px; font-size: 13px; color: var(--on-night-2); }

/* specs */
.m-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); padding: clamp(8px, 1.5vw, 16px) clamp(20px, 3vw, 36px) clamp(16px, 2vw, 24px); }
.m-specs div { display: grid; grid-template-columns: minmax(110px, 0.42fr) 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--rule); }
.m-specs div:nth-last-child(-n + 2) { border-bottom: 0; }
.m-specs dt { font: 500 13px/1.5 var(--sans); color: var(--muted); }
.m-specs dd { margin: 0; font-size: 15px; color: var(--ink); }
.m-specs code { font: 500 14px/1.4 var(--sans); }
@media (max-width: 760px) { .m-specs { grid-template-columns: 1fr; } .m-specs div:nth-last-child(2) { border-bottom: 1px solid var(--rule); } }

/* the research behind it */
.m-report { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; padding: clamp(32px, 5vw, 64px) clamp(22px, 4vw, 56px); color: inherit; text-decoration: none; }
.m-report-copy { grid-column: 1 / span 8; display: grid; gap: 18px; }
.m-report-copy h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.03em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.m-report-copy h2 em { color: var(--accent); }
.m-report-copy p { max-width: 56ch; color: var(--ink-2); }
.m-report .go { grid-column: 9 / span 4; justify-self: end; font: 500 14px/1 var(--sans); }
.m-report .go .arrow { display: inline-block; margin-left: 8px; transition: transform 180ms; }
.m-report:hover .go .arrow { transform: translateX(4px); }
@media (max-width: 860px) { .m-report-copy, .m-report .go { grid-column: 1 / -1; justify-self: start; } }

/* other models */
.m-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.m-related a { display: grid; align-content: space-between; gap: 34px; min-height: 190px; padding: 22px; color: inherit; text-decoration: none; transition: background 180ms; }
.m-related b { font: 400 30px/1.05 var(--display); letter-spacing: -0.02em; }
.m-related span { font-size: 14.5px; color: var(--ink-2); }
.m-related i { font: 500 13px/1 var(--sans); font-style: normal; color: var(--muted); }
.m-related a:hover b { color: var(--accent); }
@media (max-width: 760px) { .m-related { grid-template-columns: 1fr; } .m-related a { min-height: 0; } }

/* ======================================================================
   Models hub (/models)
   ====================================================================== */
.hub-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.choose { width: 100%; border-collapse: collapse; font-size: 15px; }
.choose th, .choose td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.choose thead th { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.choose td:first-child { color: var(--ink-2); }
.choose a { color: var(--ink); text-underline-offset: 4px; }
.choose-wrap { padding: clamp(10px, 2vw, 22px) clamp(20px, 3vw, 36px) clamp(14px, 2vw, 22px); overflow-x: auto; }

/* ======================================================================
   Research home (/research)
   ====================================================================== */
.r-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 6vw, 80px); }
.r-hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.r-hero h1 { grid-column: 1 / span 8; }
.r-hero h1 em { color: var(--accent); }
.r-hero .lead { grid-column: 9 / span 4; }
@media (max-width: 960px) { .r-hero h1, .r-hero .lead { grid-column: 1 / -1; } }
.r-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding: clamp(28px, 4vw, 56px); color: inherit; text-decoration: none; }
.r-feature-copy { grid-column: 1 / span 7; display: grid; align-content: space-between; gap: 28px; }
.r-feature h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.02; letter-spacing: -0.032em; font-variation-settings: "opsz" 72; text-wrap: balance; transition: color 180ms; }
.r-feature h2 em { color: var(--accent); }
.r-feature p { max-width: 56ch; color: var(--ink-2); }
.r-feature:hover h2 { color: var(--accent); }
.r-figs { grid-column: 9 / span 4; display: grid; align-content: end; border-top: 1px solid var(--rule-2); }
.r-figs div { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.r-figs b { font: 400 clamp(36px, 3.4vw, 50px)/1 var(--display); letter-spacing: -0.03em; }
.r-figs span { font-size: 14px; color: var(--ink-2); }
.r-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.r-meta { column-gap: 22px; }
.r-read { font: 500 14px/1 var(--sans); color: var(--ink); }
.r-read .arrow { display: inline-block; margin-left: 8px; transition: transform 180ms; }
a:hover .r-read .arrow { transform: translateX(4px); }
@media (max-width: 960px) { .r-feature-copy, .r-figs { grid-column: 1 / -1; } }
.r-list { border-top: 1px solid var(--rule-2); }
.r-post { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; padding: clamp(28px, 3.5vw, 44px) 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.r-cover { grid-column: 1 / span 4; display: grid; align-content: space-between; gap: 30px; aspect-ratio: 4 / 3; padding: 22px; }
.r-cover b { font: 400 clamp(44px, 4.4vw, 66px)/0.95 var(--display); letter-spacing: -0.04em; font-variation-settings: "opsz" 72; }
.r-cover span { font-size: 13.5px; color: var(--ink-2); }
.r-cover.night span { color: var(--on-night-2); }
.r-cover canvas { width: 100%; height: 54px; }
.r-post-copy { grid-column: 6 / span 7; display: grid; align-content: start; gap: 16px; }
.r-post h3 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; transition: color 180ms; }
.r-post p { max-width: 60ch; color: var(--ink-2); }
.r-post:hover h3 { color: var(--accent); }
@media (max-width: 860px) { .r-cover, .r-post-copy { grid-column: 1 / -1; } .r-cover { aspect-ratio: auto; min-height: 200px; } }
.r-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.r-open a { display: grid; align-content: space-between; gap: 30px; min-height: 180px; padding: 22px; color: inherit; text-decoration: none; }
.r-open b { font: 400 26px/1.1 var(--display); letter-spacing: -0.02em; }
.r-open span { font-size: 14.5px; color: var(--ink-2); }
.r-open i { font: 500 13px/1 var(--sans); font-style: normal; color: var(--muted); }
.r-open a:hover b { color: var(--accent); }
@media (max-width: 760px) { .r-open { grid-template-columns: 1fr; } .r-open a { min-height: 0; } }
.art-play { padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--rule-2); background: none; font: 500 12.5px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.art-play:hover { border-color: var(--ink); }
.art-src { margin-top: auto; font-size: 12px; line-height: 1.45; color: var(--muted); }
.night .art-src { color: var(--on-night-2); opacity: 0.8; }
.m-art { display: flex; flex-direction: column; }
.tabs:not([hidden]) + .chart-title { margin-top: 28px; }
.m-art .art-cap { margin: 0; text-transform: none; letter-spacing: 0; font: 500 12.5px/1.3 var(--sans); }
.m-art .art-cap { padding-top: 0; }
.m-art .art-cap span { color: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; }
.m-art .art-cap .live { color: var(--on-night); }
.m-art[data-art="scores"] { min-height: 0; }
.r-cover div { display: grid; gap: 10px; }
.r-cover > span { font: 500 13px/1 var(--sans); }
.r-cover.night { border-radius: 4px; }
.notes-more { margin-top: 28px; }

/* ======================================================================
   Talk to sales (/contact)
   ====================================================================== */
.s-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 8vh, 104px) 0 clamp(24px, 4vw, 48px); }
.s-hero .hero-haze { inset: -10% -10% 30%; }
.s-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.s-copy { grid-column: 1 / span 5; display: grid; justify-items: start; gap: 26px; padding-top: 8px; }
.s-copy .display-l em { color: var(--accent); }
.s-steps { display: grid; width: 100%; margin-top: 8px; border-top: 1px solid var(--rule-2); counter-reset: none; }
.s-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.s-steps b { font: italic 400 22px/1 var(--display); color: var(--accent); }
.s-free { font-size: 14px; color: var(--muted); }
.s-free a { color: var(--ink); text-underline-offset: 4px; }
.s-form { grid-column: 7 / span 6; display: grid; gap: 26px; padding: clamp(24px, 3vw, 40px); }
@media (max-width: 960px) { .s-copy, .s-form { grid-column: 1 / -1; position: static; } }
.s-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 560px) { .s-form .form-grid { grid-template-columns: 1fr; } }
.s-form .field { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.s-form label, .s-form legend { padding: 0; font: 500 13.5px/1.3 var(--sans); color: var(--ink); }
.s-form label span, .s-form legend span { margin-left: 6px; font-weight: 400; color: var(--muted); }
.s-form legend { margin-bottom: 11px; }
.s-form input[type="text"], .s-form input[type="email"], .s-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 3px; background: rgba(255, 255, 255, 0.4); font: 400 15px/1.4 var(--sans); color: var(--ink); transition: border-color 160ms, background 160ms; }
.s-form textarea { resize: vertical; min-height: 110px; }
.s-form input::placeholder, .s-form textarea::placeholder { color: var(--muted); opacity: 0.8; }
.s-form input:focus, .s-form textarea:focus { outline: none; border-color: var(--ink); background: rgba(255, 255, 255, 0.65); }
.s-form .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-form .chips label { position: relative; margin: 0; }
.s-form .chips input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.s-form .chips span { display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 3px; font: 400 14px/1 var(--sans); color: var(--ink-2); transition: background 160ms, border-color 160ms, color 160ms; }
.s-form .chips label:hover span { border-color: var(--ink); color: var(--ink); }
.s-form .chips input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper-3); }
.s-form .chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.s-form .field-options.is-invalid .chips span { border-color: #b4544a; }
.s-form .website-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-form .form-footer { display: grid; justify-items: start; gap: 12px; padding-top: 6px; }
.s-form .submit-button { border: 0; }
.s-form .submit-button:disabled { opacity: 0.6; cursor: wait; }
.s-form .form-status:empty { display: none; }
.s-form .form-status { font-size: 14px; color: var(--ink-2); }
.s-form .form-status.is-success { color: #3f6b46; }
.s-form .form-status.is-error { color: #a4473e; }
.s-form .form-privacy { font-size: 12.5px; color: var(--muted); }
.s-form .form-privacy a { color: var(--ink-2); }
.m-specs dd, .dev-list li, .m-feat p, .faq details p { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .m-specs div { grid-template-columns: 1fr; gap: 6px; } }
.plan h2 a { text-decoration: none; } .plan h2 a:hover { color: var(--accent); }

/* the surfaces on dark (Plum) */
.r-feature.surface-plum .r-figs, .m-art.surface-plum .art-cap { border-color: var(--rule-2); }
.r-cover.surface-plum span { color: var(--ink-2); }

/* a research card on Noir: the ivory palette inside it */
.m-report.night { --ink: var(--on-night); --ink-2: var(--on-night-2); --muted: var(--on-night-2); --rule: var(--night-rule); --rule-2: rgba(239, 232, 220, 0.2); --accent: var(--lilac); border-radius: 4px; color: var(--on-night); box-shadow: 0 60px 110px -60px rgba(24, 22, 20, 0.7); }
.m-report.night .label.dot::before { background: var(--lilac); }

/* ======================================================================
   Phones. Everything below sits inside max-width queries, so desktop and tablet layouts are untouched.
   ====================================================================== */
@media (max-width: 760px) {
  /* rhythm: tighter gaps between sections, so a phone screen is never mostly empty */
  .section { padding-block: 72px; }
  .sec-head { margin-bottom: 36px; }
  .versus { padding-top: 48px; }
  .m-hero .proof { margin-top: 48px; }

  /* no one-word last lines, and no labels split at a hyphen ("NOTSOFAR-" / "1") */
  :is(p, li, dd, figcaption, .demo-meta, .db-legend, .chart-note, .chart-sub, .proof span, .mrow-stat, .what, .r-figs span) { text-wrap: pretty; }

  /* form fields at 16px, so iPhones don't zoom the page when one is focused */
  .s-form :is(input[type="text"], input[type="email"], textarea) { font-size: 16px; }

  /* bigger touch targets for small tabs and links */
  .tab { padding: 10px 0 12px; }
  .code-tab { padding-top: 10px; }
  .code pre { padding: 20px 18px 24px; font-size: 12.5px; }
  .crumbs a { padding: 6px 0; margin: -6px 0; }

  /* the listening demo: clip names swipe; the error board becomes rows you can tap, one per provider */
  .demo-bars { grid-template-columns: minmax(0, 1fr); gap: 0; height: auto; }
  .demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-bars { gap: 0; }
  .demo-bar { grid-template-columns: 96px minmax(0, 1fr) 42px; grid-template-rows: none; grid-template-areas: "nm col n"; align-items: center; column-gap: 12px; min-height: 36px; height: auto; border-bottom: 1px solid var(--d-rule); }
  .demo-bar:last-child { border-bottom: 0; }
  .demo-bar .nm { grid-area: nm; font-size: 13px; }
  .demo-bar .n, .demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-bar .n { grid-area: n; font-size: 18px; text-align: right; }
  .demo-bar .col, .demo:is([data-theme="gallery"], [data-theme="dusk"], [data-theme="noir"]) .demo-bar .col {
    grid-area: col; align-self: center; justify-self: start; width: calc(max(var(--v, 0), 0.03) * 100%); height: 4px !important; min-height: 0; border-radius: 2px; transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms;
  }
  .demo-bar.sel { background: linear-gradient(90deg, transparent, var(--d-lane) 20%, var(--d-lane) 80%, transparent); }

  /* thesis chart: fewer axis labels, and room on the right for the values */
  .db-axis, .db-row { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding-right: 46px; }
  .db-scale span:nth-child(even) { visibility: hidden; }
  .db-name { font-size: 13px; }

  /* benchmark bars: the model sits under the company name, so two Google rows (Chirp 3, Gemini) stay distinct */
  .bar-row { grid-template-columns: 128px minmax(0, 1fr) 46px; align-items: center; }
  .bar-name { white-space: normal; line-height: 1.2; }
  .bar-name small { display: block; overflow: hidden; margin: 2px 0 0; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
  .bars { gap: 12px; }

  /* model pages: the hero artwork sizes to its content, and two buttons share a row evenly */
  .m-art { min-height: 0; }
  .captions { min-height: 190px; }
  .m-hero .ctas { width: 100%; }
  .m-hero .ctas .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }

  /* closing panels: one button per row, full width */
  .cta { padding-left: 20px; padding-right: 20px; }
  .cta .ctas { flex-direction: column; align-self: stretch; width: 100%; max-width: 340px; margin-inline: auto; }
  .cta .ctas .btn { width: 100%; }

  /* menu-card links */
  .m-related a { gap: 18px; }
}

@media (max-width: 560px) {
  /* announcement chip: two balanced lines instead of a ragged wrap */
  .announce { padding: 8px 12px; font-size: 10.5px; letter-spacing: 0.08em; line-height: 1.55; text-wrap: balance; }

  /* home price strip: price and unit stay on one line */
  .price-cell { padding-right: 12px; }
  .price-cell + .price-cell { padding-left: 16px; }
  .price-cell:nth-child(3) { padding-left: 0; }
  .price-cell .amt { font-size: 40px; white-space: nowrap; }
  .price-cell .amt small { margin-left: 3px; font-size: 13px; }

  /* pricing: the accuracy-per-dollar table becomes one card per provider */
  .value-wrap { overflow-x: visible; }
  .value-table { min-width: 0; }
  .value-table thead { display: none; }
  .value-table, .value-table tbody { display: block; }
  .value-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who price" "model price" "bar bar"; column-gap: 12px; padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
  .value-table td { display: block; padding: 0; border: 0; }
  .value-table td:nth-child(1) { grid-area: who; font-weight: 500; }
  .value-table td:nth-child(2) { grid-area: model; font-size: 13.5px; color: var(--ink-2); }
  .value-table tr.us td:nth-child(2) { color: var(--accent); }
  .value-table td:nth-child(3) { grid-area: price; align-self: center; font-size: 26px; }
  .value-table td:nth-child(4) { grid-area: bar; margin-top: 10px; }
  .value-table .mini { grid-template-columns: 1fr 52px; }
  .value-table tbody::before { content: "Price per audio hour, and meeting error rate (lower is better)"; display: block; padding-bottom: 12px; border-bottom: 1px solid var(--rule-2); font: 500 13px/1.35 var(--sans); color: var(--muted); }

  /* calculator: a larger thumb to drag */
  input[type="range"].hours { margin: 26px 0 18px; }
  input[type="range"].hours::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type="range"].hours::-moz-range-thumb { width: 24px; height: 24px; }
}

/* ---------- phones: the desktop flair, re-composed for a tall screen ----------
   The hero haze on desktop is three wide blooms across a landscape; squeezed into a portrait screen they became a
   faint strip. Here the blooms are re-placed for portrait (behind the headline, under the buttons, across the fold),
   a little richer, and drift slowly. */
@media (max-width: 760px) {
  .hero-haze {
    background:
      radial-gradient(70% 30% at 16% 26%, rgba(184, 172, 242, 0.58), transparent 72%),
      radial-gradient(62% 26% at 92% 14%, rgba(236, 196, 170, 0.62), transparent 72%),
      radial-gradient(78% 30% at 62% 56%, rgba(214, 206, 240, 0.5), transparent 75%),
      radial-gradient(64% 24% at 6% 78%, rgba(240, 200, 176, 0.42), transparent 72%),
      radial-gradient(56% 22% at 96% 90%, rgba(196, 184, 240, 0.4), transparent 72%);
    background-size: 135% 120%;
    background-position: 50% 40%;
    animation: haze-drift 22s ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%);   /* fades out before the section ends */
    mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
  }
  @keyframes haze-drift {
    0% { background-position: 30% 30%; }
    50% { background-position: 70% 50%; }
    100% { background-position: 45% 70%; }
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .hero-haze { animation: none; } }