.subscription-card{width:100%}
.subscription-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.subscription-heading h2{margin-top:8px}
.subscription-facts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:22px 0 30px}
.subscription-facts dt{font-size:.88rem;color:var(--muted,#6a7970); color: var(--muted,light-dark(#6a7970, #96a59c));margin-bottom:7px}
.subscription-facts dd{margin:0;font-weight:650;font-size:1.12rem}
.ai-usage{padding:22px;background:#f1f6f2; background: light-dark(#f1f6f2, #1e211f);border:1px solid #dfe9e1; border: 1px solid light-dark(#dfe9e1, #222823);border-radius:12px}
.ai-usage-label{display:flex;justify-content:space-between;gap:12px;font-weight:600;margin-bottom:12px}
.ai-usage label{margin:0}
.ai-usage progress{display:block;appearance:none;width:100%;height:10px;border:0;border-radius:99px;background:#dce7de; background: light-dark(#dce7de, #232924);overflow:hidden;accent-color:#2d624b; accent-color: light-dark(#2d624b, #92c9ae);}
.ai-usage progress::-webkit-progress-bar{background:#dce7de; background: light-dark(#dce7de, #232924);border-radius:99px}
.ai-usage progress::-webkit-progress-value{background:#2d624b; background: light-dark(#2d624b, #92c9ae);border-radius:99px}
.ai-usage progress::-moz-progress-bar{background:#2d624b; background: light-dark(#2d624b, #92c9ae);border-radius:99px}
.ai-usage .hint{margin:12px 0 0}
.ai-usage-disabled{color:#7a817d; color: light-dark(#7a817d, #8d9490);background:#f3f4f3; background: light-dark(#f3f4f3, #202120);border-color:#e5e7e5; border-color: light-dark(#e5e7e5, #252625);}
.ai-usage-disabled progress,.ai-usage-disabled progress::-webkit-progress-bar{background:#e1e4e1; background: light-dark(#e1e4e1, #262826);accent-color:#a5aaa6; accent-color: light-dark(#a5aaa6, #595d5a);}
.ai-usage-disabled .hint{color:#7a817d; color: light-dark(#7a817d, #8d9490);}
.subscription-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:24px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}
.plan-card{display:flex;flex-direction:column;margin:0;min-width:0}
.plan-card h2{margin-top:10px}
.plan-card ul{padding-left:20px;line-height:1.7;flex:1}
.plan-card form button{width:100%}
.plan-current{border-color:#2d624b; border-color: light-dark(#2d624b, #92c9ae);box-shadow:0 0 0 1px #2d624b}
.plan-price{font-size:1.8rem;font-weight:700;letter-spacing:-.03em;margin:18px 0}
.plan-price small{display:block;font-size:.85rem;font-weight:450;letter-spacing:0;color:var(--muted,#6a7970); color: var(--muted,light-dark(#6a7970, #96a59c));margin-top:6px}
.extra-ai-card{display:flex;align-items:center;gap:28px;scroll-margin-top:28px}
.extra-ai-card>div{flex:1}
.extra-ai-card form{flex-shrink:0}
.subscription-request{padding:18px 0;border-top:1px solid #e3e9e4; border-top: 1px solid light-dark(#e3e9e4, #232624);}
.subscription-request code{overflow-wrap:anywhere}
@media(max-width:1000px){.plan-grid{grid-template-columns:1fr}.extra-ai-card{display:block}.extra-ai-card form{margin-top:20px}}
@media(max-width:600px){.subscription-heading{flex-direction:column}.subscription-facts{grid-template-columns:1fr;gap:20px}.ai-usage{padding:18px}.subscription-actions{flex-direction:column}.subscription-actions .button{width:100%;text-align:center}.plan-price{font-size:1.55rem}.extra-ai-card button{width:100%;white-space:normal}}
/* Card payment form with the terms consent */
.pay-form{display:grid;gap:12px;max-width:340px}
.extra-ai-card .pay-form{flex:0 1 340px;flex-shrink:1}
.pay-consent{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;line-height:1.45;color:var(--muted)}
.pay-consent input{margin-top:3px;flex-shrink:0}
.plan-card .pay-form{max-width:none}
.plan-compare{margin:28px 0}
.plan-compare table{width:100%;border-collapse:collapse}
.plan-compare th,.plan-compare td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line,#e5e7eb); border-bottom: 1px solid var(--line,light-dark(#e5e7eb, #242528));}
.plan-compare thead th small,.plan-compare td small{display:block;font-weight:400;color:var(--muted,#6b7280); color: var(--muted,light-dark(#6b7280, #9ea5b4));font-variant-numeric:tabular-nums}
.plan-compare thead th.plan-current{color:var(--accent,#2563eb); color: var(--accent,light-dark(#2563eb, #7ca6f7));}
.plan-compare .compare-addon{margin-top:4px;font-size:.85em}
/* Card payment side panel (Stripe Embedded Checkout). Slides in from the right; exit is quicker than entry. */
.pay-panel{position:fixed;inset:0 0 0 auto;margin:0;width:min(32rem,100vw);max-width:none;height:100dvh;max-height:none;padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;border:0;border-left:1px solid var(--line);border-radius:1rem 0 0 1rem;background:var(--white); background: var(--light-dark(white, #1a2420));color:var(--ink);box-shadow:-18px 0 70px #24352e33;transform:translateX(100%);transition:transform 180ms var(--ease-out),display 180ms allow-discrete,overlay 180ms allow-discrete}
.pay-panel[open]{transform:none;transition:transform 260ms cubic-bezier(.32,.72,0,1),display 260ms allow-discrete,overlay 260ms allow-discrete}
@starting-style{.pay-panel[open]{transform:translateX(100%)}}
.pay-panel::backdrop{background:transparent;transition:background 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
.pay-panel[open]::backdrop{background:#12271e80}
@starting-style{.pay-panel[open]::backdrop{background:transparent;}}
.pay-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.75rem}
.pay-panel-head h2{margin:.35rem 0 .15rem;font-size:1.2rem}
.pay-panel-head p{margin:0}
.pay-panel-head button{flex-shrink:0;min-width:44px;min-height:44px}
.pay-checkout{min-height:12rem}
.pay-checkout:empty{min-height:0}
.pay-panel-note{margin-top:1rem}
@media(max-width:640px){.pay-panel{border-left:0;border-radius:0}}
@media(prefers-reduced-motion:reduce){.pay-panel,.pay-panel[open]{transform:none;opacity:0;transition:opacity 160ms ease,display 160ms allow-discrete,overlay 160ms allow-discrete}.pay-panel[open]{opacity:1}@starting-style{.pay-panel[open]{opacity:0;transform:none}}}