/* =========================================================================
   RecoveryFlow — marketing site, Nord theme.
   Palette: https://www.nordtheme.com/  (Polar Night / Snow Storm / Frost / Aurora)
   Type: Fraunces (serif display — literary warmth for a writerly audience)
         + JetBrains Mono (the "forecast" readouts) + system-ui (body).
   Metaphor: Frost = push (the rain, high value) · Aurora yellow = rest (the sun).
   ========================================================================= */

:root {
  /* Nord */
  --nord0:#2E3440; --nord1:#3B4252; --nord2:#434C5E; --nord3:#4C566A;
  --nord4:#D8DEE9; --nord5:#E5E9F0; --nord6:#ECEFF4;
  --frost-teal:#8FBCBB; --frost-cyan:#88C0D0; --frost-blue:#81A1C1; --frost-deep:#5E81AC;
  --red:#BF616A; --orange:#D08770; --sun:#EBCB8B; --green:#A3BE8C; --purple:#B48EAD;

  /* Light (Snow Storm) — default */
  --bg:#E9EDF3;
  --panel:#FFFFFF;
  --ink:#2E3440;
  --ink-soft:#3B4252;
  --muted:#5B6474;
  --line:#D3DAE6;
  --brand:#5E81AC;
  --brand-ink:#4C6A90;
  --sun-ink:#B0863C;
  --green-ink:#5E7A47;

  --radius:16px;
  --radius-sm:11px;
  --maxw:1120px;
  --shadow:0 1px 2px rgba(46,52,64,.05), 0 18px 40px -20px rgba(46,52,64,.28);

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#2E3440;
    --panel:#3B4252;
    --ink:#ECEFF4;
    --ink-soft:#D8DEE9;
    --muted:#9AA5B8;
    --line:#434C5E;
    --brand:#88C0D0;
    --brand-ink:#A9D4DF;
    --sun-ink:#EBCB8B;
    --green-ink:#B6CCA2;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 22px 44px -22px rgba(0,0,0,.7);
  }
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
em { font-style:italic; color:inherit; }
strong { font-weight:600; }
:focus-visible { outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---------- shared type ---------- */
.eyebrow {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brand-ink); margin-bottom:1.1rem;
}
.eyebrow--center { text-align:center; }

.h2 {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.08; letter-spacing:-.015em;
  color:var(--ink);
}
.lede {
  font-size:clamp(1.05rem, 1.7vw, 1.22rem); color:var(--muted);
  max-width:52ch; margin-top:1.1rem;
}
.lede--lg { font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.35; color:var(--ink-soft); max-width:26ch; margin:0 auto; }
.lede--muted { margin-top:1.4rem; color:var(--muted); font-size:1.05rem; }
.center-block { margin-left:auto; margin-right:auto; }

/* ============================ NAV ============================ */
.nav {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1.1rem,4vw,2.4rem);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--line);
}
.wordmark {
  font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:.5rem;
}
.wordmark__dot {
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--frost-cyan), var(--frost-deep) 70%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--frost-cyan) 24%, transparent);
}
.nav__links { display:flex; align-items:center; gap:1.5rem; }
.nav__links a:not(.btn) { color:var(--muted); font-size:.94rem; }
.nav__links a:not(.btn):hover { color:var(--ink); }

/* ============================ BUTTONS ============================ */
.btn {
  font-family:var(--font-body); font-weight:600; font-size:.96rem;
  padding:.72rem 1.3rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn--solid { background:var(--brand); color:var(--nord0); }
@media (prefers-color-scheme: light) { .btn--solid { color:#fff; } }
.btn--solid:hover { transform:translateY(-2px); box-shadow:0 14px 28px -12px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn--quiet { color:var(--muted); background:transparent; }
.btn--quiet:hover { color:var(--brand-ink); }
.btn--lg { font-size:1.05rem; padding:.9rem 1.7rem; }

/* ============================ HERO ============================ */
.hero {
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.6rem,7vw,5.5rem) clamp(1.1rem,4vw,2.4rem) clamp(2.6rem,6vw,4.5rem);
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero__title {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.4rem,5vw,4rem); line-height:1.02; letter-spacing:-.02em;
  margin-bottom:1.5rem; text-wrap:balance;
}
.hero__sub { font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--ink-soft); max-width:44ch; }
.hero__cta { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:2.2rem; }

/* ---------- the forecast card (signature) ---------- */
.forecast {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.4rem 1.5rem; overflow:hidden; position:relative;
}
.forecast::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 60% at 88% -8%, color-mix(in srgb, var(--frost-cyan) 26%, transparent), transparent 60%);
  pointer-events:none;
}
.forecast__top { display:flex; align-items:center; justify-content:space-between; position:relative; }
.forecast__now { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; color:var(--muted); }
/* Prime = the rain (cool, sharp, high-value). Frost droplet, not a sun. */
.forecast__sun {
  width:30px; height:30px; border-radius:50% 50% 50% 8px; transform:rotate(45deg);
  background:radial-gradient(circle at 60% 40%, var(--frost-cyan), var(--frost-deep) 78%);
  box-shadow:0 0 24px -2px color-mix(in srgb, var(--frost-cyan) 75%, transparent);
}
.forecast__verdict { margin:1.5rem 0 1.7rem; position:relative; }
.forecast__state {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-ink);
  display:inline-block; padding:.2rem .55rem; border-radius:6px;
  background:color-mix(in srgb, var(--green) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 34%, transparent);
}
.forecast__headline {
  display:block; margin-top:.9rem;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,3.4vw,2rem);
  line-height:1.12; letter-spacing:-.01em;
}
.forecast__strip {
  display:grid; grid-template-columns:repeat(12,1fr); gap:5px; align-items:end;
  height:82px; position:relative;
}
.forecast__strip .bar {
  height:var(--h); border-radius:4px 4px 2px 2px;
  background:color-mix(in srgb, var(--frost-blue) 40%, var(--panel));
  border:1px solid color-mix(in srgb, var(--frost-blue) 34%, transparent);
}
.forecast__strip .bar--peak {
  background:linear-gradient(180deg, var(--frost-cyan), var(--frost-deep));
  border-color:transparent;
}
.forecast__strip .bar--low { background:color-mix(in srgb, var(--muted) 26%, transparent); border-color:transparent; }
.forecast__axis {
  display:flex; justify-content:space-between; margin-top:.55rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; color:var(--muted);
}

/* ============================ BANDS ============================ */
.band { padding:clamp(3.2rem,8vw,6rem) clamp(1.1rem,4vw,2.4rem); }
.band--tint { background:color-mix(in srgb, var(--brand) 5%, var(--bg)); border-block:1px solid var(--line); }
.band__inner { max-width:var(--maxw); margin:0 auto; }
.band__inner.narrow { max-width:760px; }
.band__inner.center { text-align:center; }

/* ---------- pain ---------- */
.lede--lg { text-wrap:balance; }

/* ---------- parable ---------- */
.parable {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1.32; letter-spacing:-.01em;
  color:var(--ink); max-width:22ch;
}
.parable__hi { color:var(--frost-deep); font-style:italic; }
.parable__hi--sun { color:var(--sun-ink); }
.parable__turn { margin-top:2rem; font-size:1.15rem; color:var(--ink-soft); max-width:56ch; }
.parable__turn strong { color:var(--ink); }

/* ---------- verdict cards ---------- */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.6rem; }
.vcard {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.55rem;
  border-top:3px solid var(--line);
}
.vcard__icon { font-size:1.5rem; line-height:1; margin-bottom:.4rem; }
.vcard h3 { font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.01em; }
.vcard p { color:var(--muted); font-size:.98rem; }
.vcard--prime  { border-top-color:var(--frost-deep); }
.vcard--prime .vcard__icon { color:var(--frost-deep); }
.vcard--prime h3 { color:var(--brand-ink); }
.vcard--shallow { border-top-color:var(--frost-teal); }
.vcard--shallow .vcard__icon { color:var(--frost-teal); }
.vcard--rest   { border-top-color:var(--sun); }
.vcard--rest .vcard__icon { color:var(--sun-ink); }
.vcard--rest h3 { color:var(--sun-ink); }

/* ---------- how it knows ---------- */
.how { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,5vw,3.5rem); margin-top:2.6rem; align-items:center; }
.ticks { list-style:none; display:grid; gap:1.3rem; }
.ticks li { position:relative; padding-left:1.9rem; color:var(--ink-soft); font-size:1.05rem; }
.ticks li::before {
  content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent);
}
.ticks strong { color:var(--ink); }

/* ---------- the RT instrument (Nord) ---------- */
.rt { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.15rem; display:flex; flex-direction:column; gap:.9rem; }
.rt__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.rt__label { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-ink); }
.rt__spec { font-family:var(--font-mono); font-size:.72rem; color:var(--muted); }
.rt__panel {
  position:relative; width:100%; aspect-ratio:16/10; border:0; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--frost-blue) 8%, var(--panel));
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--muted); font-family:var(--font-body); font-weight:500; font-size:1.05rem;
  cursor:pointer; display:grid; place-items:center; text-align:center;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
  transition:background .06s linear, color .06s linear;
}
.rt__panel.is-wait { background:color-mix(in srgb, var(--sun) 28%, var(--panel)); color:var(--sun-ink); }
.rt__panel.is-go { background:var(--green); color:var(--nord0); box-shadow:inset 0 0 0 1px var(--green), 0 0 44px -6px var(--green); }
.rt__panel.is-result { color:var(--ink); }
.rt__state { padding:1rem; line-height:1.25; }
.rt__readout { font-family:var(--font-mono); font-weight:700; font-size:clamp(2.6rem,7vw,3.5rem); letter-spacing:-.02em; }
.rt__unit { font-size:.4em; color:var(--muted); margin-left:.25em; font-weight:500; }
.rt__meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:1.6rem; }
.rt__trials { display:flex; gap:.32rem; flex-wrap:wrap; }
.rt__pip { font-family:var(--font-mono); font-size:.7rem; color:var(--green-ink); background:color-mix(in srgb, var(--green) 16%, transparent); border:1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius:6px; padding:.12rem .4rem; }
.rt__pip--bad { color:var(--sun-ink); background:color-mix(in srgb, var(--sun) 18%, transparent); border-color:color-mix(in srgb, var(--sun) 34%, transparent); }
.rt__result { font-family:var(--font-mono); font-size:.82rem; color:var(--ink); text-align:right; }
.rt__result b { color:var(--green-ink); }
.rt__fineprint { font-size:.75rem; color:var(--muted); }

/* ============================ CTA ============================ */
.cta { padding:clamp(3.5rem,9vw,7rem) clamp(1.1rem,4vw,2.4rem); }
.cta__inner {
  max-width:720px; margin:0 auto; text-align:center;
  background:
    radial-gradient(120% 130% at 50% -10%, color-mix(in srgb, var(--sun) 15%, var(--panel)), var(--panel) 66%);
  border:1px solid var(--line); border-radius:26px;
  padding:clamp(2.4rem,6vw,4rem) 1.5rem; box-shadow:var(--shadow);
}
.cta__title { font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,4.4vw,2.9rem); letter-spacing:-.015em; line-height:1.08; }
.cta__sub { color:var(--muted); margin:1rem auto 2rem; max-width:44ch; }
.cta__fine { margin-top:1.3rem; font-family:var(--font-mono); font-size:.72rem; color:var(--muted); }

/* ============================ FOOTER ============================ */
.foot { border-top:1px solid var(--line); padding:2rem clamp(1.1rem,4vw,2.4rem); }
.foot__inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.wordmark--foot { font-size:1rem; }
.foot__tag { font-family:var(--font-mono); font-size:.74rem; color:var(--muted); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  .grid { grid-template-columns:1fr; }
  .how { grid-template-columns:1fr; }
  .nav__links a:not(.btn) { display:none; }
}

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