/* NSM shared page shell
   One token for page width so public pages and modules stay unified. */
:root {
  --page-width: 1500px;
  --page-gutter: 40px;
  --max: var(--page-width);
}

/* Full-bleed homepage sections: keep section backgrounds full width while
   capping the content area to --page-width on very wide screens.
   The 7vw minimum preserves the existing mobile/tablet spacing. */
main > section[class] {
  padding-left: 7vw;
  padding-right: 7vw;
}

@media (min-width: 1744px) {
  main > section[class] {
    padding-left: calc((100% - var(--page-width)) / 2);
    padding-right: calc((100% - var(--page-width)) / 2);
  }
}

/* Simple centered page shell for standalone pages (privacy, terms, etc.). */
.page-main {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
}

@media (max-width: 560px) {
  .page-main {
    width: min(var(--page-width), calc(100% - 32px));
  }
}

/* Top menu: solid background (no blur) so it does not visually interact with the
   scrolling hero behind it, and content width is capped to match the page. */
.topbar {
  background: #0A0A0A;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-width: 721px) {
  .topbar {
    padding-left: clamp(18px, 3vw, 44px);
    padding-right: clamp(18px, 3vw, 44px);
  }
}

@media (min-width: 1744px) {
  .topbar {
    padding-left: calc((100% - var(--page-width)) / 2);
    padding-right: calc((100% - var(--page-width)) / 2);
  }
}