/* Digit roll toggle. Measured from the Sadewa Framer template's pricing section, rewritten.
   A segmented toggle (a knob slides under the chosen label) switches every price in its scope; each price is split
   into per-character reels (the odometer-counter idea) holding one face per option, stacked:

   <span class="drt-num">                              one clipped line (clip-path, so only top/bottom clip)
     <span class="drt-reel" style="--d:0ms">            a window as wide as its ACTIVE character (width glides)
       <span class="drt-face is-before">4</span>        options before the active one wait at -100% (above)
       <span class="drt-face is-on">3</span>             the active option sits at 0, opacity 1
       <span class="drt-face">9</span>                   options after it wait at +100% (below)
     </span> ...
   </span>

   So going forward through the options rolls UP (old leaves to the top, new rises from below) and going back rolls
   DOWN, and because it is all CSS transitions a click mid-roll simply retargets from where the faces are.
   Numbers (source): faces translateY +-100% + opacity, 0.5s on Framer's 0.4s bounce-0 spring curve (--drt-spring-fast);
   knob slides 0.55s on the 1s spring curve (--drt-spring); label colour 0.3s. */
.drt-toggle, .drt-num {
  /* Framer spring, bounce 0, sampled from the source page's own WAAPI curves (1 s and 0.4 s springs) */
  --drt-spring: linear(0,.0041 1%,.0154 2%,.0326 3%,.0545 4%,.0802 5%,.1088 6%,.1396 7%,.172 8%,.2054 9%,.2395 10%,.2738 11%,.308 12%,.3419 13%,.3752 14%,.4078 15%,.4396 16%,.4704 17%,.5001 18%,.5288 19%,.5563 20%,.5827 21%,.6079 22%,.6319 23%,.6547 24%,.6764 25%,.6969 26%,.7164 27%,.7348 28%,.7522 29%,.7686 30%,.784 31%,.7985 32%,.8122 33%,.825 34%,.837 35%,.8483 36%,.8588 37%,.8687 38%,.8779 39%,.8866 40%,.8946 41%,.9022 42%,.9092 43%,.9157 44%,.9218 45%,.9275 46%,.9328 47%,.9377 48%,.9423 49%,.9466 50%,.9505 51%,.9542 52%,.9576 53%,.9608 54%,.9637 55%,.9664 56%,.969 57%,.9713 58%,.9735 59%,.9755 60%,.9774 61%,.9791 62%,.9807 63%,.9822 64%,.9836 65%,.9848 66%,.986 67%,.9871 68%,.9881 69%,.989 70%,.9899 71%,.9906 72%,.9914 73%,.9921 74%,.9927 75%,.9932 76%,.9938 77%,.9943 78%,.9947 79%,.9951 80%,.9955 81%,.9959 82%,.9962 83%,.9965 84%,.9968 85%,.997 86%,.9973 87%,.9975 88%,.9977 89%,.9979 90%,.998 91%,.9982 92%,.9983 93%,.9985 94%,.9986 95%,.9987 96%,.9988 97%,.9989 98%,1);
  --drt-spring-fast: linear(0,.024 2.56%,.0823 5.13%,.1594 7.69%,.2448 10.26%,.3315 12.82%,.4152 15.38%,.4934 17.95%,.5646 20.51%,.6282 23.08%,.6844 25.64%,.7334 28.21%,.7758 30.77%,.8122 33.33%,.8432 35.9%,.8694 38.46%,.8916 41.03%,.9102 43.59%,.9258 46.15%,.9388 48.72%,.9496 51.28%,.9586 53.85%,.966 56.41%,.9722 58.97%,.9772 61.54%,.9814 64.1%,.9848 66.67%,.9876 69.23%,.9899 71.79%,.9918 74.36%,.9933 76.92%,.9946 79.49%,.9956 82.05%,.9964 84.62%,.9971 87.18%,.9977 89.74%,.9981 92.31%,.9985 94.87%,.9988 97.44%,1);
}

/* ---------- the toggle ---------- */
.drt-toggle {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  padding: var(--drt-pad, 4px);
  background: var(--drt-track, #131313);
  border-radius: var(--drt-radius, 4px);
}
.drt-toggle button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--drt-h, 38px);
  padding: 0 1.1em;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: var(--drt-label, #fff);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--drt-label-dur, .3s);
}
.drt-toggle button[aria-selected="true"] { color: var(--drt-label-on, #131313); }
.drt-toggle button:focus-visible { outline: 2px solid var(--drt-knob, #c6f24e); outline-offset: 2px; }
.drt-toggle__knob {
  position: absolute;
  z-index: 0;
  top: var(--drt-pad, 4px);
  bottom: var(--drt-pad, 4px);
  left: 0;
  width: var(--drt-knob-w, 0px);
  transform: translateX(var(--drt-knob-x, 0px));
  background: var(--drt-knob, #c6f24e);
  border-radius: max(0px, calc(var(--drt-radius, 4px) - var(--drt-pad, 4px) / 2));
  transition: transform var(--drt-knob-dur, .55s) var(--drt-knob-ease, var(--drt-spring)),
              width var(--drt-knob-dur, .55s) var(--drt-knob-ease, var(--drt-spring));
}

/* ---------- the rolling number ---------- */
.drt-num {
  display: inline-flex;
  position: relative;
  line-height: var(--drt-line, 1);
  font-variant-numeric: tabular-nums;            /* every digit the same width, so a reel's width only moves for , . or a gained/lost digit */
  clip-path: inset(0 -1em);                      /* clips the faces above/below, never the sides */
}
.drt-reel {
  position: relative;
  display: block;
  flex: none;
  height: calc(var(--drt-line, 1) * 1em);
  width: var(--w, .6em);
  transition: width var(--drt-dur, .5s) var(--drt-ease, var(--drt-spring-fast)) var(--d, 0ms);
}
.drt-face {
  position: absolute;
  inset: 0 auto auto 50%;
  white-space: pre;
  transform: translate(-50%, 100%);
  opacity: 0;
  transition: transform var(--drt-dur, .5s) var(--drt-ease, var(--drt-spring-fast)) var(--d, 0ms),
              opacity var(--drt-dur, .5s) var(--drt-ease, var(--drt-spring-fast)) var(--d, 0ms);
}
.drt-face.is-before { transform: translate(-50%, -100%); }
.drt-face.is-on { transform: translate(-50%, 0); opacity: 1; }
.drt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* first paint and re-measures land without moving */
.drt-instant .drt-toggle__knob, .drt-instant.drt-toggle__knob,
.drt-instant .drt-reel, .drt-instant .drt-face { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .drt-toggle__knob, .drt-reel, .drt-face { transition-duration: 0s !important; transition-delay: 0s !important; }
}