/* ==========================================================================
   LAYOUT — Canon Website OS
   ==========================================================================
   Ground truth: CANON_WEBSITE_DESIGN_OS.txt §10 — desktop 1440, mobile 390.
   Breakpoints and content-max-width are this system's addition (the OS does
   not define intermediate breakpoints).
   ========================================================================== */

:root {
  --width-desktop:  1440px;  /* OS canonical desktop frame */
  --width-mobile:    390px;  /* OS canonical mobile frame */

  --content-max-width: 1200px; /* readable max-width for text-heavy blocks inside the 1440 frame */

  --breakpoint-mobile:  480px;
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide:    1440px;

  --z-sticky-cta:   100;  /* @kind other */
  --z-header:       200;  /* @kind other */
  --z-overlay:      900;  /* @kind other */
  --z-modal:        1000; /* @kind other */
}