/* The opening: the headline, the promise, and how to get GHIM, above the iPhone's Lock Screen. */
.hero { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero .badge, .hero a { pointer-events: auto; }
.hero-head { position: absolute; left: 0; right: 0; top: clamp(78px, 10.4vh, 112px); text-align: center; padding: 0 24px; }
.hero-h1 { font-size: clamp(54px, 5.7vw, 102px); font-weight: 830; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); }
.hero-sub { max-width: 31em; margin: clamp(12px, 2vh, 20px) auto 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; font-weight: 420; color: rgba(var(--ink-rgb), var(--soft)); text-wrap: balance; }
.hero-sub b { color: var(--ink); font-weight: 680; }
.hero-get { margin-top: clamp(12px, 2.1vh, 20px); display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 13px; font-weight: 560; color: var(--ink-3); }
.hero-get .badge { height: 38px; }
.hero-get .badge img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); border-radius: 9px; }

/* the curtain: the same headline, in the same place, from the first paint until the film is warm */
.curtain { position: fixed; inset: 0; z-index: 35; background: #050605; pointer-events: none; }
.curtain .hero-sub b { color: #f1f3ee; }
.curtain .hero-h1 { color: #f1f3ee; }
.curtain .hero-sub { color: rgba(241, 243, 238, 0.8); }