.payment-page main { overflow: clip; }
.payment-status { margin-block: 1.5rem; }
.payment-hero { min-height: 620px; }
.payment-hero__grid { min-height: 620px; display: grid; grid-template-columns: minmax(420px,.9fr) minmax(250px,.48fr) minmax(360px,.72fr); align-items: center; gap: clamp(2.5rem,4vw,5rem); padding-block: clamp(4rem,7vw,7rem); }
.payment-hero__copy h1 { max-width: 650px; margin-bottom: 1.5rem; font-size: clamp(4rem,6.2vw,6.6rem); line-height: .92; letter-spacing: -.075em; text-wrap: balance; }
.payment-hero__copy > p { max-width: 620px; margin: 0 0 2rem; color: var(--color-muted); font-size: clamp(1rem,1.35vw,1.25rem); line-height: 1.72; }
.payment-hero__copy .button { border-radius: 4px; }

.payment-receipt { position: relative; width: min(100%,255px); min-height: 340px; justify-self: center; padding: 2rem 1.5rem 2.35rem; color: #111833; background: #fff; border: 1px solid #77809a; box-shadow: 18px 20px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); transform: rotate(-1.2deg); }
.payment-receipt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -11px; height: 12px; background: linear-gradient(135deg,transparent 8px,#fff 0) 0 0/16px 12px repeat-x,linear-gradient(225deg,transparent 8px,#fff 0) 8px 0/16px 12px repeat-x; }
.payment-receipt header { display: grid; gap: .55rem; padding-bottom: 1.5rem; margin-bottom: 1.2rem; border-bottom: 1px solid #d9deea; }
.payment-receipt header strong { color: #252a66; font-size: 1.25rem; }
.payment-receipt header span { display: block; width: 58%; height: 4px; background: #aab1c2; }
.payment-receipt header span:last-child { width: 44%; }
.payment-receipt > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; font-size: .69rem; }
.payment-receipt > div strong { font-size: .68rem; }
.payment-receipt footer { display: grid; gap: .55rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid #d9deea; }
.payment-receipt footer span { width: 52%; height: 4px; background: #aab1c2; }
.payment-receipt footer span:last-child { width: 38%; }

.payment-route { position: relative; display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.payment-route::before { content: ""; position: absolute; top: 31px; bottom: 31px; left: 31px; width: 1px; background: var(--color-border-strong); }
.payment-route li { position: relative; display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 1.3rem; min-height: 64px; }
.payment-route li > span { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; color: var(--color-primary); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 50%; font-size: .95rem; font-weight: 800; }
.payment-route strong { max-width: 260px; font-size: .9rem; line-height: 1.5; }

.payment-methods { padding-block: clamp(5rem,7vw,7rem); }
.payment-methods__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.7fr); align-items: end; gap: 3rem; margin-bottom: 3rem; }
.payment-methods__heading h2 { max-width: 780px; margin: 0; font-size: clamp(3rem,4.6vw,5rem); line-height: .96; letter-spacing: -.06em; }
.payment-methods__heading p { max-width: 580px; justify-self: end; margin: 0; color: var(--color-muted); font-size: .94rem; line-height: 1.75; }
.payment-methods__list { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--color-border-strong); }
.payment-methods__list > a { min-height: 300px; display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: .7rem; padding: 2rem clamp(1.5rem,2.5vw,2.7rem); color: var(--color-text); border-right: 1px solid var(--color-border-strong); transition: color 180ms ease,background 180ms ease; }
.payment-methods__list > a:first-child { padding-left: 0; }
.payment-methods__list > a:last-child { padding-right: 0; border-right: 0; }
.payment-methods__list > a:hover,.payment-methods__list > a:focus-visible { color: #aeb0ff; background: color-mix(in srgb,var(--color-primary) 6%,transparent); }
.payment-methods__list > a > span { color: var(--color-primary); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.07em; }
.payment-methods__list small { margin-top: 1rem; color: var(--color-muted-deep); font-size: .66rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.payment-methods__list h3 { margin: 0; color: inherit; font-size: clamp(1.25rem,1.7vw,1.7rem); }
.payment-methods__list p { max-width: 360px; margin: 0; color: var(--color-muted); font-size: .8rem; line-height: 1.65; }
.payment-methods__list strong { display: inline-flex; align-items: center; gap: .55rem; align-self: end; color: var(--color-primary); font-size: .8rem; }
.payment-methods__list strong svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.payment-methods__list > a:hover strong svg { transform: translate(2px,-2px); }

.payment-form-section { padding-block: clamp(5rem,7vw,7.5rem); }
.payment-form-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(620px,1.28fr); gap: clamp(3.5rem,7vw,8rem); align-items: start; }
.payment-form-layout > header { position: sticky; top: 130px; }
.payment-form-layout > header h2 { max-width: 500px; margin-bottom: 1rem; font-size: clamp(3rem,4.5vw,5rem); line-height: .96; letter-spacing: -.06em; }
.payment-form-layout > header p { margin: 0; color: var(--color-muted); }
.payment-form { display: grid; gap: 1.3rem; }
.payment-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.15rem; }
.payment-form label { min-width: 0; display: grid; gap: .5rem; color: var(--color-text); font-size: .76rem; font-weight: 750; }
.payment-form label > span:first-child { display: block; }
.payment-form label i { color: #ff6b74; font-style: normal; }
.payment-form label small { color: var(--color-muted-deep); font-size: .67rem; font-weight: 600; }
.payment-form input,.payment-form select { width: 100%; min-height: 58px; padding: .85rem .95rem; color: var(--color-text); background: color-mix(in srgb,var(--color-bg-elevated) 84%,transparent); border: 1px solid var(--color-border-strong); border-radius: 3px; font: 500 .85rem/1.4 var(--font-sans); transition: border-color 160ms ease,box-shadow 160ms ease,background 160ms ease; }
.payment-form input::placeholder { color: var(--color-muted-deep); opacity: 1; }
.payment-form input:focus,.payment-form select:focus { outline: none; border-color: #a8aaff; background: var(--color-bg); box-shadow: 0 0 0 3px rgba(99,102,243,.2); }
.payment-form [aria-invalid="true"] { border-color: #ff6b74; box-shadow: 0 0 0 3px rgba(255,107,116,.14); }
.payment-field { position: relative; display: block; }
.payment-field svg { position: absolute; top: 50%; right: .95rem; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--color-muted-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.payment-field input { padding-right: 3rem; color: var(--color-muted); }
.payment-form > .button { width: 100%; border-radius: 3px; }
.payment-form.is-submitting > .button { opacity: .72; cursor: wait; }
.payment-form.is-submitting > .button svg { animation: payment-arrow 750ms ease-in-out infinite alternate; }
.payment-form__status { min-height: 1.4rem; margin: -.35rem 0 0; color: #ff8a91; font-size: .76rem; text-align: center; }
.payment-form .recaptcha-notice { margin: -.45rem 0 0; text-align: center; }

.payment-success { min-height: 430px; display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; }
.payment-success[hidden] { display: none; }
.payment-success__icon { width: 108px; height: 108px; color: var(--color-primary); }
.payment-success__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.payment-success h2 { margin: .4rem 0 0; font-size: clamp(2.5rem,4vw,4rem); }
.payment-success p { max-width: 650px; margin: 0 0 .8rem; color: var(--color-muted); }

.payment-next { padding-block: clamp(4.5rem,6vw,6rem); background: var(--color-bg-elevated); }
.payment-next__heading h2 { margin-bottom: 2.6rem; font-size: clamp(2.8rem,4.2vw,4.7rem); }
.payment-next__steps { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--color-border-strong); }
.payment-next__steps li { min-height: 210px; display: grid; grid-template-columns: 62px 1fr; gap: 1.25rem; align-content: center; padding: 2rem clamp(1.5rem,2.4vw,2.4rem); border-right: 1px solid var(--color-border-strong); }
.payment-next__steps li:first-child { padding-left: 0; }
.payment-next__steps li:last-child { padding-right: 0; border-right: 0; }
.payment-next__steps li > span { color: var(--color-primary); font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -.06em; }
.payment-next__steps h3 { margin-bottom: .55rem; font-size: 1rem; }
.payment-next__steps p { margin: 0; color: var(--color-muted); font-size: .78rem; line-height: 1.65; }
.payment-support { display: flex; align-items: center; justify-content: center; gap: 1.6rem; padding-top: 2.2rem; font-size: .78rem; }
.payment-support a { display: inline-flex; align-items: center; gap: .5rem; color: #aeb0ff; font-weight: 750; }
.payment-support svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.payment-support a:last-child { color: #37d878; }

html[data-theme="light"] .payment-page { background: #fff; }
html[data-theme="light"] .payment-route li > span { background: #fff; }
html[data-theme="light"] .payment-form input,html[data-theme="light"] .payment-form select { background: #fff; }
html[data-theme="light"] .payment-form input:focus,html[data-theme="light"] .payment-form select:focus { background: #fff; }
html[data-theme="light"] .payment-next { background: #f6f7fb; }

@keyframes payment-arrow { to { transform: translateX(5px); } }
@media (max-width: 1120px) {
    .payment-hero__grid { grid-template-columns: minmax(400px,.95fr) minmax(220px,.45fr); }.payment-route { grid-column: 1/-1; grid-template-columns: repeat(3,1fr); }.payment-route::before { top: 31px; right: calc(16.66% + 31px); bottom: auto; left: calc(16.66% + 31px); width: auto; height: 1px; }.payment-route li { grid-template-columns: 64px 1fr; }.payment-form-layout { grid-template-columns: minmax(250px,.62fr) minmax(540px,1.38fr); gap: 3.5rem; }
}
@media (max-width: 850px) {
    .payment-hero__grid { grid-template-columns: 1fr; gap: 3.5rem; }.payment-receipt { justify-self: start; }.payment-route { grid-template-columns: 1fr; }.payment-route::before { top: 31px; right: auto; bottom: 31px; left: 31px; width: 1px; height: auto; }.payment-methods__heading { grid-template-columns: 1fr; gap: 1.5rem; }.payment-methods__heading p { justify-self: start; }.payment-methods__list { grid-template-columns: 1fr; }.payment-methods__list > a,.payment-methods__list > a:first-child,.payment-methods__list > a:last-child { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--color-border); }.payment-methods__list > a:last-child { border-bottom: 0; }.payment-form-layout { grid-template-columns: 1fr; }.payment-form-layout > header { position: static; }.payment-next__steps { grid-template-columns: 1fr; }.payment-next__steps li,.payment-next__steps li:first-child,.payment-next__steps li:last-child { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--color-border); }.payment-next__steps li:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
    .payment-hero { min-height: 0; }.payment-hero__grid { min-height: 0; padding-block: 4rem 5rem; }.payment-hero__copy h1 { font-size: clamp(3.2rem,15vw,4.4rem); }.payment-hero__copy .button { width: 100%; }.payment-receipt { width: min(84%,255px); justify-self: center; }.payment-route li { grid-template-columns: 56px 1fr; }.payment-route li > span { width: 56px; height: 56px; }.payment-route::before { left: 27px; }.payment-form-section { padding-block: 4.5rem; }.payment-form-layout > header h2 { font-size: clamp(2.8rem,12vw,3.6rem); }.payment-form__grid { grid-template-columns: 1fr; }.payment-success { min-height: 400px; }.payment-next__steps li { grid-template-columns: 54px 1fr; }.payment-support { align-items: flex-start; flex-direction: column; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .payment-form.is-submitting > .button svg { animation: none; } }