@property --progress{syntax:"<number>";inherits:true;initial-value:0}.Pricing__subheading{max-width:800px}.Pricing__card{background-color:var(--white);--field-bg:var(--offwhite);max-width:1500px;box-shadow:hsla(var(--black-h), var(--black-s), var(--black-l), .3) 0px 48px 100px 0px;border:1px solid var(--lightgrey);border-radius:1rem;flex-direction:column;margin:0 auto;display:flex}@container layout (width>=992px){.Pricing__card{flex-direction:row}}.Pricing__card hr{background-color:var(--lightishgrey)}.Pricing__config{align-items:center;min-height:25rem;display:flex;position:relative}@container layout (width>=992px){.Pricing__config{flex:1;min-height:0}}.Pricing__field{flex-direction:column;justify-content:end;display:flex;position:absolute;top:1.5rem;right:1.5rem}@container layout (width>=992px){.Pricing__field{top:3rem;right:3rem}}.Pricing__bars{gap:.5rem;transition:--progress .3s cubic-bezier(.2,.6,.4,1);display:flex;position:absolute;inset:1rem}@container layout (width>=992px){.Pricing__bars{gap:1rem}}.Pricing__bar{width:100%;color:inherit;background:0 0;border:0;padding:0;position:relative}.Pricing__bar:focus-visible{outline:none}.Pricing__bar:focus-visible>span{outline:2px solid var(--primary);outline-offset:2px}.Pricing__bar>span{border-radius:.5rem;flex-direction:column;justify-content:flex-end;align-items:center;width:100%;padding:1rem .5rem;display:flex;position:absolute;bottom:0;overflow:hidden}@container layout (width>=992px){.Pricing__bar>span{padding:2rem 1rem}}.Pricing__bar>span:before{content:"";background:hsla(var(--black-h), var(--black-s), var(--black-l), .06);opacity:calc(.4 + .6 * clamp(0, var(--progress) - var(--i), 1));position:absolute;inset:0}.Pricing__bar>span:after{content:"";inset:0;right:calc(100% - clamp(0, var(--progress) - var(--i), 1) * 100%);background:linear-gradient(190deg,#0b3ed5 0%,#0a39e6 11%,#0633f9 22%,#1235fd 33%,#1f35ff 44%,#2e38ff 56%,#3838ff 67%,#4f42ff 78%,#644cff 89%,#7857ff 100%) 0 0/700% 100%;background-position:calc(var(--i) * -100%) 0;border-radius:.5rem;position:absolute;box-shadow:inset 0 0 0 2px #2e5bff59,0 0 12px #2e5bff1a}.Pricing__bar>span span{z-index:1;opacity:calc(.5 + .5 * clamp(0, (var(--progress) - var(--i)) * 1000, 1));text-shadow:0 1px 3px #00000080;color:#fff;position:relative}:not([data-theme=dark]) .Pricing__bar>span span{--active:clamp(0, (var(--progress) - var(--i)) * 1000, 1);color:color-mix(in srgb, var(--darkishgrey) calc((1 - var(--active)) * 100%), #fff);text-shadow:0 1px 3px rgba(0, 0, 0, calc(.5 * var(--active)))}.PricingInvoice{box-shadow:hsla(var(--black-h), var(--black-s), var(--black-l), .07) 0px 1px 2px, hsla(var(--black-h), var(--black-s), var(--black-l), .07) 0px 2px 4px, hsla(var(--black-h), var(--black-s), var(--black-l), .07) 0px 4px 8px, hsla(var(--black-h), var(--black-s), var(--black-l), .07) 0px 8px 16px, hsla(var(--black-h), var(--black-s), var(--black-l), .07) 0px 16px 32px, hsla(var(--black-h), var(--black-s), var(--black-l), .07) 0px 32px 64px;border-radius:1rem}@container layout (width>=992px){.PricingInvoice{min-width:32rem;margin:-1rem -1rem -1rem 0}}.PricingInvoice .h0{font-size:4rem}.PricingInvoice__accent{background:linear-gradient(65deg,#0b3ed5 0%,#0a39e6 11%,#0633f9 22%,#1235fd 33%,#1f35ff 44%,#2e38ff 56%,#3838ff 67%,#4f42ff 78%,#644cff 89%,#7857ff 100%);border-radius:1rem;padding:.75rem}@container layout (width>=992px){.PricingInvoice__accent{padding:1rem}}.PricingInvoice__accent>div{background:var(--white);box-shadow:var(--shadow-sm);border-radius:.6rem}.PricingInvoice__accent>div>div{align-items:center;gap:.5rem;padding:1.25rem 2rem;display:flex}.PricingInvoice__accent>div>div>.Qty{font-variant-numeric:tabular-nums;padding:0 .25rem;line-height:1.2}.PricingInvoice__price{font-size:3rem}.PricingInvoice table td{font-variant-numeric:tabular-nums;padding:.4rem 1rem;font-weight:700}.PricingInvoice table td:nth-child(2){min-width:10rem}[data-theme=dark] .Pricing__card{box-shadow:hsla(var(--lightishgrey-h), var(--lightishgrey-s), var(--lightishgrey-l), .15) 0px 48px 100px 0px}[data-theme=dark] .PricingInvoice,[data-theme=dark] .PricingInvoice__accent>div{box-shadow:hsla(var(--lightishgrey-h), var(--lightishgrey-s), var(--lightishgrey-l), .035) 0px 1px 2px, hsla(var(--lightishgrey-h), var(--lightishgrey-s), var(--lightishgrey-l), .035) 0px 2px 4px, hsla(var(--lightishgrey-h), var(--lightishgrey-s), var(--lightishgrey-l), .035) 0px 4px 8px, hsla(var(--lightishgrey-h), var(--lightishgrey-s), var(--lightishgrey-l), .035) 0px 8px 16px, hsla(var(--lightishgrey-h), var(--lightishgrey-s), var(--lightishgrey-l), .035) 0px 16px 32px, hsla(var(--lightishgrey-h), var(--lightishgrey-s), var(--lightishgrey-l), .035) 0px 32px 64px}
