/* =======================================================================
   RECEIPTS / STAT BAND — shared component
   =======================================================================
   The proof block at the foot of each Solutions page: a 3 × 2 grid of
   metrics that fade up in sequence, each revealing a detail line on hover.

   Extracted when solutions-entertainment needed one too. The block already
   existed in solutions-brands.css, solutions-live-events.css and
   solutions-sports.css — 15 rules, byte-identical in all three — so the
   choice was a fourth copy or one component. Same call as press-card.css
   and legal-page.css, and for the same reason: the numbers in this band
   just took a site-wide correction, and a copy is a place for the next one
   to be missed.

   Used by all four Solutions pages. Loads BETWEEN base.css and the page
   sheet, so a page keeps its own delta — the two .receipts-head rules stay
   in the page sheets because sports sets a different margin and does not
   constrain its headline width.

   js/receipts.js is the other half of this component — it counts the numbers
   up when the band scrolls in. Ship the two together; the CSS is correct on
   its own, the JS is not useful without it.

   NOTE for whoever touches .stat-detail: it is opacity 0 until :hover, so
   the detail lines are mouse-only — not reachable by keyboard or on touch.
   That is inherited behaviour, not a decision made here, but it means the
   detail copy has to be genuinely supplementary. Don't put anything in it
   the page needs to say.
   ===================================================================== */
.proof-line {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px); color: var(--dim);
  margin-top: 8px;
}
.statband {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.statband .stat {
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  /* One padding value, two consumers: the cell and the ink copy that has to
     land on top of it to the pixel. Change it here only. */
  --stat-pad: 30px 24px 28px;
  /* Ink-wipe origin and radius. These MUST live on .stat, not on .stat-ink:
     js/receipts.js writes them as inline styles on the cell (it is the cell
     that receives the pointer events and owns the geometry), and a custom
     property declared on .stat-ink would shadow the inherited value rather
     than fall back to it — the wipe would sit at radius 0 forever. */
  --ink-x: 50%; --ink-y: 50%; --ink-r: 0px;
  padding: var(--stat-pad); min-height: 188px;
  position: relative; overflow: hidden;
}

/* INK WIPE — the hover state.
   js/receipts.js drops a copy of each cell's content into .stat-ink; this
   paints that copy and clips it to a circle centred on the pointer. Hovering
   grows the radius from 0 to the farthest corner, so the new ground and the
   text that sits on it arrive together at the wipe edge instead of the text
   cross-fading independently underneath a moving circle.

   THE GROUND is field green mixed 18% into the cream — a deeper shade of the
   section's own colour, not a different one. Earlier passes tinted the text
   green, then swapped the cell to the dark theme. Both were too big a jump:
   a near-black cell on a cream band is a 14:1 change of state for what is
   only a hover, and no duration made that gentle. #D8DEC6 is 1.19:1 against
   the cream — present enough to read as a wash arriving, small enough that
   nothing flashes.

   THE ACCENT has to move with it, and this is the part to be careful about.
   Field green is only 3.02:1 on the cream to start with, which it survives
   because the unit is large text (24px+). On ANY tint dark enough to see,
   it drops under 3:1 — 2.54:1 on this one — and fails outright. So the unit
   switches to --accent-ink, the darker green already used for legal and
   story prose links, at 6.12:1 here. If you restyle the tint, re-run the
   numbers; the two move together.

   Everything else is inherited from .section-light untouched: the number
   stays near-black (13.86:1 on the tint), the label and detail stay dim
   (4.78:1). Only the ground and the accent change. */
.stat-ink {
  --bg:     #D8DEC6;
  --accent: var(--accent-ink);

  position: absolute; inset: 0;
  padding: var(--stat-pad);
  background: var(--bg);

  -webkit-clip-path: circle(var(--ink-r) at var(--ink-x) var(--ink-y));
  clip-path: circle(var(--ink-r) at var(--ink-x) var(--ink-y));
  /* Opening is quicker than closing — the wipe arrives with intent and
     retreats without snapping shut. Both are the same curve; only the clock
     differs. No other property animates, so this stays one composited
     clip-path per cell. */
  transition: clip-path .52s var(--ease-out);
}
.stat:hover .stat-ink { transition-duration: .42s; }

/* CSS-ONLY FALLBACK — the same wash, arriving whole instead of wiping.
   js/receipts.js puts .has-ink on the band once every cell has its copy, so
   this is live only while the wipe is NOT. That matters both ways round: if
   the script is blocked, throws, or has not run yet, the cells still respond
   to the pointer instead of going completely inert — and once the wipe does
   exist this must switch off, or the whole cell would tint underneath the
   circle and there would be nothing left for the circle to reveal.

   Worth knowing before deleting it: the hover state used to be pure CSS, and
   moving it into the ink layer quietly made it depend on JavaScript running.
   This puts the floor back. */
.statband:not(.has-ink) .stat:hover {
  --bg:     #D8DEC6;
  --accent: var(--accent-ink);
  background: var(--bg);
}
.statband:not(.has-ink) .stat:hover .stat-detail { opacity: 1; transform: none; }

/* The detail line is the ink layer's to show. Underneath it stays hidden, so
   the copy is the only place it ever appears — it rides in on the wipe edge
   rather than fading up through it.

   .statband is in the selector purely for weight: `.statband .stat-detail`
   further down hides it with the same two-class specificity, and being later
   in the file it would otherwise win — the detail never appeared inside the
   ink at all. Keep both selectors the same length. */
.statband .stat-ink .stat-detail { opacity: 1; transform: none; transition: none; }

/* Each metric fades up in sequence when the band scrolls in (reveal once).

   WARNING, learned the hard way: this selector carries three classes to
   .stat's two, so it WINS the cascade — and `transition` is a shorthand. Any
   property you animate on .stat must be repeated in this list or it will be
   reset to `none` here and silently never transition. Every section on these
   pages is .reveal, so there is no width or state where that would show up
   as working. (The hover wipe sidesteps it by animating .stat-ink, a child
   this selector does not touch.)

   background-color is in the list for the CSS-only fallback above: without
   it that fallback would fade IN on hover and snap back on mouse-out, since
   the leave transition is read from this rule and not from the :hover one.
   It costs nothing while the wipe is live — the cell's own background never
   moves then. */
.reveal .statband .stat {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              background-color .3s var(--ease-out);
}
.reveal.is-in .statband .stat { opacity: 1; transform: none; }
.reveal.is-in .statband .stat:nth-child(1) { transition-delay: .10s; }
.reveal.is-in .statband .stat:nth-child(2) { transition-delay: .18s; }
.reveal.is-in .statband .stat:nth-child(3) { transition-delay: .26s; }
.reveal.is-in .statband .stat:nth-child(4) { transition-delay: .34s; }
.reveal.is-in .statband .stat:nth-child(5) { transition-delay: .42s; }
.reveal.is-in .statband .stat:nth-child(6) { transition-delay: .50s; }

.statband .stat-num {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: clamp(32px, 3vw, 48px); line-height: 1; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
/* UNIT — everything trailing the number: the +, the %, the "sec", and the
   spelled-out magnitude ("billion", "million"). One treatment for all of
   them: brand green, SAME SIZE as the digits.

   This replaced two earlier passes. It used to be .46em and --dim, which
   made the unit look like a footnote on the number — and the magnitude was
   not a unit at all, it was a bare "B" sitting in the number text, so "7B+"
   read as a typo. The fix in between sized the B UP and greened it; that
   traded one imbalance for another and still left the reader to expand the
   abbreviation. Spelling the word out is the plain version: "7 billion+"
   needs no decoding, and holding it at 1em means the green is doing the
   emphasis on its own.

   Field green is 3.02:1 on the cream — under AA for text, over the 3:1 that
   large text (24px+) is held to instead. So the colour is only legal while
   the unit is big: fine at the 32-48px .stat-num runs at on desktop, NOT
   fine under 600px where it scales down to 22px. The media query at the
   foot of this file swaps it to --accent-ink there (7.26:1) rather than
   shrinking the type and leaving the colour behind. Same trade the ink
   layer makes for the same reason. */
.statband .stat-num .unit {
  font-size: 1em; color: var(--accent);
  margin-left: .08em;
  /* "billion+" is one word. Unicode line breaking allows a break between a
     letter and a leading-sign character, so without this the narrow columns
     split it as "billion / +". The number may still wrap away from the unit
     ("7 / billion+"), which is fine — the unit itself never breaks up. */
  white-space: nowrap;
}
/* Count-up (js/receipts.js). The digits are the only part that changes, so
   only they need the reserved width — tabular-nums on .stat-num already
   holds each glyph to the same advance, which stops 5 -> 50 -> 500 from
   shoving the unit around mid-flight. inline-block keeps the baseline
   stable while textContent is being replaced every frame. */
.statband .stat-num .count { display: inline-block; }
.statband .stat-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
/* Hidden in the cell itself and only ever shown by the ink copy, which
   overrides both of these — see .stat-ink .stat-detail above. */
.statband .stat-detail {
  font-family: var(--body); font-weight: 400;
  font-size: 13px; line-height: 1.5; color: var(--dim);
  margin-top: 14px;
  opacity: 0; transform: translateY(8px);
}

/* The line that lands after the metrics. */
.proof-close {
  margin-top: 7vh;
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.06;
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--text);
  /* 30ch broke "…every moment in the / moment.", splitting the phrase and
     orphaning the last word. 34ch keeps "in the moment" whole on a full
     final line and evens the three-line block out. */
  max-width: 34ch;
}

@media (max-width: 600px) {
  .statband { grid-template-columns: repeat(2, 1fr); }
  /* Two columns on a 320px phone leave ~115px of content per cell, and the
     spelled-out units need most of it — "50 million+" does not fit beside
     itself at the 32px desktop floor. Tighten the padding and let the number
     scale with the viewport so the longest stat still lands on two lines
     ("50 / million+") instead of three. Set via --stat-pad, not padding, so
   the ink copy keeps landing on the cell exactly. */
  .statband .stat { --stat-pad: 22px 14px 20px; min-height: 150px; }
  .statband .stat-num { font-size: clamp(22px, 7vw, 30px); margin-bottom: 12px; }
  /* Below 24px the unit is no longer large text, so field green's 3.02:1 is
     a straight AA failure. --accent-ink is the darker green already used for
     legal and story prose links: 7.26:1 on the cream, 6.12:1 on the ink
     layer's tint. Desktop keeps the brighter field green. */
  .statband .stat-num .unit { color: var(--accent-ink); }
  .stat-ink { --accent: var(--accent-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal .statband .stat { opacity: 1; transform: none; transition: none; }
  /* The hover wash still happens — it is feedback, not decoration — but it
     arrives whole instead of sweeping in from the pointer. */
  .stat-ink { transition: none; }
  /* The count-up is skipped in js/receipts.js, not here — the numbers live in
     the markup at their final value, so there is nothing to undo. */
}