/* ════════════════════════════════════════════════════════════════════════
   BidClarity Stats-Bar — dark-theme component (T5 stats-bar + T6 count-up).
   ────────────────────────────────────────────────────────────────────────
   Consumers (2026-06-03): index.html, pricing.html.
   Both link this stylesheet; both render with html[data-theme="dark"].

   DO NOT link from light-rendering pages
   (agency-spending-profile.html, audit.html, thankyou.html,
   trial-setup.html) without first adding theme-appropriate fallbacks.
   Theme-dependent rules below are SCOPED under html[data-theme="dark"]
   so a light-page link would render the LAYOUT (grid/sizing/typography)
   but no colors — visible-but-uncolored cells, never a silent
   miscolored render. The selector enforces the contract; this header
   explains it. Belt and suspenders.

   If component scope ever expands to a light page, refactor to a
   component-scoped var (e.g. --stats-cell-bg) that the dark wrapper
   assigns to --bc-surface-on-dark and a light :root assigns to
   --bc-paper. Don't reflexively alias the named "-on-dark" token to
   a light value — that's the light-island anti-pattern closed
   2026-06-02 (see site-theme.css §"Dark-theme card-token override").
   ════════════════════════════════════════════════════════════════════════ */

/* ── Layout (theme-agnostic; safe on any host) ───────────────────────── */
.stats-bar-band {
  padding: 48px 24px;
}
.stats-bar {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  position: relative;
  z-index: 1;
}
.stat-cell {
  padding: 28px 24px;
  text-align: center;
}
.stat-num {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-num-prefix,
.stat-num-value,
.stat-num-suffix {
  display: inline;
}
.stat-label {
  font-size: 13px;
  line-height: 1.5;
}

/* Mobile collapse — layout-only, theme-agnostic.
   (Moved in from index.html L272 mobile media-query in this commit.) */
@media (max-width: 768px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Theme-dependent — scoped under html[data-theme="dark"] ──────────
   Component is dark-only by contract; see header. Selector specificity
   0-0-2 (html attr + class) is intentional — matches body-scoped
   token overrides without escalating arms-race. */
html[data-theme="dark"] .stats-bar {
  background: var(--bc-border-on-dark);    /* rgba(255,255,255,0.10) hairline
                                              visible through the 1px grid gap */
}
html[data-theme="dark"] .stat-cell {
  background: var(--bc-surface-on-dark);   /* #131F35 raised card on dark canvas */
}
html[data-theme="dark"] .stat-num {
  color: var(--bc-teal-emphasis);          /* #1DB89A dark-context accent
                                              (NOT --bc-teal #00D4AA — per CLAUDE.md
                                               brand palette: accent teal is fills
                                               only, never text body color) */
}
html[data-theme="dark"] .stat-label {
  color: var(--bc-ink-2);                  /* #B8CDE0 secondary ink on dark */
}