/*
 * Page grid — the single source of truth for the content column.
 *
 * Everything that must share a left edge (the nav bar, the hero headline, every
 * section body) is a .container, and .container gets its width from exactly one
 * place: --container-max below. Nothing else in the codebase should declare a
 * max-width for .container — if a block needs to sit on the page's edges, give
 * it the class and it follows automatically, at every breakpoint, forever.
 *
 * The steps below are the Webflow export's original .container values, moved
 * here verbatim; the export's own .container max-widths were removed so there is
 * no second copy to drift.
 *
 * They must stay in rem: the export scales the root font-size with the viewport
 * (1rem = 1vw/14.4 above 1440px, see the <style> block in index.html), so a
 * value in px only matches at one viewport width and slides everywhere else.
 * That is exactly how the nav bar came to sit 200px right of the hero at 1920.
 *
 * Breakpoints match the export's: 768 / 992 / 1440 / 1920.
 *
 * Every page must link this file, after pointer-by-shakuro.css. Without it
 * --container-max is undefined and every .container goes full-bleed.
 */

:root {
  /* < 768px: full-bleed — the gutter comes from the section, not the column */
  --container-max: none;
}

@media screen and (min-width: 768px) {
  :root {
    --container-max: 672rem;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --container-max: 912rem;
  }
}

@media screen and (min-width: 1440px) {
  :root {
    --container-max: 1280rem;
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --container-max: 1680rem;
  }
}

.container {
  max-width: var(--container-max);
}

/* Narrower reading columns (.container.terms-container, .container.container-wide)
   opt out by name in pointer-by-shakuro.css. Those selectors carry one more class
   than the rule above, so they keep winning without !important or source order —
   they are variants of the column, not competing definitions of it. */