/* Desktop figures retain their larger inset. Phones clear the three pixel
   rows once, then group the figures with the media strip. The hero scene
   measures this padding when calculating its native sticky travel. */
.hero-reveal { padding-top: 144px; }
@media (max-width: 1366px) {
  .hero-reveal { padding-top: 128px; }
}
@media (max-width: 700px) {
  .hero-reveal { padding-top: calc(min(23.0769vw, 120px) + 16px); }
}

/* The number itself stays in the document and retains its original geometry.
   Only this decorative, noninteractive square overlay is removed on entry. */
.hero-stats .stats-pixels-number { position: relative; }
.stats-pixels-overlay {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(var(--stats-pixel-columns), var(--stats-pixel-size));
  grid-template-rows: repeat(6, var(--stats-pixel-size));
  width: var(--stats-pixel-width);
  height: var(--stats-pixel-height);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.stats-pixels-cell {
  display: block;
  width: var(--stats-pixel-size);
  height: var(--stats-pixel-size);
  background: var(--stats-pixel-tone, var(--paper, #fff));
}
.stats-pixels-running .stats-pixels-cell {
  animation: stats-pixel-clear 160ms steps(1, end) var(--stats-pixel-delay) forwards;
}
@keyframes stats-pixel-clear {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-pixels-overlay { display: none; }
}