/* ==========================================================================
   Section: Payment / Hero. Ported verbatim from payment-styles.css.
   ========================================================================== */

.pay-hero { padding: 142px 0 0; background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg-alt) 55%, var(--bg) 100%); position: relative; overflow: hidden; }
.pay-hero::before { content:''; position: absolute; top:-150px; right:-90px; width:560px; height:560px; background: radial-gradient(circle, rgba(24,173,231,0.09), transparent 64%); pointer-events:none; }
.pay-hero .container { position: relative; }
.pay-hero h1 { font-size: clamp(36px, 4.2vw, 54px); margin-top: 16px; }
.pay-hero p.sub { font-size: 18px; color: var(--body); max-width: 620px; margin-top: 18px; padding-bottom: 44px; }

@media (max-width: 620px) {
	.pay-hero { padding-top:120px; }
}