/* Two-canon responsive system: mobile <600, desktop >=600. Scaling happens
   on the complete composition in JS, never independently per section. */
@media (min-width:600px) {
  html, body { width:100%; overflow-x:hidden; }
  .hero-pin { width:1440px !important; }
}
@media (max-width:599px) {
  html, body { width:100%; min-width:0; overflow-x:hidden; }
  main { transform-origin:0 0; }
}