/* NuLevels Health. Design tokens v2 (Master Plan v3.18 SITE BEAUTIFICATION SPEC)
   ====================================================================
   Editorial polish layer: sage palette, serif headlines (Fraunces),
   wider whitespace, narrower text columns. Loaded AFTER css/styles.css
   on every public page so its custom-property overrides win the cascade.

   Token names mirror the v3.18 spec verbatim. Legacy --teal / --cream
   variables are aliased to the new tokens so existing classes keep
   working without per-file rewrites. */

:root {
  /* Sage primary */
  --color-sage-base:  #7B9A8C;
  --color-sage-light: #A8C0B4;
  --color-sage-dark:  #5A7868;

  /* Backgrounds */
  --color-cream-bg:   #FAF6F0;
  --color-cream-card: #FFFFFF;
  --color-blush:      #F4E4DC;

  /* Ink */
  --color-ink:           #2A2A2A;
  --color-ink-secondary: #6B6B6B;
  --color-ink-muted:     #9B9B9B;

  /* Semantic */
  --color-success: #4A7C59;
  --color-warning: #C97B5C;
  --color-error:   #B85450;

  /* Typography */
  --font-serif: 'Fraunces', 'Tiempos', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-h1-desktop: 56px;
  --text-h1-mobile:  36px;
  --text-h2-desktop: 40px;
  --text-h2-mobile:  28px;
  --text-h3-desktop: 28px;
  --text-h3-mobile:  22px;
  --text-body-desktop: 18px;
  --text-body-mobile:  16px;
  --text-small: 14px;

  /* Spacing */
  --space-section-desktop: 96px;
  --space-section-mobile:  48px;
  --space-card: 32px;

  /* Max widths */
  --max-text:    680px;
  --max-hero:    540px;
  --max-section: 1080px;
  --max-layout:  1080px;

  /* Tap targets */
  --tap-target-min: 44px;

  /* ── Backwards-compat aliases ─────────────────────────────
     Old variable names used by /css/styles.css now point at the
     new palette so existing classes inherit the sage look for free. */
  --teal:       var(--color-sage-base);
  --teal-deep:  var(--color-sage-dark);
  --teal-tint:  var(--color-sage-light);
  --cream:      var(--color-cream-bg);
  --navy:       var(--color-ink);
  --slate:      var(--color-ink-secondary);
}

/* ── Body / base text ────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-cream-bg);
  font-size: var(--text-body-mobile);
  line-height: 1.6;
}
@media (min-width: 768px) {
  body { font-size: var(--text-body-desktop); }
}

/* Reading column for prose-heavy sections. Apply with class="prose" */
.prose, .section-head, .subhead { max-width: var(--max-text); }

/* ── Headings: Fraunces serif, hand-set sizes per spec ──── */
h1, h2, h3 {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
h1 {
  font-size: var(--text-h1-mobile);
  font-weight: 400;
  line-height: 1.1;
}
h2 {
  font-size: var(--text-h2-mobile);
  font-weight: 500;
  line-height: 1.2;
}
h3 {
  font-size: var(--text-h3-mobile);
  font-weight: 500;
  line-height: 1.25;
}
@media (min-width: 768px) {
  h1 { font-size: var(--text-h1-desktop); }
  h2 { font-size: var(--text-h2-desktop); }
  h3 { font-size: var(--text-h3-desktop); }
}
p, li { line-height: 1.7; }

/* ── Layout: wider gutters, narrower text, generous sections ── */
.container { max-width: var(--max-layout); padding-left: 24px; padding-right: 24px; }
section { padding-top: var(--space-section-mobile); padding-bottom: var(--space-section-mobile); }
@media (min-width: 768px) {
  section { padding-top: var(--space-section-desktop); padding-bottom: var(--space-section-desktop); }
}
section.hero { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) {
  section.hero { padding-top: 120px; padding-bottom: 120px; }
}

/* ── Editorial layout primitives (Phase B) ─────────────── */
.hero-editorial {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
  max-width: var(--max-section);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-editorial { grid-template-columns: 1fr 1fr; gap: 72px; }
}
.hero-editorial-copy { max-width: var(--max-hero); }
.hero-editorial-copy h1 { margin-bottom: 24px; }
.hero-editorial-copy .subhead { font-size: 18px; color: var(--color-ink-secondary); line-height: 1.6; margin-bottom: 32px; max-width: 480px; }
.hero-editorial-photo {
  width: 100%; border-radius: 24px; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--color-sage-light);
}
@media (min-width: 900px) {
  .hero-editorial-photo { aspect-ratio: auto; max-height: 70vh; height: 540px; }
}
.hero-editorial-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Editorial reading column for problem-statement sections */
.prose-center { max-width: 720px; margin: 0 auto; }
.prose-center h2 { margin-bottom: 32px; }
.prose-center p { font-size: 18px; line-height: 1.7; color: var(--color-ink); margin-bottom: 24px; }
@media (max-width: 767px) {
  .prose-center p { font-size: 16px; margin-bottom: 16px; }
  .prose-center h2 { margin-bottom: 20px; }
}

/* Step cards: editorial, no decorative circle, big serif number */
.steps-editorial { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps-editorial { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.step-editorial { background: transparent; border: 0; padding: 0; max-width: 280px; }
.step-editorial .num { font-family: var(--font-serif); font-size: 64px; line-height: 1; font-weight: 400; color: var(--color-sage-base); margin-bottom: 16px; }
.step-editorial .label { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--color-ink); margin-bottom: 12px; }
.step-editorial .desc { font-size: 16px; line-height: 1.6; color: var(--color-ink-secondary); }

/* Condition grid */
.cond-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cond-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.cond-card {
  background: var(--color-cream-card);
  border: 1px solid rgba(123,154,140,0.18);
  border-radius: 16px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cond-card:hover { border-color: var(--color-sage-base); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(91,120,104,0.10); text-decoration: none; }
.cond-card-name { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--color-ink); }
.cond-card-hook { font-size: 14px; line-height: 1.5; color: var(--color-ink-secondary); max-width: 220px; }
.cond-card-cue { font-size: 14px; font-weight: 500; color: var(--color-sage-dark); margin-top: auto; }

/* Mobile: collapse the 12 descriptive cards into a 2-col grid of tappable name pills */
@media (max-width: 767px) {
  .cond-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cond-card {
    min-height: var(--tap-target-min);
    padding: 14px 12px; border-radius: 999px;
    flex-direction: row; align-items: center; justify-content: center;
    text-align: center; gap: 0;
  }
  .cond-card-hook, .cond-card-cue { display: none; }
  .cond-card-name { font-size: 15px; line-height: 1.25; }
}

/* Evidence card variant for blush background */
.evidence-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .evidence-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .evidence-grid { grid-template-columns: repeat(4, 1fr); } }
.evidence-blush {
  background: var(--color-blush);
  border-radius: 16px;
  padding: 32px;
  border-left: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.evidence-blush .src { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; color: var(--color-ink-secondary); }
.evidence-blush .stmt { font-family: var(--font-serif); font-size: 20px; line-height: 1.35; color: var(--color-ink); }

/* Research cards: the STAT is the hero, context below, source small. */
.research-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .research-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .research-grid { grid-template-columns: repeat(4, 1fr); } }
.research-card {
  background: var(--color-blush);
  border-radius: 16px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.research-stat {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 38px; line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-sage-dark);
}
@media (min-width: 900px) { .research-stat { font-size: 34px; } }
.research-context { font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.research-src {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; color: var(--color-ink-secondary); margin-top: auto;
}

/* Centered section title with breathing room (replaces inline margins) */
.section-title-center { text-align: center; margin-bottom: 56px; }
@media (max-width: 767px) { .section-title-center { margin-bottom: 32px; } }
.cond-grid-spaced { margin-top: 56px; }
@media (max-width: 767px) { .cond-grid-spaced { margin-top: 28px; } }

/* CTA buttons (editorial, larger, serif label option) */
.btn-editorial {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px;
  background: var(--color-sage-base); color: #fff;
  font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  border-radius: 8px; border: 0; text-decoration: none;
  transition: background 0.15s;
}
.btn-editorial:hover { background: var(--color-sage-dark); color: #fff; text-decoration: none; }
.btn-editorial-note { display: block; margin-top: 16px; font-size: 14px; color: var(--color-ink-muted); }

/* ── Buttons inherit sage; tap targets meet 44px minimum ── */
.btn { min-height: var(--tap-target-min); border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--color-sage-base); color: #fff; }
.btn-primary:hover { background: var(--color-sage-dark); color: #fff; }
.btn-secondary { color: var(--color-sage-dark); border-color: var(--color-sage-dark); }
.btn-secondary:hover { background: var(--color-sage-light); color: var(--color-sage-dark); }

/* ── Surface tokens ──────────────────────────────────────── */
.bg-cream { background: var(--color-cream-bg); }
.bg-blush { background: var(--color-blush); }
.bg-sage  { background: var(--color-sage-light); }
.bg-sage-deep { background: var(--color-sage-dark); color: #fff; }
.bg-sage-deep h1, .bg-sage-deep h2, .bg-sage-deep h3 { color: #fff; }
.bg-sage-deep p { color: rgba(255,255,255,0.92); }

/* Cards lift cleanly on cream */
.card, .pricing-card, .step, .faq-item, .evidence-card {
  background: var(--color-cream-card);
  border-color: rgba(91,120,104,0.15);
}
.evidence-card { border-left-color: var(--color-sage-base); }

/* Eyebrow + secondary text use sage tones */
.eyebrow { color: var(--color-sage-dark); }
.muted, .card-body, .step-body, .subhead, .footer-col a { color: var(--color-ink-secondary); }

/* Disclosure / footer surfaces */
.disclosure-bar { background: var(--color-cream-bg); }
.site-footer { background: var(--color-cream-bg); }

/* Link color uses sage */
a { color: var(--color-sage-dark); }
a:hover { color: var(--color-sage-base); }

/* Reduce default radius slightly for editorial feel */
:root { --radius: 14px; --radius-sm: 10px; }

/* ════════════════════════════════════════════════════════════
   HOMEPAGE. "Nutrition Solved" spine (Day 11 positioning)
   New components layered on the existing editorial system.
   ════════════════════════════════════════════════════════════ */

/* Brand teal accent for the words "New Levels" */
.nl-accent { color: var(--color-sage-dark); font-weight: 500; }

/* Hero copy: support line under the subhead */
.hero-support {
  font-size: 16px; line-height: 1.6; color: var(--color-ink-secondary);
  max-width: 480px; margin-bottom: 32px;
}
/* Hero action group (support line + CTA + note). On mobile it sits BELOW the
   proof card so the "see it work" moment lands before any ask. */
.hero-action { margin-top: 4px; }
.hero-action .hero-support { margin-bottom: 24px; }

/* Mobile order: headline, then proof card high on the fold, then the action.
   Tighten the stack so the proof card is visible without scrolling. */
@media (max-width: 899px) {
  .hero-editorial.hero-top { gap: 24px; }
}

/* Desktop: copy + action in the left column, proof card spanning the right. */
@media (min-width: 900px) {
  .hero-editorial.hero-top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy proof" "action proof";
    align-items: start;
    column-gap: 72px;
    row-gap: 0;
  }
  .hero-editorial.hero-top .hero-editorial-copy { grid-area: copy; align-self: end; }
  .hero-editorial.hero-top .hero-action { grid-area: action; margin-top: 28px; }
  .hero-editorial.hero-top .proof-card { grid-area: proof; align-self: center; margin: 0; }
}

/* ── Proof card (right side of hero) ─────────────────────── */
.proof-card {
  background: var(--color-cream-card);
  border: 1px solid rgba(123,154,140,0.22);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 18px 48px rgba(91,120,104,0.12);
  width: 100%; max-width: 440px; margin: 0 auto;
}
.proof-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.proof-card-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--color-ink); }
.proof-card-pill {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--color-sage-dark); background: var(--color-sage-light);
  border-radius: 999px; padding: 6px 12px;
}
.proof-rows { display: grid; gap: 12px; }
.proof-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid transparent;
}
.proof-row .pr-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.proof-row .pr-icon [data-lucide] { width: 22px; height: 22px; }
.proof-row .pr-text { font-size: 15px; line-height: 1.45; color: var(--color-ink); }
.proof-row.is-good {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-cream-card));
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.proof-row.is-good .pr-icon { color: var(--color-success); }
.proof-row.is-warn {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-cream-card));
  border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);
}
.proof-row.is-warn .pr-icon { color: var(--color-warning); }
.proof-row.is-bad {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-cream-card));
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}
.proof-row.is-bad .pr-icon { color: var(--color-error); }

/* ── Proof card "see it work" reveal ─────────────────────────
   Rows start hidden; a sage band sweeps the card (the "read"),
   then each result snaps in with its check / warning / gap icon.
   Triggered by .is-live (added in JS when the card scrolls into view).
   Falls back to a fully visible static card if JS or motion is off. */
.proof-card { position: relative; overflow: hidden; }
.proof-scan {
  position: absolute; left: 16px; right: 16px; top: 64px; height: 48px;
  border-radius: 12px; z-index: 1; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--color-sage-base) 22%, transparent), transparent);
}
.proof-card.is-live .proof-row { opacity: 0; animation: nl-row-in 0.5s ease forwards; }
.proof-card.is-live .proof-rows .proof-row:nth-child(1) { animation-delay: 1.00s; }
.proof-card.is-live .proof-rows .proof-row:nth-child(2) { animation-delay: 1.45s; }
.proof-card.is-live .proof-rows .proof-row:nth-child(3) { animation-delay: 1.90s; }
.proof-card.is-live .proof-scan { animation: nl-scan 1.0s ease-in-out forwards; }
@keyframes nl-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nl-scan {
  0%   { transform: translateY(0);    opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translateY(210px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-card.is-live .proof-row { opacity: 1; animation: none; }
  .proof-scan { display: none; }
}

/* Doctor / record note: quiet, on-spine guardrail line */
.doctor-note {
  max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.6;
  color: var(--color-ink-muted);
}
@media (max-width: 767px) { .doctor-note { font-size: 14px; } }

/* ── Snap / See / Solve strip ────────────────────────────── */
.sss-strip {
  display: grid; gap: 36px; grid-template-columns: 1fr;
  max-width: 920px; margin: 0 auto; text-align: center;
}
@media (min-width: 768px) { .sss-strip { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.sss-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sss-icon {
  width: 56px; height: 56px; min-height: var(--tap-target-min); border-radius: 16px;
  background: var(--color-sage-light);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sss-icon [data-lucide] { width: 26px; height: 26px; color: var(--color-sage-dark); }
.sss-label { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--color-ink); }
.sss-desc { font-size: 15px; line-height: 1.55; color: var(--color-ink-secondary); max-width: 240px; }

/* Mobile: compact rows (icon + label + one line), tight gaps so all three fit one screen */
@media (max-width: 767px) {
  .sss-strip { gap: 12px; }
  .sss-item {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px;
    align-items: center; text-align: left;
    background: var(--color-cream-card);
    border: 1px solid rgba(123,154,140,0.18);
    border-radius: 14px; padding: 12px 16px;
  }
  .sss-icon { width: 44px; height: 44px; border-radius: 12px; grid-row: 1 / 3; }
  .sss-icon [data-lucide] { width: 22px; height: 22px; }
  .sss-label { font-size: 18px; align-self: end; }
  .sss-desc { font-size: 14px; max-width: none; align-self: start; }
}

/* ── "Rocket science" answer line ────────────────────────── */
.rocket-answer {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.2; color: var(--color-sage-dark);
  margin-top: 8px;
}
@media (min-width: 768px) { .rocket-answer { font-size: 32px; } }

/* ── Value cards: TIME / MONEY / COMPLEXITY ──────────────── */
.value-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 48px; }
@media (max-width: 767px) { .value-grid { margin-top: 28px; gap: 12px; } }
@media (min-width: 700px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card {
  background: var(--color-cream-card);
  border: 1px solid rgba(123,154,140,0.18);
  border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 6px 18px rgba(91,120,104,0.06);
}
.value-card .vc-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--color-sage-light);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.value-card .vc-icon [data-lucide] { width: 24px; height: 24px; color: var(--color-sage-dark); }
.value-card .vc-tag {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; color: var(--color-sage-dark);
}
.value-card p { font-size: 16px; line-height: 1.55; color: var(--color-ink-secondary); margin: 0; }

/* ── Long-label editorial CTA (wraps cleanly, e.g. report block) ── */
.btn-editorial.btn-editorial-wrap {
  white-space: normal; text-align: center; line-height: 1.3;
  padding-top: 14px; padding-bottom: 14px; height: auto;
}

/* ── Evidence tie-in note ────────────────────────────────── */
.evidence-tiein {
  max-width: 720px; margin: 40px auto 0; text-align: center;
  font-size: 16px; line-height: 1.6; color: var(--color-ink-secondary);
}

/* ── Add-to-home-screen prompt: slim dismissible bar ─────── */
.a2hs {
  position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 95;
  display: none; align-items: center; gap: 12px;
  max-width: 460px; margin: 0 auto;
  background: var(--color-cream-card);
  border: 1px solid rgba(123,154,140,0.30);
  border-radius: 12px; padding: 8px 10px 8px 12px;
  box-shadow: 0 10px 28px rgba(91,120,104,0.16);
}
.a2hs.show { display: flex; }
.a2hs-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--color-sage-light); display: inline-flex; align-items: center; justify-content: center; }
.a2hs-icon [data-lucide] { width: 18px; height: 18px; color: var(--color-sage-dark); }
.a2hs-text { flex: 1; font-size: 13px; line-height: 1.35; color: var(--color-ink); }
.a2hs-text strong { font-weight: 600; }
.a2hs-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.a2hs-install {
  min-height: var(--tap-target-min); padding: 0 14px; border: 0; cursor: pointer;
  background: var(--color-sage-base); color: #fff;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; border-radius: 8px;
}
.a2hs-install:hover { background: var(--color-sage-dark); }
.a2hs-close {
  min-width: var(--tap-target-min); min-height: var(--tap-target-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-ink-muted); font-size: 22px; line-height: 1;
}
/* Desktop: small, bottom-right (no sticky CTA there, so sit near the corner) */
@media (min-width: 768px) { .a2hs { left: auto; right: 24px; bottom: 24px; max-width: 380px; } }