/* First screen only: keep wizard typography and layout independent. */
main > .hero { max-width: 1240px; transform: translateY(-30px); }
.hero .eyebrow { display: block; font-size: 12px; line-height: 18px; text-wrap: balance; }
.hero h1 { font-size: clamp(44px,5.1vw,74px); line-height: 1.08; letter-spacing: -.05em; margin: 24px 0; text-wrap: balance; }
.hero h1 > span { display: block; color: #b6d9c9; }
.hero .intro { display: block; max-width: 690px; margin: 0 auto; font-size: 16px; line-height: 25px; text-wrap: balance; }
.hero .hero-note { display: block; font-size: 11px; line-height: 17px; }
@media (max-width: 799px) {
  main > .hero { transform: translateY(-20px); }
  .hero .eyebrow { font-size: 11px; line-height: 17px; }
  .hero h1 { font-size: clamp(32px,7.8vw,56px); margin: 20px 0; }
  .hero .intro { max-width: 510px; font-size: 14px; line-height: 21px; }
  .hero .hero-cta { margin-top: 24px; }
}
@media (max-width: 359px) {
  main > .hero { transform: none; }
  .hero h1 { font-size: 32px; margin: 16px 0; }
  .hero .hero-cta { margin-top: 20px; gap: 24px; }
  .hero .hero-note { font-size: 10px; margin-top: 12px; }
}
@media (max-height: 440px) and (min-width: 600px) {
  main > .hero { transform: none; }
  .hero .eyebrow { font-size: 10px; line-height: 14px; }
  .hero h1 { font-size: 30px; margin: 10px 0; }
  .hero .intro { font-size: 12px; line-height: 17px; max-width: 530px; }
  .hero .hero-cta { margin-top: 12px; padding: 12px 24px; }
  .hero .hero-note { margin-top: 8px; font-size: 10px; line-height: 14px; }
}