/* ttsCast home page — styles.

   The home page owns its palette. It deliberately does NOT consume the
   shared --tts-color-* tokens: tokens.css flips to a light palette under
   [data-theme="light"], and hosts/viewers that stamp that attribute on
   <html> turned this page half-light. Values below mirror the dark set in
   ttsCast-design-tokens v0.2.2 (ground #0d0f25, card #111533, raised
   #1a2040, hairline #242b58, accent #5FD48B). Keep them in sync by hand. */

:root,
:root[data-theme],
:root[data-theme="light"],
:root[data-theme="dark"],
html.home-root {
  color-scheme: dark;
  --h-bg: #0d0f25;
  --h-card: #111533;
  --h-raised: #1a2040;
  --h-line: #242b58;
  --h-line-soft: rgba(36, 43, 88, 0.6);
  --h-text: #F0F9FF;
  --h-muted: #8498cb;
  --h-accent: #5FD48B;
  --h-accent-hover: #74DC9C;
  --h-accent-dim: #489B71;
  --h-accent-muted: #1D3441;
  --h-on-accent: #0d0f25;
  --h-warning: #F5B94B;

  --h-serif: "Newsreader", ui-serif, "New York", Georgia, "Times New Roman", serif;
  --h-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --h-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --h-wrap: 1200px;
  --h-gutter: clamp(20px, 4vw, 48px);
  --h-radius: 14px;
  --h-radius-lg: 20px;

  background: var(--h-bg);
}

/* Past 1600px the container grows with the window (1360px at 1920 and
   up), header and every section together, so the hero's headline and
   phone keep their size without running past its edge. */
@media (min-width: 1600px) {
  :root,
  :root[data-theme],
  :root[data-theme="light"],
  :root[data-theme="dark"],
  html.home-root {
    --h-wrap: min(1360px, 1200px + (100vw - 1600px) * .5);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; background: var(--h-bg); }

.home {
  background: var(--h-bg);
  color: var(--h-text);
  font-family: var(--h-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.home a { color: inherit; text-decoration: none; }
.home img { max-width: 100%; display: block; }
.home p, .home h1, .home h2, .home h3, .home ul, .home ol { margin: 0; }
.home ul, .home ol { padding: 0; list-style: none; }

.home :focus-visible {
  outline: 2px solid var(--h-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Pills keep their shape when focused (the 6px above squared them off). */
.home .btn:focus-visible { border-radius: 999px; }

.home .wrap {
  width: 100%;
  max-width: calc(var(--h-wrap) + 2 * var(--h-gutter));
  margin: 0 auto;
  padding: 0 var(--h-gutter);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--h-accent);
  color: var(--h-on-accent) !important;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 8px;
  font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; }

.dev-banner {
  background: var(--h-accent-dim);
  color: var(--h-on-accent);
  text-align: center;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 13px;
}

/* ---------- type ---------- */
.home h1,
.home h2 {
  font-family: var(--h-serif);
  font-weight: 500;
  font-optical-sizing: auto;
  color: var(--h-text);
  text-wrap: balance;
}
.home h3 {
  font-family: var(--h-sans);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--h-text);
}
.home p { text-wrap: pretty; }

/* Inline text links: white on the muted copy, a quiet underline. Tone does
   the work; green is kept for buttons, meters and "available" status. */
.home .section-head .lede a,
.home .faq-list details p a,
.home .form-thanks a,
.home .hero-store-link,
.home .where-status a,
.home .ea-lede a {
  color: var(--h-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(240, 249, 255, 0.4);
  text-underline-offset: 4px;
  transition: text-decoration-color .15s ease;
}
.home .section-head .lede a,
.home .faq-list details p a { padding: 12px 0; }
.home .section-head .lede a:hover,
.home .faq-list details p a:hover,
.home .form-thanks a:hover,
.home .hero-store-link:hover,
.home .where-status a:hover,
.home .ea-lede a:hover { text-decoration-color: currentColor; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--h-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.home .btn-primary {
  background: var(--h-accent);
  color: var(--h-on-accent);
}
.home .btn-primary:hover { background: var(--h-accent-hover); }
.home .btn-secondary {
  background: var(--h-raised);
  color: var(--h-text);
  border-color: var(--h-line);
}
.home .btn-secondary:hover { border-color: var(--h-muted); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- header ---------- */
.home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 15, 37, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--h-line-soft);
}
.home-header .wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}
/* Wordmark only: the square app icon (photo texture + two-line lettering)
   turned to mush at 28px. "Cast" in the accent echoes the icon's split. */
.home .brand {
  display: inline-flex;
  align-items: baseline;
  font-weight: 750;
  font-size: 21px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--h-text);
  flex: 0 0 auto;
}
.brand span,
.footer-brand span { color: var(--h-accent); }

.home-nav {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
}
.home .home-nav a {
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--h-muted);
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.home .home-nav a:hover { color: var(--h-text); background: var(--h-card); }
.home .home-nav a[aria-current="page"] { color: var(--h-text); background: var(--h-card); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.home .header-signin {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--h-text);
  padding: 8px 14px;
  border-radius: 999px;
}
.home .header-signin:hover { background: var(--h-card); }

/* Compact menu (<900px). A <details>, so it works without JS. */
.nav-menu { display: none; position: relative; flex: 0 0 auto; }
.nav-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--h-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--h-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-menu-button::-webkit-details-marker { display: none; }
.nav-menu-button:hover { background: var(--h-card); }
.home .nav-menu-button:focus-visible { border-radius: 999px; }
.nav-menu-icon,
.nav-menu-icon::before,
.nav-menu-icon::after {
  display: block;
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}
.nav-menu-icon { position: relative; }
.nav-menu-icon::before,
.nav-menu-icon::after { content: ""; position: absolute; left: 0; }
.nav-menu-icon::before { top: -4.5px; }
.nav-menu-icon::after { top: 4.5px; }
.nav-menu[open] .nav-menu-icon { background: transparent; }
.nav-menu[open] .nav-menu-icon::before { top: 0; transform: rotate(45deg); }
.nav-menu[open] .nav-menu-icon::after { top: 0; transform: rotate(-45deg); }
.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  display: grid;
  padding: 8px;
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.home .nav-menu-panel a {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--h-text);
}
.home .nav-menu-panel a:hover { background: var(--h-raised); }
.home .nav-menu-panel a[aria-current="page"] { font-weight: 650; background: var(--h-raised); }
.home .nav-menu-panel .nav-menu-signin {
  margin-top: 6px;
  border-top: 1px solid var(--h-line);
  border-radius: 0 0 10px 10px;
  padding-top: 14px;
  display: none;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 112px);
}
/* Copy aligns to the container's left edge (same line as the logo and every
   section below), phone to its right edge; the 1200px container keeps the
   pair together at 1834px+. */
.home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 700px) auto;
  justify-content: space-between;
  align-items: center;
  column-gap: clamp(48px, 6vw, 96px);
}
.hero-copy { max-width: 700px; }
.hero-copy h1 .l { display: block; white-space: nowrap; }
.hero-copy h1 {
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}
.hero-copy .sub {
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.55;
  color: var(--h-muted);
  max-width: 50ch;
  margin-bottom: 36px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}
.hero-note {
  margin-top: 28px !important;
  font-size: 14px;
  color: var(--h-muted);
  max-width: 52ch;
}

.hero-phone {
  position: relative;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* Phone: aspect-ratio reserved so there's no layout shift. The frame image
   is never transformed or filtered. Screen cut-out in the 1350x2760 frame:
   x72 y69 w1206 h2622. */
.phone-wrap {
  position: relative;
  /* 285px at 1024, ~368px at 1440, 400px from 1600 up. */
  width: clamp(280px, calc(20vw + 80px), 400px);
  aspect-ratio: 1350 / 2760;
}
.phone-screen {
  position: absolute;
  /* Bleeds 1px past the cut-out on every side; the opaque bezel covers the
     overlap, so sub-pixel rounding can never show a hairline of page
     background between the video and the frame. */
  left: calc(5.3333% - 1px);
  top: calc(2.5% - 1px);
  width: calc(89.3333% + 2px);
  height: calc(95% + 2px);
  border-radius: 13.5% / 6.2%;
  overflow: hidden;
  background: #000;
}
.phone-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Pause/play for the looping demo (WCAG 2.2.2): a quiet pill under the
   frame, never on it. */
.video-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--h-muted);
  font: 600 13px/1 var(--h-sans);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.video-toggle[hidden] { display: none; }
.video-toggle:hover { color: var(--h-text); }
.home .video-toggle:focus-visible { border-radius: 999px; }
/* Pause glyph: two bars; play glyph: a triangle. */
.video-toggle-icon {
  width: 10px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
  box-sizing: border-box;
}
.video-toggle.is-paused .video-toggle-icon {
  border-right: 0;
  border-left: 10px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  width: 10px;
  height: 11px;
}

/* ---------- hero: the article under the phone ----------
   A light web page of the article the demo is playing, with the phone set
   down on top of it. Publication, headline, dek, byline, date and the
   opening paragraphs are the real text. On desktop headline, dek and
   byline run full width above the phone, and the body runs the full width of the page and simply
   continues under it (obstructed, not wrapped). Plain body copy only: no
   read-along highlight
   (the app shows the text but doesn't mark where the narration is). On
   tablets and phones only masthead, headline and byline show. Colours are
   fixed (it is a picture of a web page), so it looks the same whatever
   data-theme says, and a step below white so the phone stays the brightest
   thing in the picture. The page is an object with a hard edge and a
   shadow; it never fades into the dark ground. Geometry per width lives in
   the responsive section. */
.hero-stage { position: relative; }
.hero-stage .phone-wrap { z-index: 1; }
.hero-article {
  --ha-pad: 14px;
  --ha-bg: #E4E7EE;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 var(--ha-pad);
  background: var(--ha-bg);
  color: #3A3F55;
  border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .18);
  pointer-events: none;
  user-select: none;
}
/* A clean bottom margin: whatever runs past the page's foot is covered. */
.hero-article::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ha-pad);
  background: var(--ha-bg);
}
.home .hero-article p { margin: 0; }
/* Masthead: the publication centred in serif small caps over a double
   rule, the way a paper sets its nameplate. */
.home .hero-article .ha-pub {
  margin: 0 calc(-1 * var(--ha-pad));
  padding: 0 var(--ha-pad);
  border-bottom: 3px double #B9BFCC;
  font-family: var(--h-serif);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: .09em;
  line-height: 1.1;
  text-align: center;
  color: #171B33;
}
.home .hero-article .ha-title {
  font-family: var(--h-serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #2E3349;
  text-wrap: balance;
}
/* Dek: desktop only (see the responsive section). */
.home .hero-article .ha-dek { display: none; }
/* Byline: author in the sans, date a step quieter beside it. */
.home .hero-article .ha-byline {
  display: flex;
  flex-wrap: wrap;
  column-gap: .7em;
  font-family: var(--h-sans);
  line-height: 1.2;
  white-space: nowrap;
  color: #3A3F55;
}
.ha-author { font-weight: 600; }
.ha-date { color: #7A8196; }
/* Body: the opening paragraphs as plain body copy in the serif, a step
   quieter than the headline. */
.home .hero-article .ha-body p {
  font-family: var(--h-serif);
  font-weight: 400;
  color: #4A5068;
  text-align: left;
  hyphens: none;
}
.ha-body cite { font-style: italic; }

/* ---------- sections ---------- */
.section {
  padding: clamp(72px, 8vw, 112px) 0;
  border-top: 1px solid var(--h-line-soft);
}
.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.section-head .lede {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--h-muted);
  max-width: 46ch;
}

/* Two-column section: heading left, content right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.split .section-head { margin-bottom: 0; }

/* ---------- how it sounds: a full-width feature; the players lead ---------- */
.sounds-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 20px;
  align-items: end;
  margin-bottom: 48px;
}
.sounds-head h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 3.4vw, 48px);
}
.samples-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.samples-1 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
/* Three columns hung from one rule, like a contents page: no boxes. */
.sample {
  display: flex;
  flex-direction: column;
  padding: 22px 0 8px;
  border-top: 1px solid var(--h-line);
}
.sample-source {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: var(--h-muted);
  margin-bottom: 12px !important;
  font-variant-numeric: lining-nums tabular-nums;
}
.sample-pub { font-weight: 600; color: var(--h-text); }
.home .sample-title {
  flex: 1 1 auto;
  font-family: var(--h-serif);
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin-bottom: 30px;
  text-wrap: balance;
}
/* The site player, re-laid for a card: a waveform-style scrubber across the
   full width, controls on the row beneath. Only this page's cards. */
.home .sample .ttsp-ui {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "bar bar bar bar bar" "play cur dur rate vol";
  row-gap: 14px;
}
.home .sample .ttsp-cur { justify-self: start; }
.home .sample .ttsp-bar { height: 48px; }
.home .sample .ttsp-rail {
  height: 40px;
  margin-top: -20px;
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Crect x='0' y='0.0' width='3' height='40.0' rx='1.5'/%3E%3Crect x='5' y='7.6' width='3' height='24.8' rx='1.5'/%3E%3Crect x='10' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='15' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='20' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='25' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='30' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='35' y='0.0' width='3' height='40.0' rx='1.5'/%3E%3Crect x='40' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='45' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='50' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='55' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='60' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='65' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='70' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='75' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='80' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='85' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='90' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='95' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='100' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='105' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='110' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='115' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='120' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='125' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='130' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='135' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='140' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='145' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='150' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='155' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='160' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='165' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='170' y='7.6' width='3' height='24.8' rx='1.5'/%3E%3Crect x='175' y='2.4' width='3' height='35.2' rx='1.5'/%3E%3Crect x='180' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='185' y='7.6' width='3' height='24.8' rx='1.5'/%3E%3Crect x='190' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='195' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3C/svg%3E") repeat-x left center / 200px 40px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Crect x='0' y='0.0' width='3' height='40.0' rx='1.5'/%3E%3Crect x='5' y='7.6' width='3' height='24.8' rx='1.5'/%3E%3Crect x='10' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='15' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='20' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='25' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='30' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='35' y='0.0' width='3' height='40.0' rx='1.5'/%3E%3Crect x='40' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='45' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='50' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='55' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='60' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='65' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='70' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='75' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='80' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='85' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='90' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='95' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='100' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='105' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='110' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='115' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3Crect x='120' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='125' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='130' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='135' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='140' y='14.0' width='3' height='12.0' rx='1.5'/%3E%3Crect x='145' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='150' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='155' y='5.0' width='3' height='30.0' rx='1.5'/%3E%3Crect x='160' y='13.0' width='3' height='14.0' rx='1.5'/%3E%3Crect x='165' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='170' y='7.6' width='3' height='24.8' rx='1.5'/%3E%3Crect x='175' y='2.4' width='3' height='35.2' rx='1.5'/%3E%3Crect x='180' y='11.0' width='3' height='18.0' rx='1.5'/%3E%3Crect x='185' y='7.6' width='3' height='24.8' rx='1.5'/%3E%3Crect x='190' y='1.0' width='3' height='38.0' rx='1.5'/%3E%3Crect x='195' y='10.0' width='3' height='20.0' rx='1.5'/%3E%3C/svg%3E") repeat-x left center / 200px 40px;
}
/* The knob becomes a thin playhead over the waveform. */
.home .sample .ttsp-knob,
.home .sample .ttsp-bar:hover .ttsp-knob,
.home .sample .ttsp-bar.ttsp-dragging .ttsp-knob {
  width: 2px;
  height: 46px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--h-text);
  box-shadow: none;
}
/* tts-player.css spans the play button over both rows under 520px; in a
   card the scrubber has its own row, so undo that. */
.home .sample .ttsp-play { width: 48px; height: 48px; grid-row: auto; }
.home .sample .ttsp-dur { justify-self: end; }
/* Speed and duration are small pills; give them thumb-sized hit areas
   without changing how they look. */
.home .sample .ttsp-rate,
.home .sample .ttsp-dur { position: relative; }
.home .sample .ttsp-rate::after,
.home .sample .ttsp-dur::after { content: ""; position: absolute; inset: -8px -4px; }
.home .sample .ttsp-dur::after { inset: -12px -6px; }
/* The player follows this page's dark palette even when a host stamps
   data-theme="light" on the root (tts-player.css flips to its light skin
   under that attribute). Specificity 0,3,0 beats its 0,2,0. */
.home .sample-player[data-tts-player] {
  --ttsp-accent: #5FD48B;
  --ttsp-accent-hover: #7ee0a4;
  --ttsp-ink: #0d0f25;
  --ttsp-track: #6b7a99;
  --ttsp-buffered: #aab6cc;
  --ttsp-text: #e8eefc;
  --ttsp-text-dim: #cbd5e0;
  --ttsp-btn-bg: rgba(255, 255, 255, 0.08);
  --ttsp-btn-bg-hover: rgba(255, 255, 255, 0.16);
  --ttsp-focus: #94f6a5;
  --ttsp-error: #ff8a8a;
  font-family: var(--h-sans);
}

/* ---------- how it works: one dominant step + two quieter ones ---------- */
/* The first step leads by width, a heavier rule and full-white numeral;
   the other two sit on hairlines in the muted tone. */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(28px, 3.4vw, 48px);
}
.step {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 26px;
  padding: 26px 16px 0 0;
  border-top: 1px solid var(--h-line);
}
.step-main { border-top: 2px solid var(--h-text); padding-top: 25px; }
.step-num {
  font-family: var(--h-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 0.8;
  font-variant-numeric: lining-nums;
  color: var(--h-muted);
}
.step-main .step-num { color: var(--h-text); }
.step h3 { font-size: 20px; margin-bottom: 12px; }
.step-main h3 { font-size: 24px; }
.step p { color: var(--h-muted); font-size: 16px; line-height: 1.6; max-width: 44ch; }

/* ---------- where it works: a ledger, not a card grid ---------- */
.where {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(64px, 7vw, 96px);
  scroll-margin-top: 96px;
}
.home .where-title {
  font-family: var(--h-serif);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.where-lede { margin-top: 12px !important; font-size: 16px; color: var(--h-muted); max-width: 32ch; }
.where-list { margin: 0; border-top: 1px solid var(--h-line); }
.where-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas: "name status" "name desc";
  gap: 4px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--h-line);
}
.where-row dt {
  grid-area: name;
  font-weight: 650;
  font-size: 16px;
  color: var(--h-text);
}
.where-row dd { margin: 0; }
.where-status {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--h-muted);
}
.where-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--h-muted);
}
.is-live .where-status { color: var(--h-text); }
.is-live .where-status::before { background: var(--h-accent); border-color: var(--h-accent); }
.where-desc { grid-area: desc; font-size: 15.5px; line-height: 1.55; color: var(--h-muted); }

.home .section-band { padding: clamp(56px, 6vw, 80px) 0; }

/* ---------- subscriptions: one plain promise, right under the hero ---------- */
.subs { padding: 0 0 clamp(48px, 5vw, 72px); scroll-margin-top: 96px; }
.subs-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 20px;
  align-items: center;
  padding-top: clamp(40px, 4.5vw, 60px);
  border-top: 1px solid var(--h-line);
}
.subs h2 {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.subs-body p { color: var(--h-muted); font-size: 16.5px; line-height: 1.6; max-width: 48ch; }
.subs-actions { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- FAQ ---------- */
.split-faq .section-head { position: sticky; top: 108px; }
.faq-list { border-top: 1px solid var(--h-line); }
.faq-list details { border-bottom: 1px solid var(--h-line); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--h-text);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--h-muted);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat;
}
.faq-list summary:hover::after { color: var(--h-text); }
.faq-list details p {
  color: var(--h-muted);
  padding: 0 56px 26px 0;
  font-size: 16px;
  line-height: 1.65;
  max-width: 62ch;
}

/* ---------- publishers band (flagged) ---------- */
.publishers-band {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.publishers-band h2 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 12px !important;
}
.publishers-band p { color: var(--h-muted); max-width: 60ch; }

/* ---------- closing: the tagline and the one CTA ---------- */
.closing { padding: clamp(24px, 3vw, 40px) 0 clamp(88px, 10vw, 144px); }
.closing-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px 48px;
  padding-top: clamp(36px, 4.5vw, 64px);
  border-top: 2px solid var(--h-text);
}
.closing-panel h2 {
  font-size: clamp(44px, 6.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 11ch;
}
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* ---------- footer ---------- */
.home-footer {
  border-top: 1px solid var(--h-line-soft);
  padding: 36px 0 48px;
  font-size: 14px;
  color: var(--h-muted);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
}
.footer-brand {
  font-weight: 750;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--h-text);
}
.footer-links { display: flex; gap: 0 24px; flex-wrap: wrap; }
.home .footer-links a { padding: 11px 0; }
.home .footer-links a:hover { color: var(--h-text); }
.footer-fine {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--h-line-soft);
  font-size: 12.5px;
  opacity: .85;
}

/* ---------- the one entrance (hero copy only) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal-in .7s cubic-bezier(.2, .7, .2, 1) .05s forwards;
}
@keyframes reveal-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .btn, .btn .arrow { transition: none; }
}

/* ---------- form fields (shared: /pricing volume form, early access) ---------- */
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}
.field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--h-text);
}
.field .optional {
  font-weight: 400;
  font-size: 13px;
  color: var(--h-muted);
  margin-left: 4px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
  color: var(--h-text);
  background: var(--h-bg);
  /* #5b68a6 clears 3:1 against both the card and the field fill. */
  border: 1px solid #5b68a6;
  border-radius: 12px;
  padding: 0 14px;
  height: 50px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea {
  height: auto;
  min-height: 132px;
  padding: 13px 14px;
  line-height: 1.5;
  resize: vertical;
}
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  /* Chevron in --h-muted (#8498cb). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%238498cb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.25l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}
/* Placeholder ("Choose…") reads muted until a platform is picked. */
.field select:invalid { color: var(--h-muted); }
.field select option { color: var(--h-text); background: var(--h-bg); }
.field input::placeholder,
.field textarea::placeholder { color: var(--h-muted); opacity: .7; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #7383c0; }
.home .field input:focus-visible,
.home .field select:focus-visible,
.home .field textarea:focus-visible,
.home .field input:focus,
.home .field select:focus,
.home .field textarea:focus {
  outline: 2px solid var(--h-accent);
  outline-offset: 2px;
  border-color: var(--h-accent);
  border-radius: 12px;
}
.home .field [aria-invalid="true"] { border-color: #F28B82; }
.field-error {
  font-size: 13.5px;
  line-height: 1.4;
  color: #F7B4AE;
}
.field-error[hidden] { display: none; }

/* Honeypot: off-screen, never display:none (some bots skip hidden fields). */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.home .btn:disabled { opacity: .7; cursor: progress; }

/* ---------- hero: Android status line under the buttons ---------- */
.hero-store {
  margin-top: 16px !important;
  font-size: 14px;
  color: var(--h-muted);
}
.home .hero-store-link {
  /* Taller hit area without moving the line (inline padding). */
  padding: 13px 0;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- hero: podcast-app footnote, directly under the buttons ---------- */
.fn-mark { color: var(--h-text); margin-left: 1px; }
.hero-footnote {
  margin-top: 14px !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--h-muted);
  max-width: none;
}
.hero-footnote .fn-mark { margin: 0 3px 0 0; }

/* ---------- "Where it works" row actions ---------- */
.where-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* ---------- official store badges ----------
   Apple / Google / Mozilla artwork, shown as supplied (see
   static/home/badges/SOURCES.md): resized only, ratio kept, never recolored
   or animated. Heights: 54px beside the 54px primary button, 48px in the
   "Where it works" rows (Apple's minimum is 40px). Every gap around a badge
   is at least a quarter of its height (13.5px / 12px), Apple's clear space. */
.home .store-badge {
  display: inline-flex;
  flex: none;
  line-height: 0;
  border-radius: 8px;
}
.home .store-badge img { display: block; width: auto; max-width: none; }
.home .store-badge-lg img { height: 54px; }
.home .store-badge-md img { height: 48px; }
.home .store-badge:focus-visible { outline-offset: 4px; border-radius: 10px; }
.where-actions.where-badges { gap: 16px; margin-top: 16px; }

/* ---------- Android early access (modal + no-JS section) ---------- */
/* With <dialog> support the section only shows a no-JS result; the
   triggers open the modal instead. */
.has-dialog .ea-section:not([data-ea-result]) { display: none; }

.home .ea-title {
  font-family: var(--h-serif);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--h-text);
}
.ea-lede {
  margin-top: 12px !important;
  font-size: 16px;
  line-height: 1.55;
  color: var(--h-muted);
  max-width: 42ch;
}
.ea-card { position: relative; }
.ea-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 22px;
}
.ea-check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--h-accent);
  cursor: pointer;
}
.ea-check label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--h-text);
  cursor: pointer;
}
.ea-check .optional { font-size: 13px; color: var(--h-muted); margin-left: 4px; }
.ea-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.ea-foot .btn { flex: 0 0 auto; }
/* Two lines reserved so a message never pushes the layout. */
.ea-status {
  flex: 1 1 200px;
  min-height: 2.9em;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--h-muted);
}
.ea-status.is-error { color: #F7B4AE; }
.ea-thanks {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 8px 0 4px;
}
.ea-thanks[hidden] { display: none; }
.ea-thanks:focus { outline: none; }
.ea-thanks p { font-size: 16px; line-height: 1.55; color: var(--h-muted); max-width: 40ch; }
.ea-thanks strong { color: var(--h-text); font-weight: 600; }
.ea-thanks-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--h-accent-muted);
  position: relative;
}
.ea-thanks-mark::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 15px;
  height: 8px;
  border-left: 2.5px solid var(--h-accent);
  border-bottom: 2.5px solid var(--h-accent);
  transform: rotate(-45deg);
}

.ea-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: start;
}
.ea-section .ea-card {
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius-lg);
  padding: 32px;
}

.ea-dialog {
  width: min(480px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--h-text);
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  font-family: var(--h-sans);
}
.ea-dialog::backdrop {
  background: rgba(6, 8, 22, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ea-dialog-inner { position: relative; padding: 32px 32px 26px; }
.ea-dialog .ea-title { font-size: 28px; padding-right: 36px; }
.ea-dialog .ea-lede { margin-bottom: 24px !important; font-size: 15.5px; }
.ea-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--h-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.ea-close:hover { color: var(--h-text); border-color: var(--h-line); }
.home .ea-close:focus-visible { border-radius: 50%; }
html.ea-open { overflow: hidden; }

@media (max-width: 960px) {
  .ea-section-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Phones: pinned near the top, not centred, so the email field stays in
     the upper half and the on-screen keyboard never covers it; dvh keeps
     the box inside the visible area and it scrolls if it has to. */
  .ea-dialog {
    width: calc(100% - 24px);
    margin: 12px auto auto;
    max-height: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
  }
  .ea-dialog-inner { padding: 24px 20px 20px; }
  .ea-dialog .ea-title { font-size: 26px; padding-right: 44px; }
  .ea-section .ea-card { padding: 24px 20px; }
  .ea-foot .btn { width: 100%; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .home-nav { display: none; }
  .nav-menu { display: block; }
  .home-header .wrap { gap: 12px; }
}
@media (max-width: 440px) {
  /* Sign in moves into the menu; Get started stays in the bar. */
  .home .header-actions .header-signin { display: none; }
  .home .nav-menu-panel .nav-menu-signin { display: block; }
  .nav-menu-label { display: none; }
  .nav-menu-button { width: 44px; padding: 0; justify-content: center; }
}

@media (min-width: 960px) {
  /* Desktop. The article page is laid out like the real one: masthead,
     then the headline on one line across the whole page, then dek and
     byline full width, a rule and the story. The phone lies on the page
     from just under that rule down, over the right part of the story, so
     headline, dek and byline are never covered. The dek shows only where
     the height allows it without shrinking the phone (--dk).
     Sizes (all derived per viewport):
     --Pw   the phone's width-based size (300px at 1100, 368 at 1440, 400
            from 1600);
     --hfs  our H1, as large as 5vw allows (56-76px) while leaving the
            stage about 1.75 phones of the row;
     --S    the stage (page + phone) width that leaves: the column's actual
            width comes from the grid (the copy column is exactly as wide
            as the H1's widest line, the stage takes the rest), so the gap
            between the H1 and the page is --gap at every width, whatever
            the font;
     --tfs  the page's scale unit (masthead, dek, byline), sized so its 17.7em wraps into exactly two
            lines across the page (widest line 9.8em of an 11em measure),
            and capped by height (5svh) so short windows keep the phone;
     --band the page's masthead + headline + (dek) + byline + rule, i.e.
            where the phone starts;
     --P    the phone: its width-based size unless the height says less,
            so the frame ends ~14px above the fold. The pause control sits
            beside the phone's foot, left of it, so it costs no height. */
  .hero {
    --pt: clamp(12px, 2svh, 32px);
    --hem: 8.75;                 /* widest headline line, in em */
    --gap: clamp(40px, 3vw, 48px);
    --cw: min(100vw - 2 * var(--h-gutter), var(--h-wrap));
    --Pw: clamp(300px, 20vw + 80px, 400px);
    --band-k: 1.84;              /* masthead 1.04 + .4 above the headline + .4 clear (em of tfs) */
    --tfs-est: min(5svh, 44px);
    --ttl-est: 32px;
    --Pest: min(var(--Pw), (100svh - 69px - var(--pt) - var(--tfs-est) * var(--band-k) - var(--ttl-est) * 2.16 - 17px) / 2.044);
    --hfs: clamp(56px, min(5vw, (var(--cw) - var(--gap) - var(--Pest) * 1.75) / var(--hem)), 76px);
    --S: calc(var(--cw) - var(--gap) - var(--hfs) * var(--hem));
    --ha-pad: calc(var(--Pw) * .06);
    --tfs: clamp(26px, min((var(--S) - var(--Pw) * .1 - var(--ha-pad) * 2) / 11, 5svh), 50px);
    /* The page headline: ~.42 of our H1, on one line (15.7em) across
       the page where it fits; --tl2 adds its second line where even 24px
       wraps (the narrowest desktops). */
    --ha-in: calc(var(--S) - var(--Pest) * .1 - var(--ha-pad) * 2 + 16px);   /* measured: >= 17px under the real measure */
    --ttl: clamp(21px, min(var(--hfs) * .42, var(--ha-in) / 16), 34px);
    --tl2: clamp(0px, (var(--ttl) * 16 - var(--ha-in)) * 1000, var(--ttl) * 1.08);
    /* Where the phone starts: below masthead, headline, byline and the
       rule over the story (+4px), and never higher than the two-line
       headline band it had before, so the phone keeps its size. */
    --bfs: clamp(10px, var(--tfs) * .27, 13px);
    --band0: max(var(--tfs) * var(--band-k) + var(--ttl) * 2.16 + 3px,
                 var(--tfs) * 1.96 + var(--ttl) * 1.08 + var(--tl2) + var(--bfs) * 1.45 + 8px);
    /* The dek (two lines + its margin) only when the viewport has that
       much height to spare below a full-size phone: --dk is either 0 or
       --dkD, so the phone never shrinks to make room for it. */
    --dfs: clamp(12px, var(--tfs) * .34, 16px);
    --dkD: calc(var(--tfs) * .3 + var(--dfs) * 2.76);
    --Pcap: var(--Pw);
    --dk: clamp(0px, (100svh - 69px - var(--pt) - var(--band0) - 14px - var(--Pcap) * 2.044 - var(--dkD)) * 1000, var(--dkD));
    --band: calc(var(--band0) + var(--dk));
    --P: max(240px, min(var(--Pw), (100svh - 69px - var(--pt) - var(--band) - 14px) / 2.044));
    padding-top: var(--pt);
    padding-bottom: clamp(48px, 4vw, 72px);
  }
  .home .hero-grid { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--gap); }
  /* Only the H1 sets the copy column's width; the paragraphs wrap to it. */
  .hero-copy > :not(h1) { contain: inline-size; }
  .hero-copy h1 { font-size: var(--hfs); }
  .hero-copy .sub { max-width: 46ch; }
  .hero-phone { justify-self: stretch; align-items: flex-end; }
  .hero-stage {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: var(--band);
  }
  .hero-stage .phone-wrap { width: var(--P); }
  /* Pause control beside the phone's foot, below the page, right-aligned
     to the phone (never on the frame). */
  .video-toggle {
    position: absolute;
    right: calc(var(--P) + 10px);
    bottom: calc(var(--P) * .015);
  }
  /* The page: the stage's full width less .1P, so its right edge stops
     inside the phone's and only shows beside the masthead and headline.
     It ends with its text; as a safety net it never reaches past 12px
     above the pause control (the foot would then clip the story). */
  .hero-article {
    right: calc(var(--P) * .1);
    padding-bottom: var(--ha-pad);
    max-height: calc(var(--band) + var(--P) * (2.044 - .015) - 56px);
  }
  .home .hero-article .ha-pub {
    padding-top: calc(var(--tfs) * .28);
    padding-bottom: calc(var(--tfs) * .2);
    font-size: calc(var(--tfs) * .44);
    line-height: calc(var(--tfs) * .56);
  }
  .home .hero-article .ha-title {
    margin-top: calc(var(--tfs) * .4);
    font-size: var(--ttl);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.015em;
    color: #2A2F45;
  }
  /* Dek and byline full width under the headline, as on the real page,
     above the phone's top. The dek's measure is capped so it reads as
     prose; it shows only when the height allows (see --dk). */
  .home .hero-article .ha-dek {
    display: block;
    box-sizing: border-box;
    max-width: 60ch;
    height: var(--dk);
    overflow: hidden;
    padding-top: min(var(--dk), var(--tfs) * .3);
    font-family: var(--h-serif);
    font-size: var(--dfs);
    line-height: 1.38;
    color: #5E6480;
    text-wrap: pretty;
  }
  .home .hero-article .ha-byline {
    margin-top: calc(var(--tfs) * .22);
    font-size: var(--bfs);
    line-height: 1.45;
  }
  /* Story: a normal full-width column; the phone lies over its right
     part and the page's foot clips it. */
  .ha-body {
    margin-top: calc(var(--tfs) * .3);
    padding-top: calc(var(--tfs) * .34);
    border-top: 1px solid #C9CED9;
  }
  .home .hero-article .ha-body p {
    font-size: clamp(12px, var(--tfs) * .34, 16px);
    line-height: 1.55;
  }
  .home .ha-body p + p { margin-top: .8em; }
  /* The phone lies on the page: a soft contact shadow cast down-left onto
     it, drawn by a rounded box behind the frame (the frame image itself is
     never filtered). */
  .hero-stage .phone-wrap::before {
    content: "";
    position: absolute;
    inset: 1.5% 3%;
    z-index: -1;
    border-radius: 16% / 7.8%;
    box-shadow: calc(var(--P) * -.03) calc(var(--P) * .05) calc(var(--P) * .12) rgb(10 14 30 / .45);
  }
}
@media (min-width: 960px) and (max-width: 1180px) {
  /* Narrower desktops and iPad landscape: the H1 takes its four sense
     groups, one per line, at a fixed 56-60px, and the phone gives way
     instead (at most what the row leaves after half a phone of page). */
  .hero {
    --hfs: clamp(56px, 5.2vw, 60px);
    --hem: 7.9;
    --Pcap: min(var(--Pw), var(--S) / 1.5);
    --P: max(240px, min(var(--Pw), (100svh - 69px - var(--pt) - var(--band) - 14px) / 2.044, var(--S) / 1.5));
  }
  .hero-copy h1 .p { display: block; }
  .hero-copy h1 { line-height: 1.0; }
}
@media (max-width: 959px) {
  /* Tablet: copy and phone side by side, the phone bounded by height too
     so the frame and pause control end above the fold on short windows.
     The page shows its masthead, headline and byline above the phone and
     ends just behind the phone's top edge (no body text to peek out).
     It bleeds 12px into the column gap (24px clear of the copy) and stops
     24px inside the phone's right edge, so the two edges never merge. */
  .home .hero-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 36px; }
  /* Narrow columns: four sense groups, one per line, instead of letting
     the browser split "read / aloud". */
  .hero-copy h1 .p { display: block; }
  .hero-copy h1 { font-size: clamp(42px, 6.6vw, 58px); line-height: 1.0; }
  .hero-ctas { gap: 16px 20px; }
  .hero {
    --pt: clamp(24px, 4svh, 56px);
    --band: 112px;
    --P: max(230px, min(clamp(260px, 32vw, 300px), (100svh - 69px - var(--pt) - var(--band) - 78px) / 2.044));
    padding-top: var(--pt);
  }
  .phone-wrap { width: var(--P); }
  .hero-stage { padding-top: var(--band); }
  .hero-article {
    --ha-pad: 14px;
    left: -12px;
    right: 24px;
    height: calc(var(--band) + 22px);
  }
  .home .hero-article .ha-pub { padding-top: 10px; padding-bottom: 7px; font-size: 15px; }
  .home .hero-article .ha-title { margin-top: 10px; font-size: 16px; line-height: 1.15; }
  .home .hero-article .ha-byline { margin-top: 9px; font-size: 11px; }
  .ha-body { display: none; }
}
@media (max-width: 640px) {
  /* Phone: the same page as a short strip above the phone, centred and a
     little wider than it, the phone overlapping its lower edge. The phone
     keeps its full 264px. */
  .hero-stage {
    --band: 68px;
    width: min(304px, calc(100vw - 40px));
    display: flex;
    justify-content: center;
    padding-top: var(--band);
  }
  .hero-article {
    --ha-pad: 13px;
    left: 0;
    right: 0;
    height: calc(var(--band) + 22px);
  }
  .home .hero-article .ha-pub { padding-top: 7px; padding-bottom: 4px; font-size: 14px; }
  .home .hero-article .ha-title { margin-top: 6px; font-size: 14.5px; line-height: 1.15; text-align: center; }
  .home .hero-article .ha-byline { margin-top: 6px; font-size: 10.5px; justify-content: center; }
}

@media (max-width: 960px) {
  .sounds-head { grid-template-columns: 1fr; }
  .samples, .samples-2 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .sample { padding: 22px 0 30px; }
  .sample:last-child { padding-bottom: 0; }
  .split { grid-template-columns: 1fr; row-gap: 48px; }
  .split-faq .section-head { position: static; }
  /* Steps become rows: numeral in a narrow column, hung on the heading's
     baseline. */
  .steps { grid-template-columns: 1fr; }
  .step {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: none;
    align-items: baseline;
    gap: 0 16px;
    padding: 24px 0 30px;
  }
  .step-main { padding-top: 23px; }
  .step-num { font-size: 44px; line-height: 1; }
  .where { grid-template-columns: 1fr; row-gap: 24px; }
  .btn-sm { height: 44px; padding: 0 18px; }
  .nav-menu-button { height: 44px; }
  .subs-grid { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 640px) {
  .home-header .wrap { height: 60px; gap: 10px; }
  .home .brand { font-size: 20px; padding: 12px 0; }
  .home .header-signin { padding: 8px 10px; font-size: 14px; }
  /* Thumb-sized: every button on a phone is at least 44px tall. */
  .btn-sm { height: 44px; padding: 0 18px; font-size: 15px; }
  .nav-menu-button { height: 44px; }

  .hero { padding: 20px 0 40px; }
  .home .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .hero-phone { justify-self: center; }
  /* Phone reading order: headline, tagline, demo, button, small print. The
     copy block dissolves into the grid so the phone can sit between the
     tagline and the button. DOM order stays headline, copy, button, phone
     (the pause toggle is the only focusable thing in the phone). */
  .hero-copy { display: contents; }
  .hero-copy > h1 { order: 1; }
  .hero-copy > .sub { order: 2; margin-bottom: 24px; }
  .hero-phone { order: 3; margin-bottom: 12px; }
  .hero-ctas { order: 4; }
  .hero-footnote { order: 5; }
  .hero-store { order: 6; }
  .hero-note { order: 7; }
  /* The entrance moves to the children, since a display: contents box
     can't animate. */
  .hero-copy.reveal { animation: none; opacity: 1; transform: none; }
  .hero-copy > *, .hero-phone {
    opacity: 0;
    transform: translateY(12px);
    animation: reveal-in .7s cubic-bezier(.2, .7, .2, 1) .05s forwards;
  }
  /* Sized so the longest line, "worth listening to." (7.9em), fills the
     column: 44px at 390, 49px at 430, 40px at 360. */
  .hero-copy h1 { font-size: min(50px, calc((100vw - 40px) / 7.95)); line-height: 1.0; letter-spacing: -0.028em; margin-bottom: 22px; }
  .hero-copy .sub { font-size: 17px; margin-bottom: 28px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-ctas .btn-lg { width: 100%; }
  .hero-ctas .store-badge, .closing-actions .store-badge { align-self: center; }
  .hero-footnote { font-size: 13.5px; }
  .hero-store { margin-top: 12px !important; font-size: 15px; }
  .hero-note { margin-top: 12px !important; font-size: 15px; }
  .hero { --P: 264px; }
  @media (prefers-reduced-motion: reduce) {
    .hero-copy > *, .hero-phone { animation: none; opacity: 1; transform: none; }
  }

  .section { padding: 72px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: 36px; }
  .section-head .lede { font-size: 17px; }

  .sounds-head { margin-bottom: 28px; row-gap: 14px; }
  .sounds-head h2 { font-size: 36px; }
  .home .sample-title { font-size: 23px; margin-bottom: 22px; }

  .step { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
  .step-num { font-size: 36px; }
  .step h3, .step-main h3 { font-size: 21px; margin-bottom: 10px; }
  .step-main h3 { font-size: 23px; }

  .where-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "desc desc"; gap: 6px 16px; padding: 20px 0; }
  .where-desc { font-size: 16px; }

  .subs { padding-bottom: 56px; }
  .subs-grid { grid-template-columns: 1fr; padding-top: 44px; }
  .subs h2 { font-size: 32px; }
  .subs-body p { font-size: 17px; }

  .faq-list summary { font-size: 17px; padding: 20px 0; min-height: 64px; }
  .faq-list details p { padding-right: 0; font-size: 16px; }

  .closing { padding: 8px 0 88px; }
  .closing-panel { gap: 32px; }
  .closing-panel h2 { font-size: min(54px, calc((100vw - 40px) / 6.5)); }
  .closing-actions { flex-direction: column; align-items: stretch; gap: 20px; width: 100%; }
  .closing-actions .btn-lg { width: 100%; }

  .footer-row { flex-direction: column; align-items: flex-start; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; width: 100%; }
  .home .footer-links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
}

@media (max-width: 380px) {
  /* Small Androids: one step down so two-line headings stay two lines. */
  .section-head h2, .sounds-head h2 { font-size: 32px; }
  .subs h2 { font-size: 30px; }
}

/* Firefox re-composites the hero <video> with lighter colours whenever a
   backdrop-filter element overlaps it (seen 2026-09-30 when the sticky header
   scrolls over the phone). Keep the frosted header everywhere else; in Firefox
   use a near-solid background instead. */
@supports (-moz-appearance: none) {
  .home-header {
    background: rgba(13, 15, 37, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}