/* ============================================================
   Mozart Health — marketing landing page
   Dark, moss-green, classy. Brand tokens from docs/design/brand.md.
   ============================================================ */

:root {
  /* Brand — healing palette (light, warm, more color). Supersedes the dark
     Ink/Moss theme in docs/design/brand.md as of 2026-08-30; see that file's
     "Light theme" note. Moss stays the primary/CTA thread for continuity;
     amber, clay, and sky are healing accents used deliberately (mainly in the
     tracking section) rather than scattered everywhere. */
  --ink: #1f3b30;
  --moss: #2f7d5e;
  --moss-bright: #3f9e76;
  --moss-deep: #17573c;
  --moss-glow: #8fe3be;

  --amber: #d8963f;
  --amber-bright: #eab264;
  --amber-deep: #93641f;
  --clay: #c1704c;
  --clay-bright: #de9270;
  --clay-deep: #8a4f34;
  --sky: #4f8791;
  --sky-bright: #86b7bf;
  --sky-deep: #355c63;

  --muted: #7c8d7f;

  /* Surface — warm ivory, light */
  --bg: #fbf6ec;
  --bg-2: #f5ecda;
  --surface: #ffffff;
  --surface-2: #fbf2df;
  --border: #e6d9bd;
  --border-soft: #efe4cd;

  /* Text */
  --text: #20362c;
  --text-2: #55665a;
  --text-3: #86917f;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1120px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a { color: inherit; text-decoration: none; }

/* ---------- Ambient background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.bg-glow {
  position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: 0.5;
}
.bg-glow--one {
  width: 640px; height: 640px; top: -220px; left: -140px;
  background: radial-gradient(circle, rgba(47,125,94,0.28), transparent 65%);
}
.bg-glow--two {
  width: 560px; height: 560px; top: 420px; right: -180px;
  background: radial-gradient(circle, rgba(216,150,63,0.22), transparent 65%);
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(31,59,48,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,59,48,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 12px 22px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn--primary {
  /* moss -> moss-deep (not moss-bright): the near-white label needs 4.5:1
     against the LIGHTEST point of the gradient, and moss-bright is too pale
     for that on this light theme (see docs/design/brand.md "Light theme"). */
  background: linear-gradient(180deg, var(--moss), var(--moss-deep));
  color: #f4fbf7;
  box-shadow: 0 8px 26px rgba(47,125,94,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(47,125,94,0.4), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn--ghost {
  background: rgba(31,59,48,0.04); color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--moss); background: rgba(47,125,94,0.1); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(251,246,236,0.7);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--border-soft);
  background: rgba(251,246,236,0.92);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: 72px;
}
.brand-lockup { height: 30px; width: auto; display: block; }
.brand-lockup .wm { font-family: var(--serif); font-weight: 300; }
.brand-lockup--sm { height: 26px; }

.nav {
  display: flex; align-items: center; gap: 30px;
  margin-left: 12px; font-size: 15px; color: var(--text-2);
}
.nav a { position: relative; transition: color 0.18s var(--ease); }
.nav a:hover { color: var(--text); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--moss-bright);
  transition: width 0.22s var(--ease);
}
.nav a:hover::after { width: 100%; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.header-login {
  font-size: 15px; font-weight: 500; color: var(--text-2);
  transition: color 0.18s var(--ease);
}
.header-login:hover { color: var(--moss); }
.header-cta { padding: 10px 18px; }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
  padding-top: 88px; padding-bottom: 96px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss);
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: rgba(47,125,94,0.08);
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--moss-bright); box-shadow: 0 0 10px var(--moss-bright);
}
.hero-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 6.2vw, 76px); line-height: 1.18;
  letter-spacing: -0.01em; margin: 22px 0 0;
  /* 1.18 (not 1.02) leaves headroom above the cap-height line for the
     ascender + italic overshoot on "finally" in .accent-text below — at
     1.02 that glyph rides right up against the box edge and reads as
     clipped in some font-rendering paths. */
}
.accent-text {
  display: inline-block;
  /* moss -> moss-deep, not moss-bright -> moss-glow: those lighter stops were
     tuned to glow on the old dark theme and fall below 2:1 against this
     light cream background (moss-glow ~1.4:1) — the gradient would fade to
     near-invisible at the tail. moss/moss-deep both clear 4.5:1 vs --bg. */
  background: linear-gradient(120deg, var(--moss), var(--moss-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
  /* Italic glyphs overhang their box on the left (the leading "f" here), and
     -webkit-background-clip:text clips that overhang — shaving the first
     letter. Pad the paint area on the left and cancel it with an equal negative
     margin so the ink is fully covered without shifting the text or breaking
     its left-alignment with the line above. Left-only (the right side has no
     overhang) so no width is added on the right. em-based to scale with the
     clamped font size. */
  padding-left: 0.22em;
  margin-left: -0.22em;
}
.hero-sub {
  color: var(--text-2); font-size: 19px; line-height: 1.65;
  max-width: 34em; margin: 26px 0 0;
}
.hero-micro { margin: 16px 0 0; color: var(--text-3); font-size: 13px; }

/* ---------- Hero CTAs ---------- */
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.hero-ctas--center { justify-content: center; margin-top: 26px; }

/* ---------- Hero visual: DNA double helix ---------- */
.hero-visual { position: relative; display: grid; place-items: center; }
.helix-stage {
  position: relative; width: 100%; height: 540px;
  display: grid; place-items: center;
}
.helix-glow {
  position: absolute; z-index: 0; width: 320px; height: 460px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(47,125,94,0.22), rgba(216,150,63,0.10) 55%, transparent 72%);
  filter: blur(20px); pointer-events: none;
}
.helix-svg {
  position: relative; z-index: 1;
  height: 520px; width: auto; display: block;
  filter: drop-shadow(0 14px 36px rgba(31,59,48,0.22));
}

/* Floating insight chips read as "DNA → interpreted signal". */
.helix-chip {
  position: absolute; z-index: 2; white-space: nowrap;
  font-size: 12.5px; color: var(--text-2);
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.85); border: 1px solid var(--border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(31,59,48,0.14);
}
.helix-chip--1 { top: 15%; left: -4%; }
.helix-chip--2 { top: 46%; right: -6%; }
.helix-chip--3 { bottom: 15%; left: 4%; }
.helix-chip--4 { top: 6%; right: 2%; }
.helix-chip.chip--accent {
  color: #f4fbf7; background: var(--moss);
  border-color: transparent; font-weight: 600;
}

/* Motion is additive: the static state above is fully visible on its own, so
   the helix never renders blank if animations don't run. Only when the user
   permits motion do the strands draw in, rungs fade up, and everything drifts. */
@media (prefers-reduced-motion: no-preference) {
  .helix-svg { animation: helix-float 7s var(--ease) infinite; }
  .helix-strand {
    stroke-dasharray: 2600; stroke-dashoffset: 2600;
    animation: helix-draw 2.4s var(--ease) 0.25s forwards;
  }
  .helix-strand--b { animation-delay: 0.45s; }
  .helix-rungs { opacity: 0; animation: helix-fade 1.3s var(--ease) 1.5s forwards; }
  .helix-chip { animation: chip-float 6s var(--ease) infinite; }
  .helix-chip--1 { animation-delay: 0.2s; }
  .helix-chip--2 { animation-delay: 1.4s; }
  .helix-chip--3 { animation-delay: 0.8s; }
  .helix-chip--4 { animation-delay: 2.0s; }
}

@keyframes helix-draw { to { stroke-dashoffset: 0; } }
@keyframes helix-fade { to { opacity: 1; } }
@keyframes helix-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Value strip ---------- */
.strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  justify-content: center; padding-block: 26px;
  border-block: 1px solid var(--border-soft);
  color: var(--text-2); font-size: 15px; letter-spacing: 0.02em;
}
.strip span { opacity: 0.9; }
.strip i { color: var(--moss); font-style: normal; }

/* ---------- Sections ---------- */
.section { padding-block: 92px; }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head h2, .cta h2, .trust h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.1;
  letter-spacing: -0.01em; margin: 16px 0 0;
}
.section-lead { color: var(--text-2); font-size: 18px; margin: 18px 0 0; }

/* ---------- Track grid: what you can track ---------- */
.track-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.track-card {
  --track-rgb: 47,125,94; /* overridden per modifier below */
  position: relative; padding: 24px 22px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border-soft);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.track-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--track-rgb), 0.4);
  box-shadow: 0 16px 36px rgba(31,59,48,0.12);
}
.track-card--clay { --track-rgb: 193,112,76; --track-rgb-deep: 138,79,52; }
.track-card--sky { --track-rgb: 79,135,145; --track-rgb-deep: 53,92,99; }
.track-card--amber { --track-rgb: 216,150,63; --track-rgb-deep: 147,100,31; }
.track-card--moss { --track-rgb: 47,125,94; --track-rgb-deep: 23,87,60; }
.track-card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: rgb(var(--track-rgb));
  background: rgba(var(--track-rgb), 0.14); border: 1px solid rgba(var(--track-rgb), 0.3);
  margin-bottom: 16px;
}
.track-card-icon svg { width: 22px; height: 22px; }
.track-card h3 { font-size: 17.5px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.track-card > p { color: var(--text-2); font-size: 14.5px; margin: 0 0 14px; }
.track-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.track-tags li {
  /* text uses the -deep pair (not --track-rgb) — the mid tones read fine as
     icon fills but fall short of 4.5:1 for small text on this light bg. */
  font-size: 12.5px; color: rgb(var(--track-rgb-deep)); font-weight: 500;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: rgba(var(--track-rgb), 0.1); border: 1px solid rgba(var(--track-rgb), 0.22);
}

/* ---------- Caffeine / alcohol limits callout ---------- */
.limits-callout {
  display: flex; gap: 24px; align-items: flex-start;
  margin-top: 20px; padding: 30px 32px; border-radius: var(--radius);
  background:
    radial-gradient(140% 160% at 0% 0%, rgba(216,150,63,0.14), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
}
.limits-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: var(--amber);
  background: rgba(216,150,63,0.16); border: 1px solid rgba(216,150,63,0.32);
}
.limits-icon svg { width: 26px; height: 26px; }
.limits-copy h3 { font-size: 20px; font-weight: 600; margin: 4px 0 8px; letter-spacing: -0.01em; }
.limits-copy p { color: var(--text-2); font-size: 15.5px; margin: 0 0 16px; max-width: 62ch; }
.limits-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.limits-tag {
  font-size: 12.5px; font-weight: 500; color: var(--clay-deep);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(193,112,76,0.12); border: 1px solid rgba(193,112,76,0.26);
}
.limits-tag--accent { color: #f4fbf7; background: var(--moss); border-color: transparent; }

/* ---------- Feature grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.card {
  position: relative; padding: 28px 26px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border-soft);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; background: linear-gradient(160deg, rgba(111,194,155,0.4), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--border); box-shadow: 0 20px 44px rgba(31,59,48,0.14); }
.card:hover::after { opacity: 1; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; color: var(--moss-bright);
  background: rgba(47,125,94,0.12); border: 1px solid var(--border);
  margin-bottom: 18px;
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.card p { color: var(--text-2); font-size: 15.5px; margin: 0; }

/* ---------- Steps ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  counter-reset: step;
}
.step {
  position: relative; padding: 30px 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-soft);
}
.step-num {
  font-family: var(--serif); font-size: 40px; font-weight: 300;
  color: var(--moss); opacity: 0.85; display: block; margin-bottom: 10px;
}
.step h3 { font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.step p { color: var(--text-2); font-size: 15.5px; margin: 0; }

/* ---------- Grows with you: oak illustration ---------- */
.oak-section {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.oak-copy .trust-list { margin-top: 26px; }
.oak-visual { display: grid; place-items: center; padding: 20px 0; }

/* Oak illustration: one irregular lobed crown silhouette (real canopies read
   as clumped, uneven masses, not a smooth circle), a single sun-to-shadow
   gradient fill, and a clipped inner group of shading ellipses + scattered
   leaf-cluster dots + acorns — everything stays inside the true silhouette
   because it's clipped to it, so nothing reads as separate floating balloons. */
.oak-svg {
  width: 100%; max-width: 320px; height: auto; display: block;
  filter: drop-shadow(0 18px 34px rgba(31,59,48,0.16));
}

/* ---------- Trust ---------- */
.trust {
  display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 40px; align-items: center;
  padding: 48px; border-radius: 24px;
  background: linear-gradient(150deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--border);
}
.trust p { color: var(--text-2); font-size: 18px; margin: 16px 0 0; max-width: 42ch; }
.trust-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.trust-list li {
  position: relative; padding-left: 30px; color: var(--text); font-size: 15.5px;
}
.trust-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(47,125,94,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23205c40' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.trust-mark { display: grid; place-items: center; }
.trust-mark img { filter: drop-shadow(0 18px 36px rgba(31,59,48,0.18)); border-radius: 30px; }

/* ---------- CTA ---------- */
.cta { padding-block: 40px 110px; }
.cta-inner {
  text-align: center; max-width: 660px; margin-inline: auto;
  padding: 60px 40px; border-radius: 28px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(47,125,94,0.20), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--border);
}
.cta-inner p { color: var(--text-2); font-size: 18px; margin: 14px auto 0; max-width: 46ch; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-soft); padding-block: 48px 40px; margin-top: 20px; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; flex-wrap: wrap; padding-bottom: 30px;
  border-bottom: 1px solid var(--border-soft);
}
.footer-tag { color: var(--text-3); font-size: 14px; margin: 12px 0 0; }
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap; color: var(--text-2); font-size: 15px; }
.footer-nav a:hover { color: var(--moss); }
.footer-legal {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px; color: var(--text-3); font-size: 13px;
}
.footer-legal .disclaimer { max-width: 52ch; text-align: right; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; padding-bottom: 64px; }
  .hero-visual { order: 2; }
  .helix-stage { height: 460px; }
  .helix-svg { height: 420px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .track-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; padding: 36px; }
  .trust-mark { display: none; }
  .oak-section { grid-template-columns: 1fr; }
  .oak-visual { order: -1; }
  .footer-legal .disclaimer { text-align: left; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .header-cta { display: none; }
  .header-actions { margin-left: auto; }
  .grid { grid-template-columns: 1fr; }
  .track-grid { grid-template-columns: 1fr; }
  .limits-callout { flex-direction: column; padding: 24px; }
  .section { padding-block: 64px; }
  .cta-inner { padding: 44px 24px; }
  .helix-stage { height: 400px; }
  .helix-svg { height: 360px; }
  .helix-chip { font-size: 11.5px; padding: 6px 11px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}