/* V5.1.3: keep the outer gutters, but bring each text/visual pair together. */
@media (min-width: 1600px) {
  .hero-video {
    transform: translateX(calc(-1 * clamp(96px, 10vw, 240px)));
    mask-image: linear-gradient(90deg, #000 0%, #000 83%, transparent 100%);
  }
  .hero .section-copy { width: 55%; max-width: 720px; }
}
@media (min-width: 1280px) {
  .product-layout {
    grid-template-columns: minmax(0, min(44%, 720px)) minmax(0, 1fr);
    gap: clamp(32px, 3vw, 64px);
    align-items: start;
  }
  .product .visual { max-width: 1040px; justify-self: start; }
}