/**
 * Stat counter (sections/stat-counter.liquid).
 *
 * The AT A GLANCE grammar from the product spec strip - big tabular
 * numerals over hairlines with quiet uppercase labels - as a standalone
 * story-page beat whose numbers count up on entry (stat-counter.js).
 */
.section-stat-counter {
  padding-block: var(--space-8);
}

.stat-counter__kicker {
  margin: 0 0 var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.stat-counter__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

@media screen and (min-width: 990px) {
  .section-stat-counter {
    padding-block: var(--space-9);
  }

  .stat-counter__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-counter__stat {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-4);
}

.stat-counter__value {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}

.stat-counter__affix {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.stat-counter__label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* A word suffix sits a space away from its number: "18 months". */
.stat-counter__affix--word {
  margin-left: 0.3em;
}

/* Ticker: assets/stat-counter.js turns each digit into a column of 0-9
   that rolls up to its value, the columns finishing one after another
   from the left - an odometer settling, not a number being counted. */
.stat-odo {
  display: inline-flex;
}

.stat-odo__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.stat-odo__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform var(--odo-duration, 1.8s) cubic-bezier(0.16, 1, 0.3, 1) var(--odo-delay, 0s);
  will-change: transform;
}

.stat-odo__strip > span {
  display: block;
  height: 1em;
}

.stat-odo.is-rolling .stat-odo__strip {
  transform: translateY(calc(var(--odo-to) * -1em));
}