/* Global 80% scaling for laptop-sized screens
   - Primary: use CSS zoom (works in Chrome/Edge/Safari)
   - Fallback: use transform scale for browsers that don't support zoom (e.g., Firefox)
   - Range targets common MacBook/small laptop widths
*/

/* Primary: zoom approach */
@media screen and (min-width: 1100px) and (max-width: 1600px) {
  html {
    zoom: 0.8; /* 80% view */
  }
}

/* Fallback for browsers without zoom support */
@media screen and (min-width: 1100px) and (max-width: 1600px) {
  @supports not (zoom: 1) {
    html, body { overflow-x: hidden; }
    body {
      transform: scale(0.8);
      transform-origin: top center; /* scale from top center */
      width: 125%; /* compensate scale so layout fills viewport */
    }
  }
}