/* ============================================================================
   THE marketing top nav — one definition, every public page.
   ----------------------------------------------------------------------------
   Before this file each marketing page carried its OWN copy of the nav CSS and
   they had silently drifted apart: the homepage used
   rgba(255,255,255,.82) + saturate(180%) blur(14px) + a border that only
   appears on scroll, while /advertising, /security and /reports used
   rgba(255,255,255,.86) + blur(12px) + a permanent border and a LIGHTER link
   colour (--muted, not --ink-2). /integrations used the signed-in app nav
   instead, at a different height with 15px links. Six navs, six looks.

   Rules for keeping it one nav:
   - Every colour and size here is LITERAL, not a var(). The pages define
     different variable sets, so a shared file that read them would still
     render differently per page. Do not reintroduce var() here.
   - The class prefix is .mnav, deliberately NOT .nav or .sitenav, so it cannot
     collide with the old per-page rules or the signed-in app nav in site.css.
   - Markup lives in ONE block copied verbatim into each page. If you change a
     link, change it everywhere; scripts/check_site_consistency.py fails CI if
     the blocks diverge.
   ========================================================================== */

.mnav{position:sticky;top:0;z-index:100;height:68px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s;}
.mnav.scrolled{border-bottom-color:#e7e9ee;}
.mnav-in{height:100%;max-width:1320px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:28px;}

.mnav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.mnav .brand .mark{width:30px;height:30px;display:block;}
.mnav .brand .word{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-.02em;color:#0b0d12;line-height:1.2;}
.mnav .brand .word small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#8b93a1;margin-top:-2px;}

.mnav-links{display:flex;align-items:center;gap:2px;margin-left:8px;flex-wrap:nowrap;}
.mnav-links a{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  padding:8px 10px;border-radius:9px;font-size:14px;font-weight:600;color:#353b47;
  text-decoration:none;transition:all .14s;white-space:nowrap;flex-shrink:0;}
.mnav-links a:hover{background:#f6f7f9;color:#0b0d12;}
.mnav-links a[aria-current="page"]{color:#4f46e5;}

.mnav-cta{margin-left:auto;display:flex;align-items:center;gap:10px;}
.mnav-btn{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 15px;
  border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;
  border:1px solid transparent;transition:all .16s;white-space:nowrap;cursor:pointer;}
.mnav-btn-ghost{background:#fff;color:#0b0d12;border-color:#e7e9ee;}
.mnav-btn-ghost:hover{border-color:#cfd3da;}
.mnav-btn-primary{background:#4f46e5;color:#fff;box-shadow:0 1px 2px rgba(11,13,18,.06);}
.mnav-btn-primary:hover{background:#4338ca;}

.mnav-burger{display:none;}

/* The links row is 8 items wide; below 1360px it no longer fits beside the
   three CTA buttons, so collapse to the burger rather than let labels wrap
   mid-phrase ("See / it / work"). */
@media(max-width:1360px){
  .mnav-links{display:none;}
  .mnav-burger{display:inline-flex;}
}
@media(max-width:720px){
  .mnav-in{padding:0 14px;gap:12px;}
  .mnav .brand .word{font-size:16px;}
  .mnav-btn{height:34px;padding:0 12px;font-size:13.5px;}
  /* Book a demo is the first thing to go on a phone — Sign in and Connect
     your data are the two that matter. */
  .mnav-cta .mnav-demo{display:none;}
}

/* On a phone the bar was 447px wide inside a 375px screen, so EVERY marketing
   page scrolled sideways. Brand + Sign in + Connect your data + the burger
   simply do not fit. Sign in drops out of the bar below 560px — it is still in
   the burger sheet, along with everything else — leaving brand, the one
   conversion button, and the menu. Measure the bar's scrollWidth against the
   viewport when changing anything here; the row gives no visual warning that
   it has overflowed. */
@media(max-width:560px){
  .mnav-in{padding:0 12px;gap:8px;}
  .mnav-cta .mnav-btn-ghost{display:none;}
  .mnav .brand .word small{display:none;}
  .mnav-btn{height:32px;padding:0 10px;font-size:13px;}
}
@media(max-width:360px){
  /* Below this the wordmark itself has to go; the gem still links home. */
  .mnav .brand .word{display:none;}
}

.mnav-sheet{position:fixed;inset:68px 0 0 0;z-index:99;background:rgba(255,255,255,.98);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:18px 22px;display:none;flex-direction:column;gap:2px;overflow-y:auto;}
.mnav-sheet.open{display:flex;}
.mnav-sheet a{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  padding:14px 12px;font-size:19px;font-weight:700;color:#0b0d12;
  text-decoration:none;border-radius:12px;}
.mnav-sheet a:hover{background:#f6f7f9;}