/* VoiceToText — minimalist pass.
   Dark-first with prefers-color-scheme: light overrides.

   T13 Minimalism pass (2026-04-19):
   - Accent: flat Linear-style indigo `#5E6AD2` (dark) / `#4E5BC6` (light).
     Rationale: restrained, modern, distinctive without neon. Passes WCAG AA
     on both themes. Replaces the prior cyan+gradient+glow combo.
   - Removed: --color-accent-gradient[-hover], --shadow-cyan-glow[-hover],
     --color-hero-glow, hero waveform animation. All hero "glow" treatments.
   - Buttons: flat fills, borders, no gradient, no glow.
   - Borders over shadows. 1px dividers carry most separation.

   T10 perf notes (unchanged): system font stack only; critical above-the-fold
   CSS is inlined in index.html <style>. This file is loaded asynchronously.

   Follow-up: a build-time minification step would cut this file ~30%. */

:root {
  --color-bg: #0A0A0B;
  --color-surface: #111113;
  --color-surface-elevated: #17171A;
  --color-surface-sunken: #070708;
  --color-border: #1F1F24;
  --color-border-strong: #2A2A31;
  --color-text-primary: #F4F4F5;
  --color-text-secondary: #A1A1AA;
  --color-text-muted: #8A8A94; /* T11 a11y: WCAG AA (5.7:1) on dark bg */
  /* T14: OpenAI-style monochrome. Primary CTA = full page inversion.
     No chromatic accent. Links/focus/selection all use primary text colour. */
  --color-accent: #F4F4F5;             /* inherits text-primary (dark mode) */
  --color-accent-solid: #FFFFFF;       /* CTA bg = inverse of page bg */
  --color-accent-hover: #E4E4E7;
  --color-accent-muted: rgba(255,255,255,.08);
  --color-accent-ring: rgba(255,255,255,.45);
  --color-accent-ink: #09090B;         /* text on white CTA = near-black */
  --color-success: #3DDC97;
  --color-warn: #F5A524;
  --color-danger: #F04438;

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display-1: clamp(52px, 8.6vw, 104px);
  --fs-display-3: clamp(34px, 4.4vw, 56px);
  --fs-display-4: clamp(24px, 2.6vw, 36px);
  --fs-h3: 19px;
  --fs-body-lg: 19px;
  --fs-body-md: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-code: 14px;

  --lh-display: 1.03;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-tight: 1.3;
  --lh-caption: 1.45;

  --ls-display: -.028em;
  --ls-heading: -.015em;
  --ls-label: .06em;

  --fw-medium: 500;
  --fw-semibold: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --container-xl: 1120px;
  --page-gutter: 20px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* T13: shadows pared back. macOS chrome keeps a modest one; nothing else. */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3);
  --shadow-macos: 0 20px 50px -20px rgba(0,0,0,.55), 0 6px 18px -10px rgba(0,0,0,.35);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 380ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-enter: cubic-bezier(.2,.8,.2,1);

  --z-nav: 300;
  --z-toast: 600;

  --control-height-md: 38px;
  --control-height-lg: 46px;

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-ring);
}

@media (min-width: 641px)  { :root { --page-gutter: 28px; } }
@media (min-width: 1025px) { :root { --page-gutter: 40px; } }
@media (min-width: 1440px) { :root { --page-gutter: 48px; } }

/* Light tokens — applied when (a) OS prefers light AND user hasn't chosen,
   or (b) user explicitly picked light via [data-theme="light"]. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #FAFAFA;
    --color-surface-sunken: #F4F4F5;
    --color-border: #EAEAEC;
    --color-border-strong: #D4D4D8;
    --color-text-primary: #09090B;
    --color-text-secondary: #52525B;
    --color-text-muted: #71717A;
    --color-accent: #09090B;
    --color-accent-solid: #09090B;
    --color-accent-hover: #27272A;
    --color-accent-muted: rgba(9,9,11,.06);
    --color-accent-ring: rgba(9,9,11,.30);
    --color-accent-ink: #FFFFFF;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-macos: 0 20px 50px -20px rgba(0,0,0,.14), 0 6px 18px -10px rgba(0,0,0,.08);
  }
}
:root[data-theme="light"] {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FAFAFA;
  --color-surface-sunken: #F4F4F5;
  --color-border: #EAEAEC;
  --color-border-strong: #D4D4D8;
  --color-text-primary: #09090B;
  --color-text-secondary: #52525B;
  --color-text-muted: #71717A;
  --color-accent: #09090B;
  --color-accent-solid: #09090B;
  --color-accent-hover: #27272A;
  --color-accent-muted: rgba(9,9,11,.06);
  --color-accent-ring: rgba(9,9,11,.30);
  --color-accent-ink: #FFFFFF;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-macos: 0 20px 50px -20px rgba(0,0,0,.14), 0 6px 18px -10px rgba(0,0,0,.08);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); color: var(--color-text-primary); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-text-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--color-text-primary); }
/* T14: editorial underline for inline prose links (opt-in via .link class or content context) */
.prose a, .link { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.prose a:hover, .link:hover { text-decoration-color: var(--color-text-primary); }
kbd, code, pre { font-family: var(--font-mono); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--color-accent-solid); outline-offset: 2px; border-radius: var(--radius-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--color-accent-solid); color: var(--color-accent-ink); }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.kbd-combo { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.skip-link { position: absolute; top: -9999px; left: var(--space-4); background: var(--color-accent-solid); color: var(--color-accent-ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); z-index: var(--z-toast); }
.skip-link:focus { top: var(--space-4); color: var(--color-accent-ink); outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }

.container { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--page-gutter); width: 100%; }

.section { padding-block: clamp(var(--space-20), 10vw, var(--space-32)); position: relative; }
.section__eyebrow { color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; margin: 0 0 var(--space-5); }
.section__title { font-size: var(--fs-display-3); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-display); max-width: 22ch; margin: 0 0 var(--space-4); }
.section__deck { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--color-text-secondary); max-width: 62ch; margin: 0 0 var(--space-12); }

.t-label { font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-code); font-weight: var(--fw-medium); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-muted); }
.code-inline { font-family: var(--font-mono); font-size: .92em; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-surface-elevated); border: 1px solid var(--color-border); color: var(--color-text-primary); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Icons */
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon--sm { width: 12px; height: 12px; }
.icon--lg { width: 20px; height: 20px; }

/* Keycap — inline only (T13: no more hero-sized keycaps) */
.keycap { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8em; height: 1.7em; padding: 0 6px; font-family: var(--font-mono); font-size: .88em; font-weight: var(--fw-medium); color: var(--color-text-primary); background: linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface)); border: 1px solid var(--color-border-strong); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 var(--color-bg), 0 2px 0 var(--color-border); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .keycap { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(9,9,11,.04), 0 2px 0 var(--color-border); } }
:root[data-theme="light"] .keycap { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(9,9,11,.04), 0 2px 0 var(--color-border); }
.keycap--inline { font-size: .82em; height: 1.5em; min-width: 1.5em; margin: 0 1px; vertical-align: baseline; }

/* Chip — T13: flat, 1px border, transparent fill */
.chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-3); font: var(--fw-medium) var(--fs-caption)/1 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-full); }
.chip--accent { color: var(--color-accent); background: transparent; border-color: var(--color-border); }
.chip__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.chip__link { color: inherit; }
.chip__link:hover { color: var(--color-text-primary); }

/* Buttons — T13: flat, no gradient, no glow */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height-lg); padding-inline: var(--space-5); border-radius: var(--radius-md); font: var(--fw-semibold) var(--fs-body-sm)/1 var(--font-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); user-select: none; }
.btn:active { transform: translateY(1px); }
.btn--sm { height: var(--control-height-md); padding-inline: var(--space-4); font-size: var(--fs-body-sm); }
.btn--lg { height: 52px; padding-inline: var(--space-6); font-size: var(--fs-body-md); }
.btn--primary { background: var(--color-accent-solid); color: var(--color-accent-ink); border-color: var(--color-accent-solid); }
.btn { transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-ink); transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.2); }
.btn--primary:active { transform: translateY(0); box-shadow: none; }
.btn--secondary:hover { transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-elevated); border-color: var(--color-text-secondary); color: var(--color-text-primary); }

/* Nav — transparent over hero, glassy when scrolled (premium blur + saturate). */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: var(--space-3) var(--page-gutter); background: transparent; border-bottom: 1px solid transparent; transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), backdrop-filter var(--duration-base) var(--ease-standard); }
.nav[data-scrolled="true"] { background: color-mix(in srgb, var(--color-bg) 72%, transparent); border-bottom-color: var(--color-border); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); }
@supports not (backdrop-filter: blur(1px)) { .nav[data-scrolled="true"] { background: var(--color-bg); } }
.nav__inner { max-width: var(--container-xl); margin-inline: auto; display: flex; align-items: center; gap: var(--space-6); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--color-text-primary); font-size: var(--fs-body-md); letter-spacing: -.01em; }
.nav__brand:hover { color: var(--color-text-primary); }
.brand-mark { border-radius: 6px; flex-shrink: 0; display: block; }

/* Theme toggle — outlined icon button, sun in dark / moon in light */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); cursor: pointer; padding: 0; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.theme-toggle:hover { color: var(--color-text-primary); border-color: var(--color-text-secondary); background: var(--color-surface-elevated); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Default (no data-theme): show sun in dark, moon in light via prefers-color-scheme */
.theme-toggle .theme-toggle__sun { display: block; }
.theme-toggle .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .theme-toggle__sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .theme-toggle__moon { display: block; }
}
/* Explicit overrides */
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; }
.nav__links { display: flex; gap: var(--space-6); margin-left: auto; }
.nav__links a { font-size: var(--fs-body-sm); color: var(--color-text-secondary); }
.nav__links a:hover { color: var(--color-text-primary); }
@media (max-width: 720px) { .nav__links { display: none; } .theme-toggle { margin-left: auto; } }
@media (max-width: 480px) { .nav__brand span { display: none; } }

/* Dictation waveform — premium ambient full-width hero background.
   64 bars with:
   - vertical-gradient fill that dissolves at top/bottom (no hard edges)
   - sine-wave peak envelope across bars (organic "voice frequency" shape)
   - raised baseline so bars hold visual presence even at rest
   - staggered negative delays so motion is already flowing on first paint
   - radial mask softens the extremities into the hero bg */
.hero { overflow: hidden; }
.dictation-wave { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: .3; }
.dictation-wave .bars { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 62%; padding: 0;
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at center, #000 38%, transparent 96%);
          mask-image: radial-gradient(ellipse 88% 80% at center, #000 38%, transparent 96%); }
.dictation-wave .bars i {
  /* Fallback peak for browsers without CSS sin(); overridden below. */
  --peak: .72;
  --peak: calc(0.60 + 0.32 * sin(calc(var(--i) * 0.22rad)));
  display: block; width: 4px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-text-primary) 14%, var(--color-text-primary) 86%, transparent 100%);
  border-radius: 3px;
  transform: scaleY(.2); transform-origin: center;
  animation: wave-bar 1.8s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay: calc(var(--i) * -45ms);
  flex-shrink: 0;
}
@keyframes wave-bar {
  0%, 100% { transform: scaleY(.2); }
  50%      { transform: scaleY(var(--peak)); }
}
/* Light mode: darker bars on white, dial opacity for ambient feel */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .dictation-wave { opacity: .18; }
}
:root[data-theme="light"] .dictation-wave { opacity: .18; }
@media (prefers-reduced-motion: reduce) {
  .dictation-wave .bars i { animation: none; transform: scaleY(var(--peak, .6)); }
}
@media (max-width: 640px) {
  .dictation-wave .bars { height: 56%; }
  .dictation-wave .bars i { width: 3px; }
}
@media (max-width: 380px) {
  .dictation-wave .bars i { width: 2px; border-radius: 2px; }
}

/* Hero — T13: type carries it. No glow, no animation, no giant keycap. */
.hero { position: relative; padding-top: clamp(120px, 15vh, 180px); padding-bottom: clamp(72px, 10vh, 120px); text-align: center;
  /* Premium ambient: soft centre halo + faint dot grid */
  background-image:
    radial-gradient(ellipse 55% 45% at center 42%, rgba(255,255,255,.045), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.028) 1px, transparent 0);
  background-size: auto, 26px 26px;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero {
  background-image:
    radial-gradient(ellipse 55% 45% at center 42%, rgba(9,9,11,.03), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(9,9,11,.04) 1px, transparent 0);
} }
:root[data-theme="light"] .hero {
  background-image:
    radial-gradient(ellipse 55% 45% at center 42%, rgba(9,9,11,.03), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(9,9,11,.04) 1px, transparent 0);
}
.hero__inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; }
.hero__eyebrow { margin: 0 0 var(--space-6); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; }
.hero__title { font-size: var(--fs-display-1); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 14ch; margin: 0 0 var(--space-6); }
.hero__lead { font-size: var(--fs-display-4); font-weight: var(--fw-medium); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-text-secondary); max-width: 28ch; margin: 0 0 var(--space-10); }
.hero__subcopy { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--color-text-secondary); max-width: 580px; margin: 0 auto var(--space-10); }
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-6); }
.hero__meta { color: var(--color-text-muted); margin: 0; font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--fw-medium); }
.hero__meta-sub { color: var(--color-text-muted); margin: var(--space-2) 0 0; font-size: var(--fs-caption); }

@media (max-width: 640px) {
  .hero { padding-top: 112px; padding-bottom: 64px; }
  .hero__title { font-size: clamp(40px, 11vw, 60px); }
  .hero__lead { font-size: clamp(20px, 5.2vw, 26px); }
  .hero__ctas { width: 100%; flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
}

/* Social proof strip — T13: flat, just the 1px top/bottom rules */
.proof { padding: var(--space-10) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: transparent; }
.proof__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.proof__pills { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.proof__provenance { font-size: var(--fs-body-sm); color: var(--color-text-secondary); line-height: var(--lh-body); max-width: 60ch; }
.proof__link { display: inline-flex; align-items: center; gap: 4px; color: var(--color-accent); font-weight: var(--fw-medium); white-space: nowrap; margin-left: var(--space-2); }
@media (max-width: 820px) { .proof__inner { flex-direction: column; align-items: flex-start; text-align: left; } }

/* Demo showcase */
.demo .section__title, .demo .section__deck { text-align: center; margin-inline: auto; }

.macos-window { margin: 0 auto; max-width: 1040px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-macos); overflow: hidden; }
.macos-window__chrome { position: relative; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 var(--space-4); background: var(--color-surface-elevated); border-bottom: 1px solid var(--color-border); }
.macos-window__dot { width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--c); flex-shrink: 0; }
.macos-window__title { position: absolute; left: 0; right: 0; text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--color-text-muted); pointer-events: none; }
.macos-window__body { background: #000; position: relative; aspect-ratio: 16 / 10; }
.macos-window__body img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.macos-window__caption { padding: var(--space-4) var(--space-6); text-align: center; font-size: var(--fs-body-sm); color: var(--color-text-secondary); border-top: 1px solid var(--color-border); background: var(--color-surface); }
@media (prefers-color-scheme: light) { .macos-window__body { background: #F4F4F5; } }
@media (max-width: 1024px) { .macos-window { border-radius: var(--radius-lg); } }
@media (max-width: 640px) {
  .macos-window { border-radius: var(--radius-md); }
  .macos-window__chrome { height: 30px; }
  .macos-window__dot { width: 10px; height: 10px; }
  .macos-window__title { font-size: 11px; }
}

/* How it works — T13: flat cards, border only */
.how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.how__step { position: relative; padding: var(--space-6); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--ease-standard); }
.how__step:hover { border-color: var(--color-border-strong); }
.how__index { position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-medium); color: var(--color-text-muted); letter-spacing: .02em; }
.how__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-primary); margin-bottom: var(--space-5); }
.how__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.how__body { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--color-text-secondary); }
.how__footer { margin-top: var(--space-10); text-align: center; }
@media (max-width: 900px) { .how__steps { grid-template-columns: 1fr; } }

/* Features — T13: flat, hairline borders */
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature-card { padding: var(--space-6); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--ease-standard); }
.feature-card { transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.feature-card:hover { border-color: var(--color-border-strong); background: color-mix(in srgb, var(--color-surface-elevated) 50%, transparent); transform: translateY(-3px); }
.feature-card__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-primary); margin-bottom: var(--space-5); }
.feature-card__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.feature-card__body { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--color-text-secondary); }
.feature-card__link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-4); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--color-accent); }
@media (max-width: 900px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features__grid { grid-template-columns: 1fr; } }

/* AI-agent use case */
.ai .section__title { max-width: 30ch; }
.ai__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-12); align-items: center; }
.ai__para { font-size: var(--fs-body-md); line-height: var(--lh-body); color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.ai__apps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai__app { font-family: var(--font-mono); font-size: var(--fs-code); font-weight: var(--fw-medium); color: var(--color-text-secondary); padding: 5px 11px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-full); }

.ai__transcript { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; }
.ai__transcript-chrome { position: relative; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 var(--space-4); background: var(--color-surface-elevated); border-bottom: 1px solid var(--color-border); }
.ai__transcript-title { position: absolute; left: 0; right: 0; text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--color-text-muted); pointer-events: none; }
.ai__transcript-hotkey { margin-left: auto; display: inline-flex; align-items: center; position: relative; z-index: 1; }
.ai__transcript-body { margin: 0; padding: var(--space-6); background: var(--color-surface-sunken); font-family: var(--font-mono); font-size: var(--fs-code); line-height: 1.7; color: var(--color-text-primary); white-space: pre; overflow-x: auto; }
.ai__transcript-caption { padding: var(--space-4) var(--space-6); font-size: var(--fs-body-sm); color: var(--color-text-secondary); border-top: 1px solid var(--color-border); text-align: center; background: var(--color-surface); }
.ai__cta { display: flex; justify-content: center; margin-top: var(--space-12); }
@media (max-width: 900px) { .ai__grid { grid-template-columns: 1fr; gap: var(--space-10); } }

/* Comparison table — T13: flat, hairline borders, no cyan top-glow.
   Emphasis on VoiceToText column = bold text + subtle background only. */
.compare .section__title, .compare .section__deck { margin-inline: auto; text-align: center; }
.compare__frame { max-width: var(--container-xl); margin-inline: auto; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; }
.compare__grid { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(5, minmax(130px, 1fr)); }
.compare__head { padding: var(--space-5) var(--space-4); font: var(--fw-medium) var(--fs-caption)/1.3 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); text-align: center; background: transparent; }
.compare__head--row { text-align: left; }
.compare__head--ours { color: var(--color-text-primary); font-weight: var(--fw-semibold); background: var(--color-surface-elevated); }
.compare__row-label { padding: var(--space-5) var(--space-4); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--color-text-primary); border-top: 1px solid var(--color-border); display: flex; align-items: center; }
.compare__cell { padding: var(--space-5) var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); justify-content: center; font-size: var(--fs-body-sm); color: var(--color-text-secondary); border-top: 1px solid var(--color-border); text-align: center; line-height: var(--lh-tight); }
.compare__cell--ours { background: var(--color-surface-elevated); color: var(--color-text-primary); font-weight: var(--fw-medium); }
.compare__cell sup, .compare__card sup { font-size: 10px; margin-left: 2px; color: var(--color-text-muted); }

/* Status — T13: text-first, icons small and quiet. Keeping aria-hidden dots
   for quick visual scan, but muted. */
.status { width: 6px; height: 6px; border-radius: var(--radius-full); flex-shrink: 0; display: inline-block; }
.status--ok { background: var(--color-text-primary); }
.status--partial { background: var(--color-text-muted); }
.status--no { background: transparent; border: 1px solid var(--color-text-muted); width: 6px; height: 6px; }

.compare__mobile { display: none; flex-direction: column; gap: var(--space-4); }
.compare__card { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.compare__card--ours { border-color: var(--color-border-strong); background: var(--color-surface-elevated); }
.compare__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.compare__card-head h3 { font-size: 17px; margin: 0; letter-spacing: var(--ls-heading); }
.compare__card dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-4); margin: 0; }
.compare__card dt { color: var(--color-text-muted); font-size: var(--fs-body-sm); }
.compare__card dd { margin: 0; color: var(--color-text-primary); font-size: var(--fs-body-sm); display: inline-flex; gap: var(--space-2); align-items: center; text-align: right; justify-content: flex-end; }

.compare__footnotes { max-width: 780px; margin: var(--space-6) auto 0; color: var(--color-text-muted); }
.compare__footnotes li + li { margin-top: 4px; }
.compare__footnotes sup { margin-right: 4px; }
.compare__links { text-align: center; margin-top: var(--space-5); color: var(--color-text-muted); }
.compare__links a { display: inline-flex; align-items: center; gap: 4px; color: var(--color-accent); font-weight: var(--fw-medium); }
.compare__sep { margin: 0 var(--space-3); }

@media (max-width: 1024px) {
  .compare__frame { display: none; }
  .compare__mobile { display: flex; }
}

/* FAQ */
.faq .section__title, .faq .section__deck { margin-inline: auto; text-align: center; }
.faq__list { max-width: 760px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
.faq-item:last-child { border-bottom: 1px solid var(--color-border); }
.faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); color: var(--color-text-primary); cursor: pointer; list-style: none; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q > span { flex: 1; }
.faq-item__chevron { width: 18px; height: 18px; color: var(--color-text-muted); transition: transform var(--duration-base) var(--ease-standard); flex-shrink: 0; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__a { margin-top: var(--space-4); font-size: var(--fs-body-md); line-height: var(--lh-body); color: var(--color-text-secondary); max-width: 680px; }

/* Download / Install */
.download .section__title, .download .section__deck { margin-inline: auto; text-align: center; }
.download__inner { text-align: center; }
.download__ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.download__meta { color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-12); font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--fw-medium); }

.download__steps { max-width: 720px; margin: 0 auto var(--space-8); padding: var(--space-6) var(--space-8); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: left; }
.download__step { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-3) 0; }
.download__step + .download__step { border-top: 1px solid var(--color-border); }
.download__step-num { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: 13px; }
.download__step-title { font-size: var(--fs-body-md); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 2px; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.download__step-body { font-size: var(--fs-body-sm); color: var(--color-text-secondary); line-height: var(--lh-body); }
.download__perms { max-width: 640px; margin: 0 auto var(--space-3); color: var(--color-text-muted); line-height: var(--lh-body); }
.download__reqs { max-width: 640px; margin: 0 auto; color: var(--color-text-muted); }
.download__perms strong, .download__reqs strong { color: var(--color-text-secondary); }

@media (max-width: 600px) {
  .download__steps { padding: var(--space-5); }
  .download__ctas .btn { width: 100%; }
}

/* Footer */
.footer { border-top: 1px solid var(--color-border); padding: var(--space-16) 0 var(--space-12); color: var(--color-text-muted); background: var(--color-bg); }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--space-12); }
.footer__brand { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: var(--fw-semibold); color: var(--color-text-primary); font-size: var(--fs-body-md); margin-bottom: var(--space-4); letter-spacing: -.01em; }
.footer__tagline { color: var(--color-text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-body); max-width: 36ch; margin-bottom: var(--space-3); }
.footer__attribution { margin-bottom: var(--space-2); }
.footer__attribution a { color: var(--color-text-secondary); font-weight: var(--fw-medium); }
.footer__privacy { color: var(--color-text-muted); }

.footer__columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.footer__col-title { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__col a { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.footer__col a:hover { color: var(--color-text-primary); }

.footer__copyright { grid-column: 1 / -1; margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }

@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr; gap: var(--space-8); } .footer__columns { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (max-width: 600px) { .footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .footer__columns { grid-template-columns: 1fr; } }