/* Tonic — tonictune.app
   One stylesheet for every page. The app's world: a tuning fork in electric blue on near-black.
   The hero and closing call to action are always a dark "stage", like the app itself; everything else
   follows the reader's light or dark setting.
   Display: Bricolage Grotesque. Body: Atkinson Hyperlegible (made for legibility, as Tonic is made for
   VoiceOver). Readouts and labels: JetBrains Mono, like the tuner's own numbers.

   Contents
   1. Tokens (light, dark, stage)      8. Promise strip (was facts bar)
   2. Base                             9. Features and device frames
   3. Layout                          10. Chips
   4. Type                            11. Stage panel (Backing Band)
   5. Buttons                         12. Cards (Also included)
   6. Header and navigation           13. What's included
   7. Hero and tuner arc              14. FAQ accordion
                                      15. Contact block
                                      16. Closing call to action
                                      17. Footer
                                      18. Document pages (FAQ, Support, Privacy, AI page)
                                      19. Motion
                                      20. Final-site components (home, features, FAQ, AI, 404) */

/* 1. Tokens ------------------------------------------------------------------------------------------ */
:root {
  /* Color: light */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --line: #dde3ec;
  --line-strong: #c3cddb;
  --text: #0a0f18;
  --muted: #4f5b6d;
  --accent: #0a62d8;          /* buttons (white text 5.6:1) and links/labels on --bg (5.2:1) */
  --accent-hover: #0855bd;
  --accent-text: #0a5fd1;
  --accent-soft: #e2edfc;
  --on-accent: #ffffff;
  --tune: #0f7a40;            /* "in tune" green, text-safe on light */
  --glow: rgba(10, 98, 216, 0.16);
  --shadow: 0 1px 2px rgba(10, 15, 24, 0.05), 0 12px 32px -12px rgba(10, 15, 24, 0.14);
  --device-shadow: 0 2px 4px rgba(10, 15, 24, 0.08), 0 40px 80px -28px rgba(10, 30, 70, 0.45);

  /* Stage (always dark; used by .stage) */
  --stage-bg: #05070b;
  --stage-glow: #0b3a8c;

  /* Type */
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --step--2: 0.75rem;                                        /* 12  mono labels */
  --step--1: 0.875rem;                                       /* 14  captions, footer */
  --step-0: 1.0625rem;                                       /* 17  body */
  --step-1: 1.1875rem;                                       /* 19  lede */
  --step-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);          /* 20–24  h3 */
  --step-3: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);        /* 26–36  section h2 */
  --step-4: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);           /* 32–52  feature h2 */
  --step-5: clamp(2.75rem, 1.7rem + 5.2vw, 5.5rem);          /* 44–88  hero h1 */

  /* Space (4-pt 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;
  --section: clamp(64px, 9vw, 120px);
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1160px;
  --max-narrow: 720px;

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  color-scheme: light;
}

/* Color: dark. Same values twice: the reader's setting, then an explicit data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #05070b; --surface: #0c1118; --surface-2: #121924; --line: #1d2633; --line-strong: #2b3747;
    --text: #eef2f8; --muted: #97a3b6;
    --accent: #0a6cf0; --accent-hover: #2a80f5; --accent-text: #4ba3ff; --accent-soft: #0e2241; --on-accent: #ffffff;
    --tune: #30d158; --glow: rgba(26, 132, 255, 0.24);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    --device-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -30px rgba(10, 108, 240, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .stage {
  --bg: #05070b; --surface: #0c1118; --surface-2: #121924; --line: #1d2633; --line-strong: #2b3747;
  --text: #eef2f8; --muted: #97a3b6;
  --accent: #0a6cf0; --accent-hover: #2a80f5; --accent-text: #4ba3ff; --accent-soft: #0e2241; --on-accent: #ffffff;
  --tune: #30d158; --glow: rgba(26, 132, 255, 0.24);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --device-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -30px rgba(10, 108, 240, 0.45);
  color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--step-0)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class], .nav ul, .site-foot ul, .facts-bar ul, .toc ol, .jump ul { list-style: none; padding: 0; margin: 0; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }
strong { font-weight: 700; }

.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700;
}
.skip:focus { top: var(--space-3); }
.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;
}

/* 3. Layout ----------------------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: calc(var(--max-narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section); }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); max-width: 40rem; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--muted); font-size: var(--step-1); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* 4. Type ------------------------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--step--2)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text);
}
.eyebrow .num { color: var(--muted); }
.eyebrow .num::after { content: ""; display: inline-block; width: 20px; height: 1px; background: currentColor; margin-left: 10px; vertical-align: middle; opacity: 0.6; }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 36em; }
.fine { font: 500 var(--step--1)/1.5 var(--mono); color: var(--muted); }
.mono { font-family: var(--mono); }

/* 5. Buttons ---------------------------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font: 700 var(--step-0)/1.2 var(--body); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 20px -6px var(--glow);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.button:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px -8px var(--glow); }
.button .price { font: 600 var(--step--1) var(--mono); opacity: 0.85; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.button.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.button.ghost:hover { background: var(--surface-2); }
.button.small { min-height: 40px; padding: 8px 16px; font-size: var(--step--1); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.text-link { font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .15s ease; }
.text-link:hover::after { transform: translateX(3px); }

/* 6. Header and navigation -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-head.stage { background: rgba(5, 7, 11, 0.95); border-bottom-color: #141b26; }
.site-head .wrap { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 800 21px/1 var(--display); letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: var(--space-1); }
.nav a:not(.button) {
  display: block; padding: 8px 12px; border-radius: var(--r-pill);
  color: var(--muted); text-decoration: none; font-size: 15px;
}
.nav a:not(.button):hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); }
.nav .button { margin-left: var(--space-2); }
.menu-toggle { display: none; }

@media (max-width: 760px) {
  .js .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    min-height: 40px; padding: 8px 14px; border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
    font: 600 15px var(--body); cursor: pointer;
  }
  .menu-toggle .bars { width: 14px; height: 10px; position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, top .2s ease;
  }
  .menu-toggle .bars::before { top: 1px; }
  .menu-toggle .bars::after { top: 7px; }
  .menu-toggle[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }

  .site-head .wrap { flex-wrap: wrap; }
  .nav { width: 100%; margin-left: 0; }
  .js .nav { display: none; }
  .js .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--space-4); }
  .nav a:not(.button) { padding: 12px 4px; border-radius: 0; border-top: 1px solid var(--line); font-size: var(--step-0); }
  .nav .button { margin: var(--space-3) 0 0; width: 100%; }
  html:not(.js) .nav ul { flex-direction: row; flex-wrap: wrap; }
}

/* 7. Hero and tuner arc ------------------------------------------------------------------------------ */
.stage {
  background-color: var(--stage-bg);
  color: var(--text);
}
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 55% at 72% 38%, color-mix(in srgb, var(--stage-glow) 85%, transparent) 0%, transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgba(11, 58, 140, 0.35) 0%, transparent 70%),
    var(--stage-bg);
  padding-block: clamp(40px, 7vw, 88px) clamp(48px, 6vw, 72px);
}
.hero::after { /* hairline where the stage meets the page */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(75, 163, 255, 0.45), transparent);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-7); align-items: center; }
.hero-copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero h1 { font-size: var(--step-5); letter-spacing: -0.04em; line-height: 0.98; }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero .lede { color: #b4c0d2; }
.hero .fine { color: #97a3b6; }

.hero-visual { display: grid; gap: var(--space-4); justify-items: center; min-width: 0; }
.hero-art { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 500 / 660; }
.hero-art .arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-art .device { position: absolute; left: 27%; top: 19.5%; width: 46%; }
.arc-svg .track { fill: none; stroke: #1d2a3d; stroke-width: 2; }
.arc-svg .zone { fill: none; stroke: var(--tune); stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.arc-svg .tick { stroke: #2b3a50; stroke-width: 2; stroke-linecap: round; }
.arc-svg .tick.major { stroke: #5b6b82; stroke-width: 3; }
.arc-svg .zero { stroke: var(--tune); stroke-width: 4; stroke-linecap: round; }
.arc-svg .scale { fill: #7d8aa0; font: 600 13px var(--mono); }
.arc-svg .marker { transform-origin: 250px 390px; animation: settle 3.4s cubic-bezier(.2, .7, .2, 1) .4s both; }
.arc-svg .marker circle { fill: var(--accent-text); animation: lock 3.4s linear .4s both; }
.arc-svg .marker .halo { fill: var(--accent-text); opacity: 0.25; }
@keyframes settle {
  0% { transform: rotate(-44deg); } 24% { transform: rotate(18deg); } 44% { transform: rotate(-9deg); }
  63% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: rotate(0deg); }
}
@keyframes lock { 0%, 82% { fill: var(--accent-text); } 100% { fill: var(--tune); } }

/* Device frames: real screenshots in a drawn bezel. Width is set by the parent. */
.device {
  position: relative; padding: 2.8%;
  border-radius: 14% / 6.6%;
  background: linear-gradient(160deg, #2a3242 0%, #0d1118 30%, #07090d 70%, #1c2330 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), var(--device-shadow);
}
.device img { width: 100%; border-radius: 11.6% / 5.4%; background: #000; }
.device.tablet { padding: 2.4%; border-radius: 5.5% / 4.2%; }
.device.tablet img { border-radius: 3.6% / 2.7%; }

/* 8. Facts bar -------------------------------------------------------------------------------------- */
.facts-bar { border-bottom: 1px solid var(--line); background: var(--surface); }
.facts-bar ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.facts-bar li { padding: var(--space-5) var(--space-4); display: grid; gap: 2px; align-content: start; }
.facts-bar li + li { border-left: 1px solid var(--line); }
@media (min-width: 901px) { .facts-bar li:first-child { padding-left: 0; } }
.facts-bar .v { font: 600 var(--step-2)/1.15 var(--mono); letter-spacing: -0.02em; color: var(--text); }
.facts-bar .k { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) {
  .facts-bar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-bar li { border-top: 1px solid var(--line); }
  .facts-bar li + li { border-left: 0; }
  .facts-bar li:nth-child(even) { border-left: 1px solid var(--line); }
  .facts-bar li:first-child { grid-column: 1 / -1; border-top: 0; }
  .facts-bar li:nth-child(2), .facts-bar li:nth-child(3) { border-top: 1px solid var(--line); }
  .facts-bar li:nth-child(odd):not(:first-child) { border-left: 1px solid var(--line); }
  .facts-bar li:nth-child(even) { border-left: 0; }
}

/* 9. Features and device frames ---------------------------------------------------------------------- */
.feature { padding-block: var(--section) 0; }
.feature .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: grid; gap: var(--space-5); align-content: start; }
.feature-copy h2 { font-size: var(--step-4); }
.feature-copy > p { color: var(--muted); font-size: var(--step-1); max-width: 34em; }

.points { display: grid; gap: 0; border-top: 1px solid var(--line); }
.points > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-4); padding-block: 14px; border-bottom: 1px solid var(--line); }
.points dt { font: 600 var(--step--1)/1.6 var(--mono); color: var(--accent-text); }
.points dd { min-width: 0; }

.feature-art { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 3vw, 28px); position: relative; isolation: isolate; min-width: 0; }
.feature-art::before { /* soft glow behind the device */
  content: ""; position: absolute; inset: 10% 5%; z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(10px);
}
.feature-art .device { width: min(300px, 72%); }
.feature-art.pair .device { width: min(270px, 47%); }
.feature-art.pair .device:nth-child(2) { margin-top: 12%; }

@media (max-width: 860px) {
  .hero .wrap, .feature .wrap { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-copy { order: 0; }
  .hero-art { max-width: 400px; }
}
@media (max-width: 480px) {
  .points > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* 10. Chips ----------------------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill);
  font: 600 var(--step--1)/1.2 var(--body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
}
.chips.quiet .chip { background: transparent; color: var(--muted); }
.chips-label { font: 600 var(--step--2)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }

/* 11. Stage panel (Backing Band) --------------------------------------------------------------------- */
.stage-panel {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background:
    radial-gradient(70% 80% at 85% 20%, rgba(11, 58, 140, 0.75), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(11, 58, 140, 0.35), transparent 70%),
    var(--stage-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: clamp(28px, 6vw, 72px);
}
.feature.on-stage .wrap { display: block; }
.stage-panel .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.stage-panel .chip { background: rgba(255, 255, 255, 0.04); border-color: #263247; color: #c9d3e2; }
.stage-panel .genres { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid #1f2a3b; }
@media (max-width: 860px) { .stage-panel .grid { grid-template-columns: minmax(0, 1fr); } }

/* 12. Cards (Also included) -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.card .body { padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.card h3 { font-size: var(--step-2); }
.card p { color: var(--muted); font-size: 15px; }
.card .shot { /* a window onto a real screenshot */
  aspect-ratio: 16 / 10; overflow: hidden; background: #000; border-bottom: 1px solid var(--line);
  display: flex; justify-content: center;
}
.card .shot img { width: 78%; height: auto; align-self: flex-start; transform: translateY(var(--shot-y, -18%)); border-radius: 0 0 0 0; }
.card.text-only { grid-template-rows: 1fr; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* 13. What's included -------------------------------------------------------------------------------- */
.included {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow);
}
.included > * { padding: clamp(24px, 4vw, 40px); }
.included > * + * { border-left: 1px solid var(--line); }
.price-card { display: grid; gap: var(--space-4); align-content: start; background: var(--accent-soft); }
.price-card .button { width: 100%; text-align: center; font-size: 15px; padding-inline: 16px; }
.price-card .amount { font: 600 clamp(2.75rem, 2rem + 3vw, 4rem)/1 var(--mono); letter-spacing: -0.04em; }
.price-card .amount small { font-size: 0.32em; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.included h3 { font: 600 var(--step--2)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-4); }
.checklist { display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.checklist li::before {
  content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--tune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.checklist.none li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10h7' fill='none' stroke='%23808b9c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.checklist.none li { color: var(--muted); }
@media (max-width: 960px) {
  .included { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .price-card { grid-column: 1 / -1; }
  .included > * + * { border-left: 0; }
  .included > :nth-child(2) { border-top: 1px solid var(--line); }
  .included > :nth-child(3) { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .included { grid-template-columns: minmax(0, 1fr); }
  .included > :nth-child(3) { border-left: 0; }
}

/* 14. FAQ accordion --------------------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line); }
details.qa { border-bottom: 1px solid var(--line); }
details.qa summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 48px 18px 0; font: 700 var(--step-1)/1.35 var(--body);
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { /* plus that turns into a minus */
  content: ""; position: absolute; right: 4px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) center / 12px 2px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) center / 2px 12px no-repeat,
    var(--surface-2);
  transition: transform .2s ease;
}
details.qa[open] summary::after {
  background: linear-gradient(var(--accent-text), var(--accent-text)) center / 12px 2px no-repeat, var(--accent-soft);
}
details.qa summary:hover { color: var(--accent-text); }
details.qa .answer { padding: 0 48px 22px 0; color: var(--muted); max-width: 66ch; display: grid; gap: 10px; }
.faq-preview { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(24px, 6vw, 80px); align-items: start; }
.faq-preview .section-head { margin-bottom: 0; }
@media (max-width: 860px) { .faq-preview { grid-template-columns: minmax(0, 1fr); } }

/* 15. Contact block --------------------------------------------------------------------------------- */
.contact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-7); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px);
}
.contact h2 { font-size: var(--step-3); }
.contact p { color: var(--muted); margin-top: var(--space-2); }
.email-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.email {
  font: 600 var(--step-0) var(--mono); color: var(--text); user-select: all; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--r-md);
}
.copy-btn {
  min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
  font: 700 var(--step--1) var(--body); color: var(--text); background: transparent; border: 1px solid var(--line-strong);
}
.copy-btn:hover { background: var(--surface-2); }
@media (max-width: 760px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* 16. Closing call to action ----------------------------------------------------------------------- */
.closing {
  position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(70% 90% at 50% 100%, rgba(11, 58, 140, 0.9), transparent 70%), var(--stage-bg);
  padding-block: clamp(72px, 10vw, 136px);
  margin-top: clamp(64px, 8vw, 104px);
}
.closing .wrap { display: grid; gap: var(--space-5); justify-items: center; }
.closing img.icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 50px -10px rgba(10, 108, 240, 0.6); }
.closing h2 { font-size: var(--step-4); }
.closing p { color: #b4c0d2; font-size: var(--step-1); max-width: 34em; }
.closing .actions { justify-content: center; }

/* 17. Footer --------------------------------------------------------------------------------------- */
.site-foot { background: var(--stage-bg); color: #97a3b6; border-top: 1px solid #141b26; font-size: var(--step--1); }
.closing + .site-foot { border-top-color: #141b26; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-8) var(--space-6); }
.site-foot .brand { color: #eef2f8; }
.site-foot .about { display: grid; gap: var(--space-3); align-content: start; max-width: 30em; }
.site-foot h2 { font: 600 var(--step--2)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6f7c91; margin-bottom: var(--space-3); }
.site-foot ul { display: grid; gap: 6px; }
.site-foot a { color: #c9d3e2; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot a:focus-visible { outline-color: #4ba3ff; }
.site-foot .legal { grid-column: 1 / -1; padding-top: var(--space-5); border-top: 1px solid #141b26; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: #8693a8; }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-foot .about { grid-column: 1 / -1; } }

/* 18. Document pages (FAQ, Support, Privacy, AI page) ----------------------------------------------- */
.page-head { padding-block: clamp(48px, 8vw, 96px) var(--space-7); border-bottom: 1px solid var(--line); background: linear-gradient(var(--surface), var(--bg)); }
.page-head .wrap { display: grid; gap: var(--space-4); }
.page-head h1 { font-size: clamp(2.25rem, 1.6rem + 3.4vw, 3.75rem); }
.page-head .lede { max-width: 40em; }
.doc { padding-block: var(--space-7) var(--space-9); }
.doc h2 { font-size: var(--step-3); margin: var(--space-7) 0 var(--space-3); scroll-margin-top: 88px; }
.doc h3 { font-size: var(--step-2); margin: var(--space-6) 0 var(--space-2); }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: var(--space-3); }
.doc ul:not([class]), .doc ol:not([class]) { padding-left: 22px; margin-block: var(--space-3); }
.doc li + li { margin-top: 6px; }
.callout { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); display: grid; gap: var(--space-2); }
.callout.accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.path { font: 500 0.88em var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.faq-group { margin-top: var(--space-7); }
.faq-group > h2 { margin: 0 0 var(--space-3); font-size: var(--step-2); }
.sections { counter-reset: s; }
.sections > section { counter-increment: s; }
.sections > section > h2::before { content: counter(s, decimal-leading-zero); font: 600 var(--step--1) var(--mono); color: var(--accent-text); margin-right: 12px; vertical-align: 0.3em; }

/* AI page ("Hey AI, learn about us"): sticky contents beside plain, quotable sections. */
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 88px; font-size: var(--step--1); }
.toc h2 { font: 600 var(--step--2)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-3); }
.toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); border-left-color: var(--accent-text); }
.facts { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.facts dt, .facts dd { padding: 12px 16px; border-top: 1px solid var(--line); }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
.facts dt { font: 600 var(--step--1)/1.6 var(--mono); color: var(--muted); background: var(--surface-2); }
.answer-block { border-left: 3px solid var(--accent-text); padding: 4px 0 4px var(--space-5); margin-block: var(--space-4); }
.answer-block .q { font-weight: 700; }
.answer-block .a { color: var(--muted); margin-top: 4px; }
@media (max-width: 860px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4); }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { border-top: 0; padding-top: 0; }
}

/* 19. Motion --------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .hero-art .device { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
}
@keyframes rise { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: none; } }  /* starts visible: a capture at load never shows an empty hero */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .arc-svg .marker circle:not(.halo) { fill: var(--tune); }
}
@media print {
  .site-head, .closing, .menu-toggle { display: none; }
  .stage, .hero { background: none; color: #000; }
}

/* 20. Final-site components ------------------------------------------------------------------------ */

/* Hero readout under the arc, and the instrument chips under it */
.readout {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 10px 18px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); border: 1px solid #1f2a3b;
  font: 500 var(--step--1)/1.3 var(--mono); color: #b4c0d2; text-align: center;
}
.readout .note { font: 800 22px/1 var(--display); color: var(--text); }
.readout .state { display: inline-flex; align-items: center; gap: 8px; color: var(--tune); font-weight: 600; }
.readout .state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tune); box-shadow: 0 0 10px var(--tune); }
.hero .chips { justify-content: center; max-width: 440px; }
.hero .chip { background: rgba(255, 255, 255, 0.04); border-color: #263247; color: #c9d3e2; }

/* A plain H2 that reads as a label, with the big creative line under it as a <p class="display"> */
.kicker, .feature-copy h2.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 var(--step--1)/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.kicker .num { color: var(--muted); letter-spacing: 0.14em; }
.kicker .num::after { content: ""; display: inline-block; width: 20px; height: 1px; background: currentColor; margin-left: 10px; vertical-align: middle; opacity: 0.6; }
.display, .feature-copy > p.display { font: 800 var(--step-4)/1.04 var(--display); letter-spacing: -0.03em; text-wrap: balance; color: var(--text); max-width: none; }
.feature-copy .display + p, .feature-copy .body { color: var(--muted); font-size: var(--step-1); max-width: 36em; }
.feature-copy h3 { font-size: var(--step-2); margin-top: var(--space-2); }
.feature-copy h3 + p { color: var(--muted); }

/* Beta tag */
.beta {
  display: inline-flex; align-items: center; vertical-align: 0.2em; margin-left: 4px;
  padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid currentColor;
  font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text);
}
h1 .beta, h2 .beta, h3 .beta { font-size: 11px; }

/* Links under a section */
.links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

/* Promise strip */
.promise { background: var(--surface); border-bottom: 1px solid var(--line); }
.promise ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; padding-block: var(--space-5); }
.promise li { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--body); }
.promise li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
@media (max-width: 600px) {
  .promise ul { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: start; gap: 10px; }
}

/* Card headings that link */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: " →"; color: var(--accent-text); }
.card h3 a:hover { color: var(--accent-text); }
.card:has(h3 a:focus-visible) { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.card h3 a:focus-visible { outline: none; }
.cards.five { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.section-head .intro { color: var(--muted); font-size: var(--step-1); }

/* Paid once (home) */
.paid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.paid h2 { font-size: var(--step-4); }
.paid .copy { display: grid; gap: var(--space-5); justify-items: start; }
.paid .copy > p { color: #b4c0d2; font-size: var(--step-1); max-width: 36em; }
.paid .price { font: 600 clamp(2.5rem, 2rem + 2.5vw, 3.75rem)/1 var(--mono); letter-spacing: -0.04em; color: var(--text); }
.paid .price small { font-size: 0.34em; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.paid .wont { background: rgba(255, 255, 255, 0.03); border: 1px solid #1f2a3b; border-radius: var(--r-lg); padding: var(--space-5); }
.paid .wont h3 { font: 600 var(--step--2)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-4); }
.paid .checklist.none li { color: #c9d3e2; }
@media (max-width: 860px) { .paid { grid-template-columns: minmax(0, 1fr); } }

/* Questions before you buy */
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); border-top: 1px solid var(--line); }
.qa-grid > div { padding-block: var(--space-5); border-bottom: 1px solid var(--line); display: grid; gap: var(--space-2); align-content: start; }
.qa-grid h3 { font-size: var(--step-2); }
.qa-grid p { color: var(--muted); }
@media (max-width: 760px) { .qa-grid { grid-template-columns: minmax(0, 1fr); } }

/* Jump list (Features, FAQ) */
.jump ul { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font: 600 var(--step--1)/1.2 var(--body);
}
.jump a:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* Features page sections */
.fsec { padding-block: var(--space-8); border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.fsec:first-of-type { border-top: 0; }
.fsec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 6vw, 80px); align-items: start; }
.fsec-art { position: sticky; top: 96px; }
.fsec-art .device { width: 100%; }
.fsec-art .device.tablet { width: 100%; }
.prose { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.prose > h2 { font-size: var(--step-4); }
.prose > h3 { font-size: var(--step-2); margin-top: var(--space-5); scroll-margin-top: 88px; }
.prose > .intro { color: var(--muted); font-size: var(--step-1); max-width: 40em; }
.prose > p { max-width: 42em; }
.prose ul:not([class]) { padding-left: 22px; display: grid; gap: 8px; }
.spec { border-top: 1px solid var(--line); }
.spec li { padding-block: 10px; border-bottom: 1px solid var(--line); }
.spec strong { color: var(--text); }
.spec .where { color: var(--muted); }
@media (max-width: 860px) {
  .fsec-grid { grid-template-columns: minmax(0, 1fr); }
  .fsec-art { position: static; order: -1; width: min(200px, 55%); justify-self: center; }
  .fsec-art.wide { width: min(320px, 86%); }
}

/* Data tables (tunings, genres, AI facts) */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: 15px; }
.data-table caption { text-align: left; color: var(--muted); font-size: var(--step--1); padding-bottom: var(--space-2); }
.data-table th, .data-table td { padding: 10px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.data-table thead th { border-top: 0; background: var(--surface-2); font: 600 var(--step--2)/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.data-table tbody tr:first-child > * { border-top: 0; }
.data-table thead + tbody tr:first-child > * { border-top: 1px solid var(--line); }
.data-table tbody th { font-weight: 700; width: 30%; }
@media (max-width: 560px) {
  .data-table thead { display: none; }
  .data-table tr { display: grid; border-top: 1px solid var(--line); padding-block: 6px; }
  .data-table tbody tr:first-child { border-top: 0; }
  .data-table th, .data-table td { border-top: 0 !important; padding: 2px 14px; width: auto; }
  .data-table tbody th { padding-top: 6px; width: auto; }
  .data-table td { padding-bottom: 6px; color: var(--muted); }
}
.data-table a { overflow-wrap: anywhere; }

/* Doc pages: ids reachable under the sticky header */
[id] { scroll-margin-top: 84px; }
.doc .lede a { font-weight: 700; }
.page-head .jump { margin-top: var(--space-3); }
.meta-line { font: 500 var(--step--1)/1.5 var(--mono); color: var(--muted); }

/* FAQ page */
.faq-group > h2 { font-size: var(--step-3); margin-bottom: var(--space-4); }
details.qa summary { padding-right: 48px; }
details.qa .answer a { font-weight: 700; }
details.qa:target summary, details.qa.is-target summary { color: var(--accent-text); }
details.qa .answer p { margin: 0; }

/* Support page */
.email-card { display: grid; gap: var(--space-4); }
.email-card .email-row { gap: var(--space-3); }
.fix-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fix-list > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.fix-list h3 { font-size: var(--step-1); margin: 0; }
.fix-list p { color: var(--muted); }
@media (max-width: 680px) { .fix-list { grid-template-columns: minmax(0, 1fr); } }

/* AI page: one narrow, plain column */
.plain h2 { font-size: var(--step-3); margin: var(--space-8) 0 var(--space-3); }
.plain h3 { font-size: var(--step-2); margin: var(--space-6) 0 var(--space-2); }
.plain p + p { margin-top: var(--space-3); }
.plain ul { padding-left: 22px; display: grid; gap: 8px; margin-block: var(--space-3); }
.plain .quote-label { font: 600 var(--step--2)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: var(--space-5) 0 var(--space-2); }
.plain blockquote { margin: 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent-text); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; }
.qa-dl { border-top: 1px solid var(--line); }
.qa-dl dt { font-weight: 700; padding-top: var(--space-4); }
.qa-dl dd { color: var(--muted); padding: 4px 0 var(--space-4); border-bottom: 1px solid var(--line); }
.updated { font: 600 var(--step--1)/1.5 var(--mono); color: var(--text); }

/* Footer, final structure */
.site-foot .wrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.site-foot .about p { color: #97a3b6; }
.site-foot .about p:first-of-type { color: #c9d3e2; }
.site-foot .legal { display: grid; gap: 4px; justify-content: stretch; }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Header "Get Tonic" waits on the home page until the hero's button scrolls away */
.nav .get { transition: opacity .2s ease, visibility .2s ease; }
.nav .get.is-waiting { opacity: 0; visibility: hidden; }
@media (max-width: 760px) { .nav .get.is-waiting { opacity: 1; visibility: visible; } }

/* 404 */
.lost { text-align: center; padding-block: clamp(48px, 8vw, 96px); }
.lost .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); justify-items: center; }
.lost .gauge { width: min(360px, 90%); }
.lost .gauge .marker { animation: none; transform: rotate(-50deg); transform-origin: 250px 390px; }
.lost .gauge .marker circle { animation: none; fill: var(--accent-text); }
.lost h1 { font-size: var(--step-5); letter-spacing: -0.04em; }
.lost p { color: #b4c0d2; font-size: var(--step-1); max-width: 32em; }
.lost .actions { justify-content: center; }
.lost .links { justify-content: center; }
.lost .links a { color: var(--accent-text); }