/* ==========================================================================
   Velora — product site
   Two themes, no external fonts, no remote assets, no build step. Sections
   below follow the reading order of the page.

   Colours are plain custom properties overridden per theme rather than
   light-dark(): that function needs Safari 17.5+, and Velora supports
   macOS 14, which shipped with Safari 17.0. There, every light-dark() token
   would be invalid at computed-value time and the page would lose its
   palette entirely.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Surfaces ------------------------------------------------------------- */
  --bg: oklch(97.2% 0.012 85);
  --bg-raised: oklch(99.4% 0.006 85);
  --bg-sunk: oklch(94% 0.018 85);
  --bg-inverse: oklch(19% 0.035 290);

  /* Text ----------------------------------------------------------------- */
  --ink: oklch(20% 0.03 288);
  --ink-soft: oklch(45% 0.026 288);
  --ink-faint: oklch(60% 0.022 288);
  --ink-inverse: oklch(97% 0.012 85);

  /* Lines ---------------------------------------------------------------- */
  --line: oklch(88% 0.016 85);
  --line-strong: oklch(76% 0.022 85);

  /* Accents -------------------------------------------------------------- */
  --accent: oklch(47% 0.22 292);
  --accent-press: oklch(40% 0.2 292);
  --accent-wash: oklch(93% 0.045 292);
  --on-accent: oklch(99% 0.008 292);
  --signal: oklch(58% 0.16 52);
  --signal-wash: oklch(94% 0.055 62);
  --good: oklch(50% 0.13 155);

  /* The feature bands stay the same deep violet in both themes. Flipping
     them with the theme turns a dark page white halfway down. */
  --feature: oklch(27% 0.105 292);
  --feature-lift: oklch(43% 0.19 293);
  --on-feature: oklch(96% 0.014 292);
  --on-feature-2: oklch(80% 0.06 292);
  --feature-key: oklch(97% 0.012 85);
  --feature-key-ink: oklch(27% 0.14 292);

  /* Incidentals ---------------------------------------------------------- */
  --grain: 0.5;
  --img-outline: rgba(0, 0, 0, 0.1);
  --tint: oklch(25% 0.04 288 / 0.06);
  --tint-inset: oklch(25% 0.04 288 / 0.05);

  --dot-red: oklch(70% 0.16 25);
  --dot-amber: oklch(80% 0.14 85);
  --dot-green: oklch(76% 0.15 145);

  /* Depth ---------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(25% 0.04 288 / 0.07), 0 2px 6px oklch(25% 0.04 288 / 0.05);
  --shadow-md:
    0 1px 2px oklch(25% 0.04 288 / 0.06), 0 6px 16px oklch(25% 0.04 288 / 0.07),
    0 18px 40px oklch(25% 0.04 288 / 0.07);
  --shadow-lg:
    0 2px 4px oklch(25% 0.04 288 / 0.05), 0 12px 28px oklch(25% 0.04 288 / 0.09),
    0 40px 80px oklch(25% 0.04 288 / 0.1);
  --shadow-accent: 0 1px 2px oklch(40% 0.2 292 / 0.3), 0 8px 22px oklch(47% 0.22 292 / 0.26);
  --shadow-accent-hover: 0 1px 2px oklch(40% 0.2 292 / 0.3), 0 14px 30px oklch(47% 0.22 292 / 0.32);

  /* Type ----------------------------------------------------------------- */
  --font-display: ui-serif, "New York", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm --------------------------------------------------------------- */
  --shell: 76rem;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);

  /* Radii — nested surfaces stay concentric (outer = inner + padding) ----- */
  --r-xs: 0.5rem;
  --r-sm: 0.75rem;
  --r-md: 1.125rem;
  --r-lg: 1.75rem;
  --r-xl: 2.25rem;

  /* Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-both: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Dark by preference, unless the visitor has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  --bg: oklch(16.5% 0.022 288);
  --bg-raised: oklch(21% 0.026 288);
  --bg-sunk: oklch(13% 0.02 288);
  --bg-inverse: oklch(95% 0.012 85);

  --ink: oklch(94.5% 0.012 85);
  --ink-soft: oklch(74% 0.018 288);
  --ink-faint: oklch(58% 0.022 288);
  --ink-inverse: oklch(18% 0.03 288);

  --line: oklch(28.5% 0.022 288);
  --line-strong: oklch(40% 0.03 288);

  --accent: oklch(78% 0.15 292);
  --accent-press: oklch(86% 0.11 292);
  --accent-wash: oklch(28% 0.075 292);
  --on-accent: oklch(17% 0.04 292);
  --signal: oklch(80% 0.15 62);
  --signal-wash: oklch(30% 0.07 52);
  --good: oklch(78% 0.14 158);

  --grain: 0.28;
  --img-outline: rgba(255, 255, 255, 0.1);
  --tint: oklch(0% 0 0 / 0.3);
  --tint-inset: oklch(0% 0 0 / 0.25);

  --dot-red: oklch(62% 0.16 25);
  --dot-amber: oklch(72% 0.14 85);
  --dot-green: oklch(66% 0.15 145);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.34), 0 2px 6px oklch(0% 0 0 / 0.24);
  --shadow-md:
    0 1px 2px oklch(0% 0 0 / 0.32), 0 6px 16px oklch(0% 0 0 / 0.3),
    0 18px 40px oklch(0% 0 0 / 0.26);
  --shadow-lg:
    0 2px 4px oklch(0% 0 0 / 0.3), 0 12px 28px oklch(0% 0 0 / 0.34),
    0 40px 80px oklch(0% 0 0 / 0.4);
  --shadow-accent: 0 1px 2px oklch(0% 0 0 / 0.3), 0 8px 22px oklch(0% 0 0 / 0.34);
  --shadow-accent-hover: 0 1px 2px oklch(0% 0 0 / 0.3), 0 14px 30px oklch(0% 0 0 / 0.4);
  }
}

/* Dark by explicit choice, whatever the system says. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: oklch(16.5% 0.022 288);
  --bg-raised: oklch(21% 0.026 288);
  --bg-sunk: oklch(13% 0.02 288);
  --bg-inverse: oklch(95% 0.012 85);

  --ink: oklch(94.5% 0.012 85);
  --ink-soft: oklch(74% 0.018 288);
  --ink-faint: oklch(58% 0.022 288);
  --ink-inverse: oklch(18% 0.03 288);

  --line: oklch(28.5% 0.022 288);
  --line-strong: oklch(40% 0.03 288);

  --accent: oklch(78% 0.15 292);
  --accent-press: oklch(86% 0.11 292);
  --accent-wash: oklch(28% 0.075 292);
  --on-accent: oklch(17% 0.04 292);
  --signal: oklch(80% 0.15 62);
  --signal-wash: oklch(30% 0.07 52);
  --good: oklch(78% 0.14 158);

  --grain: 0.28;
  --img-outline: rgba(255, 255, 255, 0.1);
  --tint: oklch(0% 0 0 / 0.3);
  --tint-inset: oklch(0% 0 0 / 0.25);

  --dot-red: oklch(62% 0.16 25);
  --dot-amber: oklch(72% 0.14 85);
  --dot-green: oklch(66% 0.15 145);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.34), 0 2px 6px oklch(0% 0 0 / 0.24);
  --shadow-md:
    0 1px 2px oklch(0% 0 0 / 0.32), 0 6px 16px oklch(0% 0 0 / 0.3),
    0 18px 40px oklch(0% 0 0 / 0.26);
  --shadow-lg:
    0 2px 4px oklch(0% 0 0 / 0.3), 0 12px 28px oklch(0% 0 0 / 0.34),
    0 40px 80px oklch(0% 0 0 / 0.4);
  --shadow-accent: 0 1px 2px oklch(0% 0 0 / 0.3), 0 8px 22px oklch(0% 0 0 / 0.34);
  --shadow-accent-hover: 0 1px 2px oklch(0% 0 0 / 0.3), 0 14px 30px oklch(0% 0 0 / 0.4);
}

:root[data-theme="light"] { color-scheme: light; }

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* A single fine grain over the whole page. Keeps the flat surfaces from
   reading as plastic, and costs one fixed layer. */
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }

button { font: inherit; color: inherit; }

button,
summary,
a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

h1, h2, h3, p, dl, dd { margin-top: 0; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h3 {
  margin-bottom: 0.4rem;
  font-size: 1.28rem;
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 680;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0.28rem color-mix(in oklch, var(--accent) 16%, transparent);
}

.section-lede {
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.62;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  background: var(--bg-inverse);
  color: var(--ink-inverse);
  font-weight: 640;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 200ms var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in oklch, var(--bg) 76%, transparent);
  transition: box-shadow 260ms var(--ease), background-color 260ms var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: saturate(180%) blur(18px); }
}

.site-header.is-stuck {
  background: color-mix(in oklch, var(--bg) 86%, transparent);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px var(--tint);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  min-height: 4.25rem;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 24%;
  outline: 1px solid var(--img-outline);
  outline-offset: -1px;
  box-shadow: var(--shadow-sm);
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.855rem;
  font-weight: 560;
}

.desktop-nav a {
  position: relative;
  padding-block: 1.25rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 160ms var(--ease-soft);
}

.desktop-nav a::after {
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}

.desktop-nav a:hover { color: var(--ink); }
.desktop-nav a:hover::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-toggle {
  position: relative;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color 180ms var(--ease-soft), background-color 180ms var(--ease-soft), scale 140ms var(--ease);
}

/* The control is 40px visually; stretch the hit target past it. */
.theme-toggle::after {
  position: absolute;
  inset: -0.25rem;
  content: "";
}

.theme-toggle:hover { border-color: var(--line-strong); }
.theme-toggle:active { scale: 0.96; }

/* Both icons stay in the DOM and cross-fade, so each direction animates. */
.theme-icon {
  position: absolute;
  transition: opacity 240ms cubic-bezier(0.2, 0, 0, 1), scale 240ms cubic-bezier(0.2, 0, 0, 1), filter 240ms cubic-bezier(0.2, 0, 0, 1);
}

/* Eight rays drawn with offset shadows — no SVG, no extra elements. */
.theme-icon-sun {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow:
    0 -0.6rem 0 -0.29rem var(--signal), 0 0.6rem 0 -0.29rem var(--signal),
    -0.6rem 0 0 -0.29rem var(--signal), 0.6rem 0 0 -0.29rem var(--signal),
    -0.42rem -0.42rem 0 -0.3rem var(--signal), 0.42rem -0.42rem 0 -0.3rem var(--signal),
    -0.42rem 0.42rem 0 -0.3rem var(--signal), 0.42rem 0.42rem 0 -0.3rem var(--signal);
}

.theme-icon-moon {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset -0.32rem -0.12rem 0 -0.03rem var(--bg-raised);
}

:root[data-theme="dark"] .theme-icon-sun,
.theme-icon-moon { opacity: 0; scale: 0.25; filter: blur(4px); }

:root[data-theme="dark"] .theme-icon-moon,
.theme-icon-sun { opacity: 1; scale: 1; filter: blur(0); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-icon-sun { opacity: 0; scale: 0.25; filter: blur(4px); }
  :root:not([data-theme]) .theme-icon-moon { opacity: 1; scale: 1; filter: blur(0); }
}

.nav-star {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 620;
  text-decoration: none;
  transition: color 180ms var(--ease-soft), background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft), scale 140ms var(--ease);
}

.nav-star:hover {
  border-color: var(--bg-inverse);
  background: var(--bg-inverse);
  color: var(--ink-inverse);
}

.nav-star:active { scale: 0.96; }

.star-mark { color: var(--signal); transition: rotate 320ms var(--ease); }
.nav-star:hover .star-mark,
.button:hover .star-mark { rotate: 72deg; }

.mobile-nav { position: relative; }

.mobile-nav summary {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-raised);
  list-style: none;
  cursor: pointer;
}

.mobile-nav summary::-webkit-details-marker { display: none; }

.mobile-nav summary span,
.mobile-nav summary span::before,
.mobile-nav summary span::after {
  display: block;
  width: 0.85rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 160ms var(--ease-soft);
}

.mobile-nav summary span::before,
.mobile-nav summary span::after {
  position: absolute;
  content: "";
}

.mobile-nav summary span::before { transform: translateY(-0.29rem); }
.mobile-nav summary span::after { transform: translateY(0.29rem); }

.mobile-nav[open] summary span { opacity: 0; }
.mobile-nav[open] summary span::before { transform: rotate(45deg); opacity: 1; }
.mobile-nav[open] summary span::after { transform: rotate(-45deg); opacity: 1; }

.mobile-nav nav {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  display: grid;
  width: min(15rem, calc(100vw - 2rem));
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
}

.mobile-nav nav a {
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-xs);
  font-size: 0.9rem;
  font-weight: 560;
  text-decoration: none;
  transition: background-color 160ms var(--ease-soft);
}

.mobile-nav nav a:hover { background: var(--accent-wash); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.8rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1;
  text-decoration: none;
  transition: background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft), box-shadow 220ms var(--ease), color 180ms var(--ease-soft), translate 220ms var(--ease), scale 140ms var(--ease);
}

.button:active { scale: 0.96; }

.button-glyph { transition: translate 260ms var(--ease); }
.button:hover .button-glyph { translate: 0 0.18rem; }

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}

.button-primary:hover {
  background: var(--accent-press);
  translate: 0 -2px;
  box-shadow: var(--shadow-accent-hover);
}

.button-quiet {
  border-color: var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink);
}

.button-quiet:hover { border-color: var(--ink-faint); translate: 0 -2px; }

/* Sits on a feature band, so it does not follow the page theme. */
.button-onlight {
  background: var(--feature-key);
  color: var(--feature-key-ink);
  box-shadow: 0 8px 22px oklch(12% 0.05 292 / 0.35);
}

.button-onlight:hover { translate: 0 -2px; box-shadow: 0 14px 30px oklch(12% 0.05 292 / 0.42); }

.button-ghost {
  border-color: color-mix(in oklch, currentColor 32%, transparent);
  color: inherit;
}

.button-ghost:hover { background: color-mix(in oklch, currentColor 10%, transparent); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--accent);
  font-weight: 620;
  text-decoration: none;
}

.link-glyph { transition: translate 200ms var(--ease); }
.text-link:hover { text-decoration: underline; }
.text-link:hover .link-glyph { translate: 0.15rem -0.15rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.hero-copy { align-self: center; }

h1 {
  margin-bottom: 1.4rem;
  font-size: clamp(3rem, 7.4vw, 5.2rem);
}

h1 em {
  display: inline-block;
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

.hero-lede {
  max-width: 46ch;
  margin-bottom: 2rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.58;
}

.hero-actions,
.iphone-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-weight: 560;
  list-style: none;
}

.hero-facts li { display: inline-flex; align-items: center; gap: 0.4rem; }

.hero-facts li::before {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--good);
  color: var(--bg);
  content: "✓";
  font-size: 0.55rem;
  font-weight: 900;
  line-height: 0.95rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Hero demo — the interactive dictation surface
   -------------------------------------------------------------------------- */

.hero-visual {
  position: relative;
  margin: 0;
  align-self: center;
}

.demo-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.demo-chrome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunk);
}

.chrome-dots { display: inline-flex; gap: 0.35rem; }

.chrome-dots i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.chrome-dots i:first-child { background: var(--dot-red); }
.chrome-dots i:nth-child(2) { background: var(--dot-amber); }
.chrome-dots i:last-child { background: var(--dot-green); }

.chrome-title {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 620;
  text-align: center;
}

.chrome-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.demo-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.1rem;
  /* Locked so switching examples or replaying never resizes the page. */
  height: clamp(18.5rem, 27vw, 20.5rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

.demo-caption {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transition: opacity 240ms var(--ease-soft);
}

.demo-body {
  display: grid;
  align-content: center;
  min-height: 0;
  overflow: hidden;
}

.demo-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.7vw, 1.72rem);
  line-height: 1.35;
  letter-spacing: -0.014em;
  transition: color 320ms var(--ease-soft);
}

/* While the raw transcript is still on screen it reads as provisional. */
.demo-stage.is-listening .demo-line,
.demo-stage.is-polishing .demo-line { color: var(--ink-faint); }

.demo-stage.is-done .demo-line { color: var(--ink); }

/* Token diff engine ------------------------------------------------------ */

/* Each token is an atomic inline box clipped to its own measured width, so
   collapsing it to zero reflows the sentence around it. The width comes from
   JS (--w) rather than a `1fr` grid track: a flexible track lets the box
   shrink to the space left on the line instead of wrapping, which silently
   truncates the transcript. */
.tok {
  display: inline-block;
  max-width: var(--w, none);
  overflow: hidden;
  white-space: pre;
  vertical-align: bottom;
}

/* Transitions are enabled only after the measured width is in place, so the
   initial none → px step is never animated (it would interpolate discretely
   and pop). Every later change is px → px. */
.tok.is-sized {
  transition: max-width 460ms var(--ease), opacity 300ms var(--ease-soft);
}

.tok-cut > span,
.tok-add > span { border-radius: 0.28rem; }

.tok.is-out { max-width: 0; opacity: 0; }

.tok-cut.is-marked > span {
  background: var(--signal-wash);
  box-shadow: 0 0 0 0.15rem var(--signal-wash);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--signal) 70%, transparent);
  text-decoration-thickness: 0.06em;
}

.tok-add.is-in > span { animation: token-land 900ms var(--ease) both; }

@keyframes token-land {
  0%   { background: var(--accent-wash); box-shadow: 0 0 0 0.15rem var(--accent-wash); }
  70%  { background: var(--accent-wash); box-shadow: 0 0 0 0.15rem var(--accent-wash); }
  100% { background: transparent; box-shadow: 0 0 0 0.15rem transparent; }
}

/* Structured results (lists and paragraph splits) ------------------------- */

.demo-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.4;
  list-style: none;
  counter-reset: demo;
}

.demo-list li {
  opacity: 0;
  translate: 0 0.5rem;
  transition: opacity 420ms var(--ease-soft), translate 480ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.demo-list.is-in li { opacity: 1; translate: 0 0; }

.demo-list.is-ordered li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  counter-increment: demo;
}

.demo-list.is-ordered li::before {
  content: counter(demo) ".";
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8em;
}

/* Without JavaScript the demo is a plain, honest before/after. */
.demo-nojs { display: grid; gap: 0.7rem; margin: 0; }

.demo-nojs p { margin: 0; }

.demo-nojs-raw {
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
}

.demo-nojs-out {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.7vw, 1.72rem);
  line-height: 1.35;
  letter-spacing: -0.014em;
}

.js .demo-nojs { display: none; }
html:not(.js) .demo-line,
html:not(.js) .demo-list { display: none; }

/* Controls that do nothing without scripting should not look like controls. */
html:not(.js) .demo-controls,
html:not(.js) .copy-command,
html:not(.js) .theme-toggle { display: none; }

/* Recording HUD ----------------------------------------------------------- */

.demo-hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  /* concentric: stage padding is ~1.6rem inside a 2.25rem frame */
  border-radius: 999px;
  background: var(--bg-sunk);
  transition: border-color 320ms var(--ease-soft), background-color 320ms var(--ease-soft);
}

.demo-stage.is-listening .demo-hud { border-color: color-mix(in oklch, var(--signal) 55%, transparent); }
.demo-stage.is-done .demo-hud { border-color: color-mix(in oklch, var(--good) 45%, transparent); }

.hud-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.25rem;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background-color 300ms var(--ease-soft), box-shadow 300ms var(--ease-soft);
}

.demo-stage.is-listening .hud-dot {
  background: var(--signal);
  animation: hud-pulse 1.5s var(--ease-both) infinite;
}

.demo-stage.is-polishing .hud-dot { background: var(--accent); }
.demo-stage.is-done .hud-dot { background: var(--good); box-shadow: 0 0 0 0.22rem color-mix(in oklch, var(--good) 22%, transparent); }

@keyframes hud-pulse {
  50% { box-shadow: 0 0 0 0.42rem color-mix(in oklch, var(--signal) 0%, transparent); }
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--signal) 38%, transparent); }
}

.hud-wave {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  height: 1.5rem;
}

.hud-wave i {
  width: 0.16rem;
  height: 100%;
  border-radius: 999px;
  background: var(--ink-faint);
  transform-origin: center;
  scale: 1 0.16;
  transition: scale 320ms var(--ease-soft), background-color 320ms var(--ease-soft);
}

.demo-stage.is-listening .hud-wave i {
  background: var(--signal);
  animation: voice-bar var(--wave-speed) var(--ease-both) infinite;
  animation-delay: var(--wave-delay);
}

.demo-stage.is-polishing .hud-wave i { background: var(--accent); scale: 1 0.3; }
.demo-stage.is-done .hud-wave i { background: color-mix(in oklch, var(--good) 60%, transparent); }

/* Every bar runs at its own rate, inside a natural speech-rate band. */
.hud-wave i:nth-child(1)  { --wave-speed: 820ms;  --wave-delay: -180ms; --wave-peak: 0.44; }
.hud-wave i:nth-child(2)  { --wave-speed: 940ms;  --wave-delay: -410ms; --wave-peak: 0.78; }
.hud-wave i:nth-child(3)  { --wave-speed: 880ms;  --wave-delay: -90ms;  --wave-peak: 1;    }
.hud-wave i:nth-child(4)  { --wave-speed: 990ms;  --wave-delay: -520ms; --wave-peak: 0.62; }
.hud-wave i:nth-child(5)  { --wave-speed: 850ms;  --wave-delay: -260ms; --wave-peak: 0.9;  }
.hud-wave i:nth-child(6)  { --wave-speed: 960ms;  --wave-delay: -130ms; --wave-peak: 0.52; }
.hud-wave i:nth-child(7)  { --wave-speed: 800ms;  --wave-delay: -330ms; --wave-peak: 0.96; }
.hud-wave i:nth-child(8)  { --wave-speed: 980ms;  --wave-delay: -470ms; --wave-peak: 0.58; }
.hud-wave i:nth-child(9)  { --wave-speed: 900ms;  --wave-delay: -210ms; --wave-peak: 0.84; }
.hud-wave i:nth-child(10) { --wave-speed: 1000ms; --wave-delay: -570ms; --wave-peak: 0.48; }
.hud-wave i:nth-child(11) { --wave-speed: 920ms;  --wave-delay: -60ms;  --wave-peak: 0.72; }
.hud-wave i:nth-child(12) { --wave-speed: 870ms;  --wave-delay: -300ms; --wave-peak: 0.4;  }

@keyframes voice-bar {
  0%, 100% { scale: 1 0.2; }
  28%      { scale: 1 var(--wave-peak); }
  54%      { scale: 1 calc(var(--wave-peak) * 0.6); }
  76%      { scale: 1 0.34; }
}

.hud-status {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hud-time {
  padding-right: 0.35rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* Controls ---------------------------------------------------------------- */

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.1rem;
}

.keycap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.55rem 1.1rem 0.55rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  font-size: 0.85rem;
  font-weight: 620;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 2px 0 var(--line-strong), var(--shadow-sm);
  transition: translate 120ms var(--ease-both), box-shadow 120ms var(--ease-both), border-color 180ms var(--ease-soft);
}

.keycap:hover { border-color: var(--ink-faint); }

.keycap.is-down,
.keycap:active {
  translate: 0 2px;
  box-shadow: 0 0 0 var(--line-strong), var(--shadow-sm);
}

.keycap-glyph {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--bg-sunk);
  color: var(--accent);
  font-size: 0.9rem;
  transition: background-color 200ms var(--ease-soft), color 200ms var(--ease-soft);
}

.keycap.is-down .keycap-glyph { background: var(--signal-wash); color: var(--signal); }

.demo-switcher {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-sunk);
}

.demo-switcher button {
  min-height: 2.1rem;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 620;
  cursor: pointer;
  transition: color 180ms var(--ease-soft), background-color 180ms var(--ease-soft), scale 140ms var(--ease);
}

.demo-switcher button:hover { color: var(--ink); }
.demo-switcher button:active { scale: 0.96; }

.demo-switcher button.is-active {
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.demo-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Network readout
   -------------------------------------------------------------------------- */

.wire {
  border-block: 1px solid var(--line);
  background: var(--bg-sunk);
}

.wire-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding-block: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.wire-label {
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wire-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  color: var(--ink-soft);
}

.wire-readout b { color: var(--good); font-variant-numeric: tabular-nums; font-weight: 640; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding-block: var(--section-pad);
}

.section + .section { border-top: 1px solid var(--line); }

/* An editorial spine in the left margin, only where there is room for it. */
.section::before {
  position: absolute;
  top: var(--section-pad);
  left: -3.6rem;
  display: none;
  color: var(--ink-faint);
  content: attr(data-index);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.section-head { max-width: 44rem; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }

.section-head h2 {
  margin-bottom: 1.1rem;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
}

/* Steps ------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  list-style: none;
}

.steps li {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--bg);
  transition: background-color 260ms var(--ease-soft);
}

.steps li:hover { background: var(--bg-raised); }

.steps li p {
  max-width: 34ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.step-index {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.step-art {
  display: flex;
  align-items: flex-end;
  height: 3.5rem;
  margin-top: 1.6rem;
  color: var(--accent);
}

.step-art-key b {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--bg-raised);
  font-size: 1.2rem;
  font-weight: 400;
  box-shadow: 0 2px 0 var(--line-strong);
}

.step-art-wave { gap: 0.3rem; }

.step-art-wave i {
  width: 0.28rem;
  border-radius: 999px;
  background: currentColor;
  transform-origin: bottom;
}

.step-art-wave i:nth-child(1) { height: 1.2rem; }
.step-art-wave i:nth-child(2) { height: 2.4rem; }
.step-art-wave i:nth-child(3) { height: 3.5rem; }
.step-art-wave i:nth-child(4) { height: 1.8rem; }
.step-art-wave i:nth-child(5) { height: 3rem; }
.step-art-wave i:nth-child(6) { height: 2.1rem; }
.step-art-wave i:nth-child(7) { height: 1rem; }

.step-art-field {
  align-items: center;
  gap: 0.15rem;
  height: 3.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--bg-raised);
  box-shadow: inset 0 1px 2px var(--tint-inset);
}

.step-art-field em {
  color: var(--ink-faint);
  font-size: 0.82rem;
  font-style: normal;
}

.step-art-field b {
  display: block;
  width: 0.11rem;
  height: 1.1rem;
  background: var(--accent);
  animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink { 50% { opacity: 0; } }

/* Modes ------------------------------------------------------------------- */

.modes { display: grid; gap: 1rem; }

.mode {
  display: grid;
  /* The rule line is pinned to the bottom so all four cards agree. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  transition: border-color 260ms var(--ease-soft), box-shadow 300ms var(--ease), translate 300ms var(--ease);
}

.mode:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  translate: 0 -2px;
}

.mode header {
  display: grid;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.mode header h3 { margin: 0; font-size: 1.05rem; }

/* Reserved for two lines so every card's rule sits on the same baseline. */
.mode-app {
  min-height: 2lh;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.mode-said {
  margin: 0;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.45;
}

.mode-got {
  position: relative;
  margin: 0;
  padding-left: 0.9rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.mode-got::before {
  position: absolute;
  top: 0.28em;
  bottom: 0.28em;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.mode-got code {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.mode-rule {
  margin: 0;
  padding-top: 0.5rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Bento ------------------------------------------------------------------- */

.bento { display: grid; gap: 1rem; }

.tile {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  transition: border-color 260ms var(--ease-soft), box-shadow 300ms var(--ease), translate 300ms var(--ease);
}

.tile:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  translate: 0 -2px;
}

.tile p:not(.tile-kicker) {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.tile-kicker {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tile h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

.tile-meeting {
  align-content: space-between;
  gap: 2rem;
  border-color: transparent;
  background:
    radial-gradient(120% 150% at 92% 4%, var(--feature-lift) 0%, transparent 62%),
    var(--feature);
  color: var(--on-feature);
}

.tile-meeting:hover { border-color: transparent; }
.tile-meeting .tile-kicker { color: oklch(82% 0.12 292); }
.tile-meeting p:not(.tile-kicker) { color: var(--on-feature-2); }
.tile-meeting .tile-copy { display: grid; gap: 0.45rem; }
.tile-meeting .tile-copy h3 { max-width: 16ch; }

.meeting-hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid oklch(80% 0.09 292 / 0.28);
  border-radius: 999px;
  background: oklch(17% 0.06 292 / 0.55);
}

.record-ring {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in oklch, oklch(68% 0.22 28) 55%, transparent);
  border-radius: 50%;
}

.record-ring i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: oklch(66% 0.22 28);
  animation: record-pulse 1.7s var(--ease-both) infinite;
}

@keyframes record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(66% 0.22 28 / 0.45); }
  70% { box-shadow: 0 0 0 0.42rem oklch(66% 0.22 28 / 0); }
}

.meeting-name { display: grid; min-width: 0; }
.meeting-name b { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.meeting-name small { color: oklch(74% 0.05 292); font-size: 0.62rem; }

.meeting-time {
  color: oklch(78% 0.05 292);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.stop-mark {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: 50%;
  background: oklch(96% 0.02 292 / 0.12);
  color: oklch(72% 0.2 28);
  font-size: 0.5rem;
}

.media-demo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  /* concentric with the 1.75rem tile radius minus 0.7rem of padding */
  border-radius: 1.05rem;
  background: var(--bg);
}

.album-art {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 70% 22%, var(--signal), transparent 45%),
    linear-gradient(150deg, var(--accent), color-mix(in oklch, var(--accent) 40%, var(--bg-inverse)));
  color: oklch(98% 0.01 292);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
}

.media-copy { display: grid; min-width: 0; gap: 0.05rem; }
.media-copy b { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.media-copy small { color: var(--ink-faint); font-size: 0.66rem; }

.media-progress {
  height: 0.2rem;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: var(--accent-wash);
  overflow: hidden;
}

.media-progress i {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left;
}

.media-control {
  position: relative;
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-inverse);
  color: var(--ink-inverse);
}

.pause-bars,
.pause-bars::after {
  width: 0.2rem;
  height: 0.75rem;
  border-radius: 0.08rem;
  background: currentColor;
}

.pause-bars::after { display: block; margin-left: 0.38rem; content: ""; }

.play-mark {
  position: absolute;
  /* optical centre: a triangle's mass sits left of its bounding box */
  margin-left: 0.1rem;
  opacity: 0;
  font-size: 0.72rem;
  scale: 0.65;
}

.tile-music.is-visible .pause-bars { animation: pause-out 320ms 1.4s var(--ease) forwards; }
.tile-music.is-visible .play-mark { animation: play-in 380ms 1.55s var(--ease) forwards; }
.tile-music.is-visible .media-progress i { animation: progress-stall 2s var(--ease-soft) forwards; }

@keyframes pause-out { to { opacity: 0; scale: 0.6; } }
@keyframes play-in { to { opacity: 1; scale: 1; } }
@keyframes progress-stall { 0% { scale: 0.8 1; } 74%, 100% { scale: 1 1; } }

.edit-demo {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  margin-top: 1.4rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 0.94rem;
}

.edit-before mark {
  padding: 0.1rem 0.3rem;
  border-radius: 0.3rem;
  background: var(--accent-wash);
  color: var(--ink);
  font-style: italic;
}

.edit-arrow { color: var(--ink-faint); font-size: 0.8rem; }
.edit-after { font-weight: 600; }

.big-number {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

/* Privacy ----------------------------------------------------------------- */

.privacy-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.privacy-copy h2 {
  margin-bottom: 1.1rem;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
}

.privacy-copy .section-lede { margin-bottom: 0.75rem; }

.ledger { margin: 0; border-top: 1px solid var(--line-strong); }

.ledger-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
}

.ledger-row dt { font-size: 0.94rem; font-weight: 560; }

/* The dotted leader is the whole point: it reads as a ledger, not a card. */
.ledger-row::after {
  grid-column: 2;
  grid-row: 1;
  height: 1px;
  border-bottom: 1px dotted var(--line-strong);
  content: "";
  translate: 0 -0.3em;
}

.ledger-row dd {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-align: right;
}

.ledger-row.is-local dd { color: var(--good); }
.ledger-row.is-net dd { color: var(--signal); }

/* iPhone ------------------------------------------------------------------ */

.iphone {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg-sunk);
  border-block: 1px solid var(--line);
}

.iphone-inner {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.iphone-copy h2 {
  margin-bottom: 1.1rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.alpha-tag {
  padding: 0.18rem 0.45rem;
  border: 1px solid color-mix(in oklch, var(--signal) 50%, transparent);
  border-radius: 0.35rem;
  background: var(--signal-wash);
  color: var(--signal);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}

.warning {
  max-width: 52ch;
  margin: 1.5rem 0 1.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in oklch, var(--signal) 38%, transparent);
  border-radius: var(--r-md);
  background: var(--signal-wash);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.warning strong { color: var(--ink); }

.phone {
  position: relative;
  width: min(17.5rem, 82vw);
  margin-inline: auto;
  padding: 0.5rem;
  border: 1px solid var(--line-strong);
  /* concentric: screen radius 1.9rem + 0.5rem of bezel */
  border-radius: 2.4rem;
  background: var(--bg-inverse);
  box-shadow: var(--shadow-lg);
}

.phone-key {
  position: absolute;
  top: 6rem;
  left: -0.22rem;
  width: 0.22rem;
  height: 2.8rem;
  border-radius: 0.2rem 0 0 0.2rem;
  background: var(--signal);
}

.phone-screen {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 32rem;
  padding: 0.9rem 1.05rem 1.4rem;
  border-radius: 1.9rem;
  background: var(--bg);
  color: var(--ink);
}

.phone-island {
  width: 5.2rem;
  height: 1.4rem;
  margin: 0 auto 1.75rem;
  border-radius: 999px;
  background: var(--bg-inverse);
}

.phone-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.phone-head {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.phone-card {
  min-height: 6.5rem;
  margin-top: 0.4rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg-raised);
  color: var(--ink-faint);
  font-size: 0.82rem;
}

.phone-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  height: 3rem;
}

.phone-wave i {
  width: 0.2rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: center;
  animation: ambient-wave 1.3s var(--ease-both) infinite alternate;
}

.phone-wave i:nth-child(2), .phone-wave i:nth-child(6) { height: 1.7rem; animation-delay: -0.2s; }
.phone-wave i:nth-child(3), .phone-wave i:nth-child(5) { height: 2.3rem; animation-delay: -0.45s; }
.phone-wave i:nth-child(4) { height: 2.9rem; animation-delay: -0.7s; }

@keyframes ambient-wave {
  from { scale: 1 0.45; opacity: 0.7; }
  to { scale: 1 1; opacity: 1; }
}

.phone-mic {
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0.7rem 1.6rem color-mix(in oklch, var(--accent) 32%, transparent);
}

/* A microphone capsule, drawn rather than fetched. */
.phone-mic::before,
.phone-mic::after {
  position: absolute;
  left: 50%;
  content: "";
  translate: -50% 0;
}

.phone-mic::before {
  top: 1.15rem;
  width: 0.75rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--on-accent);
}

.phone-mic::after {
  top: 2.45rem;
  width: 1.35rem;
  height: 0.68rem;
  border: 0.16rem solid var(--on-accent);
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.phone-foot {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  font-weight: 620;
  text-align: center;
}

/* Install ----------------------------------------------------------------- */

.install-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }

.install-copy h2 { margin-bottom: 1.1rem; font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.install-copy .section-lede { margin-bottom: 1.75rem; }

.terminal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunk);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.terminal-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.7rem 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.terminal-title {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 620;
  text-align: center;
}

.copy-command {
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 620;
  cursor: pointer;
  transition: background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft), color 180ms var(--ease-soft), scale 140ms var(--ease);
}

.copy-command:hover { border-color: var(--accent); color: var(--accent); }
.copy-command:active { scale: 0.96; }
.copy-command.is-done { border-color: var(--good); color: var(--good); }

.terminal pre {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) 1.1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.74rem, 1.5vw, 0.88rem);
  line-height: 1.7;
}

.prompt { color: var(--signal); user-select: none; }

.terminal-result {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--good);
  font-size: 0.76rem;
  font-weight: 600;
}

/* FAQ --------------------------------------------------------------------- */

.faq-list { border-top: 1px solid var(--line-strong); }

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  padding: 1.15rem 3rem 1.15rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 580;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  transition: color 180ms var(--ease-soft);
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }

.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  content: "+";
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1;
  translate: 0 -50%;
  transition: rotate 300ms var(--ease), border-color 200ms var(--ease-soft);
}

.faq-list details[open] summary::after { rotate: 135deg; border-color: var(--accent); }

/* grid-template-rows keeps the open/close animation off layout-thrashing
   height, and still collapses to nothing. */
.faq-list details > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ease);
}

.faq-list details[open] > div { grid-template-rows: 1fr; }

.faq-list details > div > p {
  max-width: 62ch;
  overflow: hidden;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.faq-list details[open] > div > p { padding-bottom: 1.6rem; }

/* Closing ----------------------------------------------------------------- */

.closing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 110% at 50% -10%, var(--feature-lift) 0%, transparent 66%),
    var(--feature);
  color: var(--on-feature);
}

.closing-inner {
  display: grid;
  justify-items: center;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  text-align: center;
}

.closing .eyebrow { color: oklch(82% 0.12 292); }
.closing .eyebrow-dot { box-shadow: 0 0 0 0.28rem oklch(82% 0.12 292 / 0.18); }

.closing h2 {
  max-width: 12ch;
  margin-bottom: 2rem;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.closing-mark {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 3.5rem;
  margin-bottom: 2rem;
}

.closing-mark i {
  width: 0.3rem;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  opacity: 0.85;
  animation: ambient-wave 1.4s var(--ease-both) infinite alternate;
}

.closing-mark i:nth-child(1), .closing-mark i:nth-child(7) { height: 1.1rem; animation-delay: -0.1s; }
.closing-mark i:nth-child(2), .closing-mark i:nth-child(6) { height: 2rem; animation-delay: -0.35s; }
.closing-mark i:nth-child(3), .closing-mark i:nth-child(5) { height: 2.9rem; animation-delay: -0.6s; }
.closing-mark i:nth-child(4) { height: 3.5rem; animation-delay: -0.85s; }

.closing-note {
  max-width: 32rem;
  margin: 1.5rem 0 0;
  color: var(--on-feature-2);
  font-size: 0.82rem;
}

/* Footer ------------------------------------------------------------------ */

.footer-inner {
  display: grid;
  gap: 2rem;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding-block: 3rem max(3rem, env(safe-area-inset-bottom));
}

.footer-brand .brand { font-size: 1.1rem; margin-bottom: 0.5rem; }
.footer-brand .brand img { width: 2rem; height: 2rem; }

.footer-brand p,
.footer-meta { margin: 0; color: var(--ink-faint); font-size: 0.78rem; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.5rem 1.4rem;
}

.site-footer nav a {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 560;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 160ms var(--ease-soft);
}

.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Scroll reveals — content is visible by default and only hidden once the
   progressive-enhancement gate confirms JavaScript is running.
   -------------------------------------------------------------------------- */

.reveal { opacity: 1; transform: none; }

.js .reveal {
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
  transition-delay: calc(var(--reveal-order, 0) * 85ms);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 29.99rem) {
  /* Ragged button widths read as sloppy in a single narrow column. */
  .hero-actions .button,
  .iphone-actions .button { flex: 1 0 100%; }

  .wire-inner { font-size: 0.7rem; gap: 0.4rem 1.1rem; }
  .wire-readout { gap: 0.35rem 1.1rem; }
}

@media (min-width: 40rem) {
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-wide { grid-column: span 2; }
  .tile-meeting { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: end; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li:nth-child(3) { grid-column: span 3; }
  .footer-inner { grid-template-columns: 1fr auto; }
  .footer-meta { grid-column: 1 / -1; }
}

@media (min-width: 58rem) {
  .desktop-nav { display: flex; }
  .mobile-nav { display: none; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li:nth-child(3) { grid-column: auto; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile-wide { grid-column: span 6; }
  .tile-music { grid-column: span 3; }
  .tile-edit { grid-column: span 3; }
  .tile-lang { grid-column: span 2; }
  .tile-dict { grid-column: span 2; }
  .tile-history { grid-column: span 2; }
  .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .privacy-grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.85fr); align-items: start; }
  .install-grid { grid-template-columns: minmax(0, 1fr) minmax(24rem, 1fr); }
  .iphone-inner { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); }
  .footer-inner { grid-template-columns: 1fr auto auto; align-items: start; }
  .footer-meta { grid-column: auto; text-align: right; }
}

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(27rem, 0.92fr);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: center;
  }
}

@media (min-width: 88rem) {
  .section::before { display: block; }
}

@media (pointer: coarse) {
  .button,
  .text-link,
  .copy-command,
  .keycap { min-height: 2.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .demo-list li { opacity: 1; translate: none; }
}