/* ═══════════════════════════════════════════════════════════════════════
   M4W SHARED OVERRIDES — applies to ALL pages (homepage, L2, docs, cost)
   This single file is loaded by all 13 HTML files. Edit here once,
   redeploy this file alone, all pages update.
   ═══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   1. PAGE + CONTENT WIDTH SYSTEM — 1200px page, 1100px content
   ──────────────────────────────────────────────────────────────────────── */

html body { background: #f5f9fb !important; }

/* PAGE WIDTH — main + .m4w-doc-standalone forced to 1200 */
html body main#m4w-main:not(#__pw1__):not(#__pw2__):not(#__pw3__):not(#__pw4__):not(#__pw5__),
html body > main:not(#__pw1__):not(#__pw2__):not(#__pw3__):not(#__pw4__):not(#__pw5__),
html body > .m4w-doc-standalone:not(#__pw1__):not(#__pw2__):not(#__pw3__):not(#__pw4__):not(#__pw5__) {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #dceaf2 !important;
  box-sizing: border-box !important;
}

/* #page inside main forced to 1200 (homepage) */
html body main#m4w-main > #page:not(#__pw1__):not(#__pw2__):not(#__pw3__):not(#__pw4__):not(#__pw5__),
html body #page:not(#__pw1__):not(#__pw2__):not(#__pw3__):not(#__pw4__):not(#__pw5__) {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #dceaf2 !important;
  box-sizing: border-box !important;
}

/* CONTENT WIDTH (homepage) — direct children of #page at 1100 */
html body #page > *:not(#__cw1__):not(#__cw2__):not(#__cw3__) {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html body #page .sub-hero > .hc:not(#__cw1__):not(#__cw2__):not(#__cw3__),
html body #page .sub-hero > .hero-bg:not(#__cw1__):not(#__cw2__):not(#__cw3__) {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CONTENT WIDTH (L2 platform, cost pages) — direct children of <main> without m4w-main id */
html body > main:not([id="m4w-main"]) > *:not(#__cw1__):not(#__cw2__):not(#__cw3__),
html body > main:not(#m4w-main) > section:not(#__cw1__):not(#__cw2__):not(#__cw3__),
html body > main:not(#m4w-main) > div:not(#__cw1__):not(#__cw2__):not(#__cw3__) {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* CONTENT WIDTH (docs) — direct children of .m4w-doc-standalone */
html body > .m4w-doc-standalone > *:not(#__cw1__):not(#__cw2__):not(#__cw3__) {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html body > .m4w-doc-standalone .sub-hero > .hc:not(#__cw1__):not(#__cw2__):not(#__cw3__) {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Generic forward-compat */
html body .page-width, html body .page-container, html body .site-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
html body .content-width, html body .main-content, html body .page-content {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ────────────────────────────────────────────────────────────────────────
   2. BRAND TYPOGRAPHY + COLOR — uniform across all navs
   ──────────────────────────────────────────────────────────────────────── */

/* Brand TYPOGRAPHY uniform */
html body header.m4w-nav .m4w-brand:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__),
html body header.m4w-nav .m4w-brand *:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__),
html body header.m4w-nav .m4w-nav-brand:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__),
html body header.m4w-global-nav .m4w-nav-brand:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__),
html body .m4w-global-nav .m4w-nav-brand:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__),
html body #m4w-nav-root .m4w-brand:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__),
html body #m4w-nav-root .m4w-brand *:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__),
html body #m4w-nav-root .m4w-nav-brand:not(#__bt1__):not(#__bt2__):not(#__bt3__):not(#__bt4__) {
  font-family: 'DM Sans', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  font-variation-settings: normal !important;
}

/* Default brand COLOR (over light bg) — cyan-600.
   Target child spans too — homepage brand has .m4w-brand-magnet + .m4w-brand-4water
   inside .m4w-brand with their own color values. */
html body header.m4w-nav .m4w-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body header.m4w-nav .m4w-brand *:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body header.m4w-nav .m4w-nav-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body #m4w-nav-root .m4w-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body #m4w-nav-root .m4w-brand *:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body #m4w-nav-root .m4w-nav-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__),
.m4w-nav-brand:link,
.m4w-nav-brand:visited {
  color: #0891b2 !important;
  -webkit-text-fill-color: #0891b2 !important;
}

/* Over-hero brand color (homepage immersive) — cyan-300 */
html body.m4w-nav-over-hero header.m4w-nav .m4w-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body.m4w-nav-over-hero header.m4w-nav .m4w-nav-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body.m4w-nav-over-hero #m4w-nav-root .m4w-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body.m4w-nav-over-hero #m4w-nav-root .m4w-nav-brand:not(#__nb1__):not(#__nb2__):not(#__nb3__) {
  color: #67e8f9 !important;
  -webkit-text-fill-color: #67e8f9 !important;
}

html body.m4w-nav-over-hero header.m4w-nav .m4w-brand *:not(#__nb1__):not(#__nb2__):not(#__nb3__),
html body.m4w-nav-over-hero #m4w-nav-root .m4w-brand *:not(#__nb1__):not(#__nb2__):not(#__nb3__) {
  color: #67e8f9 !important;
  -webkit-text-fill-color: #67e8f9 !important;
}

/* Homepage hero eyebrow tagline (homepage-specific, harmlessly absent on other pages) */
.m4w-hero-eyebrow,
.m4w-hero-eyebrow .m4w-hero-tagline {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
}

/* Homepage footer link */
footer.footer a:not(.btn-g):not(.m4w-cta-primary):not(.m4w-cta-secondary),
.footer a:not(.btn-g):not(.m4w-cta-primary):not(.m4w-cta-secondary) {
  color: #67e8f9 !important;
}
footer.footer a:not(.btn-g):not(.m4w-cta-primary):not(.m4w-cta-secondary):hover,
.footer a:not(.btn-g):not(.m4w-cta-primary):not(.m4w-cta-secondary):hover {
  color: #a5f3fc !important;
}

/* ────────────────────────────────────────────────────────────────────────
   3. NAV ALIGNMENT + HEIGHT + IMMERSIVE BAND
   ──────────────────────────────────────────────────────────────────────── */

/* Nav width: 100% (not 100vw) so scrollbar doesn't push past 1200px page */
html body #m4w-nav:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body #m4w-nav > *:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body [data-m4w-nav]:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body [data-m4w-nav] > *:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body #m4w-nav-root:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body.m4w-nav-over-hero #m4w-nav-root:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body.m4w-nav-over-content #m4w-nav-root:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body header.m4w-nav:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body header.global-nav:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body header.m4w-global-nav:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body nav.m4w-nav:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body nav.m4w-global-nav:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__),
html body .m4w-global-nav:not(#__a__):not(#__b__):not(#__c__):not(#__d__):not(#__e__) {
  width: 100% !important;
  max-width: 1200px !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* Nav height: exact 72px on outer header */
html body header.m4w-nav:not(#__nh1__):not(#__nh2__):not(#__nh3__):not(#__nh4__),
html body header.m4w-global-nav:not(#__nh1__):not(#__nh2__):not(#__nh3__):not(#__nh4__),
html body header.global-nav:not(#__nh1__):not(#__nh2__):not(#__nh3__):not(#__nh4__),
html body .m4w-global-nav:not(#__nh1__):not(#__nh2__):not(#__nh3__):not(#__nh4__),
html body #m4w-nav-root > header:not(#__nh1__):not(#__nh2__):not(#__nh3__):not(#__nh4__) {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

/* Immersive top band (homepage hero state only — pseudo-element on body) */
html body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: #02070d;
  z-index: 4999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
html body.m4w-nav-over-hero::before { opacity: 1; }
html body.m4w-nav-over-content::before { opacity: 0; }

/* ────────────────────────────────────────────────────────────────────────
   4. PAGE-SPECIFIC SECONDARY NAV (cost-model .topbar) — 1200px width
   The .topbar in cost-model pages defaults to full viewport. Constrain it
   to 1200px to match the rest of the page-width system.
   ──────────────────────────────────────────────────────────────────────── */
html body > header.topbar:not(#__tb1__):not(#__tb2__):not(#__tb3__):not(#__tb4__),
html body > header.top:not(#__tb1__):not(#__tb2__):not(#__tb3__):not(#__tb4__),
html body header.topbar:not(#__tb1__):not(#__tb2__):not(#__tb3__):not(#__tb4__),
html body header.top:not(#__tb1__):not(#__tb2__):not(#__tb3__):not(#__tb4__) {
  width: 100% !important;
  max-width: 1200px !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Inner content of secondary topbar — keep at 1100 like content */
html body header.topbar .wrap:not(#__tw1__):not(#__tw2__):not(#__tw3__):not(#__tw4__),
html body header.top .wrap:not(#__tw1__):not(#__tw2__):not(#__tw3__):not(#__tw4__),
html body header.topbar .topbar-in:not(#__tw1__):not(#__tw2__):not(#__tw3__):not(#__tw4__),
html body header.top .topbar-in:not(#__tw1__):not(#__tw2__):not(#__tw3__):not(#__tw4__) {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}