/* Trusted by global merchants (v5.html): the six-card block of v4 on white — the statement set
   like the other blocks, then six brand-grey cards in two rows of three, each with its figure on
   top and a title and a line underneath, the bodies aligned across a row. Each card's background
   is a Shaders "Pixel Beams" field in brand colours (wired in v5.html); without WebGPU it stays grey.
   Loaded after hero-silk.css and hero-v3.css, whose .proof rules it overrides. */

.proof-v5 { padding: 120px 0 var(--space-20); background: var(--white); color: var(--black); }

/* six cards, three to a row; each spans two subgrid rows (figure, body) so the bodies line up */
.proof-v5 .proof__grid { gap: var(--space-6); margin-top: var(--space-10); overflow: visible; border-radius: 0; background: transparent; }
.proof-v5 .proof__item { position: relative; overflow: hidden; isolation: isolate; row-gap: 100px; padding: var(--space-10); border-radius: var(--radius-lg); background: var(--grey); }
.proof-v5 .proof__item + .proof__item { border-left: 0; }
.proof-v5 .proof__value, .proof-v5 .proof__label { position: relative; z-index: 1; }
/* the field: the card's own canvas, faded in once its shader is ready (is-lit) */
.proof-v5__fx { position: absolute; z-index: 0; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.proof-v5__fx canvas { display: block; width: 100% !important; height: 100% !important; }
.proof-v5 .proof__item.is-lit .proof-v5__fx { opacity: 1; }
/* the type: black figure and title, muted line; over a dark field (data-fx-dark) it turns white */
.proof-v5 .proof__value { color: var(--black); }
.proof-v5 .proof__label { max-width: 360px; color: var(--ink-muted); }
.proof-v5 .proof__title { display: block; margin-bottom: var(--space-2); font-size: 18px; line-height: 28px; font-weight: 500; color: var(--black); }
.proof-v5 .proof__value, .proof-v5 .proof__title, .proof-v5 .proof__label { transition: color .35s ease; }
.proof-v5 .proof__item.is-lit[data-fx-dark] .proof__value,
.proof-v5 .proof__item.is-lit[data-fx-dark] .proof__title { color: var(--white); }
.proof-v5 .proof__item.is-lit[data-fx-dark] .proof__label { color: rgba(255, 255, 255, .75); }
/* under the pointer the field is brand lime (v5.html): the type goes back to black */
.proof-v5 .proof__item.is-lit[data-fx-dark].is-hover .proof__value,
.proof-v5 .proof__item.is-lit[data-fx-dark].is-hover .proof__title { color: var(--black); }
.proof-v5 .proof__item.is-lit[data-fx-dark].is-hover .proof__label { color: rgba(3, 3, 3, .72); }

@media (min-width: 1441px) {
  .proof-v5 { padding: calc(120 * var(--s)) 0 calc(80 * var(--s)); }
  .proof-v5 .proof__grid { gap: calc(24 * var(--s)); margin-top: calc(40 * var(--s)); }
  .proof-v5 .proof__item { row-gap: calc(100 * var(--s)); padding: calc(40 * var(--s)); border-radius: calc(20 * var(--s)); }
  .proof-v5 .proof__title { margin-bottom: calc(8 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(28 * var(--s)); }
  .proof-v5 .proof__label { max-width: calc(360 * var(--s)); }
}

/* three cards still share a row down to 901px: the figure shrinks with the width so "24–48h" fits */
@media (min-width: 901px) and (max-width: 1100px) {
  .proof-v5 .proof__value { font-size: clamp(44px, 5.6vw, 76px); }
}

@media (max-width: 900px) {
  .proof-v5 { padding: var(--space-16) 0; }
  .proof-v5 .proof__grid { gap: var(--space-3); margin-top: var(--space-8); }
  .proof-v5 .proof__item { row-gap: var(--space-8); padding: var(--space-6); }
  /* the figures as large as the card allows: the widest, "24–48h", is about 3.1em, and the card's
     text column is the screen minus 2 × 20px page padding and 2 × 24px card padding */
  .proof-v5 .proof__value { font-size: min(96px, calc((100vw - 88px) / 3.3)); }
  .proof-v5 .proof__item + .proof__item { border-top: 0; }
}

/* Infrastructure (v5.html): the same cards, four of them in two rows of two, each with its title set
   large in the figure's place and the line underneath; no figures, so no extra line of type */
.infra-v5 { padding-top: var(--space-16); }
.infra-v5 .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.infra-v5 .proof__item { row-gap: 72px; }
.infra-v5 .infra-v5__title { max-width: 12em; font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; }
.infra-v5 .proof__label { max-width: 440px; }
@media (min-width: 1441px) {
  .infra-v5 { padding-top: calc(64 * var(--s)); }
  .infra-v5 .proof__item { row-gap: calc(72 * var(--s)); }
  .infra-v5 .infra-v5__title { font-size: calc(44 * var(--s)); }
  .infra-v5 .proof__label { max-width: calc(440 * var(--s)); }
}
@media (max-width: 900px) {
  .infra-v5 { padding-top: var(--space-12); }
  .infra-v5 .proof__grid { grid-template-columns: 1fr; }
  .infra-v5 .proof__item { row-gap: var(--space-8); }
  .infra-v5 .infra-v5__title { font-size: 30px; }
}