/* Proof: three signals in a row on the page grid. Each stands under a hairline led by a short gold rule (the
   kit's label motif), and the rows line up across the signals (subgrid). One column on phones. */

.proof {
  padding: var(--space-8) var(--space-page);
}
.proof__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  column-gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.proof__item {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  padding-top: var(--space-5);
}
.proof__item::before,
.proof__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  transform-origin: left;
}
.proof__item::before {
  right: 0;
  background: var(--hairline-strong);
}
.proof__item::after {
  width: 40px;
  background: var(--accent);
}
.proof__label {
  color: var(--ink-muted);
}
.proof__value {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: var(--tracking-title);
}
.proof__text {
  max-width: 34ch;
  margin-top: var(--space-4);
  color: var(--ink-muted);
}

/* ── Reveal: the hairlines draw in from the left, then each signal rises out of a blur ── */

.proof__item > * {
  opacity: 0;
}
.proof__item::before,
.proof__item::after {
  transform: scaleX(0);
}
.proof.is-visible .proof__item > * {
  animation: proof-in 1100ms var(--ease-out-expo) both;
  animation-delay: calc(160ms + var(--i, 0) * 140ms);
}
.proof.is-visible .proof__item::before,
.proof.is-visible .proof__item::after {
  animation: proof-line 1300ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}
@keyframes proof-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes proof-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .proof__item > * {
    opacity: 1;
  }
  .proof__item::before,
  .proof__item::after {
    transform: none;
  }
  .proof.is-visible .proof__item > *,
  .proof.is-visible .proof__item::before,
  .proof.is-visible .proof__item::after {
    animation: none;
  }
}

@media (max-width: 720px) {
  .proof__list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--space-7);
  }
  .proof__item {
    display: block;
    grid-row: auto;
  }
}