.payment-page { background: var(--white); color: var(--black); }
.payment-preview { padding: 8px 24px; background: var(--grey-1); border-bottom: 1px solid var(--border-soft); text-align: center; font: 600 12px/1.5 var(--font-ui); letter-spacing: .03em; }
.payment-preview span { margin-left: 12px; font-weight: 400; }
.payment-header, .payment-main, .payment-footer { width: min(100% - 80px, 1040px); margin-inline: auto; }
.payment-header { display:flex; align-items:center; justify-content:space-between; padding-block:32px; border-bottom:1px solid var(--border-soft); }
.payment-header > span { font: 400 14px var(--font-ui); color:var(--grey-3); }
.payment-header .brand-lockup { width:210px; }
.payment-main { padding-block: 56px 68px; }
.payment-eyebrow { font:600 11px/1.5 var(--font-ui); letter-spacing:.14em; margin:0 0 15px; }
.payment-intro h1 { font:400 clamp(40px,5vw,58px)/1.06 var(--font-head); letter-spacing:-.035em; margin:0 0 20px; }
.payment-intro > p:last-child { max-width:540px; font:400 19px/1.55 var(--font-body); color:var(--ink-2); margin:0; }
.payment-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:48px; }
.payment-layout h2 { font:600 17px/1.4 var(--font-ui); margin:0 0 28px; }
.payment-fields { min-width:0; }
.payment-field { margin-bottom:26px; }
.payment-field label { display:block; font:600 14px/1.5 var(--font-ui); margin-bottom:8px; }
.payment-field input { width:100%; box-sizing:border-box; min-height:52px; border:1px solid var(--border); border-radius:0; padding:12px 14px; color:var(--black); background:var(--white); font:400 18px/1.4 var(--font-ui); }
.payment-field input:focus-visible { outline:2px solid var(--black); outline-offset:3px; }
.payment-field > p, .payment-help { font:400 14px/1.5 var(--font-ui); color:var(--grey-3); margin:8px 0 0; }
.payment-amount-input { position:relative; }
.payment-amount-input input { padding-left:36px; padding-right:60px; }
.payment-amount-input > span { position:absolute; top:50%; transform:translateY(-50%); font:400 18px var(--font-ui); pointer-events:none; }
.payment-amount-input > span:first-child { left:15px; }
.payment-amount-input > span:last-child { right:16px; font-size:13px; color:var(--grey-3); }
.payment-help { margin-top:32px; }
.payment-help a, .payment-footer a { text-underline-offset:3px; }
.payment-summary { border-left:1px solid var(--border-soft); padding-left:40px; min-width:0; }
.payment-summary dl { font:400 14px/1.5 var(--font-ui); margin:0; }
.payment-summary dl > div { display:flex; justify-content:space-between; gap:18px; margin-bottom:16px; }
.payment-summary dt { color:var(--grey-3); flex-shrink:0; }
.payment-summary dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.payment-total { border-top:1px solid var(--border-soft); margin-top:24px; padding-top:24px; font-family:var(--font-ui); }
.payment-total > span { font-size:14px; }
.payment-total p { margin:5px 0 25px; white-space:nowrap; }
.payment-total strong { font:500 clamp(30px,3.6vw,44px)/1.2 var(--font-ui); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.payment-total p > span { font-size:13px; color:var(--grey-3); margin-left:6px; }
#payment-submit { width:100%; display:flex; align-items:center; justify-content:space-between; min-height:52px; border:1px solid var(--black); border-radius:0; background:var(--black); color:var(--white); padding:14px 18px; font:600 15px/1.4 var(--font-ui); cursor:pointer; }
#payment-submit:hover { background:var(--ink-2); }
#payment-submit:disabled { cursor:wait; opacity:.65; }
#payment-submit:focus-visible { outline:2px solid var(--black); outline-offset:4px; }
.payment-reassurance { font:400 13px/1.6 var(--font-ui); color:var(--grey-3); margin:14px 0 0; }
.payment-error { font:400 14px/1.5 var(--font-ui); border-left:3px solid #a12d20; padding:8px 12px; color:#822317; }
.payment-notice { border:1px solid var(--border-soft); padding:18px; margin-top:28px; font:400 16px/1.5 var(--font-ui); }
.payment-footer { border-top:1px solid var(--border-soft); padding-block:24px 32px; display:flex; gap:24px; justify-content:space-between; font:400 12px/1.7 var(--font-ui); color:var(--grey-3); }
.payment-footer p { margin:0; }
[hidden] { display:none !important; }
@media(max-width:700px) {
 .payment-header,.payment-main,.payment-footer { width:calc(100% - 40px); }
 .payment-header { padding-block:24px; }
 .payment-header .brand-lockup { width:175px; }
 .payment-header > span { font-size:12px; }
 .payment-main { padding-block:36px 44px; }
 .payment-intro > p:last-child { font-size:18px; }
 .payment-break { display:none; }
 .payment-layout { grid-template-columns:1fr; gap:32px; margin-top:32px; }
 .payment-summary { border-left:0; border-top:1px solid var(--border-soft); padding:28px 0 0; }
 .payment-summary h2 { margin-bottom:22px; }
 .payment-total strong { font-size:40px; }
 .payment-footer { display:block; }
 .payment-footer a { display:inline-block; margin-top:12px; min-height:32px; }
 .payment-preview { padding-inline:12px; font-size:11px; }
}

.payment-wallet-note { border-left:2px solid var(--black); background:var(--grey-1); padding:14px 16px; margin:0 0 22px; font:400 14px/1.5 var(--font-ui); }
.payment-wallet-note strong { display:block; font-weight:600; margin-bottom:5px; }
.payment-wallet-note p { margin:0; color:var(--ink-2); }
.payment-confirmation { max-width:640px; margin-top:36px; }
#payment-status-message { font:400 19px/1.6 var(--font-body); }
#payment-receipt { border-block:1px solid var(--border-soft); padding-block:24px; margin:28px 0; font-family:var(--font-ui); }
#payment-receipt > div { display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
#payment-receipt > div + div { margin-top:20px; }
#payment-receipt dt { font-size:14px; color:var(--grey-3); flex-shrink:0; }
#payment-receipt dd { margin:0; overflow-wrap:anywhere; text-align:right; }
#receipt-amount { font-size:32px; font-weight:500; font-variant-numeric:tabular-nums; }
.payment-return-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-block:28px; font-family:var(--font-ui); }
#payment-check-again, #payment-resume { padding:13px 18px; min-height:48px; border:1px solid var(--black); background:var(--black); color:var(--white); font:600 15px/1.4 var(--font-ui); cursor:pointer; text-decoration:none; }
#payment-check-again:disabled { opacity:.65; cursor:wait; }
#payment-check-again:focus-visible, #payment-resume:focus-visible { outline:2px solid var(--black); outline-offset:4px; }
#payment-receipt > div { flex-wrap:wrap; row-gap:8px; }
#payment-receipt dd { margin-left:auto; }