/* ═══════════════════════════════════════════════════════════════════════════
   OwnHealth.FIT — Shared marketing site styles
   Loaded by: index.html, for-individuals.html, for-coaches.html, features.html,
              labs-page.html
   ─────────────────────────────────────────────────────────────────────────── */

/* ── CSS Variables ───────────────────────────────────────────────────────── */
:root {
  --bg:           #0f1117;
  --surface:      #1a1d27;
  --surface2:     #22263a;
  --border:       #2e3350;
  --accent:       #4c5199;
  --accent-light: #6b74cc;
  --text:         #e8eaf6;
  --text-muted:   #8b92b8;
  --success:      #4caf7d;
  --warning:      #f0a500;
  --danger:       #e05c5c;
  --teal:         #3d9e8c;
  --gold:         #c89b3c;
  --accent-dim:   rgba(76, 81, 153, 0.15);
  --accent-b:     rgba(76, 81, 153, 0.30);
  --teal-dim:     rgba(61, 158, 140, 0.14);
  --gold-dim:     rgba(200, 155, 60, 0.12);
}

/* ── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Grid texture ────────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(76,81,153,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,81,153,0.025) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.r { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.r.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
section { position: relative; z-index: 1; }

/* ── Typography ──────────────────────────────────────────────────────────── */
.serif { font-family: 'DM Serif Display', serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 14px; }
.sec-head { font-family: 'DM Serif Display', serif; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; margin-bottom: 14px; }
.sec-sub { font-size: 1rem; font-weight: 300; color: var(--text-muted); max-width: 640px; line-height: 1.7; }
.sec-intro { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.sec-intro .sec-sub { margin: 0 auto; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.92rem; border-radius: 10px; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; padding: 14px 30px; }
.btn-primary:hover { background: var(--accent-light); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); padding: 13px 26px; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-light); }

/* ═══ Top navigation (marketing) ══════════════════════════════════════════ */
.lp-nav { position: sticky; top: 0; z-index: 200; background: rgba(15,17,23,0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); height: 64px; }
.lp-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 18px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo img { border-radius: 8px; }
.logo-wm { font-size: 15.5px; font-weight: 600; letter-spacing: -0.025em; }
.wm-own { color: var(--accent); }
.wm-health { color: var(--text-muted); font-weight: 400; }
.wm-fit { color: var(--accent); }
.nav-links { display: flex; gap: 26px; list-style: none; }
.nav-links a { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta { font-size: 0.82rem; font-weight: 600; color: #fff; background: var(--accent); text-decoration: none; padding: 9px 18px; border-radius: 8px; transition: background 0.2s; white-space: nowrap; }
.nav-cta:hover { background: var(--accent-light); }
.nav-btn-ghost { background: transparent; color: var(--text-muted); padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; transition: all .18s; white-space: nowrap; flex-shrink: 0; cursor: pointer; font-family: inherit; }
.nav-btn-ghost:hover { border-color: var(--accent-b); color: var(--text); background: var(--accent-dim); }

/* ── Mobile hamburger ────────────────────────────────────────────────────── */
.nav-hamburger { display: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0; }
.nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--text-muted); border-radius: 1px; transition: all 0.2s; }
.nav-mobile-overlay { display: none; position: fixed; inset: 0; z-index: 201; background: rgba(15,17,23,0.98); backdrop-filter: blur(20px); padding: 80px 32px 32px; flex-direction: column; gap: 4px; }
.nav-mobile-overlay.open { display: flex; }
.nav-mobile-overlay a { font-family: 'DM Serif Display', serif; font-size: 1.8rem; color: var(--text); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--border); }
.nav-mobile-overlay a:hover { color: var(--accent-light); }
/* The hamburger button in the top nav already morphs to an X when the
   mobile overlay is open (see .nav-hamburger.open span rules below),
   so an in-overlay close button is a redundant second X. The markup
   stays on the page (9 surfaces) so any future use is one CSS line
   away, and the existing JS click handler still attaches harmlessly
   when the element exists but is not displayed. */
.nav-mobile-overlay .nav-mobile-close { display: none; }
.nav-mobile-overlay .nav-mobile-actions { display: flex; gap: 10px; margin-top: 24px; }
.nav-mobile-overlay .nav-mobile-actions > * { flex: 1; text-align: center; }

/* ═══ Hero ════════════════════════════════════════════════════════════════ */
.hero { padding: 88px 0 72px; overflow: hidden; position: relative; }
.hero .wrap { position: relative; z-index: 1; }
.hero-two-col .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-copy { max-width: 560px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-dim); border: 1px solid var(--accent-b); border-radius: 20px; padding: 6px 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 26px; }
.hero-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2.3rem, 4.5vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--accent-light); }
.hero-sub { font-size: 1.05rem; font-weight: 300; color: var(--text-muted); line-height: 1.75; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero::before { content: ''; position: absolute; top: -120px; right: -180px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(76,81,153,0.12) 0%, transparent 70%); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -80px; left: -160px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(61,158,140,0.08) 0%, transparent 70%); pointer-events: none; }

/* ═══ Audience router cards (index) ══════════════════════════════════════ */
.router-sec { padding: 40px 0 60px; }
.router-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.router-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 16px; transition: all 0.2s; text-decoration: none; color: inherit; }
.router-card:hover { border-color: var(--accent-b); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
.router-card-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-dim); color: var(--accent-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.router-card-title { font-family: 'DM Serif Display', serif; font-size: 1.2rem; line-height: 1.3; color: var(--text); margin-top: 4px; }
.router-card-desc { font-size: 0.88rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; flex: 1; }
.router-card-cta { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-light); text-transform: uppercase; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }

/* ═══ Platform overview (6 pillars, 3×2) ══════════════════════════════════ */
.pillars-sec { padding: 72px 0; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px 22px; }
.pillar-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pillar-icon.indigo { background: var(--accent-dim); color: var(--accent-light); }
.pillar-icon.teal   { background: var(--teal-dim);   color: var(--teal); }
.pillar-icon.gold   { background: var(--gold-dim);   color: var(--gold); }
.pillar-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; }
.pillar-card p  { font-size: 0.85rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; }
.pillar-label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; display: block; }

/* ═══ Spotlight section (e.g. labs spotlight on index) ══════════════════ */
.spotlight-sec { padding: 80px 0; overflow: hidden; position: relative; }
.spotlight-sec::before { content: ''; position: absolute; top: 40%; right: -160px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(61,158,140,0.08) 0%, transparent 70%); pointer-events: none; }
.spotlight-sec .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.spotlight-copy h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.18; margin-bottom: 18px; }
.spotlight-copy p { font-size: 1rem; font-weight: 300; color: var(--text-muted); line-height: 1.75; margin-bottom: 18px; }
.spotlight-copy .btn { margin-top: 8px; }

/* Range bar visual (reusable) */
.range-bar-demo { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.rb-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; flex-wrap: wrap; gap: 10px; }
.rb-name { font-size: 0.88rem; font-weight: 700; }
.rb-value { font-family: 'DM Serif Display', serif; font-size: 1.6rem; color: var(--teal); }
.rb-unit { font-size: 0.75rem; color: var(--text-muted); }
.rb-subline { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 16px; }
.rb-bar-wrap { position: relative; height: 44px; margin-bottom: 8px; }
.rb-bar { position: absolute; left: 0; right: 0; top: 16px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(224,92,92,0.25) 0%, rgba(240,165,0,0.3) 20%, rgba(61,158,140,0.45) 35%, rgba(61,158,140,0.45) 65%, rgba(240,165,0,0.3) 80%, rgba(224,92,92,0.25) 100%); }
.rb-optimal { position: absolute; top: 12px; height: 20px; border: 2px solid var(--teal); border-radius: 8px; background: rgba(61,158,140,0.1); }
.rb-marker { position: absolute; top: 6px; width: 4px; height: 32px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.rb-scale { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-muted); padding: 0 4px; }
.rb-zones { display: flex; gap: 16px; margin-top: 14px; font-size: 0.72rem; color: var(--text-muted); }
.rb-zone { display: inline-flex; align-items: center; gap: 6px; }
.rb-zone::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.rb-zone.std::before { background: rgba(240,165,0,0.6); }
.rb-zone.opt::before { background: var(--teal); }

/* Reversed spotlight (mockup-left / text-right on desktop) — uses source-order trick */
.spotlight-sec.rev .wrap > *:first-child { order: 2; }
.spotlight-sec.rev .wrap > *:last-child  { order: 1; }
@media (max-width: 767px) {
  .spotlight-sec.rev .wrap > *:first-child,
  .coach-teaser-sec.rev .wrap > *:first-child { order: 0; }
  .spotlight-sec.rev .wrap > *:last-child,
  .coach-teaser-sec.rev .wrap > *:last-child  { order: 0; }
}

/* Spotlight eyebrow with icon */
.spot-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; color: var(--accent-light); }
.spot-eyebrow.gold { color: var(--gold); }
.spot-eyebrow.teal { color: var(--teal); }
.spot-eyebrow .pill-new { margin-left: 2px; }
.spotlight-copy ul.spot-bullets { list-style: none; padding: 0; margin: 4px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.spotlight-copy ul.spot-bullets li { font-size: 0.92rem; font-weight: 300; color: var(--text-muted); line-height: 1.6; padding-left: 22px; position: relative; }
.spotlight-copy ul.spot-bullets li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 10px; height: 2px; background: var(--accent-light); border-radius: 1px; }

/* ── Spotlight mockups — active workout session (Workouts spotlight) ─────── */
.spot-workout-mock { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.spot-workout-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.spot-workout-title { font-family: 'DM Serif Display', serif; font-size: 1.15rem; }
.spot-workout-sub { font-size: 0.7rem; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.spot-exercise { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.spot-exercise-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.spot-exercise-name { font-size: 0.9rem; font-weight: 600; flex: 1; }
.spot-exercise-sets { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }
.spot-exercise-sets strong { color: var(--text); }
.spot-note-marker { width: 20px; height: 20px; border-radius: 50%; background: var(--gold-dim); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.spot-exercise-progress { display: flex; gap: 4px; margin-top: 4px; }
.spot-exercise-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.spot-exercise-progress span.done { background: var(--teal); }
.spot-coach-note { margin-top: 6px; padding: 8px 10px; background: rgba(200,155,60,0.08); border-left: 2px solid var(--gold); border-radius: 4px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }

/* ── Spotlight mockups — nutrition today (Nutrition spotlight) ───────────── */
.spot-nutrition-mock { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.spot-nutri-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.spot-nutri-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.spot-nutri-kcal { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--teal); }
.spot-nutri-kcal .spot-nutri-target { color: var(--text-muted); font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; margin-left: 4px; }
.spot-macro { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.spot-macro-name { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.spot-macro-bar { height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.spot-macro-bar span { display: block; height: 100%; border-radius: 4px; background: var(--teal); }
.spot-macro-bar span.warn { background: var(--gold); }
.spot-macro-val { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text); white-space: nowrap; }
.spot-meal-log { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.spot-meal-log-title { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.spot-meal { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
.spot-meal-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--surface2); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.spot-meal-name { flex: 1; color: var(--text); }
.spot-meal-kcal { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }

/* ── Wearable Integrations mockup (for-individuals.html §2.2) ──────────── */
.spot-integrations-mock { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 10px; }
.spot-integ-card { display: flex; align-items: center; gap: 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.spot-integ-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--accent-light); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.spot-integ-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spot-integ-name { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.spot-integ-status { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.spot-integ-status.connected { color: var(--success, #3fa56b); }
.spot-integ-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }
.spot-integ-data { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text); }
.spot-integ-link { color: var(--accent-light); text-decoration: none; font-weight: 500; }
.spot-integ-link:hover { color: var(--accent); text-decoration: underline; }

/* ── Hero dashboard mockup (4 tabs · Today content) ──────────────────────── */
.hero-dash-mock { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0; box-shadow: 0 24px 60px rgba(0,0,0,0.45); overflow: hidden; max-width: 560px; margin: 40px auto 0; }
.hero-dash-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface2); }
.hero-dash-tab { flex: 1; padding: 12px 8px; text-align: center; font-size: 0.78rem; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.hero-dash-tab.active { color: var(--text); border-bottom-color: var(--accent); background: var(--surface); }
.hero-dash-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.hero-dash-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.hero-dash-card-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hero-dash-card-title { font-size: 0.82rem; font-weight: 600; color: var(--text); flex: 1; }
.hero-dash-card-sub { font-size: 0.68rem; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.hero-dash-ex { font-size: 0.78rem; color: var(--text-muted); padding: 4px 0; display: flex; gap: 8px; align-items: center; }
.hero-dash-ex strong { color: var(--text); font-weight: 500; }
.hero-dash-labs-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-dash-lab-pill { font-size: 0.68rem; font-family: 'JetBrains Mono', monospace; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; color: var(--text-muted); letter-spacing: 0.03em; }
.hero-dash-lab-pill.opt { border-color: rgba(61,158,140,0.4); color: var(--teal); background: rgba(61,158,140,0.08); }
.hero-dash-lab-pill.warn { border-color: rgba(240,165,0,0.4); color: var(--gold); background: rgba(240,165,0,0.08); }

/* ═══ Coaching Intelligence teaser (index + for-coaches) ══════════════════ */
.intel-sec { padding: 80px 0; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-top: 1px solid var(--border); }
.intel-sec .wrap { max-width: 1100px; }
.intel-intro { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.intel-intro .sec-head { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.intel-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.intel-lead { font-size: 1.02rem; color: var(--text-muted); font-weight: 300; line-height: 1.75; max-width: 640px; margin: 14px auto 0; }
.intel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.intel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px; transition: border-color 0.2s, transform 0.2s; }
.intel-card:hover { border-color: var(--accent-b); transform: translateY(-2px); }
.intel-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--gold-dim); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.intel-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 4px; }
.intel-card p  { font-size: 0.88rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; }

/* Pulse dot used by intelligence eyebrow */
.pulse-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; display: inline-block; animation: intelPulse 2s ease-in-out infinite; }
@keyframes intelPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } }

/* ═══ Coaching teaser (two-column, coach-oriented) ══════════════════════ */
.coach-teaser-sec { padding: 80px 0; }
.coach-teaser-sec .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* `.rev` swaps the copy + mock columns. Mirrors the .spotlight-sec.rev
   pattern (line ~171). Used on the homepage to keep the image-left /
   image-right alternation alive on the coach teaser, which is the
   fourth visually paired section after Lab → Workouts (rev) →
   Nutrition. The mobile breakpoint (line ~174-style reset) lets each
   coach-teaser stack naturally below 800px regardless of .rev. */
.coach-teaser-sec.rev .wrap > *:first-child { order: 2; }
.coach-teaser-sec.rev .wrap > *:last-child  { order: 1; }
.coach-teaser-copy h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.2; margin-bottom: 16px; }
.coach-teaser-copy p { font-size: 1rem; font-weight: 300; color: var(--text-muted); line-height: 1.75; margin-bottom: 18px; }

/* My Team mockup card */
.team-mock { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.3); }
.team-mock-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.team-mock-hdr-title { font-family: 'DM Serif Display', serif; font-size: 1.1rem; }
.team-mock-hdr-meta { font-size: 0.72rem; color: var(--text-muted); }
.team-member { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.team-member-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.team-member-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(76,81,153,0.2); color: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
.team-member-name { font-size: 0.85rem; font-weight: 700; flex: 1; }
.team-member-pill { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 8px; border-radius: 8px; }
.team-member-pill.active { background: rgba(61,158,140,0.15); color: var(--teal); }
.team-member-stats { display: flex; gap: 14px; font-size: 0.72rem; color: var(--text-muted); }
.team-member-stats strong { color: var(--text); }

/* ═══ Generic feature section (for sub-pages) ═══════════════════════════ */
.feature-block { padding: 72px 0; }
.feature-block + .feature-block { border-top: 1px solid var(--border); }
.feature-block .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-block.reverse .wrap > *:first-child { order: 2; }
.feature-block-copy h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.2; margin-bottom: 16px; }
.feature-block-copy p  { font-size: 1rem; font-weight: 300; color: var(--text-muted); line-height: 1.75; }
.feature-block-copy p + p { margin-top: 12px; }

/* Generic mock container (placeholder UI visuals) */
.mock-shell { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.mock-shell-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.mock-shell-dot { width: 8px; height: 8px; border-radius: 50%; }
.mock-shell-dot.r { background: #e05c5c; } .mock-shell-dot.y { background: #f0a500; } .mock-shell-dot.g { background: #4caf7d; }
.mock-shell-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--text-muted); margin-left: 8px; letter-spacing: 0.04em; }
.mock-shell-body { padding: 20px; }

/* ═══ Feature inventory (features.html) ═══════════════════════════════════ */
.feat-list-sec { padding: 72px 0; }
.feat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat-list-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.feat-list-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.feat-list-item h3 svg,
.feat-list-item h3 .oh-icon { color: var(--accent-light); flex-shrink: 0; }
.feat-list-item p { font-size: 0.86rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; }
.feat-list-item .feat-list-pill { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-left: auto; background: var(--accent-dim); color: var(--accent-light); }
.feat-list-item .feat-list-pill.coach { background: var(--teal-dim); color: var(--teal); }
.feat-list-item .feat-list-pill.new   { background: var(--gold-dim); color: var(--gold); }
.feat-list-item h3 .pill-new,
.feat-list-item h3 .pill-coach { margin-left: auto; }
.coming-soon li .oh-icon { color: var(--accent-light); display: inline-flex; align-items: center; }

.coming-soon { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px 32px; margin-top: 36px; }
.coming-soon h3 { font-family: 'DM Serif Display', serif; font-size: 1.3rem; margin-bottom: 12px; }
.coming-soon ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.coming-soon li { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
.coming-soon li::before { content: '→'; font-family: 'JetBrains Mono', monospace; color: var(--accent-light); font-size: 0.8rem; }

/* ═══ Step cards (labs-page "How It Works", for-coaches "How It Works") ═══ */
.steps-sec { padding: 72px 0; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps-grid.three { grid-template-columns: repeat(3, 1fr); }
.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px; position: relative; }
.step-card::before { content: attr(data-num); position: absolute; top: -14px; left: 22px; background: var(--accent); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'DM Serif Display', serif; font-size: 1rem; }
.step-card h3 { font-size: 0.95rem; font-weight: 700; margin: 12px 0 8px; }
.step-card p { font-size: 0.86rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; }

/* ═══ Biomarker category grid (labs-page) ════════════════════════════════ */
.biomarker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.biomarker-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 0.85rem; font-weight: 500; text-align: center; transition: all 0.2s; }
.biomarker-chip:hover { border-color: var(--accent-b); background: var(--accent-dim); color: var(--accent-light); }
.biomarker-note { font-size: 0.8rem; color: var(--text-muted); font-style: italic; text-align: center; margin-top: 20px; }

/* ═══ Revenue card (for-coaches) ═══════════════════════════════════════════ */
.revenue-card { background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%); border: 1px solid var(--accent-b); border-radius: 18px; padding: 40px 36px; margin: 0 auto; max-width: 760px; }
.revenue-card h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 16px; text-align: center; }
.revenue-card p { font-size: 1rem; font-weight: 300; color: var(--text-muted); line-height: 1.75; margin-bottom: 20px; }
.revenue-card p:last-of-type { margin-bottom: 24px; }
.revenue-card .btn { display: block; margin: 0 auto; width: max-content; }

/* ═══ CTA tail block ═══════════════════════════════════════════════════════ */
.cta-tail { padding: 72px 0; text-align: center; }
.cta-tail h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; margin-bottom: 24px; }

/* ═══ Beta waitlist form ═══════════════════════════════════════════════════ */
.beta-sec { padding: 80px 0; position: relative; overflow: hidden; }
.beta-sec::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(76,81,153,0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.beta-card { background: var(--surface); border: 1px solid var(--accent-b); border-radius: 22px; max-width: 620px; margin: 0 auto; padding: 44px 40px; text-align: center; position: relative; overflow: hidden; z-index: 1; }
.beta-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--teal)); }
.beta-card .sec-sub { margin: 0 auto 28px; }
.beta-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto 12px; }
/* Name row renders above the email/button row. Same max-width + margin
   as the main .beta-form, but carries only the name input (no button),
   so the input stretches full-width. */
.beta-form.beta-form-name-row .beta-input { width: 100%; }
.beta-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; color: var(--text); font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color 0.2s; }
.beta-input:focus { border-color: var(--accent); }
.beta-input:disabled { opacity: 0.5; }
.beta-btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 13px 24px; font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.beta-btn:hover { background: var(--accent-light); }
.beta-btn:disabled { opacity: 0.5; cursor: default; }
.beta-note { font-size: 0.72rem; color: var(--text-muted); }
.beta-error { font-size: 0.8rem; color: var(--danger); margin-bottom: 8px; min-height: 20px; }
.beta-success { display: none; }
.beta-success.show { display: block; }
.beta-success p { font-size: 0.95rem; font-weight: 600; color: var(--success); margin-bottom: 8px; }
.beta-success .beta-note { color: var(--success); }
/* Coach-self-id row on the beta waitlist. Iteration history:
   was tiny 0.82rem muted (people skipped it) → bordered callout
   card (took too much real estate, looked off-center) → now: bare
   inline row with the bigger font + bigger checkbox kept from the
   card iteration so it still reads as deliberate, but no border /
   bg / padding. inline-flex + the parent .beta-card's text-align
   center keeps it visually centered without a max-width. */
.beta-coach-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 16px auto 0;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  /* No wrap — the label fits at 0.92rem on the typical 440px form
     column; on truly narrow viewports we'd rather scroll the row
     than break "I'm a coach" / "looking to offer this" / etc. into
     awkward stacks. The "Yes —" prefix was dropped to buy a few
     extra characters of horizontal room. */
  white-space: nowrap;
}
.beta-coach-row input {
  accent-color: var(--accent);
  margin: 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.beta-coach-row span,
.beta-coach-row label {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

/* ═══ Footer ══════════════════════════════════════════════════════════════ */
.lp-footer { border-top: 1px solid var(--border); padding: 48px 0 32px; }
.lp-footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; align-items: flex-start; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
.footer-brand .logo { font-size: 0.95rem; }
.footer-disclaimer { font-size: 0.72rem; color: var(--text-muted); line-height: 1.7; }
.footer-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.85rem; color: var(--text); text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: var(--accent-light); }
.lp-footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; }
.lp-footer-bottom .footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-muted); }

/* ═══ Disclaimer strip (index.html keeps this) ════════════════════════════ */
.disc { border-top: 1px solid var(--border); padding: 28px 0; }
.disc p { font-size: 0.76rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; text-align: center; max-width: 800px; margin: 0 auto; }
.disc strong { font-weight: 600; color: var(--text-muted); }

/* ═══ Login modal (reused on every marketing page) ═══════════════════════ */
.login-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(10,12,20,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: overlayIn .2s ease both; }
.login-overlay[hidden] { display: none; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 2.25rem 2.5rem 2rem; width: 100%; max-width: 400px; position: relative; box-shadow: 0 32px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.05); animation: cardIn .22s ease both; }
.login-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(76,81,153,.65) 50%, transparent); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.login-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.login-logo { display: flex; align-items: center; gap: 9px; }
.login-brand { font-size: 15px; font-weight: 600; letter-spacing: -0.025em; }
.login-close { background: transparent; border: 1px solid var(--border); border-radius: 7px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; transition: all .15s; flex-shrink: 0; }
.login-close:hover { border-color: var(--accent-b); color: var(--text); background: var(--accent-dim); }
.login-title { font-family: 'DM Serif Display', serif; font-size: 1.6rem; font-weight: 400; color: var(--text); letter-spacing: -0.01em; margin-bottom: .3rem; }
.login-sub { font-size: 13px; color: var(--text-muted); font-weight: 300; margin-bottom: 1.75rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-field { display: flex; flex-direction: column; gap: 5px; }
.login-label { font-size: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; }
.login-input { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text); outline: none; transition: border-color .2s; width: 100%; }
.login-input:focus { border-color: var(--accent-b); }
.login-input::placeholder { color: rgba(139,146,184,0.4); }
.login-input.error { border-color: var(--danger); }
.login-error { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--danger); background: rgba(224,92,92,0.1); border: 1px solid rgba(224,92,92,0.25); border-radius: 8px; padding: 9px 12px; margin-top: .25rem; }
.login-error[hidden] { display: none; }
.login-submit { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 12px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; width: 100%; margin-top: .25rem; transition: all .2s; }
.login-submit:hover { background: var(--accent-light); transform: translateY(-1px); }
.login-submit:disabled { opacity: .5; cursor: default; transform: none; }
.login-remember-row { display: flex; align-items: center; justify-content: space-between; margin-top: .25rem; }
.login-checkbox-label { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.login-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.login-checkbox-custom { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.login-checkbox:checked + .login-checkbox-custom { background: var(--accent); border-color: var(--accent); }
.login-checkbox:checked + .login-checkbox-custom::after { content: ''; width: 8px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translateY(-1px); display: block; }
.login-checkbox-text { font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
.login-forgot { font-size: 12px; color: var(--text-muted); text-decoration: none; transition: color .15s; }
.login-forgot:hover { color: var(--accent-light); }
.login-footer-note { margin-top: 1.5rem; text-align: center; font-size: 12px; color: var(--text-muted); font-weight: 300; }
.login-footer-link { color: var(--accent-light); text-decoration: none; font-weight: 500; }
.login-footer-link:hover { text-decoration: underline; }

/* ═══ Responsive ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-btn-ghost { display: none; }
  .nav-right .nav-cta { padding: 8px 14px; font-size: 0.78rem; }

  .hero-two-col .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 100%; }

  .router-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight-sec .wrap,
  .coach-teaser-sec .wrap,
  .feature-block .wrap { grid-template-columns: 1fr; gap: 36px; }
  .feature-block.reverse .wrap > *:first-child { order: 0; }

  .steps-grid, .steps-grid.three { grid-template-columns: 1fr 1fr; }
  .biomarker-grid { grid-template-columns: repeat(3, 1fr); }

  .intel-grid { grid-template-columns: 1fr; }

  .feat-list { grid-template-columns: repeat(2, 1fr); }
  .coming-soon ul { grid-template-columns: 1fr; }

  .lp-footer .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; max-width: 100%; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .steps-grid, .steps-grid.three { grid-template-columns: 1fr; }
  .biomarker-grid { grid-template-columns: repeat(2, 1fr); }
  .beta-form { flex-direction: column; }
  .beta-card { padding: 32px 22px; }
  .revenue-card { padding: 28px 22px; }
  .login-card { padding: 1.75rem 1.5rem 1.5rem; }
  .lp-footer .wrap { grid-template-columns: 1fr; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Marketing Site v2 — Icon system, badges, and mobile responsive rules
   Added per OwnHealth_Marketing_Site_v2_Spec.md (Phase 1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icon system — matches app stroke-width: 1.75 standard (§4.4) ───────── */
.pillar-icon svg,
.feat-tile-icon svg,
.intel-card-icon svg,
.aud-icon svg {
  display: block;
}

.pillar-icon,
.feat-tile-icon,
.intel-card-icon {
  line-height: 1;
}

svg[aria-hidden="true"] {
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Pill badges used on new-tile / in-dev / coach tags ──────────────────── */
.pill-new {
  background: var(--teal-dim);
  color: var(--teal);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  display: inline-block;
}
.pill-in-dev {
  background: rgba(240, 165, 0, 0.14);
  color: #f0a500;
  border: 1px solid rgba(240, 165, 0, 0.3);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  display: inline-block;
}
.pill-coach {
  background: rgba(108, 116, 204, 0.14);
  color: var(--accent-light);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  display: inline-block;
}

/* ═══ Coaching Toolkit grid (for-coaches §2.3) — 3×2 at desktop ═════════════ */
.toolkit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.toolkit-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.toolkit-tile h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.toolkit-tile h3 .oh-icon { color: var(--accent-light); flex-shrink: 0; }
.toolkit-tile p { font-size: 0.86rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; }
.toolkit-tile .pill-new { margin-left: auto; }
@media (max-width: 900px) {
  .toolkit-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ Workout Programming mockup (for-coaches §2.3 Workout Programming) ════ */
.spot-program-mock { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.spot-prog-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.spot-prog-name { font-family: 'DM Serif Display', serif; font-size: 1.15rem; }
.spot-prog-week { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); background: var(--accent-dim); border-radius: 6px; padding: 3px 8px; }
.spot-prog-modes { display: flex; gap: 6px; margin-bottom: 14px; }
.spot-prog-mode { flex: 1; text-align: center; font-size: 0.72rem; font-weight: 600; padding: 8px 6px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); letter-spacing: 0.02em; }
.spot-prog-mode.active { background: var(--accent-dim); border-color: var(--accent-b); color: var(--accent-light); }
.spot-prog-focus-title { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.spot-prog-focus-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; font-size: 0.85rem; }
.spot-prog-focus-item .spot-prog-ex-name { flex: 1; font-weight: 600; color: var(--text); }
.spot-prog-focus-item .spot-prog-ex-note { font-size: 0.72rem; color: var(--text-muted); font-style: italic; }
.spot-prog-memo { margin-top: 14px; padding: 12px 14px; background: rgba(108, 116, 204, 0.06); border-left: 2px solid var(--accent-light); border-radius: 4px; }
.spot-prog-memo-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 4px; }
.spot-prog-memo-text { font-size: 0.8rem; color: var(--text-muted); font-style: italic; line-height: 1.55; }

/* ═══ Intelligence CTA box (for-coaches §2.3) ═════════════════════════════ */
.intel-cta-box { margin-top: 32px; padding: 28px 32px; background: var(--surface); border: 1px solid var(--accent-b); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.intel-cta-box p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; margin: 0; flex: 1; min-width: 280px; }
.intel-cta-box p strong { color: var(--text); font-weight: 600; }
.intel-cta-box .btn { flex-shrink: 0; }

/* ═══ v2 Responsive — three breakpoints (§3.1-§3.6) ═══════════════════════ */

/* ── Tablet: reduce gaps on hero / split sections ────────────────────────── */
@media (max-width: 900px) {
  .hero-two-col .wrap { gap: 40px; }
  .spotlight-sec .wrap,
  .coach-teaser-sec .wrap,
  .feature-block .wrap { gap: 40px; }
}

/* ── Mobile: stack grids, activate hamburger, reduce padding ─────────────── */
@media (max-width: 767px) {
  /* Navigation — hide links/actions, show hamburger */
  .nav-links,
  .nav-actions,
  .nav-right .nav-btn-ghost { display: none !important; }
  .nav-hamburger {
    display: flex;
    width: 34px;
    height: 34px;
    gap: 5px;
    border: none;
  }
  .nav-hamburger span {
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* Hamburger → X animation when overlay is open */
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile overlay — full-screen below the sticky 64px top nav.
     IMPORTANT: do NOT add `inset: auto` here. The desktop default at
     line ~99 sets `inset: 0`; we override with explicit top/left/right/
     bottom to anchor below the sticky nav. An `inset: auto` line was
     coming AFTER those longhand properties and clobbering them all
     back to auto — making the overlay collapse to its content width
     and render as a ~280px-wide left-edge tray instead of edge-to-edge.
     User-reported as "the nav doesn't cover the full width on mobile". */
  .nav-mobile-overlay {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background: rgba(15, 17, 23, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px 24px 32px;
    display: none;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
  }
  html.light .nav-mobile-overlay { background: rgba(244, 246, 251, 0.98); }
  .nav-mobile-overlay.open { display: flex; }
  .nav-mobile-overlay a {
    display: block;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
  }
  .nav-mobile-overlay .nav-mobile-actions {
    display: flex;
    flex-direction: row;          /* side-by-side, was column */
    gap: 12px;
    margin-top: 28px;             /* breathing room above */
    padding-top: 6px;
    border-top: 0;
  }
  .nav-mobile-overlay .nav-mobile-actions > * {
    flex: 1;
    text-align: center;
    border-bottom: none;
    padding: 12px 16px;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    /* Override the global .btn-ghost border (var(--border) is near-
       black) — too dim against the dark mobile overlay backdrop. The
       login button was practically invisible. Use a tinted accent
       border + soft accent background to clearly demarcate it. */
  }
  .nav-mobile-overlay .nav-mobile-actions > .btn-ghost,
  .nav-mobile-overlay .nav-mobile-actions > [data-open-login] {
    background: var(--accent-dim);
    border: 1px solid var(--accent-b);
    color: var(--text);
  }
  .nav-mobile-overlay .nav-mobile-actions > .btn-ghost:hover,
  .nav-mobile-overlay .nav-mobile-actions > [data-open-login]:hover {
    border-color: var(--accent-light);
    color: var(--accent-light);
  }

  /* Container horizontal padding */
  .wrap { padding: 0 1.25rem; }

  /* Hero: collapse to single column, mockup below text */
  .hero { padding: 44px 0 40px; }
  .hero-two-col .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: 36px; line-height: 1.18; }
  .hero-sub { font-size: 1rem; }

  /* Audience router: 3-col → 1-col */
  .router-sec { padding: 28px 0 44px; }
  .router-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Platform pillars: 3×2 / 4-col → 2-col */
  .pillars-sec { padding: 44px 0; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Split sections (spotlight, coach-teaser, feature-block): 2 → 1 col,
     text always above mockup even when .rev reverses desktop visual order. */
  .spotlight-sec,
  .coach-teaser-sec { padding: 52px 0; }
  .spotlight-sec .wrap,
  .coach-teaser-sec .wrap,
  .feature-block .wrap { grid-template-columns: 1fr; gap: 32px; }
  .feature-block { padding: 52px 0; }
  .feature-block.reverse .wrap > *:first-child { order: 0; }
  .split-inner.rev { direction: ltr; }

  /* Intelligence cards: 2×2 → 1-col */
  .intel-grid { grid-template-columns: 1fr !important; gap: 14px; }

  /* Step cards: 3 / 4-col → 1-col */
  .steps-sec { padding: 44px 0; }
  .steps-grid,
  .steps-grid.three { grid-template-columns: 1fr; gap: 18px; }

  /* Coaching toolkit: 3×2 → 1-col */
  .toolkit-grid { grid-template-columns: 1fr !important; gap: 14px; }

  /* Features inventory: 3 / 2-col → 2-col */
  .feat-list-sec { padding: 44px 0; }
  .feat-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .feat-list-item { padding: 20px 18px; }

  /* Coming soon */
  .coming-soon { padding: 24px 20px; margin-top: 24px; }
  .coming-soon ul { grid-template-columns: 1fr; }

  /* Footer: 4-col → 2-col */
  .lp-footer .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; max-width: 100%; }

  /* Waitlist form: stack vertically */
  .beta-sec { padding: 52px 0; }
  .beta-card { padding: 36px 22px; }
  .beta-form { flex-direction: column; gap: 12px; max-width: 100%; }
  .beta-btn { width: 100%; }

  /* Biomarker grid tightens */
  .biomarker-grid { grid-template-columns: repeat(2, 1fr); }

  /* Padded cards and coach-CTA boxes */
  .revenue-card { padding: 24px 20px; }
  .cta-box,
  .coach-cta-box,
  .coming-next-box,
  .intel-cta-box { padding: 20px 18px !important; }

  /* CTA tail */
  .cta-tail { padding: 44px 0; }

  /* Typography clamps */
  .sec-head,
  .feature-block-copy h2,
  .coach-teaser-copy h2 { font-size: clamp(24px, 7vw, 34px); }
  .spotlight-copy h2 { font-size: clamp(28px, 8vw, 40px); }

  /* Form inputs: 16px prevents iOS auto-zoom on focus */
  input,
  textarea,
  select,
  .beta-input,
  .login-input { font-size: 16px !important; }

  /* Buttons in hero / CTA rows wrap naturally */
  .hero-actions,
  .nav-mobile-overlay .nav-mobile-actions { flex-wrap: wrap; }
}

/* ── Small phone: further collapses ──────────────────────────────────────── */
@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }

  .pillars-grid { grid-template-columns: 1fr; }

  .feat-list { grid-template-columns: 1fr; }

  .lp-footer .wrap { grid-template-columns: 1fr; text-align: left; }
  .footer-brand { grid-column: auto; }

  /* Hero: "Claim your fitness." releases nowrap so line can break */
  .nowrap-fitness { white-space: normal !important; }
}