/* ============================================================
   Block: proof_bar — the dark count-up proof band.
   Design source: H:68-80. Mobile-first per DECISIONS D3.

   Stat number: 44px (M) -> 40px (T) -> 66px (D). The tablet step
   DOWN is not a typo — it is in the mobile design's "Values for
   CSS" sheet: at 768px the three stats sit in a row for the first
   time, and 44px overflows that track.
   ============================================================ */

.m434-proof {
  position: relative;
  overflow: hidden;
  background: var(--m434-dark-2);
  color: var(--white);
  /* Accent-light, not --red: this rule sits on a dark ground where the
     light variant is the legible one (design-system.md 1.2). */
  border-top: 2px solid var(--m434-accent-lt);
  padding: 32px 0;
}

/* 64px blueprint grid. Hidden below md (D3) — at phone width it is
   visual noise behind text that needs the contrast. */
.m434-proof-grid { display: none; }

.m434-proof-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.m434-proof-stat { padding: 0; }

.m434-proof-kicker {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--m434-accent-lt);
  margin-bottom: 6px;
}

.m434-proof-val {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--white);
  /* Tabular figures so a counting number does not jitter as digits
     change width mid-animation. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.m434-proof-label {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 8px;
  max-width: 34ch;
}

/* ---------- md: the row appears, grid overlay returns ---------- */
@media (min-width: 768px) {
  .m434-proof { padding: 40px 0; }

  .m434-proof-grid {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
  }

  .m434-proof-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }

  .m434-proof-stat {
    flex: 1 1 240px;
    padding: 6px 40px;
  }

  /* Hairline between stats, drawn only BETWEEN them — a border on every
     cell would leave a stray rule against the container edge. */
  .m434-proof-stat + .m434-proof-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .m434-proof-val { font-size: 40px; }
}

@media (min-width: 1024px) {
  .m434-proof { padding: 52px 0; }
  .m434-proof-val { font-size: 66px; }
}