.generation-checkout{box-sizing:border-box;width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:24px;border:1px solid #ded6ef;border-radius:24px;background:#fff;color:#242036;box-shadow:0 24px 100px #21153b40;overflow:auto}
.generation-checkout::backdrop{background:#211a35a6;backdrop-filter:blur(4px)}
.checkout-heading{position:relative;padding:0 44px;text-align:center}.generation-checkout .checkout-heading h2{margin:0;color:#211332;font:700 36px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.7px}.checkout-heading .checkout-close{position:absolute;right:0;top:0}
.generation-checkout .checkout-close{min-width:40px;min-height:40px;padding:4px;border:0;background:#f0edf5;color:#292334;font-size:26px;border-radius:50%;cursor:pointer}
.checkout-terms,.checkout-status{line-height:1.55;color:#615775}.checkout-status:empty{display:none}
.generation-checkout form{display:grid;gap:18px;margin-top:20px}.generation-checkout label{display:grid;gap:8px}
.generation-checkout input{box-sizing:border-box;width:100%;font:inherit;border:1px solid #b4a9c9;border-radius:10px;padding:12px;background:white;color:#242036}
.generation-checkout .primary{padding:13px 20px;border:0;border-radius:14px;background:#6732e7;color:#fff;font:600 16px/1.3 system-ui;cursor:pointer}.generation-checkout button:disabled{opacity:.6}
.stripe-checkout{min-height:160px}.generation-checkout [hidden]{display:none!important}
.generation-checkout .checkout-back{margin-top:12px;background:#fff;color:#6732e7;border:1px solid #ded6ef;box-shadow:none}
.checkout-disclosure{padding:14px 16px;background:#f4efff;border-radius:12px;font-size:14px;line-height:1.6;color:#584972}.checkout-success-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin-top:22px;background:#eee6ff;color:#6732e7;font-size:28px}.generation-checkout p{line-height:1.65;overflow-wrap:anywhere}.generation-checkout .checkout-status{font-size:14px}
@media(max-width:600px){.generation-checkout{padding:18px 12px;border-radius:18px}.checkout-heading{padding:0 36px}.generation-checkout .checkout-heading h2{font-size:28px;letter-spacing:-.5px}.generation-checkout .checkout-close{min-width:32px;min-height:32px;font-size:22px}}

.checkout-benefits{list-style:none;padding:0 0 22px;margin:20px auto 24px;max-width:580px;border-bottom:1px solid #e9e0fc;color:#292335;display:grid;gap:12px;font:400 18px/1.45 Arial,sans-serif}.checkout-benefits li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:16px}.checkout-benefit-check{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#8c49ff,#6325f5);color:#fff;font:700 20px/1 Arial,sans-serif;box-shadow:inset 0 0 0 1px #ffffff20}.checkout-benefits[hidden]{display:none}
@media(max-width:600px){.checkout-benefits{font-size:15px;margin:20px 4px;gap:12px;padding-bottom:20px}.checkout-benefits li{grid-template-columns:24px minmax(0,1fr);gap:12px}.checkout-benefit-check{width:24px;height:24px;font-size:18px}}
.checkout-loading{padding:24px 0;color:#615775;font:400 14px/1.55 Arial,Helvetica,sans-serif}
.checkout-payment-body{position:relative;min-width:0}
/* Reserve the full form slot without drawing a competing skeleton. Stripe's
   own loading UI remains visible and is never covered or readiness-gated. */
.checkout-layout:not(.checkout-message) .checkout-payment-body{min-height:680px}
.checkout-pending .checkout-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Keep Stripe's secure payment form intact inside the responsive offer layout. */
.generation-checkout.checkout-layout{width:min(1120px,calc(100vw - 32px));padding:0;border-radius:24px;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
/* Preserve wheel, touch and keyboard scrolling without native scrollbar chrome. */
.checkout-layout,.checkout-layout .checkout-offer,.checkout-layout .checkout-payment-panel{scrollbar-width:none}
.checkout-layout::-webkit-scrollbar,.checkout-layout .checkout-offer::-webkit-scrollbar,.checkout-layout .checkout-payment-panel::-webkit-scrollbar{display:none}
.checkout-layout>.checkout-close{position:absolute;z-index:2;right:12px;top:12px;background:#fff;color:#292334}
.checkout-columns{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);align-items:stretch}
.checkout-offer{min-width:0;padding:64px 32px 40px;background:linear-gradient(135deg,#f5efff,#eee6fc);display:flex;flex-direction:column;justify-content:flex-start;border-radius:23px 0 0 23px}
.checkout-layout .checkout-heading{padding:0;text-align:left}
.checkout-layout .checkout-heading h2{font:700 30px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.7px}
.checkout-layout .checkout-benefits{max-width:none;width:100%;margin:32px 0 0;padding:0 0 30px;gap:23px;border-bottom:1px solid #ded1f5;font:400 17px/1.5 Arial,Helvetica,sans-serif}
.checkout-layout .checkout-benefits li{gap:13px}
.checkout-layout .checkout-price{margin:24px 0 0;color:#796092;line-height:1.4;font-size:18px}
.checkout-price strong{color:#211332;font:700 26px/1.3 Arial,Helvetica,sans-serif;letter-spacing:-.5px}
.checkout-payment-panel{min-width:0;padding:64px 24px 28px;background:white;border-radius:0 23px 23px 0}
.checkout-payment-heading{margin:0 0 24px;color:#211332;font:700 26px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.6px}
.checkout-layout .stripe-checkout{min-width:0;width:100%}
.checkout-layout .checkout-status{margin-bottom:0}
.checkout-layout.checkout-message{width:min(580px,calc(100vw - 24px))}
.checkout-message .checkout-columns{grid-template-columns:minmax(0,1fr)}
.checkout-message .checkout-offer{padding:32px 64px 0 24px;background:#fff;border-radius:23px 23px 0 0}
.checkout-message .checkout-benefits,.checkout-message .checkout-price,.checkout-message .checkout-payment-heading{display:none}
.checkout-message .checkout-payment-panel{padding:12px 24px 28px;border-radius:0 0 23px 23px}
/* Stripe grows to fit its full form. Bound the desktop columns to the viewport
   so that growth scrolls the form, rather than stretching the benefits panel. */
@media(min-width:761px){
 .generation-checkout.checkout-layout:not(.checkout-message){overflow:hidden}
 .checkout-layout:not(.checkout-message) .checkout-columns{height:calc(100dvh - 26px);max-height:calc(100dvh - 26px)}
 .checkout-layout:not(.checkout-message) .checkout-offer,
 .checkout-layout:not(.checkout-message) .checkout-payment-panel{box-sizing:border-box;min-height:0;max-height:calc(100dvh - 26px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
 .checkout-layout:not(.checkout-message) .checkout-offer{padding:40px 32px}
 .checkout-layout:not(.checkout-message) .checkout-offer>*{flex-shrink:0}
 /* Auto margins center within the visible panel and collapse on short screens
    so the beginning of the benefits remains reachable when scrolling. */
 .checkout-layout:not(.checkout-message) .checkout-offer>.checkout-heading{margin-top:auto}
 .checkout-layout:not(.checkout-message) .checkout-offer>.checkout-price{margin-bottom:auto}
}
.generation-checkout.checkout-layout:focus{outline:none}
@media(max-width:760px){
 .generation-checkout.checkout-layout{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:18px}
 .checkout-columns{grid-template-columns:minmax(0,1fr)}
 .checkout-layout>.checkout-close{top:8px;right:8px;min-width:32px;min-height:32px;font-size:22px}
 .checkout-offer{padding:44px 20px 22px;border-radius:17px 17px 0 0}
 .checkout-layout .checkout-heading h2{font-size:26px;letter-spacing:-.6px}
 .checkout-layout .checkout-benefits{font-size:14px;margin:22px 0 0;gap:12px;padding-bottom:20px}
 .checkout-layout .checkout-benefits li{grid-template-columns:24px minmax(0,1fr);gap:10px}
 .checkout-layout .checkout-benefit-check{width:24px;height:24px;font-size:18px}
 .checkout-layout .checkout-price{margin-top:16px;font-size:16px}
 .checkout-price strong{font-size:23px}
 .checkout-payment-panel{padding:24px 12px 20px;border-radius:0 0 17px 17px}
 .checkout-payment-heading{font-size:23px;margin:0 8px 20px}
 .checkout-message .checkout-offer{padding:44px 20px 0}
 .checkout-message .checkout-payment-panel{padding:12px 20px 24px}
}