.how-to-pay-page { background: #eef1f2; color: #121820; }
.how-to-pay-page .payment-guide-shell { width: min(1160px, calc(100% - 48px)); }
.payment-guide-hero { padding: 72px 0 62px; color: #fff; background: radial-gradient(circle at 78% 35%, rgba(47,112,170,.24), transparent 34%), linear-gradient(115deg,#061a33 0%,#0a294b 58%,#123f6c 100%); }
.payment-guide-hero .eyebrow { color: #b8d8f4; }
.payment-guide-hero h1 { margin: 8px 0 12px; color: #fff; font-size: clamp(52px,7vw,88px); line-height: .94; letter-spacing: -.055em; }
.payment-guide-hero > .payment-guide-shell > p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.78); font-size: 20px; }
.payment-guide-preview { display: inline-flex; gap: 10px; margin-top: 26px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.09); font-size: 12px; }
.payment-guide-preview strong { letter-spacing: .12em; }
.payment-guide-options, .payment-guide-faq { padding-block: 54px; }
.payment-guide-heading { max-width: 780px; margin-bottom: 28px; }
.payment-guide-heading h2, .payment-guide-faq > h2 { margin: 7px 0 12px; font-size: clamp(34px,4.2vw,54px); line-height: 1; letter-spacing: -.045em; }
.payment-guide-heading > p:last-child { margin: 0; color: #52616d; font-size: 17px; line-height: 1.6; }
.payment-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.payment-guide-card { padding: 30px; border: 1px solid #c8d3db; border-radius: 18px; background: #fff; box-shadow: 0 14px 36px rgba(9,28,48,.07); }
.payment-guide-card h2 { margin: 14px 0 12px; font-size: 34px; }
.payment-guide-card > p { color: #52616d; line-height: 1.62; }
.payment-guide-card ol { display: grid; gap: 11px; margin: 24px 0; padding-left: 22px; line-height: 1.5; }
.payment-guide-grid + .payment-guide-card { margin-top: 22px; }
.payment-guide-badge { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: #d9eaf7; color: #174a75; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.payment-guide-badge--planned { background: #eef0f2; color: #4a5864; }
.payment-guide-note { padding: 17px 18px; border-radius: 12px; background: #eef4f8; }
.payment-guide-note p { margin: 7px 0 0; color: #4d5e6b; line-height: 1.55; }
.payment-guide-faq { border-top: 1px solid #cfd7dd; }
.payment-guide-faq .account-faq-list { margin-top: 24px; }
.payment-guide-boundary { padding: 42px 0; background: #0a1d31; color: #fff; }
.payment-guide-boundary .eyebrow { color: #b8d8f4; }
.payment-guide-boundary h2 { margin: 8px 0 10px; color: #fff; font-size: clamp(30px,3.6vw,44px); }
.payment-guide-boundary p:last-child { max-width: 760px; margin: 0; color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .how-to-pay-page .payment-guide-shell { width: min(100% - 28px,1160px); } .payment-guide-hero { padding: 48px 0 42px; } .payment-guide-grid { grid-template-columns: 1fr; } .payment-guide-options, .payment-guide-faq { padding-block: 38px; } .payment-guide-card { padding: 23px; } .payment-guide-preview { align-items: flex-start; border-radius: 12px; } }