/* ============================================================
   ARP — STITCH DESIGN SYSTEM
   Rebuilt 2026-06-27 per WEBSITE_REBUILD_PLAN_20260627.md
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: "InterVariable";
  src: url("/img/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono";
  src: url("/img/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono";
  src: url("/img/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* Stitch palette — verified identical to iOS Color(hex:) values */
  --color-bg:                #141312;
  --color-surface-lowest:    #0f0e0d;
  --color-surface-low:       #1d1b1a;
  --color-surface:           #211f1e;
  --color-surface-high:      #2b2a28;
  --color-surface-highest:   #363433;
  --color-surface-variant:        #363433;   /* unplayed waveform bar fill (.waveform-bar) */
  --color-on-surface-variant:     #d6c4af;   /* brand subtitle (.brand-subtitle) */

  --color-text-primary:      #e6e1df;
  --color-text-secondary:    #d6c4af;
  --color-text-muted:        #6b6055;

  --color-primary:           #ffb950;
  --color-primary-container: #c8860a;
  --color-on-primary:        #452b00;
  --color-on-primary-container: #3f2700;

  --color-hairline:          rgba(255, 255, 255, 0.06);
  --color-hairline-bright:   rgba(255, 255, 255, 0.10);
  --color-glass:             rgba(15, 14, 13, 0.85);

  /* Typography */
  --font-sans:               "InterVariable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:               "JetBrainsMono-Medium", "JetBrainsMono-Regular", "SF Mono", monospace;

  --text-display:            600 32px/40px var(--font-sans);
  --text-display-mobile:     600 24px/32px var(--font-sans);
  --text-headline:           500 20px/28px var(--font-sans);
  --text-body-lg:            400 15px/22px var(--font-sans);
  --text-body-sm:            400 13px/18px var(--font-sans);
  --text-mono-label:         500 11px/16px var(--font-mono);
  --text-mono-data:           400 12px/16px var(--font-mono);

  --tracking-tight:          -0.02em;
  --tracking-normal:         0;
  --tracking-widest:         0.05em;

  /* Spacing scale (4px base) */
  --space-1:                 4px;
  --space-2:                 8px;
  --space-3:                 12px;
  --space-4:                 16px;
  --space-5:                 24px;
  --space-6:                 32px;
  --space-7:                 48px;
  --space-8:                 64px;
  --space-9:                 96px;
  --space-10:                128px;
  --space-11:                192px;

  /* Radii */
  --radius-sm:               8px;
  --radius-md:               12px;
  --radius-lg:               16px;
  --radius-xl:               24px;
  --radius-pill:             999px;

  /* Motion */
  --ease-out:                cubic-bezier(0, 0, 0.2, 1);
  --ease-inout:              cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:           150ms;
  --duration-base:           250ms;
  --duration-slow:           350ms;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font: var(--text-body-lg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: var(--text-mono-label);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 768px) { .container { padding: 0 var(--space-7); } }
/* Pager is desktop/tablet track-mode only — hides on phones so chips don't cover content */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-hairline);
}
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--text-headline);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
}
.nav-logo img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

/* ---- Brand mark: ARP + Audio Revival Processor (matches App/ContentView.swift + MacStitchComponents.swift) ---- */
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.brand-title {
  font-family: var(--font-sans);
  font-weight: 700;            /* was 600 — iOS uses .bold (App/ContentView.swift:50-52) */
  font-size: 22px;
  letter-spacing: 0;           /* was -0.4px — iOS sets no tracking on the title */
  color: var(--color-primary); /* #ffb950 */
  line-height: 1.05;
  margin: 0;
}
.brand-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--tracking-normal);
  color: var(--color-on-surface-variant);
  line-height: 1.1;
  margin: 0;
}
.nav-links {
  display: none;
  gap: var(--space-6);
}
/* Top links only when bottom-nav is hidden (desktop). Tablets use bottom-nav in track mode. */
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link {
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-link:hover { color: var(--color-primary); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: var(--text-mono-label);
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast) var(--ease-out);
}
.nav-cta:active { transform: scale(0.95); }
.nav-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-primary);
}
@media (min-width: 768px) { .nav-mobile-toggle { display: none; } }

/* ---- Hero panel — uses the same .section-* primitives as the other panels ---- */
.hero-brand {
  width: 80px;
  height: 80px;
  margin: var(--space-3) auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px -8px rgba(255, 185, 80, 0.3);
}
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: 840px;
  margin: 0 auto;
}
.hero-stack .section-label,
.hero-stack .section-headline,
.hero-stack .section-body,
.hero-stack .section-cta,
.hero-stack .format-chip {
  margin: 0;
}
.hero-stack .section-headline { max-width: 20ch; }
.hero-stack .section-body { max-width: 62ch; }
.hero-stack .section-cta { margin-top: var(--space-2); }
.device-bundle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 920px;
  margin: var(--space-3) auto 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-muted);
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  text-align: center;
  padding: 0;
  min-height: 0;
}
.device-bundle-label small {
  display: inline-block;
  margin-top: var(--space-2);
  font: var(--text-mono-data);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* ---- Numbered section ---- */
.section-numbered {
  padding: var(--space-11) 0;
  position: relative;
}
@media (max-width: 768px) {
  .section-numbered { padding: var(--space-9) 0; }
}
.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}
@media (min-width: 1024px) {
  .section-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
  .section-grid.reverse { direction: rtl; }
  .section-grid.reverse > * { direction: ltr; }
}
.section-text {
  position: relative;
  max-width: 56ch;
}
.section-label {
  display: block;
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}
.section-headline {
  font: var(--text-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
  max-width: 20ch;
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .section-headline { font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem); }
}
@media (max-width: 768px) {
  .section-headline { font: var(--text-display-mobile); }
}
.section-body {
  font: var(--text-body-lg);
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.125rem);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
  max-width: 48ch;
}
.section-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  max-width: 48ch;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.125rem);
}
.section-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}
.section-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.section-list strong { color: var(--color-text-primary); }
.section-cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-5);
  margin-bottom: 10px;
  min-height: 44px;
  padding: 12px 16px;
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.hero-panel .section-cta { margin-bottom: 10px; }
.section-cta:hover { opacity: 0.7; }
.section-cta::after {
  content: " →";
  display: inline-block;
  margin-left: var(--space-1);
  transition: transform var(--duration-fast) var(--ease-out);
}
.section-cta:hover::after { transform: translateX(2px); }

.legal-links {
  margin-top: 50px;
  font: var(--text-mono-data);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
}
.legal-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.legal-links a:hover { color: var(--color-text-secondary); border-bottom-color: var(--color-hairline-bright); }
.section-screenshot {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.phone-frame {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-hairline-bright);
  background: var(--color-surface-lowest);
  box-shadow:
    0 25px 60px -20px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ---- Mac frame (16:10 aspect — currently unused on index.html; kept for parity with Stitch HTML) ---- */
.mac-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 10;
  text-align: center;
  color: var(--color-text-muted);
  font: var(--text-mono-data);
  letter-spacing: var(--tracking-normal);
  padding: var(--space-5);
  box-shadow:
    0 25px 60px -20px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.library-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  color: var(--color-text-muted);
}
.library-shot img,
.library-shot svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(62vh, 620px);
  object-fit: contain;
}
@media (min-width: 1024px) {
  #section-01 .section-grid,
  #section-02 .section-grid,
  #section-04 .section-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    column-gap: var(--space-6);
  }
}
.privacy-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(100%, 420px);
  margin: 0 auto;
  color: var(--color-primary-container);
}
.privacy-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 620px);
  object-fit: contain;
}
.privacy-visual svg {
  width: 100%;
  height: auto;
}

/* ---- Divider ---- */
.divider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: var(--space-5) 0;
}
.divider-dots .dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-primary);
  opacity: 0.4;
}
.divider-dots .dot:nth-child(2n) { opacity: 0.2; }

/* ---- §03 LISTEN two-card grid (replace old single-card §03 layout) ---- */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
@media (min-width: 1024px) {
  .demo-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.demo-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-hairline-bright);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow:
    0 25px 60px -20px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.demo-card-head {
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: var(--space-5);
}
.demo-card-title {
  font: var(--text-display);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}
.demo-card-sub {
  font: var(--text-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 48ch;
}
.demo-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.demo-card-body .waveform-component {
  margin: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.demo-grid-section-intro {
  max-width: 640px;
  margin: 0 auto var(--space-2);
  text-align: center;
}
.demo-grid-section-intro .section-label { text-align: center; }
.demo-grid-section-intro .section-headline {
  margin-left: auto;
  margin-right: auto;
  max-width: 22ch;
}
.demo-grid-section-intro .section-body {
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
}
.demo-grid-section-intro .device-badges {
  justify-content: center;
  margin-top: var(--space-2);
  margin-bottom: 0;
}
.waveform-hint {
  margin: 0 0 var(--space-2);
  text-align: center;
  font: var(--text-mono-data);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 10px;
}
.demo-card-body .waveform-controls { margin-bottom: var(--space-2); }
.demo-card-body .waveform-bars {
  height: 120px;
  background: var(--color-surface-lowest);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
  box-sizing: border-box;
}

/* ---- Waveform (audio section 04) ---- */
.waveform-component {
  max-width: 720px;
  margin: var(--space-5) auto 0;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--color-surface-low);
  border: 1px solid var(--color-hairline-bright);
  border-radius: var(--radius-lg);
  box-shadow:
    0 25px 60px -20px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
}
.waveform-component::before {
  content: "TAP A VERSION — TAP THE BARS TO SEEK";
  position: absolute;
  top: var(--space-4);
  left: 0;
  right: 0;
  text-align: center;
  font: var(--text-mono-data);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  opacity: 0.7;
  pointer-events: none;
}
.waveform-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 195px;
  margin-bottom: var(--space-5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.waveform-bar {
  width: 3px;
  min-height: 4px;
  border-radius: 1px;
  background: var(--color-surface-variant);
  transition: background var(--duration-fast) var(--ease-out), height 60ms linear;
}
.waveform-bar.played {
  background: var(--color-primary-container);
}

/* ---- ENHANCE button (per Player Stitch HTML: sparkles + mono uppercase + outline) ---- */
.btn-enhance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-5);
  background: transparent;
  border: 1px solid var(--color-primary-container);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.btn-enhance:hover {
  background: rgba(200, 134, 10, 0.10);
  border-color: var(--color-primary);
}
.btn-enhance:active {
  transform: scale(0.95);
}
.btn-enhance svg {
  width: 18px;
  height: 18px;
}
.waveform-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}
.waveform-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.waveform-version {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-hairline-bright);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.waveform-version:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.waveform-version.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.waveform-version:active { transform: scale(0.95); }
.waveform-meta {
  text-align: center;
  font: var(--text-mono-data);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-normal);
  margin-top: var(--space-2);
}
.waveform-meta strong {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.waveform-metrics {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font: var(--text-mono-data);
  color: var(--color-text-secondary);
}
.waveform-metrics thead th {
  text-align: right;
  padding: 6px 10px;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-size: 10px;
  border-bottom: 1px solid var(--color-hairline);
}
.waveform-metrics thead th:first-child { text-align: left; }
.waveform-metrics tbody th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 400;
  color: var(--color-text-muted);
}
.waveform-metrics tbody td {
  text-align: right;
  padding: 8px 10px;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.waveform-metrics-delta {
  color: var(--color-primary) !important;
  font-weight: 500;
}

/* ---- Bottom nav (horizontal tab bar — mirrors iOS app tab bar) ---- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
}
.bottom-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
  max-width: 960px;
  margin: 0 auto;
}
.bottom-nav .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
  min-height: 48px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.bottom-nav .tab:hover { color: var(--color-text-primary); }
.bottom-nav .tab.active {
  color: var(--color-primary);
  background: rgba(255, 185, 80, 0.08);
}
.bottom-nav .tab-num {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.bottom-nav .tab.active .tab-num { opacity: 1; }
.bottom-nav .tab-label {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: var(--tracking-widest);
}
@media (min-width: 1024px) {
  .bottom-nav { display: none; } /* desktop uses the top nav links instead */
}

/* Add bottom padding to body so content isn't hidden behind the bottom nav */
body { padding-bottom: 64px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* ponytail: pager for track-mode (≥768). Phones use bottom-nav only. */
.pager {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  display: none;
}
@media (min-width: 768px) {
  .pager { display: block; }
}

.pager-edge {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--color-glass, rgba(0, 0, 0, 0.25));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.pager-prev { left: var(--space-4); flex-direction: row; }
.pager-next { right: var(--space-4); flex-direction: row; }

@media (min-width: 768px) {
  /* Chip is ~92px from inset; keep copy clear of it */
  main.track > .section-numbered > .container {
    padding-left: 128px;
    padding-right: 128px;
  }
}

.pager-edge[hidden] { display: none; }

.pager-chevron {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.pager-num {
  font: 500 10px/1 var(--font-mono);
  color: var(--color-primary);
  letter-spacing: 0.1em;
}

.pager-label {
  font: 500 11px/1 var(--font-mono);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.pager-edge:hover,
.pager-edge:focus-visible {
  color: var(--color-text-primary);
  background: rgba(255, 185, 80, 0.08);
  outline: none;
}

.pager-edge:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary);
}

@media (max-width: 600px) {
  .pager-edge { padding: var(--space-2); }
  .pager-num,
  .pager-label { display: none; }
}

.mac-cta {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-6);
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-container);
  border-radius: var(--radius-sm);
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.mac-cta:hover { background: rgba(200, 134, 10, 0.10); }
.mac-cta:active { transform: scale(0.95); }

/* ---- Footer ---- */
.footer {
  padding: var(--space-9) 0 var(--space-7);
  border-top: 1px solid var(--color-hairline);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.footer-brand img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
.footer-tagline {
  color: var(--color-text-secondary);
  margin: 0;
  font: var(--text-body-sm);
  max-width: 36ch;
}
.footer-col h4 {
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a {
  font: var(--text-body-sm);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  text-align: center;
  font: var(--text-mono-data);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-normal);
}

/* ---- Format chip / Credits pill (matches iOS Stitch HTML mockups) ---- */
.format-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--color-hairline-bright);
  border-radius: var(--radius-sm);
  background: transparent;
  font: var(--text-mono-data);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
}
/* ---- Device badges (cross-platform: iPhone · iPad · Mac · Watch) ---- */
.device-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.device-badge {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border: 1px solid var(--color-hairline-bright); border-radius: var(--radius-pill);
  background: var(--color-surface-low); font: var(--text-mono-data);
  letter-spacing: var(--tracking-widest); color: var(--color-text-secondary);
}
/* Single-column centred panels for Listen/Privacy (no real screenshot → no dead half) */
@media (min-width: 1024px) {
  .section-grid.solo { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
  .section-grid.solo .section-text { max-width: none; margin: 0 auto; }
  .section-grid.solo .section-headline,
  .section-grid.solo .section-body { margin-left: auto; margin-right: auto; }
  .section-grid.solo .section-screenshot { margin-top: var(--space-7); }
}
/* Cross-platform bundle image in the hero (replaces grey placeholder when asset lands) */
.device-bundle img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 620px);
  object-fit: contain;
  border-radius: var(--radius-lg);
}

/* ---- Watch asset (no frame — the SVG draws its own case + crown + side button) ---- */
.watch-asset {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

/* ---- Mobile menu drawer ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-inout);
}
.mobile-menu.open { pointer-events: auto; opacity: 1; }
.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mobile-menu-content {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 80vw);
  background: var(--color-bg);
  border-left: 1px solid var(--color-hairline);
  padding: var(--space-9) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-inout);
}
.mobile-menu.open .mobile-menu-content { transform: translateX(0); }
.mobile-menu-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
}
.mobile-menu-close:hover { background: var(--color-surface); }
.mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.mobile-nav-link:hover { color: var(--color-primary); background: var(--color-surface); }

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

/* =====================================================================
   HORIZONTAL TRACK MODE — desktop/tablet ≥768px.
   The whole page becomes a horizontal scroll track. The bottom nav
   replaces the top nav links. Sections become full-viewport panels.
   Reduced motion only disables the smooth-scroll animation (see the
   prefers-reduced-motion override below), not the layout/nav itself —
   so the bottom bar + left/right pager chips show for everyone. Phones
   (<768px) keep the vertical flow with the fixed bottom bar.
   ===================================================================== */
@media (min-width: 768px) {
  /* Track shell only — do not lock scroll or hide top nav on legal pages */
  html:has(main.track),
  body:has(main.track) {
    height: 100%;
    overflow: hidden;
  }
  body:has(main.track) { padding-bottom: 0; }

  .nav { z-index: 50; }
  body:has(main.track) .nav-links { display: none; }
  body:has(main.track) .nav-cta { display: inline-flex; }
  body:has(main.track) .bottom-nav { display: block; }

  /* Privacy / Terms / other non-track pages: keep top links visible */
  body:not(:has(main.track)) .nav-links { display: flex; }

  main.track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    height: 100vh;
    width: 100vw;
    -webkit-overflow-scrolling: touch;
  }

  main.track > .section-numbered {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: var(--space-7) 0;
    box-sizing: border-box;
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  main.track > .section-numbered:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }

  main.track > .divider-dots { display: none; }

  .footer { display: none; }

  /* Panel content layout inside track mode */
  main.track .section-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 0;
  }

  /* Listen panel: tall two-card layout — top-align so "03 · LISTEN" isn't
     clipped by justify-content: center when content exceeds the viewport. */
  main.track > #section-03 {
    justify-content: flex-start;
    padding-top: calc(64px + var(--space-6));
    padding-bottom: calc(72px + var(--space-6));
  }
  main.track > #section-03 .demo-grid {
    margin-top: var(--space-5);
    flex: 0 0 auto;
  }

  /* Privacy panel: waveform component fills the right column */
  main.track > #section-04 .waveform-component {
    max-width: 100%;
  }

  /* Methodology: long copy — top-align so the heading isn't clipped */
  main.track > #section-05 {
    justify-content: flex-start;
    padding-top: calc(64px + var(--space-6));
    padding-bottom: calc(72px + var(--space-6));
  }

  /* Hero: copy + device cluster as one group, vertically centered in the panel */
  main.track > .hero-panel {
    justify-content: center;
    padding: calc(56px + var(--space-4)) var(--space-5) calc(72px + var(--space-4));
    overflow: hidden;
  }
  main.track > .hero-panel .container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    height: 100%;
    max-width: 1100px;
  }
  main.track > .hero-panel .hero-stack {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-width: 960px;
    gap: var(--space-3);
    justify-content: center;
  }
  main.track > .hero-panel .hero-stack > :not(.device-bundle) {
    flex: 0 0 auto;
  }
  main.track > .hero-panel .hero-stack .section-body {
    max-width: 58ch;
  }
  main.track > .hero-panel .device-bundle {
    flex: 1 1 0;
    min-height: 0;
    max-width: min(960px, 92vw);
    margin-top: var(--space-2);
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  main.track > .hero-panel .device-bundle img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

/* Reduced motion: keep the track layout + nav, but no smooth-scroll animation. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  main.track { scroll-behavior: auto; }
}

/* ---- §05 METHODOLOGY ---- */
.metric-explain {
  margin: var(--space-6) 0 var(--space-7);
  padding: 0;
  max-width: 56ch;
}
.metric-explain dt {
  font: var(--text-mono-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
  padding-top: var(--space-3);
}
.metric-explain dt:first-of-type { padding-top: 0; }
.metric-explain dd {
  margin: 0 0 var(--space-4);
  font: var(--text-body);
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1rem);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.metric-explain dd code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--color-hairline);
}
.metric-explain-h {
  font: var(--text-display);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.4rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: var(--space-6) 0 var(--space-3);
  max-width: 50ch;
  line-height: 1.2;
}

/* =====================================================================
   PHONE LAYOUT — <768px (vertical scroll; bottom-nav; no pager/track)
   ===================================================================== */
@media (max-width: 767px) {
  html {
    scroll-padding-top: 72px;
    scroll-padding-bottom: 80px;
  }

  .section-numbered,
  .hero-panel {
    scroll-margin-top: 72px;
    padding: calc(64px + var(--space-6)) 0 calc(var(--space-8) + 64px);
  }

  .hero-stack {
    max-width: 100%;
    gap: var(--space-3);
    padding: 0;
  }
  .hero-stack .section-headline {
    max-width: 18ch;
    font: var(--text-display-mobile);
  }
  .hero-stack .section-body {
    max-width: 36ch;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .device-bundle {
    max-width: 100%;
    margin-top: var(--space-2);
  }
  .device-bundle img {
    max-height: min(38vh, 280px);
    width: 100%;
  }

  .section-headline { max-width: 18ch; }
  .section-body { max-width: 40ch; }
  .section-grid { gap: var(--space-6); }

  /* Don't force desktop screenshot heights on phones */
  #section-01 .library-shot img,
  #section-01 .library-shot svg,
  #section-02 .library-shot img,
  #section-02 .library-shot svg {
    width: 100%;
    height: auto;
    max-height: min(50vh, 340px);
  }
  .library-shot { max-height: none; }
  .privacy-visual {
    max-width: min(100%, 280px);
    margin: 0 auto;
  }
  .privacy-visual img {
    width: 100%;
    height: auto;
    max-height: min(50vh, 360px);
    object-fit: contain;
  }
  .privacy-visual img {
    width: 100%;
    height: auto;
    max-height: min(50vh, 360px);
    object-fit: contain;
  }

  .demo-grid {
    margin-top: var(--space-5);
    gap: var(--space-5);
  }
  .demo-grid-section-intro {
    max-width: 100%;
    text-align: left;
  }
  .demo-grid-section-intro .section-label,
  .demo-grid-section-intro .section-headline,
  .demo-grid-section-intro .section-body {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .demo-grid-section-intro .section-headline { max-width: 20ch; }
  .demo-grid-section-intro .device-badges { justify-content: flex-start; }

  .demo-card {
    padding: var(--space-4);
    gap: var(--space-4);
  }
  .demo-card-title {
    font-size: 1.15rem;
  }
  .demo-card-body .waveform-bars {
    height: 96px;
  }
  .waveform-controls {
    flex-wrap: wrap;
  }
  .waveform-version {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
  }

  /* Metrics: allow horizontal scroll instead of crushing columns */
  .waveform-metrics {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 11px;
  }
  .waveform-metrics thead th,
  .waveform-metrics tbody th,
  .waveform-metrics tbody td {
    padding: 6px 8px;
    white-space: nowrap;
  }

  .bottom-nav .tab-label {
    font-size: 10px;
  }
  .bottom-nav .tab {
    min-height: 44px;
    padding: var(--space-1) 2px;
  }

  .brand-subtitle { display: none; } /* save nav width on narrow phones */
  .brand-title { font-size: 20px; }

  .footer {
    padding-bottom: calc(var(--space-7) + 72px);
  }
}