/* One container system for every page (loaded last). Nav, hero, sections, demos and footer
   share the same left and right edges:width = min(100% - 2*gutter, --container). */
:root{--container:1728px;--gutter:clamp(20px,4vw,72px)}
.container,.adm-wrap{width:min(100% - 2*var(--gutter),var(--container))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0;padding-right:0}
.container .container{width:100%!important}
/* Home hero:real two-column grid. Text on the left edge, blueprint fills the right column. */
@media (min-width:901px){
 .atlas-hero{align-items:center}
 .atlas-hero-copy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,64px);align-items:center;padding-top:clamp(110px,9vw,150px)}
 .atlas-hero-copy>*{max-width:none}
 .atlas-hero-text{max-width:640px}
 .atlas-hero-copy>.vo{position:relative;right:auto;top:auto;transform:none;width:100%;max-width:880px;justify-self:end;aspect-ratio:1}
}
@media (max-width:900px){.atlas-hero-text{max-width:600px}}
/* ---- Large displays (4K / 32"): widen the container, then scale the whole UI uniformly so
   type, spacing, grids and the blueprint grow together instead of sitting tiny in a narrow column.
   Body prose keeps its own max-width measure. Breakpoints:1920 / 2400 / 3200. */
@media (min-width:1920px){:root{--container:1840px;--gutter:clamp(48px,3.6vw,96px)}}
@media (min-width:2400px){html{zoom:1.12}:root{--container:2200px;--gutter:72px}}
@media (min-width:3200px){html{zoom:1.3}:root{--container:2420px;--gutter:72px}}
@media (min-width:2400px){
 .atlas-hero-copy>.vo{max-width:1040px}
 .atlas-hero-text{max-width:760px}
 .pg-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}