/* ==========================================================================
   Typography, single source of truth for heading sizes and weights.

   The site was authored with ~30 separate selectors defining font-size and
   font-weight for h1/h2/h3 across section types. This file loads LAST and
   unifies every heading into ONE of four roles:

     1. Page H1    , .inner-title, .page-hero h1, .article-hero h1
                      clamp(32px → 56px), weight 700, tracking -0.02em
     2. Section H2 , every H2 anywhere (card, CTA, section-head, etc.)
                      clamp(26px → 40px), weight 700, tracking -0.015em
     3. Subsection H3 (LARGE), role-card, pillar, uc-rich-body leads
                      clamp(20px → 26px), weight 700
     4. Card H3    , feature/team/value/uc/sol/partner/price/news/job
                      clamp(17px → 20px), weight 600

   Body copy sizes are tightened too: lede/deck paragraphs use --text-lg,
   body paragraphs use --text-base, card body uses --text-sm.

   IMPORTANT: this file must load AFTER every other CSS file. The master
   HTML template (and build_pages.py) has been updated to reflect that.
   ========================================================================== */

/* ---------- Base heading resets, the only place you set shared defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-ink);
  text-wrap: balance;
  line-height: 1.15;
  margin: 0;
}
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6 {
  color: var(--color-text);
}

/* ---------- Role 1, Page H1 (one per page) */
h1,
.inner-title,
.page-hero h1,
.article-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);   /* 32 → 56 */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* ---------- Role 2, Section H2 (unified across ALL sections) */
h2,
.section-head h2,
.section-header h2,
.section-head-compact h2,
.stage-copy h2,
.split-copy h2,
.engine-header h2,
.verticals-header h2,
.cta-inner h2,
.cta-block h2,
.bottom-cta h2,
.xref-section h2,
.offer-content h2,
.risk-content h2,
.quiz-head h2,
.inner-cta .cta-block h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem); /* 26 → 40 */
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* ---------- Role 3, Subsection H3 (large card / pillar heading) */
h3,
.role-card h3,
.pillar h3,
.track-head h3,
.vertical-copy h3,
.funnel-success h3,
.product-card h3,
.quiz-result h3,
.roi-output h3,
.feature-content h3,
.uc-featured-card h3,
.client-category-head h3,
.exit-modal-card h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); /* 20 → 26 */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ---------- Role 4, Card H3 (tighter, used inside dense grids) */
.feature-card h3,
.team-card h3,
.value-card h3,
.uc-card h3,
.sol-card h3,
.partner-card h3,
.price-card h3,
.news-card h3,
.contact-card h3,
.stat-card h3,
.job-card h3,
.outcome-item h3,
.engine-stage h3,
.stage h3,
.uc-rich-body h3 {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* 17 → 20 */
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* ---------- Role 5, Footer / Utility H5 (small caps label) */
h4 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.005em; }
h5 {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* ---------- Lede / deck copy, the paragraph right under a heading */
.inner-lede,
.page-hero .lede,
.section-head > p,
.section-header > p,
.section-head-compact > p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); /* 16 → 19 */
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 62ch;
}
[data-theme='dark'] .inner-lede,
[data-theme='dark'] .page-hero .lede,
[data-theme='dark'] .section-head > p,
[data-theme='dark'] .section-header > p,
[data-theme='dark'] .section-head-compact > p {
  color: var(--color-ink-3);
}

/* ---------- Eyebrow, consistent across the site */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* ---------- Card body copy, one size */
.feature-card > p,
.team-card > p,
.value-card > p,
.uc-card > p,
.sol-card > p,
.partner-card > p,
.price-card > p,
.news-card > p,
.uc-rich-body p,
.outcome-item p,
.role-card > p,
.pillar > p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- Buttons, one size family */
.btn,
.btn-lg,
.btn-sm,
.nav-trigger,
.nav-menu > a,
.nav-login {
  font-family: var(--font-body);
  letter-spacing: -0.005em;
}
.btn     { font-size: var(--text-sm); font-weight: 600; }
.btn-sm  { font-size: var(--text-xs); font-weight: 600; }
.btn-lg  { font-size: var(--text-base); font-weight: 600; }

/* ---------- Stat / KPI number, keep Inter, never JetBrains on body numbers */
.stat-num,
.metric-num,
.kpi-num {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Reset legacy conflicting mobile overrides (components-extended.css:862+)
     Those @media rules forced DIFFERENT h2 sizes on phones than the base rule
     above. We re-assert the role-based sizes inside the same breakpoint.      */
@media (max-width: 640px) {
  h2,
  .section-head h2,
  .section-header h2,
  .section-head-compact h2,
  .stage-copy h2,
  .split-copy h2,
  .engine-header h2,
  .verticals-header h2,
  .cta-inner h2,
  .cta-block h2,
  .bottom-cta h2,
  .xref-section h2,
  .offer-content h2,
  .risk-content h2,
  .quiz-head h2,
  .inner-cta .cta-block h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  h1,
  .inner-title,
  .page-hero h1,
  .article-hero h1 {
    font-size: clamp(1.875rem, 7vw, 2.5rem);
  }
}