/* By the numbers: three count-up statistics in the nolimitwebs dark + lime
 * palette. The agency timeline is struck through, and our 24 hrs counts DOWN
 * from six weeks in hours (1,008) with a lime swoosh drawn under it. */
.stats { background: var(--void); }
.statsHead { text-align: center; margin: 0 auto 48px; max-width: 900px; }
.stats__line { display: block; text-wrap: balance; }
.stats__row {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1040px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 48px 32px 44px; text-align: center; min-width: 0; isolation: isolate;
}
.stat::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 44%;
  width: min(300px, 88%); aspect-ratio: 1.7; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 60%, transparent 100%);
  filter: blur(14px); pointer-events: none;
}
.stat--us::after { background: radial-gradient(closest-side, rgba(216, 250, 112, .22), rgba(216, 250, 112, .05) 62%, transparent 100%); }
.stat__num {
  position: relative; display: inline-block;
  font-size: clamp(48px, 5.6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.stat__unit { font-size: .42em; font-weight: 700; letter-spacing: -.01em; }
.stat__label { font-size: 15.5px; line-height: 1.45; color: var(--muted); max-width: 26ch; text-wrap: balance; }
.stat__label b { color: var(--text); font-weight: 600; }
.stat__label sup, .stats__source sup { font-size: .7em; line-height: 0; }
.stats__source { margin: 18px auto 0; max-width: 640px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); opacity: .75; }
.stat__strike {
  position: absolute; left: -4%; right: -4%; top: 52%; height: .07em; border-radius: 1em;
  background: var(--text); opacity: .6; transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.6, .05, .3, 1);
}
.stats.is-done .stat__strike { transform: scaleX(1); }
.stat--us .stat__num { color: var(--accent); }
.stat__swoosh {
  position: absolute; left: -6%; width: 112%; bottom: -.16em; height: .24em;
  overflow: visible; pointer-events: none; opacity: 0; transition: opacity .15s;
}
.stats.is-done .stat__swoosh { opacity: 1; }
.stat__swoosh path {
  fill: none; stroke: var(--accent); stroke-width: max(.1em, 6px); stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s cubic-bezier(.6, .05, .3, 1);
}
.stats.is-done .stat__swoosh path { stroke-dashoffset: 0; }
@media (max-width: 820px) {
  .stats__row { grid-template-columns: 1fr; max-width: 460px; }
  .stat { padding: 30px 24px 28px; }
}
@media (max-width: 640px) {
  .statsHead { margin-bottom: 28px; }
  .statsHead h2 { font-size: clamp(28px, 8.4vw, 34px); }
  .stat__label { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .stat__strike { transform: scaleX(1); transition: none; }
  .stat__swoosh { opacity: 1; transition: none; }
  .stat__swoosh path { stroke-dashoffset: 0; transition: none; }
}
.nowrap { white-space: nowrap; }