/* Hallmark · macrostructure: Workbench · H7 hero knobs: clip=none-centered, aspect=16/9, frame=rounded-shadow · N1b knobs: links=5, dropdowns=none, scroll=frost · Ft3 knobs: cols=3, heading=small-caps, bullet=none
 * theme: studied-DNA re-skinned to BRAND.md · paper #0C0C12 · accent orange (taste) / green (signal) / cyan (calibration)
 * display: Space Grotesk (self-hosted, OFL) · body: system · numbers: SF Mono tabular
 * studied: yes · DNA-source: url https://shotglass.app/ + Sources/Aura
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 */
/* Token VALUES are generated from tokens.json — see scripts/gen_tokens.py.
   Meaning lives in BRAND.md and design.md. Never edit values here. */
@import url("tokens.css");

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background:
    radial-gradient(700px 420px at 15% 0%, var(--color-accent-haze), transparent 60%),
    var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: clip;
}
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.01em; line-height: 1.08; }

/* nav N1b */
.nav { position: sticky; top: 0; z-index: 20; background: var(--color-nav); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-rule); }
.nav-inner { max-width: 1080px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; text-decoration: none; font-family: var(--font-display); }
.wave { width: 22px; height: 17px; color: var(--color-accent); flex: none; }
.nav-links { display: flex; gap: 20px; margin-left: auto; }
.nav-links a { color: var(--color-ink-2); text-decoration: none; font-size: 15px; }
.nav-links a:hover { color: var(--color-ink); }

/* buttons */
.btn { display: inline-block; text-decoration: none; font-weight: 700; background: var(--color-accent); color: var(--color-accent-ink); padding: 13px 26px; border-radius: var(--radius-pill); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); border: 1px solid transparent; }
/* Lift only where a real pointer can hover: on touch, :hover fires on tap and
   the button would stay lifted. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(0.97); }
a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-small { padding: 12px 20px; font-size: 14px; white-space: nowrap; }
.btn-big { font-size: 18px; padding: 16px 38px; }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn-ghost:hover { border-color: var(--color-accent); box-shadow: none; }

/* hero H7 centered */
.hero { text-align: center; padding: 88px 24px 120px; max-width: 1080px; margin: 0 auto; }
.hero-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; text-align: left; margin-bottom: 26px; }
.hero-meta .eyebrow { margin-bottom: 0; }
.hero-meta .microtrust { margin-top: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: var(--color-accent); font-weight: 800; margin-bottom: 16px; }
.hero h1 { font-size: clamp(44px, 8vw, 88px); font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.lede { color: var(--color-ink-2); font-size: 18px; margin: 20px auto 0; max-width: 640px; }
.cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.microtrust { color: var(--color-ink-2); font-size: 13px; margin-top: 14px; }
/* Neutral, not signal green: green means power and signal in this brand, and this
   dot sits beside a pricing line rather than a live indicator. */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-2); margin-right: 6px; vertical-align: 1px; }

/* hero shot: the real app window. Frame (border/radius/shadow/glow) is baked
   into the composed PNG, so no CSS frame here — avoids double framing. */
.hero-figure { margin: 48px auto 0; max-width: 980px; }
.hero-shot { display: block; width: 100%; height: auto; }
.shot-cap { color: var(--color-ink-2); font-size: 13px; margin-top: 14px; text-align: center; }

/* proof strip T4 */
.strip { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-1); margin-top: 0; }
.strip-grid { max-width: 1080px; margin: 0 auto; padding: 36px 24px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat-num { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(28px, 4vw, 40px); font-variant-numeric: tabular-nums; color: var(--color-accent); }
.stat-label { color: var(--color-ink-2); font-size: 14px; }
.stat-num .stat-sub { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-ink-2); letter-spacing: 0; }
.fineprint { color: var(--color-ink-2); font-size: 13px; margin-top: 10px; opacity: 0.85; }
.strip .fineprint { text-align: center; padding: 0 24px 26px; }

/* sections */
.section { max-width: 1080px; margin: 0 auto; padding: 84px 24px 8px; }
#how.section { padding-top: 96px; }
#pricing.section { padding-top: 68px; }
.section h2 { font-size: clamp(30px, 4.6vw, 50px); font-weight: 700; margin-bottom: 8px; overflow-wrap: anywhere; min-width: 0; }

/* comparison table */
.table-wrap { overflow-x: auto; margin-top: 28px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.compare th, .compare td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-rule); }
.compare thead th { font-family: var(--font-display); background: var(--color-paper-2); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare tbody th { color: var(--color-ink-2); font-weight: 600; }
.compare .hl { background: var(--color-accent-tint); font-weight: 600; }

/* split rows */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.split.flip .split-text { order: 2; }
.split.flip .split-proof { order: 1; }

/* Asymmetric splits — the composition pass, 2026-09-19.
   Three identical 50/50 rows is the regularity that reads as template output. A
   hand-composed reference varies the ratio between rows and mirrors which side
   leads, so the eye stops predicting. Ratios differ on purpose; do not normalise
   them back to 50/50.
   Scoped to min-width so they cannot beat the single-column rule at 768px — a
   `.split.modifier` selector outranks a bare `.split` inside the max-width block,
   which is exactly how a responsive override gets silently defeated. */
@media (min-width: 769px) {
  .split.split-proofwide { grid-template-columns: minmax(0, 36%) minmax(0, 64%); }
  .split.split-textwide  { grid-template-columns: minmax(0, 38%) minmax(0, 62%); }
  .split.split-textmost  { grid-template-columns: minmax(0, 58%) minmax(0, 42%); }
}

/* Section rhythm: one uniform top padding on every block is another template tell.
   Tight where the section continues a thought, loose where it starts one. */
.section.rhythm-tight { padding-top: 56px; }
.section.rhythm-loose { padding-top: 112px; }

/* Edge light — the signature pass. See BRAND.md "Edge light" for the decision and
   its scope: ONE lit card per viewport, never a grid. It works as a scarcity
   signal; applied uniformly it becomes the generic gradient-glow card this brand
   is positioned against.
   Two layers: ::before draws the lit SEGMENT of the ring (a conic gradient masked
   down to an arc, so the rest of the ring stays hairline and the card still reads
   flat until you notice the light), ::after draws the halo just outside it. Same
   glow value the signature EQ curve uses (accent-glow, 0.30). Decorative: no text
   pair changes, so the measured contrast floors are untouched. */
.edge-light { position: relative; }
.edge-light::before,
.edge-light::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.edge-light::before {
  inset: 0;
  padding: 1px;                       /* the ring is the padding box minus content */
  background: conic-gradient(from 285deg,
                transparent 0deg,
                var(--color-accent-glow) 14deg,
                var(--color-accent) 36deg,
                var(--color-accent-glow) 58deg,
                transparent 96deg,
                transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.edge-light::after {
  inset: -12px;
  background: radial-gradient(260px 130px at 8% -6%, var(--color-accent-glow), transparent 72%);
  filter: blur(14px);
}
.ticks { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 10px; }
.ticks li { padding-left: 28px; position: relative; color: var(--color-ink); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.chips span { border: 1px solid var(--color-rule); background: var(--color-paper-3); padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; }
.chips-calib .chip-more, .chips span.chip-more { border-color: var(--color-calib); color: var(--color-calib); font-weight: 700; }
.chips-calib span { border-color: var(--color-calib-line); }
/* real app shots in split rows */
.split-proof { min-width: 0; }
.split-proof, .how-figure { margin: 0; }
.shot { display: block; width: 100%; height: auto; }

/* steps F4 */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 28px; }
.how-grid .steps { margin-top: 0; }
.steps { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--color-rule); }
.steps li:last-child { border-bottom: 1px solid var(--color-rule); }
.step-n { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent); }
.steps h3 { font-size: 20px; margin-bottom: 6px; }
.steps p { color: var(--color-ink-2); }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 28px; }
.price-card { border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: 28px; background: var(--color-paper-2); }
.hl-card { border-color: var(--color-accent-line); background: var(--color-accent-fill); }
.price-card h3 { font-size: 18px; }
.price-card .price { font-family: var(--font-mono); font-size: 36px; font-weight: 700; margin: 8px 0; font-variant-numeric: tabular-nums; }
.price-card p { color: var(--color-ink-2); margin-bottom: 18px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); border: 1px solid var(--color-accent-line); border-radius: var(--radius-pill); padding: 2px 9px; margin-left: 6px; vertical-align: middle; font-family: var(--font-body); }

/* faq */
.faq { margin-top: 24px; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--color-rule); border-radius: 8px; padding: 16px 20px; background: var(--color-paper-2); }
.faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); font-size: 17px; }
.faq details p { color: var(--color-ink-2); margin-top: 10px; }

/* download */
.download { text-align: center; padding-bottom: 100px; }
.download .btn-big { margin-top: 24px; }

/* programmatic pages (headphones/, alternatives/) */
.crumb { font-size: 13px; color: var(--color-ink-2); margin-bottom: 18px; }
.crumb a { color: var(--color-ink-2); text-decoration: none; }
.crumb a:hover { color: var(--color-ink); }
.crumb span { color: var(--color-ink); }
.seo-page h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 700; margin: 6px 0 0; overflow-wrap: anywhere; }
.seo-page .h1-sub { display: block; font-size: 0.42em; color: var(--color-ink-2); font-weight: 700; margin-top: 8px; letter-spacing: 0; }
.seo-page h2 { font-size: clamp(22px, 3vw, 32px); margin-top: 44px; }
.seo-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 12px; }
.seo-main { min-width: 0; }
.seo-card { border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); padding: 24px; position: sticky; top: 84px; }
.seo-card h3 { font-size: 18px; margin-bottom: 8px; }
.seo-card .btn { margin-top: 18px; }
.band-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.related a { border: 1px solid var(--color-rule); background: var(--color-paper-3); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 14px; text-decoration: none; color: var(--color-ink); }
.related a:hover { border-color: var(--color-accent-line); color: var(--color-accent); }
.searchbox { width: 100%; margin: 24px 0 4px; padding: 14px 18px; font-size: 16px; font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.searchbox:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.dir-brand { margin-top: 40px; }
.dir-brand h3 { font-size: 20px; border-bottom: 1px solid var(--color-rule); padding-bottom: 8px; }
.dir-count { font-size: 13px; color: var(--color-ink-2); font-weight: 400; font-family: var(--font-mono); margin-left: 6px; }
.dir-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dir-item { border: 1px solid var(--color-rule); background: var(--color-paper-2); border-radius: var(--radius-pill); padding: 6px 13px; font-size: 14px; text-decoration: none; color: var(--color-ink-2); }
.dir-item:hover { color: var(--color-accent); border-color: var(--color-accent-line); }
.verdict { margin-top: 22px; max-width: 780px; padding: 16px 20px; border-left: 3px solid var(--color-accent); background: var(--color-accent-fill); border-radius: 0 var(--radius-card) var(--radius-card) 0; font-size: 17px; color: var(--color-ink); }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.pick-card { border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); padding: 22px 24px; min-width: 0; }
.pick-card h3 { font-size: 17px; font-family: var(--font-display); }
.pick-card .ticks { margin-top: 12px; }
.pick-card.pick-keep .ticks li::before { content: "\2192"; color: var(--color-ink-2); }
/* guides */
.prose { max-width: 720px; margin-top: 26px; }
.prose h2 { font-size: clamp(22px, 3vw, 30px); margin-top: 40px; }
.prose p { color: var(--color-ink); margin-top: 14px; font-size: 17px; line-height: 1.7; }
.prose ul, .prose ol { margin: 14px 0 0 22px; display: grid; gap: 8px; color: var(--color-ink); font-size: 17px; }
.prose li { line-height: 1.6; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.guide-cta { margin-top: 44px; padding: 32px 0 24px; border-top: 1px solid var(--color-rule); text-align: center; }
.guide-cta h2 { font-size: clamp(20px, 2.6vw, 28px); }
.guide-cta .btn-big { margin-top: 16px; }
.guide-cta .fineprint { margin-top: 10px; }
.more { margin-top: 44px; }
.more-group + .more-group { margin-top: 26px; }
.more-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-ink-2); font-family: var(--font-body); font-weight: 600; }
.more-group .related { margin-top: 12px; }
.sources h2 { font-size: 18px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.guide-card { display: block; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); padding: 24px; text-decoration: none; color: var(--color-ink); }
.guide-card:hover { border-color: var(--color-accent-line); }
.guide-card h3 { font-size: 20px; margin-top: 6px; }
.guide-card p { color: var(--color-ink-2); margin-top: 8px; font-size: 15px; }
.guide-meta { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-ink-2); }
.byline { color: var(--color-ink-2); font-size: 14px; margin-top: 10px; }
.byline a { color: var(--color-ink-2); text-decoration: none; }
.byline a:hover { color: var(--color-ink); }
.takeaways { max-width: 720px; margin-top: 26px; border: 1px solid var(--color-rule); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-card) var(--radius-card) 0; background: var(--color-accent-fill); padding: 18px 22px; }
.takeaways h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-ink-2); margin: 0 0 10px; font-family: var(--font-body); }
.takeaways ul { margin: 0 0 0 18px; display: grid; gap: 7px; }
.takeaways li { font-size: 16px; line-height: 1.5; }
.guide-figure { max-width: 720px; margin: 26px 0 0; }
.guide-figure .fig { width: 100%; height: auto; display: block; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.guide-figure figcaption { color: var(--color-ink-2); font-size: 13px; margin-top: 10px; }
.fig text { fill: var(--color-ink); font-family: var(--font-body); font-size: 14px; text-anchor: middle; }
.fig .fig-sub { fill: var(--color-ink-2); font-size: 11px; }
.fig .fig-boxes rect { fill: var(--color-paper-3); stroke: var(--color-rule); }
.fig .fig-boxes rect.fig-hl { fill: var(--color-accent-fill); stroke: var(--color-accent-line); }
.fig-arrows line { stroke: var(--color-ink-2); stroke-width: 1.4; }
.fig-axis { stroke: var(--color-rule); stroke-width: 1; }
.fig-flat { stroke: var(--color-ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fig-curve { fill: none; stroke: var(--color-accent); stroke-width: 2.2; stroke-linecap: round; }
.fig-hl-line { stroke: var(--color-signal); stroke-width: 2.2; }
.fig-dot { fill: var(--color-signal); }
.fig-label { fill: var(--color-ink); font-size: 13px; }
.sources { margin-top: 44px; max-width: 720px; }
.sources ul { margin: 12px 0 0 18px; display: grid; gap: 6px; }
.sources a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
/* Comparison tables stack on mobile so the Aura column is never hidden off-screen. */
@media (max-width: 768px) {
  .compare-responsive { min-width: 0; }
  .compare-responsive, .compare-responsive tbody, .compare-responsive tr,
  .compare-responsive th, .compare-responsive td { display: block; width: 100%; }
  .compare-responsive thead { display: none; }
  .compare-responsive tr { border: 1px solid var(--color-rule); border-radius: var(--radius-card); margin-bottom: 12px; background: var(--color-paper-2); overflow: hidden; }
  .compare-responsive th[scope="row"] { padding: 13px 16px 4px; color: var(--color-ink); font-size: 15px; border-bottom: none; }
  .compare-responsive td { display: flex; justify-content: space-between; gap: 16px; padding: 7px 16px; border-bottom: none; }
  .compare-responsive td::before { content: attr(data-label); color: var(--color-ink-2); font-size: 13px; }
  .compare-responsive td.hl { background: var(--color-accent-tint); font-weight: 600; }
}

/* footer Ft2 inline */
footer { border-top: 1px solid var(--color-rule); background: var(--color-paper-1); }
.foot-inner { max-width: 1080px; margin: 0 auto; padding: 44px 24px 30px; display: grid; gap: 18px; }
.foot-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.foot-lockup { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; }
.foot-lockup .wave { width: 20px; height: 15px; }
.foot-tag { color: var(--color-ink-2); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { color: var(--color-ink-2); font-size: 14px; text-decoration: none; }
.foot-links a:hover { color: var(--color-ink); }
.foot-base { color: var(--color-ink-2); font-size: 13px; }

@media (max-width: 768px) {
  .nav-inner { flex-wrap: wrap; row-gap: 10px; }
  .nav-links { display: flex; order: 3; flex-basis: 100%; overflow-x: auto; gap: 4px 18px; padding-bottom: 2px; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
  .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.flip .split-text { order: 1; }
  .split.flip .split-proof { order: 2; }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .seo-card { position: static; }
  .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  /* Hallmark tap-target floor: pills and nav reach ~44px on touch widths. */
  .related a, .dir-item, .chips span { padding: 11px 16px; }
  .nav-links a { padding: 12px 0; }
  /* Related links stack as full-width rows so long titles never wrap inside a pill. */
  .related { display: grid; grid-template-columns: minmax(0, 1fr); }
  .related a { display: block; }
  .hero { padding-top: 56px; }
}
@media (max-width: 414px) {
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero: remove motion that travels, keep the colour
     and opacity cues that aid comprehension. */
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* hear-it: the loudness-trick demo (/hear-it.html). Colours come from tokens;
   no new values are introduced, so the contrast floors are unaffected. */
.player { margin-top: 34px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); padding: 28px; }
.player-head h2 { font-size: clamp(22px, 3vw, 32px); }
.player-sub { color: var(--color-ink-2); font-size: 15px; margin-top: 8px; max-width: 640px; }
.player-stage { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; padding: 18px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.player-stage .btn { white-space: nowrap; }
.ab { display: inline-flex; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); overflow: hidden; }
.ab button { background: transparent; border: 0; color: var(--color-ink-2); font: inherit; font-weight: 700; padding: 11px 26px; cursor: pointer; }
.ab button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.meter { display: grid; gap: 6px; flex: 1 1 150px; min-width: 130px; }
.meter-row { display: flex; align-items: center; gap: 8px; }
.meter-row i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-2); }
.meter-bar { position: relative; display: block; flex: 1; height: 8px; border-radius: 4px; background: var(--color-track); overflow: hidden; }
.meter-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--level, 0%); background: var(--color-signal); }
.clip-flag { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-ink-2); }
.clip-flag.is-hot { color: var(--color-accent); font-weight: 700; }
.player-step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-rule); }
.player-step h3 { font-size: 19px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.player-step p { color: var(--color-ink-2); margin-top: 10px; max-width: 640px; }
.player-step .step-n { font-family: var(--font-mono); color: var(--color-accent); font-size: 14px; }
.pick-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pick-row button:not(.btn) { border: 1px solid var(--color-rule); background: var(--color-paper-3); color: var(--color-ink); border-radius: var(--radius-pill); padding: 11px 18px; font: inherit; font-size: 15px; cursor: pointer; }
.pick-row button:not(.btn)[aria-pressed="true"] { border-color: var(--color-accent-line); color: var(--color-accent); font-weight: 700; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; margin-top: 16px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--color-track-off); transition: background var(--dur-fast) var(--ease-out); }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-ink); transition: transform var(--dur-fast) var(--ease-out); }
.switch input:checked + .switch-track { background: var(--color-signal); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.slider-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 62px; gap: 14px; align-items: center; margin-top: 16px; max-width: 420px; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--color-accent); }
.slider-row output { font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.live { margin-top: 20px; color: var(--color-ink-2); font-size: 13px; min-height: 1.2em; }
@media (max-width: 600px) {
  .player { padding: 20px; }
  .player-stage { padding: 14px; }
  .ab button { padding: 12px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-knob { transition: none; }
}

/* The nav carries seven links, which does not fit a phone: at 390px the last one was
   clipped mid-word. The four that matter stay; these three are the SEO surface's
   internal links and are still in the DOM for a crawler, which ignores display. */
@media (max-width: 560px) {
  .nav-links a.nav-more { display: none; }
}

/* Balance the hero headline rather than leaving one word on its own line. */
.hero h1 { text-wrap: balance; }

/* ===================================================================
   Earwave, 2026-10-16. The home page redrawn from the Brilliant design
   ("Earwave Website" canvas): a centred hero with the whole window under it,
   two-column feature rows, a paired card row and a centred pricing block.
   Every colour is a token; nothing here adds a value to the contrast table.
   =================================================================== */
.mark { width: 24px; height: 24px; color: var(--color-ink); flex: none; }
.mark .mark-wave { stroke: var(--color-accent); }
.foot-lockup .mark { width: 20px; height: 20px; }

.ew-hero { text-align: center; padding: 88px 24px 0; max-width: 1200px; margin: 0 auto;
  background: radial-gradient(60% 50% at 50% 92%, var(--color-accent-glow), transparent 70%); }
.ew-hero h1 { font-size: clamp(44px, 7.2vw, 88px); line-height: 1.02; letter-spacing: -0.025em; margin-top: 26px; text-wrap: balance; }
.ew-hero .lede { font-size: 20px; max-width: 640px; }
.ew-pill { display: inline-flex; align-items: center; gap: 2px; padding: 7px 14px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: 13px; color: var(--color-ink-2); }
.ew-window { margin: 56px auto 0; max-width: 1080px; }
.ew-window img { display: block; width: 100%; height: auto; border: 1px solid var(--color-hairline-strong); border-bottom: none; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 120px var(--color-accent-haze); }

.ew-plays { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 28px 24px; border-top: 1px solid var(--color-rule); background: var(--color-paper-1); font-size: 13px; }
.ew-plays span { padding: 6px 12px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.ew-plays .ew-plays-label { border: none; color: var(--color-ink-2); padding-right: 6px; }
.ew-plays .ew-plays-off { border-style: dashed; color: var(--color-ink-2); }

.ew-strip { border-top: none; }
.ew-strip .stat-num { font-family: var(--font-display); }
.ew-accent { color: var(--color-accent); }
.ew-calib { color: var(--color-calib); }
.ew-signal { color: var(--color-signal); }

.ew-feature { padding-top: 112px; }
.ew-feature h2 { letter-spacing: -0.02em; }
.ew-shot { border: 1px solid var(--color-hairline-strong); border-radius: 14px; }
.ew-feature .chips { margin-top: 22px; }
.ew-feature .fineprint a { color: var(--color-calib); }

.ew-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 112px; }
.ew-card { border: 1px solid var(--color-rule); border-radius: 16px; background: var(--color-paper-2); padding: 36px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ew-card h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 0; }
.ew-card > p { color: var(--color-ink-2); }
.ew-rows { list-style: none; padding: 0; display: grid; gap: 10px; }
.ew-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); font-size: 14px; }
.ew-rows span { color: var(--color-ink-2); text-align: right; }
.ew-menu { display: block; width: min(100%, 300px); height: auto; margin: 8px auto 0; border: 1px solid var(--color-hairline-strong); border-radius: 12px; }

.ew-band { margin-top: 112px; padding: 32px 0 104px; background: var(--color-paper-1); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); text-align: center; }
.ew-steps { list-style: none; padding: 0; margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: left; }
.ew-steps li { border: 1px solid var(--color-rule); border-radius: 16px; background: var(--color-paper-2); padding: 32px; display: grid; gap: 12px; align-content: start; }
.ew-steps h3 { font-size: 20px; }
.ew-steps p { color: var(--color-ink-2); font-size: 15px; }

.ew-lede-left { margin-left: 0; }
.ew-center { text-align: center; }
.ew-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 24px; margin-top: 40px; text-align: left; }
.ew-prices .price-card { border-radius: 16px; padding: 32px; }
.ew-price { font-family: var(--font-display); font-size: clamp(34px, 4vw, 44px); font-weight: 700; line-height: 1.1; margin: 10px 0 12px; }

.ew-faq { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 66%); gap: 64px; align-items: start; }
.ew-faq-side { position: sticky; top: 96px; display: grid; gap: 16px; justify-items: start; }
.ew-faq .faq { margin-top: 0; }

.ew-final { margin-top: 48px; padding: 72px 24px; text-align: center; border: 1px solid var(--color-accent-line); border-radius: 24px;
  background: radial-gradient(70% 90% at 50% 120%, var(--color-accent-glow), transparent 70%), var(--color-paper-1); }
.ew-final h2 { font-size: clamp(36px, 5.4vw, 64px); }

@media (max-width: 768px) {
  .ew-hero { padding-top: 48px; }
  .ew-hero .lede { font-size: 17px; }
  .ew-hero .cta-row { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .ew-hero .cta-row .btn { text-align: center; }
  .ew-window { margin-top: 36px; }
  .ew-window img { border-radius: 12px 12px 0 0; }
  .ew-plays { justify-content: flex-start; }
  .ew-feature, .ew-pair { padding-top: 64px; }
  .ew-pair, .ew-steps, .ew-faq { grid-template-columns: minmax(0, 1fr); }
  .ew-faq { gap: 24px; }
  .ew-faq-side { position: static; }
  .ew-band { margin-top: 64px; padding-bottom: 64px; text-align: left; }
  .ew-card { padding: 24px; }
  .ew-prices { grid-template-columns: minmax(0, 1fr); }
  .ew-final { padding: 48px 20px; }
}
/* `.price-card p` is ink-2; the big line on each card is a heading, not body copy. */
.price-card .ew-price { color: var(--color-ink); }
.ew-faq-side h2 { font-size: clamp(30px, 3.4vw, 44px); }
.ew-strip .fineprint { max-width: 1032px; margin-left: auto; margin-right: auto; }
/* Wide app shots get the wider column; the text keeps a readable measure. */
@media (min-width: 769px) {
  .ew-feature.split { grid-template-columns: minmax(0, 40%) minmax(0, 60%); }
  /* Flipped: the proof (order 1) takes the first track, so the wide track comes first. */
  .ew-feature.split.flip { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }
}