/* ==========================================================================
   WAVE 169 / 227 - DIE SKALA (the KULIC type scale)
   ==========================================================================
   Wave 169 measured six H1 sizes across six pages (35.2 / 46.4 / 54 / 59 /
   75.6 / 90 px) and H2 anywhere between 26.4 and 69.6 on the same level.
   Size no longer meant rank, so a reader could not skim. Five steps, one
   rhythm, one lede. Loaded last on every route.

   Wave 227 kept the result and replaced the mechanism. Wave 169 enforced the
   scale with `!important`, so every component that legitimately needed
   another step had to fight the system: wave 225 and wave 226 both did.
   The scale is now a set of NAMED TOKENS, and the legacy component rules
   that used to declare their own heading size now read the token and keep
   their old value as the fallback:

       .buyer-path-card h3 { font-size: var(--ka-h3, clamp(2.65rem,4.2vw,4.6rem)) }

   Three consequences:
   1. No `!important` anywhere in the heading system. It is no longer relevant
      who wins the cascade - every path resolves to the same token.
   2. A component changes a heading by setting the TOKEN on its own scope,
      never by declaring font-size and never with !important:
          .ka-w225 .assessment-question-card { --ka-h3: var(--ka-display) }
   3. This sheet is injected by script.js. If it never arrives, every
      component still falls back to its own pre-wave-169 value instead of
      collapsing to an inherited size.

   HOW TO USE IT
   - Steps --ka-h1 ... --ka-h6, each with a line-height companion --ka-h*-lh.
     h1/h2/h3 are enforced below; h4/h5/h6 are declared steps a component can
     opt into. Nothing in the estate is enforced at h4 and lower, so adding a
     rule for them here would resize pages - set the token instead.
   - INTENT tokens, not steps. Reach for these before inventing a size:
       --ka-display  one sentence that owns the viewport: the live assessment
                     question, a full-bleed statement heading.
       --ka-panel    the title of an instrument / console panel that sits
                     inside a band rather than owning it.
     Both carry -lh and -ls companions, so a component never needs a second
     declaration to correct leading or tracking after changing a size.
   - Never put `!important` on a heading rule. If a heading is the wrong
     size, set its token on the nearest component scope.
   ========================================================================== */

:root {
  /* steps */
  --ka-h1: clamp(2.35rem, 3.5vw, 3.4rem);
  --ka-h2: clamp(1.55rem, 2.25vw, 2.15rem);
  --ka-h3: clamp(1.08rem, 1.35vw, 1.28rem);
  --ka-h4: clamp(1rem, 1.15vw, 1.1rem);
  --ka-h5: clamp(.92rem, 1vw, .98rem);
  --ka-h6: clamp(.84rem, .9vw, .9rem);

  /* line-height companions */
  --ka-h1-lh: 1.08;
  --ka-h2-lh: 1.16;
  --ka-h3-lh: 1.3;
  --ka-h4-lh: 1.34;
  --ka-h5-lh: 1.38;
  --ka-h6-lh: 1.4;

  /* intent */
  --ka-display: clamp(1.6rem, 3vw, 2.6rem);
  --ka-display-lh: 1.02;
  --ka-display-ls: -.03em;
  --ka-panel: clamp(1.4rem, 2.2vw, 2.05rem);
  --ka-panel-lh: 1.04;
  --ka-panel-ls: -.01em;

  --ka-body: clamp(1rem, 1.15vw, 1.09rem);
  --ka-meta: .62rem;
  --ka-step: 8px;
}

main h1, main .h1 { font-size: var(--ka-h1); line-height: var(--ka-h1-lh); letter-spacing: -.012em; }
main h2:not(.sr-only) { font-size: var(--ka-h2); line-height: var(--ka-h2-lh); letter-spacing: -.005em; }
main h3 { font-size: var(--ka-h3); line-height: var(--ka-h3-lh); }

/* one lede. The 28px gold italic read as a pull quote and put a marketing
   voice on pages that had no business using one. Not part of the heading
   system - left as wave 169 shipped it. */
main .section-lead,
main .offer-hero-lede,
main .service-hero-lede,
main .page-lede {
  font-family: inherit !important;
  font-style: normal !important;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem) !important;
  line-height: 1.66 !important;
  letter-spacing: 0 !important;
  color: rgba(246, 241, 231, .78) !important;
  max-width: 68ch;
}

/* one vertical rhythm: 12 / 8 / 5 steps, nothing in between */
main > section.section { padding-block: calc(var(--ka-step) * 12) !important; }
@media (max-width: 900px) { main > section.section { padding-block: calc(var(--ka-step) * 7) !important; } }

/* The homepage hero keeps its own composition. This is the reference for how
   a component opts out of a step: it sets the token on its own scope and lets
   `main h1` above resolve it. No second font-size rule, no !important. */
body.home-page .home-hero4a { --ka-h1: clamp(2.4rem, 3.6vw, 3.5rem); }
body.home-page .home-hero4a { padding-block: 0 !important; }