/**
 * =====================================================================
 * IMPACT STAT COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the current static design system's ".impact"
 * rules (css/style.css). NOT REPEATED HERE: .section, .section--ink,
 * .container, .eyebrow — already in assets/css/global.css.
 *
 * "div.impact"/"div.impact__num" (NOT bare selectors): same fix
 * confirmed live on statistics' ".stat__num" — a bare single-class
 * selector loses to Blocksy's own base styling.
 * =====================================================================
 */

div.impact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; margin-top: 44px; }
div.impact__num {
  --forced-font: var(--font-serif);
  font-family: var(--forced-font) !important; font-size: clamp(4rem, 2.5rem + 8vw, 8.5rem);
  line-height: 0.9; color: var(--white); font-variant-numeric: tabular-nums;
}
/* No font-family needed on either the "[data-count]" counter span
   (its actual number text — see template.php) or ".suffix" below —
   both automatically inherit --forced-font (serif) from div.impact__num
   above via global.css's "--forced-font" mechanism. This is the exact
   bug the live-site audit (2026-09) found here: the big "38" and its
   "%" suffix were rendering in the wrong (sans) typeface because both
   are plain <span>s with no font-family of their own, and
   global.css's OLD blanket rule forced every bare span to sans
   directly, beating the serif they should have inherited. */
.impact__num .suffix { font-size: 0.4em; color: var(--red-bright); }
.impact__lead p { font-size: var(--step-1); color: rgba(255, 255, 255, 0.75); max-width: 34ch; margin: 18px 0 0; }
.impact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.impact__list li {
  display: flex; align-items: baseline; gap: 22px;
  padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.impact__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.impact__list b {
  --forced-font: var(--font-mono);
  font-family: var(--forced-font) !important; font-size: clamp(1.3rem, 0.8rem + 2.6vw, 2.75rem); font-weight: 500;
  line-height: 0.9; color: var(--white);
  min-width: 100px; font-variant-numeric: tabular-nums;
}
/* The nested "[data-count]" counter span (its number text) needs no
   font-family of its own — inherits --forced-font (mono) from
   .impact__list b above. ".suffix" here is the one exception in this
   file that genuinely wants a DIFFERENT font than its container (sans,
   not mono), so it still sets --forced-font itself, once. */
.impact__list b .suffix {
  --forced-font: var(--font-sans);
  font-family: var(--forced-font) !important; font-size: 0.5em; font-weight: 600; color: var(--red-bright);
}
.impact__list li > span { font-size: 19px; font-weight: 400; color: rgba(255, 255, 255, 0.82); line-height: 1.3; }
@media (max-width: 800px) {
  div.impact { grid-template-columns: 1fr; gap: 32px; }
}