.payment-main{padding:56px 0 80px;min-height:calc(100dvh - 280px)}
.payment-heading{max-width:760px;margin-bottom:38px}
.payment-heading h1{margin-bottom:18px;font-size:clamp(36px,5vw,58px)}
.payment-heading p{margin:0;color:var(--ink-soft)}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:56px;align-items:start}
.checkout-form{min-width:0}
.form-section{padding:26px 0;border-top:1px solid var(--ink)}
.form-section h2{margin-bottom:18px;font-size:21px;letter-spacing:-.025em}
.plan-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plan-option{position:relative;display:block;padding:18px;border:1px solid var(--line);background:var(--paper);cursor:pointer;border-radius:12px}
.plan-option:has(input:checked){border:2px solid var(--blue);padding:17px}
.plan-option input{position:absolute;opacity:0;pointer-events:none}
.plan-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.plan-option strong{display:block;margin-bottom:5px;font-size:16px}
.plan-option span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.period-options{display:flex;gap:22px;flex-wrap:wrap}
.radio-label,.check-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.radio-label input,.check-label input{width:19px;height:19px;margin:3px 0 0;accent-color:var(--blue);flex:0 0 auto}
.field{display:grid;gap:8px;max-width:520px}
.field label{font-weight:650;font-size:14px}
.field input{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--muted);border-radius:9px;background:var(--paper);color:var(--ink);font:inherit}
.field input:focus{outline:3px solid rgba(0,100,230,.22);border-color:var(--blue)}
.field small{color:var(--muted);font-size:12px}
.accept-row{margin:26px 0 20px;color:var(--ink-soft);font-size:13px;line-height:1.6}
.accept-row a{color:var(--blue)}
.checkout-submit{width:100%;border:0;cursor:pointer;font-family:inherit;font-size:15px}
.checkout-submit:disabled{cursor:not-allowed;opacity:.55;transform:none}
.order-summary{position:sticky;top:24px;padding:26px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.order-summary h2{font-size:18px;margin-bottom:22px}
.summary-line{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.summary-line span:first-child{color:var(--muted)}
.summary-line span:last-child{text-align:right;font-weight:650}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:24px 0 12px}
.summary-total strong{font-size:29px;letter-spacing:-.04em;white-space:nowrap}
.summary-old{color:var(--muted);text-decoration:line-through;font-size:13px}
.summary-discount{color:var(--blue);font-size:13px;font-weight:700}
.summary-note{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.payment-notice{margin:0 0 28px;padding:18px 20px;background:var(--paper);border-left:3px solid var(--blue);color:var(--ink-soft)}
.payment-notice[hidden]{display:none}
.form-error{min-height:26px;margin:14px 0 0;color:#9d2525;font-size:13px;overflow-wrap:anywhere}
.payment-status{max-width:760px;padding:34px 0;border-top:3px solid var(--ink)}
.status-symbol{display:grid;place-items:center;width:54px;height:54px;margin-bottom:26px;border:1px solid var(--ink);border-radius:50%;font-size:22px;font-weight:700}
.payment-status[data-state="paid"]{border-top-color:var(--blue)}
.payment-status[data-state="paid"] .status-symbol{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.payment-status h2{font-size:clamp(30px,4vw,44px)}
.payment-status p{max-width:650px;color:var(--ink-soft)}
.payment-details{margin:28px 0;border-top:1px solid var(--line)}
.payment-details .summary-line{font-size:14px}
.status-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.status-actions .button{cursor:pointer;font-family:inherit;font-size:14px}
.status-actions .secondary{background:transparent;color:var(--blue)}
.status-actions .secondary:hover{background:var(--sage-50)}
.secure-note{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
[hidden]{display:none!important}
@media(max-width:800px){.checkout-layout{grid-template-columns:1fr;gap:28px}.order-summary{position:static;grid-row:1}.payment-main{padding-top:40px}}
@media(max-width:520px){.plan-options{grid-template-columns:1fr}.payment-main{padding:32px 0 56px}.order-summary{padding:20px}.form-section{padding:22px 0}.status-actions{flex-direction:column}.status-actions .button{width:100%}.summary-total strong{font-size:26px}}