@property --fxa{ syntax:"<angle>"; inherits:false; initial-value:0deg }


.pill.mg{ transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease),
  transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s }
.pill.mg .mg-l{ display:inline-block; transition:transform .45s cubic-bezier(.34,1.56,.64,1) }
.pill.mg.mg-on{ position:relative; z-index:2; box-shadow:0 12px 40px rgba(127,208,255,.32) }



#plans .plan > :not(.fx-spot):not(.fx-border){ position:relative; z-index:1 }
.fx-spot{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(127,208,255,.11), transparent 60%) }
#plans .plan:hover .fx-spot{ opacity:1 }
@media (hover:none){ .fx-spot{ display:none } }


.fx-ring{ position:relative; isolation:isolate; display:flex }
.fx-ring > .plan{ flex:1; background:#0f1016; border-color:transparent }
.fx-halo{ position:absolute; inset:-22px; z-index:-1; border-radius:2.2rem; pointer-events:none;
  background:conic-gradient(from var(--fxa), #7fd0ff, #5b8bff, #ff6f7d, #7fd0ff);
  filter:blur(36px); opacity:0; transition:opacity .9s; animation:fxSpin 6s linear infinite }
.fx-ring:has(.plan.in) .fx-halo{ opacity:.2 }

.fx-border{ position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--fxa), #7fd0ff, #5b8bff, #ff6f7d, #7fd0ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:fxSpin 6s linear infinite }
@keyframes fxSpin{ to{ --fxa:360deg } }


#plans .plan .price .fx-odo, #plans .plan .price .fx-odo span{ font:inherit; color:inherit; white-space:nowrap }
.fx-odo{ display:inline-flex; height:1.15em; line-height:1.15em; overflow:hidden; vertical-align:baseline }
.fx-d{ display:flex; flex-direction:column; transition:transform 1.6s cubic-bezier(.16,1,.3,1) }
.fx-d b{ display:block; height:1.15em; font-weight:inherit }
.fx-sp{ display:inline-block; width:.2em }


#plans .plan li.fx-li::before{ display:none }
.fx-ck{ position:absolute; left:-.05rem; top:.3rem; width:1rem; height:1rem; overflow:visible }
.fx-ck path{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:16; stroke-dashoffset:16; transition:stroke-dashoffset .5s cubic-bezier(.2,0,0,1);
  transition-delay:calc(var(--k, 0) * 80ms + 250ms) }
#plans .plan.fx-in .fx-ck path{ stroke-dashoffset:0 }


@media (prefers-reduced-motion: reduce){
  .fx-halo, .fx-border{ animation:none }
  .fx-ck path{ transition:none; stroke-dashoffset:0 }
}