/* Phones and tablets (900 and under): every panel sits 8px in from the screen edge, the same 8px as the gaps between
   panels, so the grey frame is even on all sides. Section headings and copy outside panels keep the 24px gutter.
   Loaded last on every page (BaseLayout) so it wins over the page and section styles. Dylan, 23 Oct 2026. */
@media (max-width: 900px) {
  main.wrap > section > .gc, main.wrap > section > .pp-grid, main.wrap > section > .cz, main.wrap > section .ps-bd,
  main.wrap > section .ts-track, main.wrap > section > .bl { padding-left: 8px; padding-right: 8px; scroll-padding-left: 8px; scroll-padding-right: 8px; }
  /* the results tab row bleeds to the frame edge: it now bleeds by the frame's 8px, not the 24px gutter (it pushed the page 16px wider than the screen) */
  main.wrap > section > .cz.cz-tb .cz-tabs.cz-tabs { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; scroll-padding: 0 8px; }
  main.wrap > section.hero, main.wrap > section.fc-sec { padding-left: 8px; padding-right: 8px; }
  /* how we work: the heading sits inside the same grey frame as the cards, so on phones it gets its own black panel like them */
  main.wrap > section .ps-bd .ps-hd { margin: 0 0 8px; padding: 32px 24px; border-radius: 6px; background: #0b0b0b; }
  /* the FAQ ask box: its input could not shrink below its default width, pushing narrow phones (360) sideways */
  .fq-ls > .fq-i { min-width: 0; }
  .fq-af .fq-in { min-width: 0; width: 0; flex: 1 1 0; }
}

/* guard (28 Oct 2026): nothing may make the page wider than the screen. On iPhone a few px of overflow let the whole page be
   thrown sideways and shrank it to fit. clip (not hidden) on BOTH: with html set, body no longer hands its overflow to the
   window, and body's old overflow-x: hidden turned it into its own scroller, which broke every sticky panel (How we work,
   29 Oct 2026). clip creates no scroller, so sticky elements keep sticking to the window. */
html, body { overflow-x: clip; }