/* ==========================================================
   proof-metrics — local reset
   ========================================================== */
.proof-metrics,
.proof-metrics * {
  box-sizing: border-box;
}

/* ==========================================================
   Base = mobile (single column)
   ========================================================== */
.proof-metrics {
  --pm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pm-item-px: 0px;
  --pm-item-py: 24px;

  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--pm-pad-y-mobile, 48px) 24px;
  overflow: hidden; /* guards against the list's negative margins causing horizontal scroll */
  background-color: var(--pm-bg, #FFFFFF);
  font-family: var(--pm-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.proof-metrics .proof-metrics__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/*
  Divider strategy: each item draws a top hairline (::before) and a
  left hairline (::after) just OUTSIDE its box. The list clips its own
  edges (overflow: hidden + negative margins), so first-row top lines
  and first-column left lines are cut off automatically — correct
  hairlines at any column count, no nth-child math.
*/
.proof-metrics .proof-metrics__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: calc(var(--pm-item-py) * -1) calc(var(--pm-item-px) * -1);
  padding: 0;
  overflow: hidden;
}

.proof-metrics .proof-metrics__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: var(--pm-item-py) var(--pm-item-px);
  container-type: inline-size;
}

.proof-metrics .proof-metrics__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--pm-item-px);
  right: var(--pm-item-px);
  height: 1px;
  background-color: var(--pm-divider, #E2E2E2);
}

.proof-metrics .proof-metrics__item::after {
  content: "";
  position: absolute;
  left: -1px;
  top: var(--pm-item-py);
  bottom: var(--pm-item-py);
  width: 1px;
  background-color: var(--pm-divider, #E2E2E2);
}

/* ---------- Typography (explicit margin reset, no browser defaults) ---------- */
.proof-metrics .proof-metrics__value,
.proof-metrics .proof-metrics__label,
.proof-metrics .proof-metrics__caption {
  margin: 0;
  padding: 0;
}

.proof-metrics .proof-metrics__value {
  font-family: var(--pm-font-sans);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem); /* 40px → 56px */
  line-height: 1.2;
  letter-spacing: -0.03em; /* -1.68px @ 56px */
  color: var(--pm-value-color, #16181C);
  overflow-wrap: anywhere;
}

/* Shrink the value if a narrow column (5–6 items) can't fit it */
@supports (width: 1cqi) {
  .proof-metrics .proof-metrics__value {
    font-size: min(clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem), 30cqi);
  }
}

/* Stop digits jittering while counting up */
.proof-metrics.proof-metrics--count-up .proof-metrics__value {
  font-variant-numeric: tabular-nums;
}

.proof-metrics .proof-metrics__label {
  font-family: var(--pm-font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em; /* 0.96px @ 12px */
  text-transform: uppercase;
  color: var(--pm-label-color, #696969);
}

.proof-metrics .proof-metrics__caption {
  font-family: var(--pm-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pm-caption-color, #5A5F66);
}

.proof-metrics .proof-metrics__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   480px+ — small tablets: 2 columns
   ========================================================== */
@media (min-width: 480px) {
  .proof-metrics {
    --pm-item-px: 24px;
  }

  .proof-metrics .proof-metrics__list {
    grid-template-columns: repeat(var(--pm-cols-sm, 2), minmax(0, 1fr));
  }
}

/* ==========================================================
   720px+ — tablets: full column count (capped at 3 for 5–6 items)
   ========================================================== */
@media (min-width: 720px) {
  .proof-metrics {
    padding-top: calc((var(--pm-pad-y-mobile, 48px) + var(--pm-pad-y-desktop, 80px)) / 2);
    padding-bottom: calc((var(--pm-pad-y-mobile, 48px) + var(--pm-pad-y-desktop, 80px)) / 2);
  }

  .proof-metrics .proof-metrics__list {
    grid-template-columns: repeat(var(--pm-cols-md, 3), minmax(0, 1fr));
  }
}

/* ==========================================================
   960px+ — desktop: one row, dynamic column count
   ========================================================== */
@media (min-width: 960px) {
  .proof-metrics {
    --pm-item-px: 32px;
    --pm-item-py: 0px;
    padding-top: var(--pm-pad-y-desktop, 80px);
    padding-bottom: var(--pm-pad-y-desktop, 80px);
  }

  .proof-metrics .proof-metrics__list {
    grid-template-columns: repeat(var(--component-cols), minmax(0, 1fr));
  }
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .proof-metrics,
  .proof-metrics * {
    transition: none !important;
    animation: none !important;
  }
}