/* ============================================================
   Million View System — type.css
   Golden-ratio typography layer. Loads after main.css on every
   page except video.html (the ad landing page keeps main.css as is).

   Scale: 17px × φ^(n/4). Headings use whole φ^(n/2) steps so each
   level is clearly distinct; body, lead and UI text use the quarter
   steps between them.
   Line-height: Golden Ratio Typography, lh = φ − (1/2φ)(1 − w/(fφ)²).
   Wide text gets ~φ (1.6), narrow columns and phones get ~1.45–1.5.
   Measure: prose capped at roughly 45–75 characters per line
   (measured in the browser: 1ch in DM Sans ≈ 1.47 average characters).
   Anton headings are all caps with no descenders, so they stay
   tight (1.05–1.15) instead of following the body formula.
   ============================================================ */

:root {
  --fs-xs: 0.75rem;      /* 12px   n=-3  tracked caps micro-labels */
  --fs-sm: 0.8353rem;    /* 13.4px n=-2  captions, fine print, eyebrows */
  --fs-ui: 0.9421rem;    /* 15.1px n=-1  buttons, nav, footer, labels */
  --fs-body: 1.0625rem;  /* 17px   n=0 */
  --fs-lead: 1.1983rem;  /* 19.2px n=1 */
  --fs-h4: 1.3515rem;    /* 21.6px n=2 */
  --fs-h3: 1.7192rem;    /* 27.5px n=4 */
  --fs-h2: clamp(2.1868rem, 1.4rem + 3.4vw, 3.5383rem); /* 35 → 56.6px, n=6 → 10 */
  --fs-h1: clamp(2.7817rem, 1.6rem + 5.2vw, 4.5008rem); /* 44.5 → 72px, n=8 → 12 */

  --lh-body: 1.6;        /* ≈ φ at a ~60ch measure */
  --lh-narrow: 1.48;     /* cards, columns under ~40ch */
  --lh-lead: 1.5;
  --lh-fine: 1.65;       /* small text needs a little more air */
  --lh-display: 1.05;
  --lh-h3: 1.12;

  --measure: 46ch;       /* ~68 characters (DM Sans: 1ch ≈ 1.47 average characters) */
  --measure-lead: 40ch;  /* ~65 characters at lead size */
  --measure-fine: 58ch;  /* ~85 characters; fine print is skimmed, not read */
}

body { font-size: var(--fs-body); line-height: var(--lh-body); }

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h1, h2, h3 { text-wrap: balance; }

/* Section-specific sizes from main.css, snapped to the scale */
.proof-reels h2 { font-size: var(--fs-h2); }
.funnel-card h1 { font-size: clamp(2.1868rem, 1.4rem + 2.2vw, 2.7817rem); } /* 35 → 44.5px */
p, li, blockquote { text-wrap: pretty; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--measure-lead); }
.center .lead, .lead.measure, .cta-band .lead { margin-inline: auto; }
.eyebrow { font-size: var(--fs-sm); }

/* Page headers: main.css zeroes the gap under the h1; give it one line of body leading */
.page-head h1 + p, .page-head h1 + .lead { margin-top: 1.6rem; }

/* Buttons and UI */
.btn { font-size: var(--fs-ui); }
.btn--lg { font-size: var(--fs-body); }
.nav-links a { font-size: var(--fs-ui); }

/* Narrow columns: cards, checklists, stats */
.card p, .checklist li { line-height: var(--lh-narrow); }
.stat .label { font-size: var(--fs-ui); line-height: 1.4; }
.reel-stats .l { font-size: var(--fs-sm); }

/* Long-form blocks that ran past 100 characters a line */
.guarantee p { max-width: var(--measure); }
/* Narrow the whole legal column (not just its paragraphs) so it stays centred */
.container.legal { max-width: calc(var(--measure) + 48px); }
.legal h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* Forms */
.field label { font-size: var(--fs-ui); }
.form-note { font-size: var(--fs-sm); line-height: var(--lh-fine); max-width: var(--measure-fine); }
.center .form-note { margin-inline: auto; }

/* Footer */
.site-footer { font-size: var(--fs-ui); line-height: 1.55; }
.footer-cols h4 { font-size: var(--fs-xs); }
.footer-bottom { font-size: var(--fs-sm); }
.footer-disclaimer { max-width: none; }
.footer-disclaimer p { font-size: var(--fs-sm); line-height: var(--lh-fine); } /* full width: fine print is skimmed (Cam's call) */

/* Phones: 16px body over ~40ch, so tighter leading per the formula */
@media (max-width: 560px) {
  body { font-size: 1rem; line-height: 1.5; } /* main.css drops to 16px here; keep it */
  .lead { font-size: 1.125rem; line-height: 1.45; }
  .card p, .checklist li { line-height: 1.45; }
}