/* The hero fills the viewport under the header on a laptop, and no more. The
   phone gives up height first, then the heading, so nothing scrolls out.
   Same rules for the teaser and the full site. */
@media (min-width: 1024px) {
  .hero { box-sizing: border-box; min-height: 0; height: calc(100dvh - 64px); margin-top: 64px; padding: 0 0 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .hero .grid { min-height: 0; }
  .hero-stage { min-height: 0; padding: 0; }
  .hero .iphone { width: auto; max-width: 100%; height: min(640px, calc(100dvh - 190px)); }
  .hero .h-hero { font-size: clamp(38px, 4.3vw, 56px); }
  .hero-copy .deck { font-size: clamp(14px, 1.15vw, 16px); }
  .section.is-first { padding-top: 40px; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .hero .h-hero { font-size: clamp(34px, 3.8vw, 46px); }
  .hero-copy { gap: 14px; }
}

/* The reassurance line is desktop only; on a phone it crowds the badge. */
@media (max-width: 1023px) { .hero .note { display: none; } }