/* nav-mega.css — grouped Solutions mega-menu, shared by every marketing page.
   The panel markup (.n-mega) is byte-identical on all pages; the trigger and
   its parent li (.n-drop or .n-has-drop, both position:relative) stay per-page.
   Behaviour (click toggle, close on scroll/outside click, viewport clamping,
   mobile accordion) lives in nav-mega.js; the :hover rule below is the no-JS
   fallback and the .n-mega-suppress override lets JS close it mid-hover. */

.n-mega{position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(calc(-50% + var(--n-mega-shift,0px)));z-index:650;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:0 4px 6px rgba(0,0,0,.05),0 24px 60px rgba(0,0,0,.15);
  width:min(880px,calc(100vw - 32px));
  max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;
  display:none;padding:16px;text-align:left}
.n-mega.open{display:block}
@media(hover:hover){
  .n-drop:hover>.n-mega,.n-has-drop:hover>.n-mega{display:block}
}
.n-mega-suppress>.n-mega{display:none!important}

.n-mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 16px}
/* Hard reset — page-level element rules (section/h3 padding on marketing
   pages) must not leak into the panel. */
.n-mega-group{min-width:0;padding:0;margin:0;border:0;background:none}
.n-mega-h{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;
  padding:8px 10px 6px;margin:0;border-bottom:1px solid #f3f4f6;margin-bottom:4px}
.n-mega-item{display:block;padding:8px 10px;border-radius:6px;
  text-decoration:none;transition:background .15s}
.n-mega-item:hover{background:#f6f8f7}
.n-mega-label{display:block;font-family:'Inter',sans-serif;font-size:13px;
  font-weight:500;color:#111827;margin-bottom:2px}
.n-mega-desc{display:block;font-family:'Inter',sans-serif;font-size:11.5px;
  color:#6b7280;line-height:1.45}

/* Narrow viewports: single column, group headings become accordion toggles
   (nav-mega.js toggles .open on the group). Note both nav variants hide
   .n-links entirely at ≤640px, so below that the menu is unreachable by
   design — the accordion covers the 641px–820px window. */
@media(max-width:820px){
  .n-mega{width:min(420px,calc(100vw - 24px));padding:10px}
  .n-mega-cols{grid-template-columns:1fr;gap:2px}
  .n-mega-h{display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;padding:10px;border-bottom:0;margin-bottom:0;border-radius:6px}
  .n-mega-h:hover{background:#f6f8f7}
  .n-mega-h::after{content:'\203A';font-size:14px;color:#9ca3af;
    transition:transform .2s}
  .n-mega-group.open .n-mega-h::after{transform:rotate(90deg)}
  .n-mega-group .n-mega-item{display:none}
  .n-mega-group.open .n-mega-item{display:block}
}

/* ── Mobile hamburger + overlay (nm-*) ─────────────────────────────────────
   Ported from the chrome-variant pages to the 20 marketing pages that hid
   .n-links on mobile with no menu at all. Namespaced nm-* so the five pages
   with their own n-overlay implementation are untouched (they don't carry
   this markup). The button lives inside the fixed nav (z-500); the overlay
   sits under it (z-480) so the hamburger stays clickable as a close toggle.
   Shown at ≤768px (where base.css/inline styles hide .n-links), or ≤900px
   inside .site-nav (chrome.css hides its links there). */
.nm-ham{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;background:none;border:0;cursor:pointer;padding:6px;flex-shrink:0}
.nm-ham span{display:block;height:2px;width:100%;background:var(--nm-ham-c,#fff);border-radius:2px;transition:transform .25s,opacity .2s}
.nm-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nm-ham.open span:nth-child(2){opacity:0}
.nm-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:768px){.nm-ham{display:flex}}
@media(max-width:900px){.site-nav .nm-ham{display:flex}}

.nm-overlay{position:fixed;inset:0;background:rgba(13,17,23,.98);z-index:480;display:none;overflow-y:auto;overscroll-behavior:contain;padding:92px 36px 48px}
.nm-overlay.open{display:block}
.nm-ov-inner{display:flex;flex-direction:column;gap:4px;max-width:520px;margin:0 auto}
.nm-ov-link{font-family:'Fraunces',Georgia,serif;font-size:clamp(26px,6vw,34px);font-weight:200;color:rgba(255,255,255,.92);text-decoration:none;background:none;border:0;text-align:left;cursor:pointer;padding:6px 0;letter-spacing:-.02em;line-height:1.3}
.nm-ov-link:hover{color:#fff}
.nm-ov-caret{display:inline-block;font-size:.55em;color:rgba(255,255,255,.4);transition:transform .2s;margin-left:10px;vertical-align:middle}
.nm-ov-toggle.open .nm-ov-caret{transform:rotate(90deg)}
.nm-ov-body{display:none;flex-direction:column;padding:2px 0 10px 18px}
.nm-ov-body.open{display:flex}
.nm-ov-sub{font-family:'Inter',sans-serif;font-size:16px;color:rgba(255,255,255,.55);text-decoration:none;padding:7px 0;line-height:1.4}
.nm-ov-sub:hover{color:#fff}
.nm-ov-div{height:1px;background:rgba(255,255,255,.12);margin:18px 0 16px}
.nm-ov-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nm-ov-cta{font-family:'Inter',sans-serif;font-size:15px;font-weight:500;color:#fff;background:#0a6e4f;padding:12px 22px;border-radius:8px;text-decoration:none}
.nm-ov-ghost{font-family:'Inter',sans-serif;font-size:15px;color:rgba(255,255,255,.7);text-decoration:none;padding:12px 4px}
.nm-ov-ghost:hover{color:#fff}

/* At the hamburger breakpoints the top bar holds the logo and the hamburger,
   nothing else. nav-auth.js swaps the "Sign in" link for the signed-in email
   (up to 160px) and inserts "Sign out" beside it, which grew .n-actions to
   ~435px — with the 105px logo that overflows a ≤500px nav and pushes the
   36px hamburger past the right edge. The nav does not scroll horizontally,
   so a signed-in user had no reachable navigation at all on mobile.
   Everything hidden here already exists in the overlay: it carries its own
   Sign in and Request a Demo, and nav-auth.js rewrites that "Sign in" too
   (it matches a[href="/login.html"] anywhere), so the signed-in identity and
   Sign out are present there. :has(.nm-ham) scopes this to the 20 pages that
   ship the overlay — every .nm-ham page has one — leaving the ~12 nav-auth
   pages without an overlay untouched, since for them .n-actions is the only
   way to reach those links.
   !important is required, not stylistic: nav-auth.js sets an inline
   display:inline-block on the email link (it needs it for the ellipsis
   truncation on desktop), and an inline style beats a stylesheet rule. Without
   it the Sign out and CTA hide but the email stays, which is most of the
   overflow. */
@media(max-width:768px){.n-actions:has(.nm-ham)>*:not(.nm-ham){display:none!important}}
@media(max-width:900px){.site-nav .n-actions:has(.nm-ham)>*:not(.nm-ham){display:none!important}}