/* Stat: a big number (Number Stat), a short description (H4 Light) and a hairline underneath. 124px tall. The description is at least two lines tall, so stats line up whether it runs to one line or two; if it runs to more (narrow screens), the stat grows and the hairline stays underneath the last line. Stats in a row are stretched to the same height, so their hairlines stay level, and the description always starts straight under the number (top-aligned).
   <div class="stat"><p class="stat__value t-stat">+45%</p><p class="stat__label t-h4-light">Increase in LTV for every additional asset held</p></div> */
.stat { display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 20px; padding-bottom: 19px; border-bottom: 1px solid currentColor; }   /* when a stat is stretched to match a taller neighbour the extra room goes below the text (the 1fr row), never above it */
.stat__value, .stat__label { margin: 0; }
.stat__value { font-variant-numeric: tabular-nums; }   /* equal-width digits, so the number does not jiggle while it rolls in */
/* Roll-in (js/stat-roll.js splits the number into characters, adds .is-rolling, then .is-in when the stat scrolls into view): each character waits just outside
   the number's line, hidden, and slides in as a wave (the script sets each one's delay). Most come from below, a few (.stat__ch--above) from above.
   The padding gives the mask room for the "$" and commas that hang below the line; the matching negative margin keeps the layout where it was. */
.stat__value.is-rolling { overflow-x: visible; overflow-y: clip; padding-block: .3em; margin-block: -.3em; white-space: pre; }   /* the mask is for the sliding characters (top and bottom): a wide number is never cut off at the sides */
.stat__ch { display: inline-block; transform: translateY(120%); opacity: 0; }
.stat__ch--above { transform: translateY(-120%); }
.stat__value.is-in .stat__ch { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .45s ease-out; }
.stat__label { min-height: var(--stat-detail-h, 40px); text-box: trim-both cap alphabetic; }   /* at least room for two lines (so one- and two-line stats match), but never fixed: a longer description pushes the hairline down instead of spilling over it */

/* Narrow screens (phones): the description steps down a little, from 20px to 18px (line height 1.3), so it wraps onto fewer lines in the narrow columns.
   The two-line minimum height follows it. The big number already scales down on its own (--fs-stat). */
@media (max-width: 600px) {
  .stat { --stat-detail-h: 36px; }
  .stat .stat__label { font-size: 1.125rem; line-height: 1.3; }
}