/* Air Apps Duo: scroll targets with a continuous spring between states. */
html, body { overflow-x: clip; }
.hero { padding: 76px 0 0; background: #fff; overflow: visible; }
.hero::before { display: none; }
.hero-grid { display: block; text-align: center; }
.hero-copy { max-width: 1000px; margin-inline: auto; }
.hero h1 { max-width: 960px; margin-inline: auto; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.07; text-wrap: balance; }
.hero h1 .grad { background: none; color: var(--blue); }
.hero p.lead { max-width: 800px; margin: 24px auto 0; }
.hero-proof, .hero .store-badges, .hero .rating { justify-content: center; }
.hero .reveal { opacity: 1; transform: none; transition: none; }
.hero .rating { margin-bottom: 32px; }
.duo-story { height: 300vh; position: relative; overflow: clip; }
.duo-stage { width: min(1300px, 100%); height: min(720px, calc(100svh - 180px)); min-height: 430px; margin-inline: auto; position: sticky; top: 140px; isolation: isolate; }
.duo-device, .duo-fold { margin: 0; position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.duo-device { width: min(52.46%, calc((100svh - 160px) * .85)); aspect-ratio: 2247 / 3093; z-index: 3; transform: translate(-50%, -50%) translate3d(max(-188.5px, -14.5vw), 0, 0) rotate(-90deg) scale(.72); }
.duo-frame, .duo-fold-frame { width: 100%; height: 100%; display: block; position: absolute; inset: 0; pointer-events: none; }
.duo-frame { z-index: 2; }
.duo-screen { position: absolute; inset: 3.8% 5.3% 4% 5.3%; border-radius: 10% / 7%; overflow: hidden; background: #f2f2f7; }
.duo-landscape { will-change: opacity; backface-visibility: hidden; position: absolute; width: 141.9614%; height: 70.4417%; left: -20.9807%; top: 14.77915%; transform: rotate(90deg); object-fit: cover; }
.duo-portrait { will-change: opacity; backface-visibility: hidden; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; }
.duo-fold { width: 23%; aspect-ratio: 489 / 681; z-index: 2; opacity: 0; transform: translate(-50%, -50%) scale(0); }
.duo-fold-light { left: 17%; top: 44%; }
.duo-fold-dark { left: 83%; top: 59%; aspect-ratio: 977 / 1404; }
.duo-fold-screen { position: absolute; inset: 3.5% 5.8% 3% 5.8%; width: 88.4%; height: 93.5%; object-fit: fill; border-radius: 1% 14% 14% 1% / 1% 10% 10% 1%; }
.duo-fold-dark .duo-fold-screen { inset: 3.5% 5.8% 6.5%; height: 90%; }
.duo-backdrop { position: absolute; inset-inline-end: 5.5%; top: 50%; width: 30%; transform: translateY(-50%); color: #d5d5d7; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.4rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.duo-backdrop span { display: block; }
@media (max-width: 1199px) {
  .hero { padding-top: 58px; }
  .duo-stage { min-height: 380px; }
  .duo-device { width: min(52.46%, calc((100svh - 160px) * .85)); }
}
@media (max-width: 809px) {
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(2.3rem, 7vw, 3.5rem); }
  .hero p.lead { font-size: 1rem; line-height: 1.65; }
  .hero .rating { gap: 7px; }
  .hero .rating-src { font-size: .8rem; }
  .duo-story { height: 260vh; }
  .duo-stage { height: min(460px, calc(100svh - 170px)); min-height: 320px; top: 94px; }
  .duo-device { width: min(62.82%, 400px); transform: translate(-50%, -50%) translate3d(-22vw, 0, 0) rotate(-90deg) scale(.60); }
  .duo-fold { width: 23%; }
  .duo-fold-light { left: 15%; }
  .duo-fold-dark { left: 85%; }
  .duo-backdrop { font-size: clamp(1.1rem, 3.5vw, 2rem); inset-inline-end: 5%; width: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .duo-story { height: auto; }
  .duo-stage { position: relative; top: auto; }
  .duo-device { transform: translate(-50%, -50%) scale(.7); }
  .duo-landscape, .duo-backdrop { opacity: 0; }
  .duo-portrait, .duo-fold { opacity: 1; }
  .duo-fold { transform: translate(-50%, -50%) scale(1); }
}