/* VoltMark shared site chrome: one top menu + one footer on every static page.
   Owner (2026-09-18): every page reachable from the top bar, identical colors
   everywhere. Colors are the app's Brand tokens (app/lib/brand.dart) so the
   static pages and the Flutter app match exactly. Injected by
   authoring/apply_site_nav.py; edit the markup there, not per page. */
.vmn, .vmf {
  --vm-navy: #0C1E48; --vm-green: #8AD200; --vm-blue: #218CD5;
  --vm-bg: #F5F7FA; --vm-surface: #FFFFFF; --vm-ink: #1A1A1A;
  --vm-muted: #5B6572; --vm-line: #DDE3EA; --vm-active: #F2FBE4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4; text-align: left;
}
.vmn *, .vmf * { box-sizing: border-box; margin: 0; padding: 0; }
.vmn { position: sticky; top: 0; z-index: 1000; background: var(--vm-surface);
  border-bottom: 1px solid var(--vm-line); color: var(--vm-ink); }
.vmn .vmn-in { max-width: 1140px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 22px; }
.vmn .vmn-logo { display: block; flex: none; }
.vmn .vmn-logo img { height: 34px; width: auto; display: block; }
.vmn .vmn-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.vmn .vmn-links a { color: var(--vm-muted); text-decoration: none; font-size: 14px;
  font-weight: 500; padding: 9px 12px; border-radius: 10px; white-space: nowrap; }
.vmn .vmn-links a:hover { color: var(--vm-navy); background: var(--vm-bg); }
.vmn .vmn-links a.on { color: var(--vm-navy); font-weight: 700; background: var(--vm-active); }
.vmn .vmn-cta { flex: none; background: var(--vm-green); color: var(--vm-navy); font-weight: 700;
  font-size: 14px; padding: 10px 16px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.vmn .vmn-cta:hover { filter: brightness(1.05); }
.vmn a:focus-visible, .vmf a:focus-visible { outline: 2px solid var(--vm-blue); outline-offset: 2px; }
@media (max-width: 900px) {
  /* Phone/tablet: logo + button on top, every tab in a swipeable row under it. */
  .vmn .vmn-in { flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px 0; }
  .vmn .vmn-logo img { height: 28px; }
  .vmn .vmn-cta { margin-left: auto; font-size: 13px; padding: 8px 12px; }
  .vmn .vmn-links { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vmn .vmn-links::-webkit-scrollbar { display: none; }
  .vmn .vmn-links a { font-size: 13.5px; padding: 8px 10px; }
}
.vmf { background: var(--vm-surface); border-top: 1px solid var(--vm-line); color: var(--vm-ink);
  margin-top: 48px; }
.vmf .vmf-in { max-width: 1140px; margin: 0 auto; padding: 32px 20px 24px; }
.vmf .vmf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px 28px; }
.vmf .vmf-brand img { height: 26px; width: auto; display: block; margin-bottom: 10px; }
.vmf .vmf-brand p { font-size: 12.5px; color: var(--vm-muted); line-height: 1.55; }
.vmf .vmf-h { font-size: 13px; font-weight: 700; color: var(--vm-navy); letter-spacing: .3px; margin-bottom: 8px; }
.vmf a { display: block; color: var(--vm-blue); text-decoration: none; font-size: 13px; padding: 3px 0; }
.vmf a:hover { text-decoration: underline; }
.vmf .vmf-addr { font-size: 13px; color: var(--vm-ink); line-height: 1.6; }
.vmf .vmf-legal { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--vm-line);
  font-size: 11.5px; color: var(--vm-muted); line-height: 1.5; }