/* Desktop layout. Below 901px the pages keep their own mobile rules.
   One centred column (--max) for every page; legal and About pages use a
   narrower centred block so the text doesn't sit to the left of an empty half. */
:root {
  --max: 1280px;
  --gut: max(48px, calc((100vw - var(--max)) / 2));
}

@media (min-width: 1600px) {
  :root { --max: 1360px; }
}

@media (min-width: 901px) {
  nav, footer,
  .hero, .mechanism, .why, .features, .pricing,
  .page-header, .support-layout, .contact-band {
    padding-left: var(--gut);
    padding-right: var(--gut);
  }
  .section-divider { margin-left: var(--gut); margin-right: var(--gut); }

  /* Home: hero glow follows the content column, not the viewport edge */
  .hero::before { right: calc(var(--gut) - 240px); }
  .hero-title { font-size: clamp(52px, 7vw, 112px); }
  .hero-body { max-width: 600px; }

  /* Home: pricing cards use the full column, like the other grids */
  .pricing-grid { max-width: none; }

  /* Legal pages: contents + text as one centred block */
  body:has(.layout) { --legal: 1040px; }
  .layout {
    max-width: var(--legal);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .layout .doc-body { max-width: none; }
  body:has(.layout) .page-header {
    padding-left: max(48px, calc((100vw - var(--legal)) / 2));
    padding-right: max(48px, calc((100vw - var(--legal)) / 2));
  }

  /* About: header aligned with the centred 900px text column; the ABOUT
     watermark sits at the column's right edge instead of the screen's. */
  .page-about .page-header {
    padding-left: max(48px, calc((100vw - 900px) / 2 + 48px));
    padding-right: max(48px, calc((100vw - 900px) / 2 + 48px));
  }
  .page-about .page-header::after {
    right: max(-20px, calc((100vw - 900px) / 2 - 240px));
  }
}