/* Compact homepage opening: size the media box itself, not just its paint. */
main > .hero { min-height:0; padding:20px 0 42px; }
main > .hero .hero-shell { padding-top:0; }
main > .intro.section-band { padding-block:12px 4px; }
main > .intro .section-icon { width:48px; height:48px; }
main > .comparison.section-band { padding-top:12px; }
main > .comparison .product-tabs { margin-top:0; margin-bottom:18px; }
@media (min-width:981px) {
  main > .hero .hero-shell {
    grid-template-areas:"copy visual";
    grid-template-columns:minmax(0,580px) minmax(0,1fr);
    align-items:center; column-gap:60px; row-gap:0;
  }
  main > .hero .hero-visual { min-height:0; margin-top:0; max-width:640px; justify-self:center; }
  main > .hero .hero-visual video { width:100%; height:auto; min-height:0; max-height:300px; object-fit:contain; transform:none; }
}
@media (max-width:980px) {
  main > .hero { padding:16px 0 10px; }
  main > .intro.section-band { padding-block:8px 4px; }
  main > .comparison.section-band { padding-top:10px; }
}
@media (max-width:760px) {
  main > .hero { padding-top:12px; padding-bottom:8px; }
  main > .hero .hero-subtitle { margin-top:12px; margin-bottom:14px; }
  main > .comparison .product-tabs { margin-bottom:12px; }
}