/* ==========================================================================
   Proof band
   ==========================================================================
   Agency-level proof: three numbers spread flush across a hairline rule.

   All three were cleared on 2026-08-28 (project/research/kpis-and-clients.md),
   so unlike per-project figures they carry no caveat. Do not add a number here
   that cannot be sourced.

   Ported from proof-band.tsx and stat-grid.tsx. The grid is shared with the
   per-case metrics band so the two read as one system, which is why it lives
   under its own class rather than inside .proof-band.
   ========================================================================== */

.stat-grid {
  display: grid;
  gap: 2rem;
  border-block: 1px solid var(--border-subtle);
  padding-block: 2.5rem;
}

@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A <dl> of term and definition. The numeral is the definition, so source
   order puts the label first for a screen reader and `order` puts the numeral
   on top for everyone else. */
.stat {
  display: flex;
  flex-direction: column;
}

.stat__label {
  order: 2;
  margin-top: 0.5rem;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

/* Oversized numerals, quiet labels, per taste/TASTE.md.

   Tracking is -0.025em, tighter than either scale token this uses. That is
   deliberate and measured off the shipped build: the original stacked
   tracking-tight on top of the size utility, and the tighter value won. Set
   explicitly here so the intent survives instead of depending on cascade
   order. */
.stat__value {
  order: 1;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .stat__value {
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line);
  }
}

.proof-band { padding-block: 3.5rem; }

@media (min-width: 768px) {
  .proof-band { padding-block: 4rem; }
}