/* Pricing pieces shared by the pricing page and the homepage plans: price motion, the billing pill and the
   line under each price.
   Figures roll like a counter: every digit is a column of 0 to 9 behind a one-line window, and the column slides
   to the new digit, so a falling price rolls down and a rising one rolls up. Timing uses the transitions.dev
   motion tokens (500ms emphasis duration, smooth-out ease, 40ms stagger). The billing lines under the figures
   use the transitions.dev "text states swap" snippet, pasted as shipped. */
:root {
  --roll-dur: 500ms;
  --roll-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --roll-stagger: 40ms;
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
}

/* The window is sized by one hidden in-flow digit, so the figure keeps its normal baseline, width and line
   height. It is clipped with clip-path, not overflow, because overflow would move the baseline to the box edge. */
.t-roll { white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-roll-digit {
  position: relative;
  display: inline-block;
  clip-path: inset(0 -0.12em);
}
.t-roll-digit > i { visibility: hidden; font-style: normal; }
.t-roll-column {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform: translateY(calc(var(--roll-digit, 0) * -10%));
  transition: transform var(--roll-dur) var(--roll-ease);
  transition-delay: calc(var(--roll-index, 0) * var(--roll-stagger));
  will-change: transform;
}
.t-roll-column > span { display: block; }
.t-roll.is-still .t-roll-column { transition: none; }
/* While a column is moving, digits soften as they cross the window's top and bottom edges. */
.t-roll-digit.is-rolling {
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .t-roll-column { transition: none !important; }
}

.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap { transition: none !important; }
}

/* One pill control. The selection is a second, light copy of the labels laid exactly over the first and clipped
   to the chosen option, so the pill slides and changes width in one movement and each letter turns dark as the
   pill passes over it. Only clip-path animates. Until the script has measured the labels, the chosen button
   carries the same fill itself, so nothing shifts when the overlay takes over. */
.pricing-billing-switch{position:relative;display:inline-flex;align-items:center;padding:4px;border:1px solid var(--interactive-border);background:var(--surface-subtle,#1a1a1a);border-radius:999px;margin:12px auto 0}
.pricing-billing-switch button,.pricing-billing-overlay b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:500 14px/1 'Eshlon Sans',sans-serif;letter-spacing:.01em;white-space:nowrap}
.pricing-billing-switch button{color:var(--surface-muted-foreground,#9e9e9e);cursor:pointer;transition:color 150ms ease}
.pricing-billing-switch button:hover:not([aria-pressed="true"]){color:var(--surface-foreground,#fff)}
.pricing-billing-switch button[aria-pressed="true"]{cursor:default}
.pricing-billing-switch:not(.is-ready) button[aria-pressed="true"]{background:var(--primary-base,#fff);color:var(--primary-foreground,#000)}
.pricing-billing-switch button:focus-visible{outline:2px solid var(--interactive-focus,#8a8a8a);outline-offset:3px}
.pricing-billing-switch span{padding:3px 7px;border-radius:999px;background:#ffffff14;font-size:12px;font-weight:500;line-height:1}
.pricing-billing-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:4px;border-radius:999px;background:var(--primary-base,#fff);color:var(--primary-foreground,#000);pointer-events:none;transition:clip-path 280ms var(--ease-out)}
.pricing-billing-overlay.is-still{transition:none}
.pricing-billing-overlay span,.pricing-billing-switch:not(.is-ready) button[aria-pressed="true"] span{background:#00000012}
@media(max-width:760px){.pricing-billing-switch button,.pricing-billing-overlay b{padding:0 15px}}
@media(prefers-reduced-motion:reduce){.pricing-billing-switch button,.pricing-billing-overlay{transition:none}}

.pricing-savings{display:flex;align-items:center;width:fit-content;height:24px;padding:0 10px;border-radius:999px;background:#ffffff0f;color:#e0e0e0;font-size:12px;font-weight:500;line-height:1;margin:12px 0 24px!important}
/* The billing line and the saving share one slot under the price, so the card keeps its height when the period
   changes: annual shows the saving, monthly shows "Billed monthly". */
.pricing-terms{display:grid;align-items:center;height:24px;margin:12px 0 24px}
.pricing-terms>p{grid-area:1/1;margin:0!important;min-height:0}
.pricing-terms .pricing-savings{transition:opacity 150ms ease-in-out}
.pricing-terms .pricing-savings.is-empty{opacity:0}
@media(prefers-reduced-motion:reduce){.pricing-terms .pricing-savings{transition:none}}