.plan{position:relative;isolation:isolate;overflow:hidden;border-radius:24px}
.plan.credit-pack{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.plan.credit-pack:focus-within{border-color:#92929f;box-shadow:0 12px 30px #0004,0 0 0 1px #ffffff12}
@media(hover:hover) and (pointer:fine){.plan.credit-pack:hover{transform:translateY(-4px);border-color:#92929f;box-shadow:0 18px 40px #0006,0 0 0 1px #ffffff12}}
@media(prefers-reduced-motion:reduce){.plan.credit-pack{transition:none}.plan.credit-pack:hover{transform:none}}
.credit-pack ul{border-top-color:#303036}
/* Purchase actions: clear enabled, loading and unavailable states. */
.credit-pack .button[data-checkout]{min-height:50px;background:#e21e38;border:1px solid #f0475d;color:#fff;font-size:15px;font-weight:700;box-shadow:0 4px 16px #e21e3826;transition:background .18s,border-color .18s,transform .18s;opacity:1}
.credit-pack .button[data-checkout]:enabled:hover{background:#fb2945;border-color:#ff7a8b;transform:translateY(-2px)}
.credit-pack .button[data-checkout]:enabled:active{transform:translateY(0);background:#c81830}
.credit-pack .button[data-checkout]:focus-visible{outline:3px solid #fff;outline-offset:4px}
.credit-pack .button[data-checkout]:disabled{background:#39232a;border-color:#75505a;color:#e4cbd1;box-shadow:none;cursor:not-allowed}
.credit-pack .button[data-checkout][aria-busy=true]{background:#8e2033;border-color:#ba3c51;color:#fff;cursor:wait}
@media(prefers-reduced-motion:reduce){.credit-pack .button[data-checkout]{transition:none;transform:none!important}}
.checkout-message:empty{display:none}.checkout-message{margin:18px 0;color:#f5c5cc;text-align:center}
.credit-pack .button[data-checkout="Starter"]:is(:enabled,[data-catalog-loading]){background:#245bd6;border-color:#5286ff;box-shadow:0 4px 16px #245bd630}
.credit-pack .button[data-checkout="Starter"]:enabled:hover{background:#306bea;border-color:#8ab0ff}
.credit-pack .button[data-checkout="Creator"]:is(:enabled,[data-catalog-loading]){background:#7540c8;border-color:#a073eb;box-shadow:0 4px 16px #7540c830}
.credit-pack .button[data-checkout="Creator"]:enabled:hover{background:#8850df;border-color:#c4a0ff}
.credit-pack .button[data-checkout="Studio"]:is(:enabled,[data-catalog-loading]){background:#cf213c;border-color:#f04765;box-shadow:0 4px 16px #cf213c30}
.credit-pack .button[data-checkout="Studio"]:enabled:hover{background:#e72e4c;border-color:#ff8a9c}
/* Distinct pack treatments, shared by the homepage and pricing page. */
.credit-pack-grid #pack-starter{--pack-accent:#80b7ff;border-color:#35465d;background:linear-gradient(150deg,#1a2638 0%,#16161b 48%)}
.credit-pack-grid #pack-creator{--pack-accent:#c3a2ff;border-color:#55436d;background:radial-gradient(ellipse at 50% 0%,#342345 0%,#16161b 65%)}
.credit-pack-grid #pack-studio{--pack-accent:#edc889;border-color:#605039;background:linear-gradient(145deg,#30291f 0%,#16161b 52%)}
.credit-pack-grid .credit-pack h3{color:var(--pack-accent)}
.credit-pack-grid .credit-pack::before{content:"";position:absolute;top:0;left:30px;right:30px;height:2px;background:var(--pack-accent);opacity:.65;pointer-events:none}
.credit-pack-grid .credit-pack::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s ease,transform .55s ease}
#pack-starter::after{background:linear-gradient(0deg,#548ee51c,transparent 55%);transform:translateY(15%)}
#pack-creator::after{background:radial-gradient(ellipse at 50% 0%,#aa68e52e,transparent 70%)}
#pack-studio::after{background:linear-gradient(110deg,transparent 25%,#f2d29814 48%,transparent 70%);transform:translateX(-100%)}
.credit-pack-grid .credit-pack:focus-within{border-color:var(--pack-accent);box-shadow:0 16px 36px #0005}
.credit-pack-grid .credit-pack:focus-within::after{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){
 .credit-pack-grid #pack-starter:hover{transform:translateY(-6px);border-color:#80b7ff;box-shadow:0 16px 32px #0006,0 0 20px #548ee51a}
 .credit-pack-grid #pack-creator:hover{transform:scale(1.015);border-color:#c3a2ff;box-shadow:0 18px 40px #0006,0 0 28px #a570df26}
 .credit-pack-grid #pack-studio:hover{transform:none;border-color:#edc889;box-shadow:0 18px 40px #0006,0 0 24px #d6ac601f}
 .credit-pack-grid .credit-pack:hover::after{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
 .credit-pack-grid .credit-pack,.credit-pack-grid .credit-pack::after{transition:none}
 .credit-pack-grid #pack-starter:hover,.credit-pack-grid #pack-creator:hover,.credit-pack-grid #pack-studio:hover{transform:none}
}

.credit-pack .button[data-catalog-loading]{color:#fff;cursor:wait}
/* Homepage links share the checkout buttons' pack colors and sizing. */
.credit-pack-grid .credit-pack>a.button{min-height:50px;color:#fff;font-size:15px;font-weight:700;transition:background .18s,border-color .18s,transform .18s}
.credit-pack-grid #pack-starter>a.button{background:#245bd6;border-color:#5286ff;box-shadow:0 4px 16px #245bd630}
.credit-pack-grid #pack-creator>a.button{background:#7540c8;border-color:#a073eb;box-shadow:0 4px 16px #7540c830}
.credit-pack-grid #pack-studio>a.button{background:#cf213c;border-color:#f04765;box-shadow:0 4px 16px #cf213c30}
@media(hover:hover) and (pointer:fine){
 .credit-pack-grid #pack-starter>a.button:hover{background:#306bea;border-color:#8ab0ff;transform:translateY(-2px)}
 .credit-pack-grid #pack-creator>a.button:hover{background:#8850df;border-color:#c4a0ff;transform:translateY(-2px)}
 .credit-pack-grid #pack-studio>a.button:hover{background:#e72e4c;border-color:#ff8a9c;transform:translateY(-2px)}
}
.credit-pack-grid .credit-pack>a.button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.credit-pack-grid .credit-pack>a.button{transition:none;transform:none!important}}
