/* estimation-variants/v1-number — CENTREPIECE: the odometer. The estimate starts as
 * ?,???,??? and every digit reel spins into place, because the whole hook is that the
 * reader has genuinely never seen this number. Evidence chips tick on behind it so the
 * number reads as counted rather than invented.
 * Loaded after base.css, common.css and sections.css — everything shared is in those. */
.odo{display:flex;align-items:flex-end;justify-content:center;gap:1px;margin-top:26px;
  font-variant-numeric:tabular-nums}
.odo .cur{font-size:20px;font-weight:600;color:rgba(255,255,255,.5);align-self:flex-start;
  margin:6px 8px 0 0;letter-spacing:.02em}
/* Each reel is a 1em window onto a vertical strip of glyphs; the strip is translated so
   the wanted glyph lands in the window. `?` sits at index 0, so the untouched state is
   already the "you have no idea" state. */
.reel{position:relative;width:.60em;height:1em;overflow:hidden;font-size:46px;font-weight:800;
  line-height:1;color:var(--y);letter-spacing:-.02em}
@media(min-width:992px){.reel{font-size:56px}.odo .sep{font-size:56px}}
.reel .strip{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;
  align-items:center;transition:transform 2.4s cubic-bezier(.16,1,.3,1)}
.reel .strip b{display:block;height:1em;line-height:1;font-weight:800}
.odo .sep{font-size:46px;font-weight:800;line-height:1;color:rgba(255,255,255,.3)}
/* the separators sit ABOVE the odometer glass — the comma's tail hangs below the
   baseline and the darkened bottom edge was eating it, turning 2,140,000 into 2.140.000 */
.odo .sep{position:relative;z-index:2}
/* the glass over a real odometer: darkened top and bottom edges of the window */
.odoglass{position:relative}
.odoglass::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,11,.9),transparent 26%,transparent 74%,rgba(7,7,11,.9))}
.odolbl{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);text-align:center;margin-top:12px}
.odosub{font-size:13px;color:rgba(255,255,255,.55);text-align:center;margin-top:6px}
.odosub b{color:rgba(255,255,255,.85);font-weight:600}

.evid{display:grid;gap:8px;margin-top:22px}
.ev{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:15px;font-size:13px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.55);transition:background .35s,border-color .35s,color .35s}
.ev .tick{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:transparent;
  border:1.5px solid rgba(255,255,255,.2);
  transition:background .35s,border-color .35s,color .35s,transform .35s}
.ev b{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.4);
  transition:color .35s}
.ev.on{color:rgba(255,255,255,.9);background:rgba(0,159,78,.07);border-color:rgba(55,212,137,.24)}
.ev.on .tick{background:#37d489;border-color:#37d489;color:#06210f;transform:scale(1.06)}
.ev.on b{color:rgba(255,255,255,.9)}
@media(prefers-reduced-motion:reduce){.reel .strip{transition:none}}
/* On a phone the card is ~285px of content and seven 46px reels fill it edge to edge.
   One step down puts the air back. */
@media(max-width:520px){
  .reel{font-size:40px}
  .odo .sep{font-size:40px}
}