.billing-page{background:var(--bg);min-height:100vh;color:var(--ink)}.billing-shell{width:100%;max-width:980px;margin:0 auto;padding:28px 28px 64px}.billing-eyebrow{color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:600}.billing-head h1{font-family:var(--font-display), sans-serif;letter-spacing:-.03em;margin:0 0 8px;font-size:clamp(26px,4vw,34px);font-weight:650}.billing-head p{color:var(--muted);max-width:52ch;margin:0 0 28px}.billing-interval{background:color-mix(in oklch, var(--abyss) 6%, var(--mist));border:1px solid var(--line);border-radius:999px;gap:4px;margin-bottom:16px;padding:4px;display:inline-flex}.billing-interval-option{color:var(--muted);background:0 0;border:none;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:600;display:inline-flex}.billing-interval-option.active{background:var(--surface-elevated);color:var(--ink);box-shadow:0 1px 2px #00000014;box-shadow:0 1px 2px lab(0% 0 0/.08)}.billing-save-badge{letter-spacing:.04em;text-transform:uppercase;background:var(--water-soft);color:var(--water-deep);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:700}.plan-picker{grid-template-columns:1fr;gap:10px;margin-bottom:20px;display:grid}.plan-picker-option{background:var(--surface-elevated);border:1px solid var(--line);text-align:left;border-radius:14px;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;transition:border-color .15s,box-shadow .15s;display:flex}.plan-picker-option.active{border-color:var(--water);box-shadow:0 0 0 3px var(--water-soft)}.plan-picker-name{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600}.plan-picker-option.active .plan-picker-name{color:var(--water-deep)}.plan-picker-price{font-family:var(--font-display), sans-serif;color:var(--ink);font-size:22px;font-weight:700}.plan-picker-sub{color:var(--muted);font-size:11px}.billing-free-note{color:var(--muted);margin:0 0 20px;font-size:13px}.billing-free-note a{color:var(--water-deep);font-weight:600;text-decoration:none}.billing-free-note a:hover{text-decoration:underline}.billing-grid{grid-template-columns:1fr;gap:20px;display:grid}@media (min-width:720px){.plan-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.billing-grid{grid-template-columns:1.1fr .9fr;align-items:start}}.billing-card{background:var(--surface-elevated);border:1px solid var(--line);border-radius:14px;padding:26px;transition:border-color .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}.billing-card:hover{border-color:color-mix(in oklch, var(--water) 22%, var(--line));box-shadow:0 12px 30px color-mix(in oklch, var(--abyss) 7%, transparent);transform:translateY(-2px)}.billing-card.plan-summary:hover{box-shadow:none;border-color:#0000;transform:none}.plan-summary{background:radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in oklch, var(--water) 26%, transparent), transparent 60%), var(--abyss);color:var(--mist);border:none}.plan-summary .plan-name{text-transform:uppercase;letter-spacing:.14em;opacity:.75;margin:0 0 14px;font-size:11px}.plan-summary .plan-price{font-family:var(--font-display), sans-serif;align-items:baseline;gap:6px;margin:0;font-size:40px;font-weight:700;display:flex}.plan-summary .plan-price span{opacity:.8;font-size:15px;font-weight:500}.plan-summary-sub{opacity:.72;margin:8px 0 0;font-size:12px}.plan-summary ul{gap:12px;margin:22px 0 0;padding:0;list-style:none;display:grid}.plan-summary li{opacity:.92;align-items:center;gap:10px;font-size:14px;display:flex}.plan-summary li:before{content:"";background:var(--water);border-radius:50%;flex:none;width:7px;height:7px}.billing-card h2{font-family:var(--font-display), sans-serif;margin:0 0 18px;font-size:18px}.field-label{color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:600;display:block}.card-element{background:var(--surface-elevated);border:1px solid color-mix(in oklab, var(--abyss) 10%, transparent);border-radius:6px;min-height:48px;padding:14px}.billing-text-input{background:var(--surface-elevated);border:1px solid color-mix(in oklab, var(--abyss) 10%, transparent);width:100%;color:var(--ink);letter-spacing:.02em;border-radius:6px;margin-bottom:16px;padding:14px;font-size:15px;transition:border-color .5s ease-in-out,box-shadow .5s ease-in-out}.billing-text-input:focus{border-color:var(--water);box-shadow:0 0 0 3px var(--water-soft);outline:none}.card-element.focused{border-color:var(--water);box-shadow:0 0 0 3px var(--water-soft)}.pay-button{background:var(--water-deep);color:#fff;border:none;border-radius:12px;width:100%;margin-top:20px;padding:14px 18px;font-size:15px;font-weight:600;transition:background .15s,opacity .15s}.pay-button:hover:not(:disabled){background:var(--abyss)}.pay-button:disabled{opacity:.6;cursor:not-allowed}.billing-note{color:var(--muted);text-align:center;margin-top:14px;font-size:12px}.billing-error{background:color-mix(in oklch, #c0392b 12%, var(--mist));color:#922b21;border-radius:10px;margin-top:16px;padding:12px 14px;font-size:13px}.billing-success{background:var(--water-soft);color:var(--abyss);border-radius:10px;margin-top:16px;padding:12px 14px;font-size:13px}.status-card{flex-direction:column;gap:6px;display:flex}.status-badge{background:var(--water-soft);color:var(--abyss);text-transform:capitalize;border-radius:999px;align-self:flex-start;padding:4px 12px;font-size:12px;font-weight:600}.status-badge.inactive{background:color-mix(in oklch, var(--abyss) 12%, var(--mist));color:var(--muted)}.status-meta{color:var(--muted);margin:6px 0 0;font-size:13px}.cancel-button{border:1px solid var(--line);color:var(--muted);background:0 0;border-radius:10px;align-self:flex-start;padding:10px 16px;font-size:13px}.cancel-button:hover:not(:disabled){color:#c0392b;border-color:#c0392b}.cancel-subscription-section{border-top:1px solid var(--line);flex-direction:column;gap:8px;margin-top:20px;padding-top:20px;display:flex}.cancel-subscription-section h3{font-family:var(--font-display), sans-serif;margin:0;font-size:15px;font-weight:600}.cancel-subscription-section p{color:var(--muted);max-width:48ch;margin:0;font-size:13px;line-height:1.5}.cancel-subscription-backdrop{opacity:0;pointer-events:none;transition:opacity .2s var(--ease-fluid,ease);z-index:900;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.cancel-subscription-modal{background:var(--surface-elevated);opacity:0;pointer-events:none;max-width:420px;transition:opacity .2s var(--ease-fluid,ease), transform .2s var(--ease-fluid,ease);will-change:opacity, transform;border-radius:20px;width:calc(100% - 32px);padding:28px;transform:translateY(10px)scale(.98);box-shadow:0 20px 60px #00000040}.cancel-subscription-backdrop[data-state=open]{opacity:1;pointer-events:auto}.cancel-subscription-modal[data-state=open]{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.cancel-subscription-title{font-family:var(--font-display), sans-serif;margin:0 0 10px;font-size:20px}.cancel-subscription-body{color:var(--muted);margin:0 0 22px;font-size:14px;line-height:1.55}.cancel-subscription-actions{flex-direction:column;gap:10px;display:flex}.cancel-subscription-confirm{border:1px solid var(--line);color:var(--muted);background:0 0;border-radius:12px;padding:13px 16px;font-size:14px;font-weight:600;transition:border-color .15s,color .15s}.cancel-subscription-confirm:hover:not(:disabled){color:#c0392b;border-color:#c0392b}.cancel-subscription-keep{background:var(--water-deep);color:#fff;border:none;border-radius:12px;padding:13px 16px;font-size:14px;font-weight:600;transition:background .15s}.cancel-subscription-keep:hover:not(:disabled){background:var(--abyss)}.cancel-subscription-confirm:disabled,.cancel-subscription-keep:disabled{cursor:not-allowed;opacity:.6}@media (max-width:640px){.billing-shell{padding:24px 16px 48px}}