/* First section above the fold on desktop and tablet (loaded after every page stylesheet).
   The headline scales with the viewport height as well as its width; site.js zooms the hero
   visual down when it would still run past the fold. */
@media (min-width: 700px) {
  :is(main > section:first-child, main > div:first-child > section:first-child) { padding-top: clamp(18px, 3.4vh, 52px); padding-bottom: clamp(20px, 4vh, 64px); }
  :is(main > section:first-child, main > div:first-child > section:first-child) :is(.h-hero, h1.h1) {
    font-size: clamp(2.2rem, min(1.1rem + 3.5vw, .3rem + 6.9vh), 4.6rem);
  }
  :is(main > section:first-child, main > div:first-child > section:first-child) .strike { font-size: clamp(1.25rem, min(.9rem + 1.2vw, .4rem + 2.9vh), 2.1rem); }
  :is(main > section:first-child, main > div:first-child > section:first-child) :is(.h-home__copy, .ph__copy, .v-hero__copy, .ab-hero__copy) { gap: clamp(12px, 2.2vh, 22px); }
  :is(main > section:first-child, main > div:first-child > section:first-child) .facts { padding-top: clamp(12px, 2vh, 22px); margin-top: 0; }
  :is(main > section:first-child, main > div:first-child > section:first-child) .facts b { font-size: clamp(1.3rem, 2.6vh, 1.7rem); }
  :is(main > section:first-child, main > div:first-child > section:first-child) :is(.h-home__grid, .ph__grid, .v-hero__grid, .ab-hero__grid, .bsw) > :not(:first-child) { justify-self: center; }
}
@media (min-width: 700px) {
  :is(main > section:first-child, main > div:first-child > section:first-child) .kf { margin-top: clamp(20px, 3.4vh, 44px); }
  :is(main > section:first-child, main > div:first-child > section:first-child) .kf li { padding-block: clamp(12px, 2vh, 22px); gap: 4px; }
  :is(main > section:first-child, main > div:first-child > section:first-child) .kf b { font-size: clamp(1.5rem, min(1.1rem + 1.2vw, 3.6vh), 2.4rem); }
}
/* Short screens (a 1366×768 laptop's window): the hero lede shrinks with the height too. */
@media (min-width: 700px) and (max-height: 700px) {
  :is(main > section:first-child, main > div:first-child > section:first-child) .lede { font-size: clamp(.95rem, 2.7vh, 1.15rem); line-height: 1.5; }
}
/* Short screens: the buyer-role list under a white-label hero gives way to the headline and the call to action. */
@media (min-width: 700px) and (max-height: 860px) {
  :is(main > section:first-child, main > div:first-child > section:first-child) .v-for { display: none; }
}
/* Portrait tablets: copy and visual side by side, as on desktop, so the hero fits one screen. */
@media (min-width: 740px) and (max-width: 1020px) {
  :is(main > section:first-child, main > div:first-child > section:first-child) :is(.h-home__grid, .ph__grid, .v-hero__grid, .ab-hero__grid) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 28px; justify-items: stretch;
  }
  :is(main > section:first-child, main > div:first-child > section:first-child) .hero-mob > :is(.h-home__copy, .ph__copy, .v-hero__copy) { display: grid; }
  :is(main > section:first-child, main > div:first-child > section:first-child) .hero-mob > .hero-mob__demo { order: 0; margin-top: 0; }
  :is(main > section:first-child, main > div:first-child > section:first-child) :is(.h-hero, h1.h1) { font-size: clamp(2rem, 4.6vw, 2.6rem); }
}