/* SCHEELEN© USA — responsive layer.
   Media queries cannot be expressed inline, so this is the one stylesheet the
   pages load beyond the design system. It overrides inline values, which is why
   the declarations carry !important — nothing here introduces new design values,
   it only collapses the 1440px composition down to narrow viewports. */

/* ---- The canvas is capped at 1440 and centred, fluid below that ---- */
.sch-page { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; }

/* Sections declare width:100% and then add their own horizontal padding, which
   overflows the canvas unless the box model includes it. */
.sch-page, .sch-page *, .sch-page *::before, .sch-page *::after { box-sizing: border-box; }

/* ---- Sticky header spacing ---- */
.sch-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

@media (max-width: 1320px) {
  /* Section gutters step down from 92px in two stages. */
  .sch-page section,
  .sch-page > section > div,
  .sch-page footer > div,
  .sch-page footer > p { padding-left: 56px !important; padding-right: 56px !important; }
  .sch-page [style*="92px"] { padding-left: 56px !important; padding-right: 56px !important; margin-left: 0 !important; margin-right: 0 !important; }
}

@media (max-width: 1000px) {
  .sch-page section,
  .sch-page > section > div,
  .sch-page footer > div,
  .sch-page footer > p { padding-left: 32px !important; padding-right: 32px !important; }
  .sch-page [style*="92px"] { padding-left: 32px !important; padding-right: 32px !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* Every multi-column band becomes a single column. The compositions are
     inline grids built in several different ways — markup, renderVals objects,
     design-system classes — so the rule is declared structurally rather than by
     matching style strings. Both properties are inert on anything that is not a
     grid, so the breadth costs nothing.
     Releasing the children's placement is required, not optional: a card pinned
     to column 2 forces an implicit second track and the single-column rule alone
     does nothing. */
  .sch-page section div,
  .sch-page footer > div,
  .sch-page ol,
  .sch-panel-row { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .sch-page section div > *,
  .sch-page ol > li { grid-area: auto !important; }

  /* Display type stops being a fixed pixel size. */
  .sch-page h1 { font-size: clamp(30px, 5.4vw, 50px) !important; }
  .sch-page h1 span { white-space: normal !important; }
  .sch-page h2 { font-size: clamp(26px, 4.2vw, 44px) !important; }
  .sch-page blockquote p span { white-space: normal !important; }

  /* Vertical rhythm compresses with the gutters. */
  .sch-page section { padding-top: 80px !important; padding-bottom: 88px !important; }
}

@media (max-width: 760px) {
  .sch-page section,
  .sch-page > section > div,
  .sch-page footer > div,
  .sch-page footer > p { padding-left: 22px !important; padding-right: 22px !important; }
  .sch-page [style*="92px"] { padding-left: 22px !important; padding-right: 22px !important; margin-left: 0 !important; margin-right: 0 !important; }
  .sch-page section { padding-top: 60px !important; padding-bottom: 64px !important; }

  /* Numbered markers are meaningless once a screenshot is this small; the
     numbered legend beneath carries the same information. */
  .sch-page figure span[aria-hidden][style*="position: absolute"] { display: none !important; }

  /* Report covers in a stacked strip do not need to be tall. */
  .sch-page .sch-cover { max-width: 180px; }

  /* Panel row: each panel is its own block, all copy shown. */
  .sch-panel { min-height: 380px !important; }
  .sch-panel-disclosure { min-height: 0 !important; }
  .sch-panel-inner { padding: 40px 24px 44px !important; }

  /* Back-to-top clears a thumb. */
  .sch-page + button, button[aria-label="Back to top"] { right: 18px !important; bottom: 18px !important; }
}

/* ---- Header: the bar itself. The nav→menu switch and the persistent Sample
   report button live in Site Header's own CSS (the burger appears, the desktop
   nav and search hide, below 1024px). Here we only tighten the bar's gutters. */
@media (max-width: 1180px) {
  .sch-header-inner { padding-left: 32px !important; padding-right: 32px !important; gap: 26px !important; }
}

@media (max-width: 620px) {
  .sch-header-inner { padding-left: 20px !important; padding-right: 20px !important; gap: 16px !important; }
}

/* ---- Hero: lift the primary CTA above the fold on small screens by cutting
   the band's vertical padding (the header is shorter there too). ---- */
@media (max-width: 1000px) {
  .sch-hero-body { padding-top: 132px !important; padding-bottom: 56px !important; }
}
@media (max-width: 760px) {
  .sch-hero-body { padding-top: 112px !important; padding-bottom: 48px !important; }
}