/* 04 On the ground, in numbers (proof.js): a clip in a phone beside the numbers */

.ch-proof { background: radial-gradient(120% 90% at 50% 20%, #2a2236 0%, var(--night) 70%); color: var(--cream); }
.ch-proof .kicker { color: var(--gold); }
.proof-head { position: absolute; top: 11vh; left: 0; right: 0; text-align: center; }
.proof-head .title { font-size: clamp(44px, 6vw, 96px); margin-top: 14px; }
.proof-body { position: absolute; left: 0; right: 0; top: calc(11vh + clamp(44px, 6vw, 96px) + 70px); bottom: 5vh; display: grid;
  grid-template-columns: auto minmax(0, 640px); justify-content: center; align-items: center; gap: clamp(28px, 5vw, 90px);
  padding: 0 clamp(20px, 6vw, 96px); }
.phones { display: flex; justify-content: center; }
.ch-proof.is-active .phone { transform: none; opacity: 1; }

.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.metric { padding: 22px 22px 20px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .8s var(--ease); }
.ch-proof.is-active .metric { opacity: 1; transform: none; transition-delay: var(--d); }
.metric:last-child { grid-column: span 2; }
.metric-value { font-family: var(--serif); font-size: clamp(40px, 4vw, 68px); line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.metric-label { margin-top: 10px; font: 400 14px/1.45 var(--sans); color: color-mix(in srgb, var(--cream) 75%, transparent); }

@media (max-width: 900px) {
  .proof-head { top: 10vh; }
  .proof-body { top: calc(10vh + 150px); bottom: 2vh; grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 0 16px; }
  .metrics { gap: 8px; }
  .metric { padding: 12px 14px; border-radius: 14px; }
  .metric-value { font-size: 32px; }
  .metric-label { font-size: 12px; margin-top: 6px; }
}