/* ============================================================
   HealthFees — marketing-page layout (site/*.html only)
   Brand identity tokens (ink, action color, --font-ui, shadows,
   nav mark, eyebrow, panel-dark) now live in ../brand.css, loaded
   by every page — app and onboarding included. This file keeps
   only what's genuinely marketing-page-specific: the data-font
   override for number-heavy cards (the marketing site has no
   monospace convention, unlike the app) and the landing-page
   layout blocks (hero visual, live-tool section, doors, stats,
   finale) plus the responsive rules for all of it.
   Full rationale + swatches: ../mockups/brand-kit.html
   ============================================================ */

:root { --font-data: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif; } /* bible: rate data = Inter; marketing has no mono convention. Tabular numerals via .num. */

/* ---------- ECG-to-price-spike hero visual (the stop-the-scroll moment) ---------- */
.ecg-stage { position: relative; margin-top: 10px; }
.ecg-stage svg { display: block; width: 100%; height: auto; }
.ecg-line {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(23,64,198,0.30));
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ecg-draw 4.2s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}
@keyframes ecg-draw { to { stroke-dashoffset: 0; } }
.ecg-grid { stroke: var(--chart-grid); stroke-width: 1; }
.price-flag { opacity: 0; animation: ecg-flag 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
.price-flag.low { animation-delay: 2.2s; }
.price-flag.high { animation-delay: 4.1s; }
@keyframes ecg-flag { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ecg-cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 6px 2px 0; font-size: 12.5px; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
  .ecg-line { animation: none; stroke-dashoffset: 0; }
  .price-flag { animation: none; opacity: 1; }
}

/* ---------- live tool section (MVP proof) ---------- */
.live-tool-section { padding: 88px 0 96px; background: linear-gradient(180deg, #fff, var(--bg-subtle) 30%, var(--bg-subtle) 70%, #fff); }
.live-tool-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.live-tool-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
.live-tool-head p { color: var(--text-2); max-width: 480px; }
.live-dot {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px;
  color: var(--success); letter-spacing: 0.08em; text-transform: uppercase;
}
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--low); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 6px rgba(14,159,110,0.15); } }
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none; } }

/* ---------- two doors (MVP products: Insights vs free tool) ---------- */
.doors-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.door { border-radius: var(--r-lg); padding: 44px 42px; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s; }
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.door.white { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.door.navy { background: radial-gradient(700px 360px at 85% 0%, rgba(23,64,198,0.30), transparent 55%), var(--text); }
.door .tag { font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; display: inline-block; }
.door.navy .tag { color: #8AB4FF; }
.door.white .tag { color: var(--accent-hover); }
.door h3 { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.door p { font-size: 16px; margin: 12px 0 22px; max-width: 520px; }
.door.navy p { color: #A9C1D4; }
.door.white p { color: var(--text-2); }
.gap-rows { border-top: 1px solid rgba(255,255,255,0.14); margin-bottom: 8px; }
.gap-rows .row { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.14); font-size: 14px; color: #A9C1D4; }
.gap-rows .row b { font-weight: 700; font-size: 19px; color: #fff; }
.gap-rows .row.hot b { color: #8AB4FF; }
.gap-note { font-size: 11.5px; color: #7E9BB1; margin: 0 0 22px; }
.free-list { display: grid; gap: 12px; margin-bottom: 26px; }
.free-list div { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--text-2); }
.free-list svg { width: 15px; height: 15px; color: var(--low); flex: none; position: relative; top: 2px; }

/* ---------- stat band ---------- */
.stat-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.stat-band .in { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-cell { padding: 44px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-cell p { max-width: 280px; }
.stat-cell + .stat-cell { border-left: 1px solid var(--border); }
.stat-cell .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.4vw, 46px); color: var(--text); letter-spacing: -0.02em; }
.stat-cell .v em { font-style: normal; color: var(--accent-hover); }
.stat-cell p { font-size: 14px; color: var(--text-2); margin-top: 4px; }

/* ---------- how it works: bordered triptych ---------- */
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.how-step { padding: 36px 34px; background: #fff; }
.how-step + .how-step { border-left: 1px solid var(--border); }
.how-step .n { font-weight: 700; font-size: 13px; color: var(--accent-hover); letter-spacing: 0.1em; }
.how-step h3 { font-size: 19px; font-weight: 700; margin: 12px 0 6px; }
.how-step p { font-size: 14.5px; color: var(--text-2); }

/* ---------- finale ---------- */
.finale { background: var(--text); color: #fff; text-align: center; padding: 110px 24px; position: relative; overflow: hidden; }
.finale .pulse-line { position: absolute; left: 0; right: 0; top: 50%; opacity: 0.14; }
.finale h2 { color: #fff; font-size: clamp(34px, 4vw, 54px); font-weight: 800; position: relative; }
.finale p { color: #A9C1D4; margin: 14px auto 30px; max-width: 440px; position: relative; }
.finale .ctas { display: flex; gap: 12px; justify-content: center; position: relative; flex-wrap: wrap; }

/* ---------- trust line (hero credibility strip) ---------- */
.trust-line {
  display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4);
  font-size: 12.5px; color: var(--muted); font-weight: 500;
}
.trust-line svg { width: 13px; height: 13px; flex: none; color: var(--accent-hover); }

@media (max-width: 980px) {
  .doors-grid, .how-steps, .stat-band .in { grid-template-columns: 1fr; }
  .how-step + .how-step { border-left: none; border-top: 1px solid var(--border); }
  .stat-cell + .stat-cell { border-left: none; border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  .site-hero { padding: var(--sp-10) var(--sp-5) var(--sp-8); }
  .site-hero h1 { font-size: clamp(30px, 8vw, 40px) !important; }
  .site-hero .ctas { justify-content: flex-start !important; }
  .site-hero .ctas span { margin-left: 0 !important; flex-basis: 100%; }
  .live-tool-section { padding: 48px 0 56px; }
  .live-tool-head { margin-bottom: 18px; }
  .door { padding: 28px 24px; }
  .who { grid-template-columns: 1fr !important; }
  .stat-cell { padding: 28px 20px; }
  .how-step { padding: 26px 22px; }
  .finale { padding: 64px 20px; }
}