.hero{padding-top:28px}
.hero-intro{margin-top:0}
.hero h1{margin-top:18px;letter-spacing:0}
.hero .lead{margin-top:16px}
.hero-actions{margin-top:20px}
.hero-renewal{max-width:410px;margin-top:12px;font-size:12px;line-height:1.55;color:#b4b3c0}
.hero .social-proof{margin-top:24px}
.hero.has-activated-subscription{display:block;padding-top:24px}
.hero.has-activated-subscription .hero-intro,.hero.has-activated-subscription .happ-preview{display:none}
.hero.has-activated-subscription .subscription{width:min(580px,100%);margin-inline:auto}
@media(min-width:900px){.hero{padding-top:32px}.hero-intro{margin-top:0}.hero .happ-preview{margin-top:8px}}
@media(max-width:480px){.hero{padding-top:22px}.hero h1{font-size:43px}.hero-actions{flex-wrap:wrap;gap:14px}.hero-renewal{font-size:12px}}
@media(max-width:359px){.hero h1{font-size:36px}.hero-actions>.button{font-size:12px}}

/* Standalone checkout: a single CTA and a balanced responsive hero. */
.hero{grid-template-columns:minmax(0,1fr);gap:28px}
.hero-intro{padding-right:0;min-width:0}
.hero-actions{scroll-margin-top:100px}
.hero-actions>.button{min-height:50px;font-size:14px;padding-inline:24px}
.hero .happ-preview{min-width:0}
@media(min-width:900px){
 .hero{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:64px;align-items:center;padding-block:54px 64px}
 .hero-intro{grid-column:1;grid-row:1;max-width:620px;padding-right:0;margin-top:0;align-self:center}
 .hero h1{max-width:600px;font-size:64px}
 .hero .lead{max-width:520px}
 .hero .happ-preview{grid-column:2;grid-row:1;justify-self:center;align-self:center;display:flex;flex-direction:column;gap:24px;width:100%;height:auto;min-height:410px;margin:0;padding:30px;border:1px solid #292436;border-radius:24px;background:radial-gradient(ellipse at 50% 50%,#683ba52c,transparent 70%),#101014;transform:none}
 .hero .preview-caption{max-width:none;font-size:10px;text-align:center}
 .hero .happ-preview .phone{margin:0;transform:rotate(5deg)}
 .hero .preview-disclaimer{position:static;font-size:9px}
}
@media(max-width:599px){
 .hero-actions{display:flex;width:100%}
 .hero-actions>.button{width:100%;justify-content:center;min-height:52px;font-size:14px;white-space:normal;text-align:center}
 .hero-renewal{max-width:none;line-height:1.6}
 .hero .happ-preview{grid-column:1;grid-row:auto;width:100%;margin-top:0}
 .nav-cta{min-height:44px;display:inline-flex;align-items:center}
 .menu-toggle{min-width:44px;min-height:44px}
}