/* ---------------------------------------------------------------
   Tokens
   Matches the app's own brand palette (glowpath-shared/lib/theme/
   app_theme.dart's GlowPathColors): warm rose-clay as the primary
   accent, golden champagne as the secondary. Green is deliberately
   avoided, same as the app (it's reserved there for a semantic
   "excellent" indicator, not a brand color).
------------------------------------------------------------------*/
:root {
  --ink: #241f2c;
  --ink-soft: #6f6580;
  --paper: #f8f7fc;
  --paper-raised: #ffffff;
  --line: #ddd3e6;
  --clay: #8875a8;
  --clay-deep: #6b5790;
  --gold: #e4d8a0;
  --gold-deep: #cc9020;
  --focus: #6b5790;
  /* Deep accent block (the "for estheticians" panel), deliberately
     constant across themes rather than flipping with light/dark, since
     its job is to read as a bold, fixed brand block either way. */
  --clay-panel: #3d3352;
  /* Text-on-primary-button — a dedicated token rather than a hardcoded
     color, because --clay-deep's light/dark values aren't just "the same
     hue, lighter or darker" (button text needs the opposite polarity
     applied to itself, not just a --ink swap). Was hardcoded #fff8f5 on
     .btn-primary before 2026-09-19's Lighthouse audit — passed in light
     mode (white on the light theme's dark clay-deep) but fails badly in
     dark mode, where clay-deep itself flips to a light lavender and white
     text on it drops to 1.85:1 contrast. */
  --on-clay-deep: #fff8f5;
  /* Fixed light pill background for .btn-on-dark, which always sits on
     the deliberately-constant --clay-panel block above — this must stay
     constant for the same reason --clay-panel does, not flip with
     --paper. Using --paper directly here was the pre-2026-09-19 bug: in
     dark mode --paper flips dark too, so the "light pill on a dark
     panel" became a dark-on-dark button at 1.4:1 contrast. */
  --paper-fixed: #f8f7fc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f1ecf7;
    --ink-soft: #b9adc7;
    --paper: #201e2a;
    --paper-raised: #2c2a38;
    --line: #423a52;
    --clay: #9080b8;
    --clay-deep: #c1b3e0;
    --gold: #9a8c55;
    --gold-deep: #aa8018;
    --focus: #c1b3e0;
    --on-clay-deep: #3d3352;
  }
}

:root[data-theme="dark"] {
  --ink: #f1ecf7;
  --ink-soft: #b9adc7;
  --paper: #201e2a;
  --paper-raised: #2c2a38;
  --line: #423a52;
  --clay: #9080b8;
  --clay-deep: #c1b3e0;
  --gold: #9a8c55;
  --gold-deep: #aa8018;
  --focus: #c1b3e0;
  --on-clay-deep: #3d3352;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Work Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin: 0 0 0.75rem;
}

.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Layout shell -------------------------------------------------- */
.topbar, .steps, .band-stat, .kit, .pros, .site-footer {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.hero { padding-inline: 1.5rem; }
.hero-copy, .hero-visual, .kit, .steps, .pros { max-width: 1080px; }

/* Topbar ---------------------------------------------------------*/
.topbar {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1.25rem;
}

.wordmark {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.3rem;
  text-decoration: none;
}

.topnav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
  font-size: 0.95rem;
}
.topnav a { text-decoration: none; color: var(--ink-soft); }
.topnav a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .topnav { display: none; }
}

/* Buttons ----------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--clay-deep); color: var(--on-clay-deep); }
.btn-primary:hover { background: color-mix(in srgb, var(--clay-deep) 88%, black); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-text { padding: 0.75rem 0.2rem; font-weight: 500; color: var(--ink-soft); }
.btn-on-dark { background: var(--paper-fixed); color: var(--clay-panel); }

/* Hero ---------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2rem;
  padding-block: 3rem 4rem;
}
.hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-block: 0.5rem 1rem; }
.hero-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.75rem; flex-wrap: wrap; }

.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-shot {
  width: min(440px, 100%);
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--ink) 25%, transparent);
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-block: 2rem 2.5rem; }
  .hero-visual { order: -1; }
  .hero-shot { width: min(320px, 80vw); }
}

/* Stat band ------------------------------------------------------*/
.band-stat {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-block: 2rem;
  border-block: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--clay-deep);
}
.stat-label { color: var(--ink-soft); font-size: 0.92rem; }

/* Steps ------------------------------------------------------------*/
.steps { padding-block: 4.5rem; }
.steps h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 2.5rem; }
.step-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.step-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  /* Was --line (a border/divider token, never meant for text) — read at
     1.52:1 contrast in dark mode, nearly invisible. --ink-soft is the
     same secondary-text color already used for .stat-label/.step p right
     next to it, and actually passes contrast in both themes. */
  color: var(--ink-soft);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.5rem;
}
.step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); margin: 0; }

@media (max-width: 820px) {
  .step-list { grid-template-columns: 1fr; gap: 2rem; }
}

/* Kit --------------------------------------------------------------*/
.kit {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
  padding-block: 3rem 4.5rem;
}
.kit-visual {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
}
.kit-art { width: 100%; max-width: 320px; }
.kit-box { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.kit-lid { fill: var(--gold); opacity: 0.6; }
.kit-bottle { fill: var(--clay); opacity: 0.85; }
.kit-cap { fill: var(--clay-deep); }
.kit-strip { fill: var(--line); }
.kit-caption {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 1rem;
}
.kit-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-block: 0.5rem 1.25rem; }
.kit-list { padding-left: 1.1rem; color: var(--ink-soft); margin: 0 0 1.75rem; }
.kit-list li { margin-bottom: 0.5rem; }

@media (max-width: 820px) {
  .kit { grid-template-columns: 1fr; }
}

/* Pros section ---------------------------------------------------- */
.pros {
  background: var(--clay-panel);
  color: #f8f4fc;
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-block: 1rem 4rem;
}
.pros .eyebrow { color: #e6dcf0; }
.pros h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-block: 0.5rem 1rem; color: #fff; }
.pros .lede { color: #e6dcf0; max-width: 52ch; }
.pros-note { color: #c7bad6; font-size: 0.92rem; margin-top: 0.9rem; }

@media (max-width: 720px) {
  .pros { padding: 2.5rem 1.5rem; border-radius: 16px; margin-inline: 0.5rem; }
}

/* Footer -------------------------------------------------------------*/
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 1rem;
}
.wordmark-footer { color: var(--ink-soft); font-size: 1.05rem; }
.site-footer nav { display: flex; gap: 1.5rem; }
.footer-stub {
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: none;
  cursor: default;
}