/* Larger homepage app screenshots, with space for all three device frames. */
@media (min-width: 941px) {
  html body .hero > .wrap.hero-grid { max-width: 1280px; grid-template-columns: 1fr 1.05fr; gap: 48px; }
  html body .hero .phone-stack { --dev-w: 340px; max-width: 640px; overflow: visible; }
}
@media (min-width: 941px) and (max-width: 1199px) {
  html body .hero > .wrap.hero-grid { gap: 32px; }
  html body .hero .phone-stack { --dev-w: clamp(230px, 25vw, 300px); }
}

/* Give the desktop wordmark the wider inset used by the reference. */
html body .site-header > .nav { max-width: 1440px; }

/* Slightly smaller hero headline and supporting copy. */
html body .hero h1 { font-size: clamp(38px, 5.9vw, 70px); }
html body .hero p.lede { font-size: 17.5px; }
html body.locale-home .hero h1 { font-size: clamp(31px, 3.9vw, 56px); }
@media (max-width: 600px) { html body.locale-home .hero h1 { font-size: 31px; } }