/* =========================================================================
   Practice Timer — Marketing site styles
   Design system sourced from website-spec.md §9–§12 (the app's theme.ts).
   Dark-first, calm, premium. WCAG 2.1 AA target.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Core palette */
  --bg: #08060F;
  --surface: #14151B;
  --surface-elevated: #1D1E25;
  --text: #F0EDE6;
  --text-muted: #A09EAD;
  --text-hint: #8A8893;

  /* Buttons */
  --button-primary: #3B23B8;
  --button-primary-glow: #6B4DFF;
  --button-primary-border: rgba(155, 130, 255, 0.35);
  --button-secondary: #CFC9E0;
  --button-secondary-text: #1A1330;

  /* Edges + ambient glow */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --glow-core: #421FB0;
  --glow-edge: #11082B;

  /* Marketing brand */
  --brand-indigo: #2D1B69;

  /* Accents */
  --accent-violet: #9B82FF;
  --accent-green: #3AA67A;
  --accent-amber: #D67E48;
  --accent-blue: #5EB1FF;
  --work: #F0A040;
  --rest: #A09EAD;

  /* Focus types */
  --focus-scales: #9B82FF;
  --focus-chords: #3AA67A;
  --focus-arpeggios: #D67E48;
  --focus-repertoire: #5EB1FF;
  --focus-technique: #E26AB8;
  --focus-ear: #F2C744;
  --focus-harmony: #45C8B0;
  --focus-improv: #F0715B;

  /* Semantic */
  --success: #4CAF82;
  --warning: #F39C12;
  --error: #CF4F4F;
  --info: #3498DB;

  /* Brand mark (warm-on-cool signature — keep orange) */
  --brand-orange: #F0A040;
  --brand-orange-deep: #E8833A;

  /* Typography */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (px from spec, adapted fluidly) */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 2rem;       /* 32 */

  /* Spacing scale (4-pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 10px 22px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(107, 77, 255, 0.25);

  /* Layout */
  --container: 1120px;
  --container-narrow: 760px;
  --header-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keep in-page anchor targets clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Signature background as its own composited, viewport-fixed layer.
   (Replaces `background-attachment: fixed`, which janks/breaks on iOS Safari
   and forces a background repaint on every scroll frame.)
   Radial indigo glow (top-center) + depth gradient + bottom darken. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(110% 70% at 50% -8%, rgba(66, 31, 176, 0.5) 0%, rgba(66, 31, 176, 0.12) 32%, transparent 60%),
    linear-gradient(180deg, rgba(45, 27, 105, 0.18) 0%, transparent 24%),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.55) 100%);
}

/* Faint noise overlay (~2.5%) — keeps backgrounds from reading flat-black */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
  color: var(--accent-violet);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
}

h3 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--sp-4);
}

ul, ol {
  margin: 0 0 var(--sp-4);
  padding-left: 1.25em;
}

strong {
  color: var(--text);
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--button-primary-glow);
  outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  position: relative;
  z-index: 1;
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(var(--sp-12), 6vw, 96px);
  position: relative;
  z-index: 1;
}

.section--tight {
  padding-block: var(--sp-12);
}

.text-center {
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 56ch;
}

/* Centered contexts center the lead block without per-element inline styles */
.text-center .lead {
  margin-inline: auto;
}

.muted {
  color: var(--text-muted);
}

.section-head {
  max-width: 64ch;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

.section-head.text-center {
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: 200;
  background: var(--button-primary);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--sp-3);
  text-decoration: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--button-primary);
  color: #fff;
  border-color: var(--button-primary-border);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--button-primary-glow), var(--button-primary));
  box-shadow: 0 0 48px rgba(107, 77, 255, 0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--button-primary-border);
}

/* Tactile press feedback */
.btn:active {
  transform: translateY(1px);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-violet);
  padding-inline: var(--sp-3);
  box-shadow: none;
}

.btn-block {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-primary:hover,
  .btn:active {
    transform: none;
  }
}

/* ---------- App Store / Play badges ---------- */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  min-height: 56px;
  border-radius: 14px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.store-badge:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.4);
}

.store-badge:active {
  transform: translateY(1px);
}

.store-badge svg {
  flex: none;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.store-badge__text small {
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.8);
}

.store-badge__text span {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.store-badge--soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .store-badge:hover,
  .store-badge:active {
    transform: none;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 6, 15, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Gains a touch of elevation once content scrolls beneath it (toggled in JS) */
.site-header.is-scrolled {
  background: rgba(8, 6, 15, 0.85);
  border-bottom-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* brand pinned left, section nav centered, CTA pinned right */
.header-inner > .brand {
  justify-self: start;
}

.header-inner > .primary-nav {
  justify-self: center;
}

.header-inner > .header-actions {
  justify-self: end;
}

.brand {
  display: inline-flex;
  align-items: center; /* logo + wordmark share a centerline (aligns with the nav) */
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  flex: none;
}

.brand:hover {
  text-decoration: none;
}

.brand svg,
.brand img {
  height: 23px; /* sized to the wordmark's cap height so it sits on the line */
  width: auto; /* trimmed mark is portrait — keep its aspect ratio */
  align-self: center;
  /* Optical lift: the mark is bottom-weighted by the notes, so geometric
     centering reads slightly low next to the wordmark. */
  transform: translateY(-4.9px);
}

.brand .wordmark {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-left: 0;
  color: var(--text);
  white-space: nowrap; /* never let "Practice Timer" break across two lines */
}

.primary-nav {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* Scroll-spy: the section currently in view (set in JS) */
.nav-menu a.is-current {
  color: var(--accent-violet);
  background: rgba(155, 130, 255, 0.1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.header-cta {
  min-height: 42px;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
}

/* Language switcher (EN ⇄ FR) — click-to-open dropdown beside the header CTA.
   Trigger shows the current language; the menu lists both, current check-marked.
   Stays visible on mobile. */
.lang-switch {
  position: relative;
}

.lang-switch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.lang-switch-toggle:hover,
.lang-switch-toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
}

.lang-switch-toggle svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.lang-switch-caret {
  width: 12px;
  height: 12px;
  margin-left: 1px;
  transition: transform 0.15s ease;
}

.lang-switch-toggle[aria-expanded="true"] .lang-switch-caret {
  transform: rotate(180deg);
}

/* The dropdown panel */
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 168px;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

/* Reveal: JS-driven click toggle */
.js .lang-switch.is-open .lang-switch-menu,
/* No-JS fallback: the button can't toggle, so reveal on hover/focus */
html:not(.js) .lang-switch:hover .lang-switch-menu,
html:not(.js) .lang-switch:focus-within .lang-switch-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch-menu {
    transition: opacity 0.15s ease, visibility 0.15s ease;
    transform: none;
  }
}

.lang-switch-menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-sm);
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.lang-switch-menu a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.lang-switch-menu a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* Check column keeps both labels aligned whether or not the row is active */
.lang-check {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent-violet);
}

.nav-cta-mobile {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  padding-block: var(--sp-12) var(--sp-8);
  margin-top: var(--sp-16);
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-10);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 34ch;
  margin-top: var(--sp-3);
}

.footer-col h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-hint);
  margin-bottom: var(--sp-4);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.footer-col a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  color: var(--text-hint);
  font-size: var(--fs-sm);
}

.footer-bottom .tagline {
  color: var(--text-muted);
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(var(--sp-12), 6vw, 88px);
  padding-bottom: clamp(var(--sp-12), 6vw, 88px);
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-12);
  align-items: center;
}

.hero h1 {
  margin-bottom: var(--sp-5);
}

.hero .subhead {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* Match the secondary button's height to the App Store badge (56px) so the
   two hero CTAs sit on one even line. */
.hero-cta .btn {
  min-height: 56px;
}

.hero-microcopy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.hero-microcopy li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-microcopy {
  padding: 0;
}

.hero-microcopy li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  display: inline-block;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ---------- Cards & grids ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
}

.card-elevated {
  background: var(--surface-elevated);
  box-shadow: var(--shadow-elevated);
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Pillars */
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pillar .pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-2);
  background: rgba(155, 130, 255, 0.12);
  color: var(--accent-violet);
}

.pillar h3 {
  margin-bottom: var(--sp-1);
}

/* Reserve two lines for the title in multi-column layouts so a heading that
   wraps (e.g. "Rest to improve faster") doesn't push its body copy out of
   alignment with the neighbouring cards. */
@media (min-width: 761px) {
  .pillar h3 {
    min-height: 2.24em; /* 2 lines at line-height 1.12 */
  }
}

.pillar p {
  color: var(--text-muted);
  margin: 0;
  font-size: var(--fs-base);
}

.pillar-number {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent-violet);
  font-weight: 700;
}

/* Subtle interactive elevation on the feature cards (pointer devices only).
   Specificity is raised on the reveal variant so the hover transition wins
   over the scroll-reveal `transition` shorthand instead of snapping. */
@media (hover: hover) {
  .pillar {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .js-anim .pillar.reveal {
    transition: opacity 0.55s ease, transform 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .pillar:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-elevated);
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .pillar:hover {
    transform: none; /* keep the border/shadow cue, drop the motion */
  }
  .js-anim .pillar.reveal {
    transition: none;
  }
}

/* ---------- Problem / Solution table ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.compare-col {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: var(--sp-6);
}

.compare-col h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-5);
}

.compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}

.compare-col li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text-muted);
}

.compare-col li svg {
  flex: none;
  margin-top: 3px;
}

.compare-col--without {
  background: rgba(255, 255, 255, 0.015);
}

.compare-col--with {
  background: linear-gradient(180deg, rgba(59, 35, 184, 0.14), rgba(59, 35, 184, 0.03));
  border-color: var(--button-primary-border);
}

.compare-col--with li {
  color: var(--text);
}

.compare-footnote {
  text-align: center;
  color: var(--text-hint);
  font-size: var(--fs-sm);
  margin-top: var(--sp-6);
}

.method-section {
  border-left: 2px solid var(--border-strong);
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.method-section h3 {
  margin-bottom: var(--sp-2);
}

.method-section .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ---------- The Science / LTP-Boost (science section) ---------- */

/* The section is its own chapter: extra air + a quiet neural field behind it */
#science.section {
  padding-block: clamp(72px, 9vw, 128px);
}

/* soft aurora — green (rest) rising on the left, violet answering lower right.
   Stays inside the section and fades at both edges so neighbouring sections
   meet it on clean black (no visible seam). */
#science::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 16% 28%, rgba(58, 166, 122, 0.13), transparent 68%),
    radial-gradient(40% 55% at 86% 72%, rgba(107, 77, 255, 0.12), transparent 70%),
    radial-gradient(60% 45% at 50% 12%, rgba(69, 200, 176, 0.05), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* hairline threshold marking the chapter's start */
#science::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 82%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58, 166, 122, 0.4), rgba(155, 130, 255, 0.3), transparent);
}

.science-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.science-net {
  width: 100%;
  height: 100%;
  display: block;
}

.science-net .nl {
  stroke-width: 1;
  stroke: rgba(58, 166, 122, 0.14);
}

.science-net .nh {
  fill: rgba(58, 166, 122, 0.12);
}

.science-net .nn {
  fill: rgba(151, 208, 178, 0.55);
}

.science-net .net-v .nl {
  stroke: rgba(155, 130, 255, 0.13);
}

.science-net .net-v .nh {
  fill: rgba(155, 130, 255, 0.12);
}

.science-net .net-v .nn {
  fill: rgba(183, 166, 255, 0.5);
}

/* synapses fire in a slow round (motion-gated) */
.js-anim .science-net .fire {
  animation: netFire 8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes netFire {
  0%, 100% { opacity: 0.4; }
  9% { opacity: 1; }
  22% { opacity: 0.5; }
}

/* ----- Showcase: the score floats directly on the field (no card) ----- */
.ltp-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(var(--sp-10), 7vw, 96px);
  align-items: center;
  position: relative;
  padding-block: clamp(var(--sp-4), 2.5vw, var(--sp-8));
}

/* Grid items default to min-width:auto, which lets their content set a floor
   the 1fr track must honour — letting one wide child push the whole showcase
   past the viewport. Allow them to shrink so the track owns the width. */
.ltp-dial,
.ltp-explain {
  min-width: 0;
}

/* ----- Left column: the score dial ----- */
.ltp-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.ltp-gauge {
  position: relative;
  width: min(320px, 74vw);
  aspect-ratio: 1;
}

/* soft halo so the dial reads as a light source, not a flat ring */
.ltp-gauge::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 50% 44%, rgba(58, 166, 122, 0.28), rgba(69, 200, 176, 0.08) 55%, transparent 72%);
  filter: blur(10px);
  z-index: 0;
}

/* slow instrument sheen sweeping the bezel band (motion-gated) */
.js-anim .ltp-gauge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-full);
  background: conic-gradient(from 0deg, transparent 0 76%, rgba(255, 255, 255, 0.14) 90%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 73%, #000 78% 91%, transparent 95%);
  mask: radial-gradient(closest-side, transparent 73%, #000 78% 91%, transparent 95%);
  animation: gaugeSheen 16s linear infinite;
}

@keyframes gaugeSheen {
  to { transform: rotate(1turn); }
}

.ltp-gauge__ring {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg); /* start the arc at 12 o'clock */
}

.ltp-gauge__bezel {
  fill: none;
  stroke: rgba(240, 237, 230, 0.16);
  stroke-width: 3;
  stroke-dasharray: 0.5 5.45; /* fine tick bezel, echoing the app's timer face */
  stroke-linecap: round;
}

.ltp-gauge__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 8;
}

.ltp-gauge__value {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  /* r=50 → circumference ≈ 314.16px; offset 43.98px leaves 86% drawn */
  stroke-dasharray: 314.16px;
  stroke-dashoffset: 43.98px;
  filter: drop-shadow(0 0 10px rgba(58, 166, 122, 0.55));
}

/* glowing endpoint riding the arc's tip */
.ltp-gauge__tip {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: rotate(309.6deg); /* 86% of the way around from 12 o'clock */
}

.ltp-gauge__tip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8.33%; /* the ring's radius: r=50 in a 120 viewBox */
  width: 5.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--r-full);
  background: #EFEBFF;
  box-shadow: 0 0 10px rgba(155, 130, 255, 0.95), 0 0 26px rgba(155, 130, 255, 0.5);
}

.ltp-gauge__readout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
}

.ltp-gauge__micro {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-green);
}

.ltp-gauge__score {
  font-family: var(--font-mono);
  font-size: clamp(3.4rem, 2rem + 7vw, 5rem);
  font-weight: 700;
  line-height: 0.84;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ltp-gauge__max {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ltp-dial__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: rgba(58, 166, 122, 0.12);
  border: 1px solid rgba(58, 166, 122, 0.3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-green);
}

.ltp-dial__status svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ----- Right column: the explanation ----- */
.ltp-explain h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-4);
}

.ltp-explain > p {
  color: var(--text-muted);
}

/* the LTP definition, set as a science 'term' for editorial texture */
.ltp-term {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid rgba(58, 166, 122, 0.22);
  border-radius: var(--r-lg);
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(58, 166, 122, 0.11), transparent 62%),
    rgba(20, 21, 27, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ltp-term__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.ltp-term__label em {
  display: inline-block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-green);
  letter-spacing: 0.04em;
  background: rgba(58, 166, 122, 0.12);
  border: 1px solid rgba(58, 166, 122, 0.3);
  border-radius: var(--r-full);
  padding: 2px 9px;
  margin: 0 3px;
  vertical-align: 1px;
  white-space: nowrap;
}

.ltp-term p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.ltp-points {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-3);
}

.ltp-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text);
  font-weight: 500;
}

.ltp-points li svg {
  flex: none;
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  padding: 5px;
  margin-top: 1px;
  color: var(--accent-green);
  background: rgba(58, 166, 122, 0.12);
  border: 1px solid rgba(58, 166, 122, 0.32);
  border-radius: var(--r-full);
}

/* Ring sweeps to the score on scroll (only when motion is allowed);
   the tip dot and the JS count-up ride the same 1.5s curve */
.js-anim .ltp-showcase .ltp-gauge__value {
  stroke-dashoffset: 314.16px; /* empty */
  transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.js-anim .ltp-showcase.is-visible .ltp-gauge__value {
  stroke-dashoffset: 43.98px; /* 86% drawn */
}

.js-anim .ltp-showcase .ltp-gauge__tip {
  transform: rotate(0deg);
  opacity: 0;
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, opacity 0.35s ease 0.15s;
}

.js-anim .ltp-showcase.is-visible .ltp-gauge__tip {
  transform: rotate(309.6deg);
  opacity: 1;
}

/* ----- Signature: a session as a living waveform ----- */
.ltp-rhythm {
  margin: clamp(var(--sp-12), 6vw, 112px) auto 0;
  max-width: 780px;
  text-align: center;
}

.ltp-rhythm .sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ltp-rhythm__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.8vw, 16px);
  padding: var(--sp-3) 0;
}

/* one continuous thread runs through the whole session */
.ltp-rhythm__track::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
  background: linear-gradient(90deg, transparent, rgba(240, 237, 230, 0.14) 14%, rgba(240, 237, 230, 0.14) 86%, transparent);
}

/* practice: the effort, drawn as sound — a waveform of thin bars */
.wseg {
  flex: var(--w, 2.5);
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: clamp(36px, 6vw, 52px);
}

.wseg i {
  flex: 1 1 0;
  min-width: 1px;
  height: calc(var(--h, 0.5) * 100%);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, rgba(196, 189, 228, 0.85), rgba(148, 141, 186, 0.35));
  transform-origin: center;
}

/* a quiet playhead glides through the session (needs cq units; motion-gated) */
.ltp-rhythm__playhead {
  display: none;
}

@supports (container-type: inline-size) {
  .js-anim .ltp-rhythm.is-visible .ltp-rhythm__playhead {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    container-type: inline-size;
  }

  .js-anim .ltp-rhythm.is-visible .ltp-rhythm__playhead i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: var(--r-full);
    background: #E7FBF1;
    box-shadow: 0 0 10px rgba(58, 166, 122, 0.9), 0 0 26px rgba(58, 166, 122, 0.4);
    opacity: 0;
    animation: playhead 13s linear 1.8s infinite;
  }

  .js-anim .ltp-rhythm.is-visible .ltp-rhythm__playhead i::before {
    content: "";
    position: absolute;
    right: 50%;
    top: 50%;
    width: 70px;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(58, 166, 122, 0.55));
    border-radius: var(--r-full);
  }
}

@keyframes playhead {
  0% { transform: translateX(0); opacity: 0; }
  5% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(100cqw); opacity: 0; }
}

/* rest: where consolidation happens — carries the app's meditation motif */
.rnode {
  flex: none;
  position: relative;
  z-index: 1;
  width: clamp(46px, 9vw, 58px);
  height: clamp(46px, 9vw, 58px);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--accent-green);
  background:
    radial-gradient(circle at 50% 46%, rgba(58, 166, 122, 0.28), rgba(58, 166, 122, 0.05) 66%, transparent 78%),
    rgba(20, 21, 27, 0.6);
  border: 1px solid rgba(58, 166, 122, 0.42);
  box-shadow: 0 0 22px rgba(58, 166, 122, 0.26), inset 0 0 14px rgba(58, 166, 122, 0.1);
}

/* faint concentric halo, echoing the dial's bezel */
.rnode::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: var(--r-full);
  border: 1px solid rgba(58, 166, 122, 0.18);
}

.rnode__fig {
  display: block;
  width: 60%;
  height: 60%;
  fill: currentColor;
  filter: drop-shadow(0 0 5px rgba(58, 166, 122, 0.45));
}

.ltp-rhythm__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-4);
}

.rlabel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rlabel::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
}

.rlabel--work::before {
  background: rgba(196, 189, 228, 0.7);
}

.rlabel--rest::before {
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(58, 166, 122, 0.7);
}

.ltp-rhythm figcaption {
  max-width: 54ch;
  margin: var(--sp-6) auto 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.55;
}

.ltp-rhythm figcaption strong {
  color: var(--text);
}

/* the session assembles on scroll: the waveform rises bar by bar left-to-right,
   rest nodes settle in sequence, then everything breathes gently (motion only) */
.js-anim .ltp-rhythm .wseg i {
  opacity: 0;
  transform: scaleY(0.1);
}

.js-anim .ltp-rhythm.is-visible .wseg i {
  opacity: 1;
  transform: none;
  animation:
    barIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--b, 0) * 0.03s),
    barPulse 3.4s ease-in-out calc(var(--b, 0) * 0.11s + 1.4s) infinite;
  animation-fill-mode: both, none;
}

@keyframes barIn {
  from {
    opacity: 0;
    transform: scaleY(0.1);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* the waveform stays quietly alive, like live audio */
@keyframes barPulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.74); }
}

.js-anim .ltp-rhythm .rnode {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 0.16s + 0.1s);
}

.js-anim .ltp-rhythm.is-visible .rnode {
  opacity: 1;
  transform: none;
  animation: restBreathe 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.6s + 0.9s);
}

/* consolidation ripples radiating from each rest */
.js-anim .ltp-rhythm.is-visible .rnode::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--r-full);
  border: 1px solid rgba(58, 166, 122, 0.55);
  opacity: 0;
  animation: restRipple 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: calc(var(--i, 0) * 1.25s + 1.6s);
}

@keyframes restRipple {
  0% {
    transform: scale(0.72);
    opacity: 0;
  }
  14% {
    opacity: 0.5;
  }
  60% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes restBreathe {
  0%, 100% {
    box-shadow: 0 0 18px rgba(58, 166, 122, 0.2), inset 0 0 14px rgba(58, 166, 122, 0.09);
  }
  50% {
    box-shadow: 0 0 30px rgba(58, 166, 122, 0.4), inset 0 0 16px rgba(58, 166, 122, 0.15);
  }
}

@media (max-width: 760px) {
  /* the constellation would sit behind text on small screens — drop it */
  .science-net {
    display: none;
  }
  .ltp-showcase {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    text-align: center;
  }
  .ltp-term {
    text-align: left;
  }
  .ltp-points {
    /* fit-content shrinks to the content but never exceeds the column, so the
       centred bullet block can't blow the grid track out past the viewport
       (max-content would force a fixed ~464px width and overflow on mobile). */
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
  .ltp-rhythm__track {
    gap: 7px;
  }
  .wseg {
    gap: 2px;
  }
  .rnode {
    width: 46px;
    height: 46px;
  }
}

/* ---------- Feature grid (list) ---------- */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.feature-list .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  margin-top: 7px;
  background: var(--accent-violet);
}

.feature-list h3 {
  font-size: var(--fs-base);
  font-weight: 600;
  margin: 0 0 4px;
}

.feature-list p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Focus-type swatches */
.focus-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.focus-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.focus-chip .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-card);
}

.plan--pro {
  background: linear-gradient(180deg, rgba(59, 35, 184, 0.18), rgba(20, 21, 27, 0.6));
  border-color: var(--button-primary-border);
  box-shadow: var(--shadow-elevated), var(--shadow-glow);
  position: relative;
}

.plan-badge {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-violet);
  background: rgba(155, 130, 255, 0.14);
  padding: 4px 10px;
  border-radius: var(--r-full);
}

.plan h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}

.plan .price {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-1);
  font-variant-numeric: tabular-nums;
}

.plan .price small {
  font-size: var(--fs-base);
  color: var(--text-muted);
  font-weight: 400;
}

.plan .price-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: grid;
  gap: var(--sp-3);
  flex: 1;
}

.plan ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.plan ul li svg {
  flex: none;
  margin-top: 3px;
  color: var(--accent-green);
}

.plan--pro ul li {
  color: var(--text);
}

/* ---------- FAQ (native details) ---------- */
.faq {
  display: grid;
  gap: var(--sp-3);
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq details:hover {
  border-color: var(--border-strong);
}

.faq details[open] {
  border-color: var(--border-strong);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-5) var(--sp-6);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  transition: background-color 0.15s ease;
}

.faq summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

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

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--accent-violet);
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  content: "–";
}

.faq .faq-body {
  padding: 0 var(--sp-6) var(--sp-5);
  color: var(--text-muted);
}

.faq .faq-body p:last-child {
  margin-bottom: 0;
}

/* ---------- Final CTA (plain, centered — no card) ---------- */
.cta-final {
  text-align: center;
  padding-block: clamp(var(--sp-6), 4vw, var(--sp-10));
}

.cta-final h2 {
  margin-bottom: var(--sp-5);
}

.cta-final .store-badges {
  justify-content: center;
}

.cta-final .microcopy {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-5);
  margin-bottom: 0;
}

/* ---------- Device frame (real app screenshots) ---------- */
.device {
  width: 300px;
  max-width: 76vw;
  border: 9px solid #1b1b22;
  border-radius: 46px;
  background: #1b1b22;
  box-shadow: var(--shadow-elevated), 0 0 60px rgba(107, 77, 255, 0.22);
  overflow: hidden;
  line-height: 0;
  flex: none;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
}

.device--hero {
  width: 322px;
}

/* Two-phone hero composition (staggered, with connector arrow + floating pills) */
.device-duo {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 0.87;
  isolation: isolate;
}

/* Ambient violet halo so the phones lift off the dark background */
.device-duo::before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  z-index: 0;
  background: radial-gradient(58% 52% at 50% 46%, rgba(107, 77, 255, 0.34), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}

.device-duo .device {
  position: absolute;
  width: 47%;
  max-width: none;
}

.device-duo .device--front {
  left: 0;
  bottom: 0;
  z-index: 2;
  transform: rotate(-3.5deg);
}

.device-duo .device--back {
  right: 0;
  top: 0;
  z-index: 1;
  transform: rotate(3.5deg);
}

/* Curved connector: session (lower-left) → progress (upper-right) */
.duo-arrow {
  position: absolute;
  z-index: 3;
  width: 26%;
  height: auto;
  left: 37%;
  top: 16%;
  color: var(--accent-violet);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

@media (prefers-reduced-motion: reduce) {
  .device-duo .device {
    transform: none;
  }
}

/* Once the hero stacks, the phones shrink to ~half their desktop size. The
   fixed 46px radius / 9px bezel then read as oversized (corners ~30% of the
   width — blobby), and the 6% centre gap opens a dead channel between them.
   Scale the frame with the phones and close the gap so the pair reads as one
   crisp, layered composition. */
@media (max-width: 860px) {
  .device-duo .device {
    width: 49%;
    border-width: clamp(5px, 1.5vw, 9px);
    border-radius: clamp(22px, 7vw, 46px);
  }
  .device-duo .device img {
    border-radius: clamp(16px, 5.4vw, 38px);
  }
}

/* Device gallery (home / features) */
.phone-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-8);
}

/* Alternating screenshot + copy rows (features) */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  margin-bottom: var(--sp-12);
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-row .feature-row__media {
  display: flex;
  justify-content: center;
}

.feature-row--reverse .feature-row__media {
  order: 2;
}

.feature-row h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-3);
}

.feature-row p {
  color: var(--text-muted);
  margin: 0;
}

.feature-row .pillar-number {
  margin-bottom: var(--sp-2);
  display: block;
}

/* ---------- Legal / prose pages ---------- */
.prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-10);
  /* anchor offset handled globally by html { scroll-padding-top } */
}

.prose h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-6);
}

.prose p,
.prose li {
  color: var(--text-muted);
}

.prose strong {
  color: var(--text);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.prose th {
  color: var(--text);
  font-weight: 600;
}

.prose td {
  color: var(--text-muted);
}

.page-header {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-6);
}

.page-header .eyebrow {
  margin-bottom: var(--sp-2);
}

.draft-notice {
  background: rgba(243, 156, 18, 0.08);
  border: 1px solid rgba(243, 156, 18, 0.35);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  color: var(--text);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-8);
}

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

.legal-meta {
  color: var(--text-hint);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-8);
}

/* Placeholder token highlight in legal text */
.ph {
  color: var(--warning);
  background: rgba(243, 156, 18, 0.1);
  padding: 0 4px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* ---------- QR + download ---------- */
.download-aid {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.qr {
  width: 160px;
  height: 160px;
  border-radius: var(--r-md);
  background: #fff;
  padding: 12px;
  flex: none;
}

.qr svg {
  width: 100%;
  height: 100%;
}

.qr-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 32ch;
}

/* ---------- 404 ---------- */
.notfound {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.notfound .big {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  color: var(--accent-violet);
  line-height: 1;
  margin-bottom: var(--sp-4);
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(8, 6, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-cta {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Two store badges share the sticky bar evenly on mobile */
.mobile-cta .store-badges {
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: nowrap;
}

.mobile-cta .store-badge {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  min-height: 50px;
  padding: 8px 10px;
}

.mobile-cta .store-badge svg {
  width: 20px;
  height: 20px;
}

.mobile-cta .store-badge__text {
  white-space: nowrap;
}

.mobile-cta .store-badge__text span {
  font-size: 0.95rem;
}

/* ---------- Scroll reveal (motion-gated by JS) ---------- */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Utilities ---------- */
.stack-lg > * + * { margin-top: var(--sp-6); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.hide-mobile { display: initial; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    text-align: center;
  }
  .hero .subhead,
  .lead {
    margin-inline: auto;
  }
  .hero-cta,
  .hero-microcopy {
    justify-content: center;
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  /* Section nav collapses into the hamburger menu; sticky CTA handles download */
  .nav-toggle {
    display: inline-flex;
  }
  /* The centre nav column is now empty (links live in the overlay), so let the
     brand take the width it needs instead of an equal 1fr that forced the
     wordmark to wrap on small phones. */
  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-3);
  }
  .header-cta.header-cta {
    display: none; /* replaced by sticky mobile CTA */
  }
  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3);
    transform: translateY(-120%);
    visibility: hidden; /* keep closed-menu links out of the tab order */
    transition: transform 0.25s ease, visibility 0.25s ease;
    box-shadow: var(--shadow-elevated);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-menu.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .nav-menu a {
    padding: var(--sp-4);
    font-size: var(--fs-base);
    border-radius: var(--r-sm);
  }
  .nav-cta-mobile {
    display: block;
    margin-top: var(--sp-2);
  }
  .hide-mobile {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-menu {
      transition: none;
    }
  }

  .mobile-cta {
    display: block;
  }
  body {
    padding-bottom: 76px; /* room for sticky CTA */
  }

  .compare,
  .pricing-grid,
  .feature-list,
  .feature-row,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .feature-row {
    gap: var(--sp-6);
    text-align: center;
  }

  .feature-row--reverse .feature-row__media {
    order: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  h1 { line-height: 1.08; }

  .prose table,
  .prose thead,
  .prose tbody,
  .prose th,
  .prose td,
  .prose tr {
    display: block;
  }
  .prose thead {
    display: none;
  }
  .prose td {
    border: none;
    padding: 2px 0;
  }
  .prose tr {
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) 0;
  }
}

@media (max-width: 420px) {
  .container {
    padding-inline: var(--sp-4);
  }
  /* keep the session waveform comfortably inside the smallest phones */
  .ltp-rhythm__track {
    gap: 5px;
  }
  .wseg {
    gap: 1px;
  }
  .rnode {
    width: 40px;
    height: 40px;
  }
  .stat-tiles {
    gap: 6px;
  }
  /* Reclaim header width on the smallest phones (≤320px) so the brand wordmark
     never gets clipped: tighten spacing and drop the decorative caret (the
     dropdown still works and announces its state via aria-expanded). */
  .header-inner {
    gap: var(--sp-2);
  }
  .lang-switch-toggle {
    padding-inline: var(--sp-2);
  }
  .lang-switch-caret {
    display: none;
  }
  /* Long-label buttons (e.g. the "Email contact@practicetimer.app" CTA) must be
     allowed to wrap on very narrow phones instead of overflowing. Only takes
     effect when the label genuinely doesn't fit on one line. */
  .btn {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* Larger screens */
@media (min-width: 1440px) {
  :root {
    --container: 1180px;
  }
}

/* Print (legal pages) */
@media print {
  .site-header,
  .site-footer,
  .mobile-cta,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}