/* ============================================================
   kpi.css — Small data cards used in hero meta strip.
   ============================================================ */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.kpi {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-grad);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kpi .label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kpi .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--figure-size);
  line-height: var(--figure-leading);
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.kpi .value .unit { color: var(--muted); font-weight: 500; font-size: var(--figure-unit); margin-left: 0.1em; }


/* A one-line plain-English gloss under a figure whose NAME does not
   explain it. "Curb : lots" over "$1 : $2.64" is two labels and no
   meaning; the definition existed only in a title= tooltip, which no
   keyboard or touch reader ever reaches, and in the fine print at the
   foot of the page — 900px from the number it defines. */
.kpi-gloss {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
  max-width: 26ch;
}