/* Home stats: four full-width rows. Big number with a light suffix, a thin divider, then title and text.
   A thin bar on the left fills to the figure's value when the row appears. */
.stats { margin-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--line-light); }
.stat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(1.8rem, 3.4vw, 3rem) 0; border-bottom: 1px solid var(--line-light); }
.stat::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: #ececef; }
.stat::after { content: ""; position: absolute; left: 0; bottom: 18%; width: 3px; height: calc(64% * var(--v) / 100%); background: #ff3b30; transform-origin: bottom; transform: scaleY(0); transition: transform 1.4s var(--ease) .3s; }
.js .stat.is-in::after, html:not(.js) .stat::after { transform: scaleY(1); }
.stat__fig { padding-left: clamp(2.2rem, 5vw, 4rem); display: flex; align-items: flex-start; gap: .12em; font-size: clamp(5rem, 2.5rem + 9vw, 11.5rem); font-weight: 500; letter-spacing: -0.06em; line-height: .88; color: var(--ink-2); }
.stat__fig sup { margin-top: .22em; font-size: .36em; font-weight: 400; letter-spacing: 0; line-height: 1; color: #cfcfd4; }
.stat__body { border-left: 1px solid var(--line-light); padding-left: clamp(1.4rem, 3vw, 2.4rem); }
.stat__body h3 { font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--ink-2); }
.stat__body p { margin-top: 1rem; max-width: 46ch; color: var(--ink-3); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); letter-spacing: -0.025em; line-height: 1.5; }
@media (max-width: 760px) { .stat { grid-template-columns: 1fr; gap: 1rem; } .stat__body { border-left: 0; padding-left: clamp(2.2rem, 5vw, 4rem); } .stat__fig { font-size: clamp(4.4rem, 1rem + 20vw, 7rem); } }
@media (prefers-reduced-motion: reduce) { .stat::after { transform: scaleY(1); transition: none; } }
.stat__fig { font-weight: 600; }
.stat__fig .odo { gap: 0; }
.stat__fig .odo__col { width: .6em; text-align: center; }
.stat__fig .odo__strip span { text-align: center; }
.stat__body p { max-width: 36ch; }

/* As on Spector's live site: the block sits in the right part of the page (left side empty) and is more compact */
.stats { width: min(100%, 58%); margin-left: auto; margin-right: clamp(0rem, 3vw, 3.5rem); }
.stat { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(1rem, 2.4vw, 2rem); padding: clamp(1.4rem, 2.2vw, 2rem) 0; }
.stat__fig { padding-left: clamp(1.6rem, 3vw, 2.4rem); font-size: clamp(4rem, 2rem + 5.2vw, 7.4rem); }
.stat__body { padding-left: clamp(1rem, 1.8vw, 1.6rem); }
.stat__body h3 { font-size: clamp(1.4rem, 1rem + 1.1vw, 2.1rem); }
.stat__body p { margin-top: .7rem; font-size: clamp(.9rem, .85rem + .2vw, 1.02rem); max-width: 34ch; }
@media (max-width: 1000px) { .stats { width: 100%; margin-right: 0; } }
@media (max-width: 760px) { .stat { grid-template-columns: 1fr; } .stat__fig { font-size: clamp(4rem, 1rem + 18vw, 6.4rem); } }
/* digit window is exactly 1em tall (the roll distance depends on it), so shrink the glyphs a touch inside it to avoid clipping */
/* the digit window stays 1em tall with 1em rows (roll distance depends on it). The sans glyphs sit a little low in their row, so lift them inside the window. */
.stat__fig .odo__strip span { position: relative; top: -.07em; }