/* Pricing-only theme from Designs/eztest-desmos-workspace. */
.billing-surface {
  --design-primary:var(--ezp-brand-strong); --design-background:#faf9f7; --design-surface:#fff;
  --design-text:#111; --design-muted:#555a60; --design-accent:#f6e9c8;
  --design-radius:5px; --design-font:"Inter",system-ui,sans-serif;
  font-family:var(--design-font); color:var(--design-text); background:var(--design-background); min-height:100%;
}
.billing-page {max-width:1200px;margin:0 auto;padding:44px 28px 48px;line-height:1.5}
.billing-header {text-align:center;margin:0 auto 32px;max-width:850px}
.billing-title,.billing-card h2,.billing-faq h2,.billing-confirm h2 {font-family:var(--portal-font-heading,"Playfair Display",serif);font-variant-numeric:lining-nums;font-weight:800}
.billing-title {font-size:46px;line-height:1.1;margin:0 0 18px;text-wrap:balance}
.billing-lead {font-size:16px;line-height:1.65;color:#4e5359;margin:auto;max-width:680px}
.billing-cards {display:grid;grid-template-columns:1fr 1fr 1.12fr;gap:20px;align-items:stretch}
.billing-card {border:1px solid #d4d4d0;background:var(--design-surface);border-radius:var(--design-radius);display:flex;flex-direction:column;min-width:0;padding:26px 24px;overflow-wrap:anywhere}
.billing-badge {align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid #ccd1d5;border-radius:2px;padding:5px 9px;line-height:1.3;color:#384854;background:#fff}
.billing-card h2 {font-size:30px;margin:16px 0 8px}
.billing-price {font-size:38px;font-weight:800;line-height:1.15;margin:0;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.billing-price span {font-size:15px;font-weight:500;letter-spacing:0;white-space:nowrap}
.billing-billing {font-size:13px;font-weight:700;margin:8px 0 0}
.billing-desc {font-size:14px;color:var(--design-muted);margin:14px 0 0;line-height:1.5}
.billing-terms {font-size:13px;line-height:1.65;margin:14px 0 0;padding-top:14px;border-top:1px solid #e3e4e4;color:#444b53}
.billing-terms strong {display:block}
.billing-features {list-style:none;padding:18px 0 0;margin:18px 0 24px;border-top:1px solid #e3e4e4;display:grid;gap:12px;font-size:14px;line-height:1.5}
.billing-features li {padding-left:22px;position:relative}
.billing-features li:before {content:"✓";position:absolute;left:0;color:var(--design-primary);font-weight:800}
.billing-actions {margin-top:auto;display:grid;gap:8px}
.billing-action-note {text-align:center;font-size:12px;margin:0;color:var(--design-muted)}
.billing-btn {min-height:46px;height:auto;padding:11px 16px;display:inline-flex;justify-content:center;align-items:center;text-align:center;line-height:1.4;gap:8px;text-decoration:none;font:700 14px/1.4 var(--design-font);border:1px solid var(--design-primary);border-radius:3px;background:#fff;color:var(--design-primary);cursor:pointer;white-space:normal}
.billing-btn-primary {background:var(--design-primary);color:#fff}
.billing-surface .billing-btn:disabled {background:#e9ecef;border-color:#aeb7bf;color:#4a5660;cursor:not-allowed;opacity:1}
.billing-card-yearly {background:var(--design-primary);border:2px solid var(--design-primary);color:#fff;box-shadow:0 18px 36px rgb(15 43 70 / .14)}
.billing-card-yearly .billing-badge,.billing-card-yearly .billing-btn {background:var(--design-accent);color:var(--design-primary);border-color:var(--design-accent)}
.billing-card-yearly .billing-desc,.billing-card-yearly .billing-terms,.billing-card-yearly .billing-action-note {color:#e2e8ee}
.billing-card-yearly .billing-terms,.billing-card-yearly .billing-features {border-color:#486077}
.billing-card-yearly .billing-features li:before {color:var(--design-accent)}
.billing-savings {padding:14px 16px;border:1px solid #6e8091;border-radius:3px;margin-top:18px;background:var(--ezp-brand-deep)}
.billing-savings strong {font-size:29px;font-weight:800;line-height:1.1;display:block;letter-spacing:-.02em;color:var(--design-accent)}
.billing-savings p {font-size:13px;line-height:1.5;margin:6px 0 0;color:#fff}
.billing-checkout-note {text-align:center;font-size:13px;color:var(--design-muted);margin:20px auto 0;max-width:800px}
.billing-account {margin:0 0 24px;font-size:14px}
.billing-banner,.billing-callout {border-radius:3px;padding:12px 14px;margin:12px 0;font-size:14px;line-height:1.65}
.billing-banner-info {background:#eef1f4;color:var(--design-primary)}
.billing-banner-warn {background:#fbf4e4;color:#614714}
.billing-banner-err {background:#fff1ef;color:#9b2117}
.billing-callout-ok {background:#edf5ef;color:#174b2b}
.billing-note {color:var(--design-muted);font-size:14px;margin:8px 0}
.billing-status {display:flex;align-items:center;gap:10px;font-size:14px}
.billing-spinner {width:22px;height:22px;border-radius:50%;border:3px solid #e2e1dc;border-top-color:var(--design-primary);display:inline-block;animation:billing-spin 1s linear infinite}
@keyframes billing-spin {to {transform:rotate(360deg)}}
.billing-faq {display:grid;grid-template-columns:1fr 1.6fr;gap:40px;margin-top:52px;border-top:1px solid #d4d4d0;padding-top:28px}
.billing-faq h2 {font-size:28px;margin:0 0 10px}
.billing-faq p {font-size:14px;color:#444b53}
.billing-faq a {color:var(--design-primary);text-underline-offset:3px}
.billing-faq details {border:1px solid #d4d4d0;background:#fff;border-radius:3px;padding:4px 18px;margin-bottom:10px}
.billing-faq summary {font-size:14px;font-weight:700;cursor:pointer;padding:14px 0;min-height:48px}
.billing-faq details p {margin:0 0 16px}
.billing-confirm {border:1px solid #d4d4d0;border-radius:5px;max-width:calc(100vw - 32px);width:460px;padding:26px;box-shadow:0 24px 60px rgb(0 0 0 / .25);color:#111;background:#fff;font-family:var(--design-font)}
.billing-confirm::backdrop {background:rgb(15 43 70 / .45)}
.billing-confirm h2 {font-size:25px;margin:0 0 12px}
.billing-confirm p {font-size:14px;line-height:1.65}
.billing-confirm-actions {display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.billing-confirm .billing-btn-primary {background:var(--design-primary);color:#fff;border-color:var(--design-primary)}
.billing-surface :is(a,button,summary):focus-visible {outline:3px solid var(--ezp-brand);outline-offset:4px}
.billing-card-yearly :is(a,button):focus-visible {outline-color:#fff}
@media(max-width:900px) and (min-width:601px) {
  .billing-cards {grid-template-columns:1fr 1fr}
  .billing-card-yearly {grid-column:1/-1}
}
@media(max-width:600px) {
  .billing-page {padding:28px 18px 32px}
  .billing-header {margin-bottom:28px}
  .billing-title {font-size:34px}
  .billing-lead {font-size:15px}
  .billing-cards,.billing-faq {grid-template-columns:minmax(0,1fr);gap:18px}
  .billing-card {padding:24px}
  .billing-faq {margin-top:36px;padding-top:24px}
}
@media(prefers-reduced-motion:reduce) {.billing-spinner {animation:none}}

.billing-btn-primary:not(:disabled):hover{background:var(--ezp-brand-pressed);border-color:var(--ezp-brand-pressed)}
.billing-btn-primary:not(:disabled):active{background:var(--ezp-brand-deep)}
.billing-card-yearly .billing-btn:not(:disabled):hover{background:#fff;border-color:#fff}