/* ============================================================================
   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.
   ========================================================================== */

/* The bar floats as a rounded pill rather than spanning the full width.
   .mnav is now a transparent sticky WRAPPER and .mnav-in is the pill itself,
   so the markup is untouched — only which element carries the surface. */
.mnav{position:sticky;top:0;z-index:100;height:auto;padding:14px 24px 10px;
  background:linear-gradient(#FBFAFE 58%,rgba(251,250,254,0));
  border-bottom:0;transition:none;}
.mnav.scrolled{border-bottom-color:transparent;}
.mnav-in{height:58px;max-width:1180px;margin:0 auto;padding:0 10px 0 20px;
  display:flex;align-items:center;gap:24px;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid #E8E6F2;border-radius:999px;
  box-shadow:0 1px 2px rgba(12,16,23,.04), 0 10px 26px -12px rgba(43,42,224,.22);}
@media(max-width:640px){.mnav{padding:10px 14px 8px;}
  .mnav-in{padding:0 8px 0 14px;height:52px;gap:12px;}}

.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:'Bricolage Grotesque','Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-.035em;color:#161232;line-height:1.2;}
.mnav .brand .word small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#746D96;margin-top:-2px;}

.mnav-links{display:flex;align-items:center;gap:2px;margin-left:8px;flex-wrap:nowrap;}
.mnav-links a{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  padding:8px 13px;border-radius:999px;font-size:14px;font-weight:600;color:#453F63;
  text-decoration:none;transition:all .14s;white-space:nowrap;flex-shrink:0;}
.mnav-links a:hover{background:#F5F4FB;color:#161232;}
.mnav-links a[aria-current="page"]{color:#2B2AE0;}

.mnav-cta{margin-left:auto;display:flex;align-items:center;gap:10px;}
.mnav-btn{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 17px;
  border-radius:999px;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:#161232;border-color:#E8E6F2;}
.mnav-btn-ghost:hover{border-color:#D6D2E8;}
.mnav-btn-primary{background:#2B2AE0;color:#fff;box-shadow:0 1px 2px rgba(11,13,18,.06);}
.mnav-btn-primary:hover{background:#1D1CBA;}

.mnav-burger{display:none;}

/* The links row used to be 8 flat items and stopped fitting beside the CTA
   buttons at 1360px. It is now three menu triggers, so the bar survives much
   further down before the burger has to take over. Re-measure .mnav-in's
   scrollWidth against the viewport if you ever add a fourth trigger — the row
   gives no visual warning that it has overflowed. */
@media(max-width:980px){
  .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;}
  /* 42px, not 34: this is the only conversion button on a phone and a
     34px target is below what a thumb reliably hits. Height only --
     padding and font-size are untouched so the bar cannot get wider. */
  .mnav-btn{height:42px;padding:0 12px;font-size:13.5px;}
  /* Kept for any page that still marks a SECOND, lower-priority demo link
     with .mnav-demo. The nav's own conversion button is .mnav-btn-primary
     and must never carry this class — 2026-08-25 the demo swap briefly put
     it here, which hid the only call to action on every phone. */
  .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 + Book a demo + 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:42px;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:82px 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:'Instrument Sans',system-ui,-apple-system,sans-serif;
  padding:14px 12px;font-size:19px;font-weight:700;color:#161232;
  text-decoration:none;border-radius:12px;}
.mnav-sheet a:hover{background:#F5F4FB;}

/* ============================================================================
   Mega menus — Product and Resources.
   ----------------------------------------------------------------------------
   Replaces the flat 8-link row. That row was the reason .mnav-links collapsed
   to the burger at 1360px: eight labels plus the CTA buttons simply did not
   fit, and every page added to the site made it worse. Three items fit down to
   900px, and each destination now carries a line of copy explaining it, which
   a flat link cannot do. It also puts /how-it-works, /vs-mcp, /support,
   /security and /connect-guide in the bar for the first time — they existed
   but nothing linked to them from the nav.

   Same rule as the rest of this file: every colour and size is LITERAL, never
   a var(). The pages define different variable sets, so a shared file that read
   them would render differently per page.

   Opening is hover AND click, so it works on a trackpad and on touch. Focus
   opens it too, so the whole panel is reachable by Tab; Escape closes it.
   Below 1360px the burger sheet takes over and the panels never open.
   ========================================================================== */

.mnav-menu{position:relative;}
.mnav-trigger{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border:0;background:none;
  border-radius:10px;font-size:14px;font-weight:600;color:#453F63;cursor:pointer;
  transition:all .14s;white-space:nowrap;}
.mnav-trigger:hover,.mnav-trigger[aria-expanded="true"]{background:#F5F4FB;color:#161232;}
.mnav-chev{width:13px;height:13px;opacity:.6;transition:transform .18s ease;flex:none;}
.mnav-trigger[aria-expanded="true"] .mnav-chev{transform:rotate(180deg);}

.mnav-panel{position:absolute;top:calc(100% + 16px);left:0;
  background:#fff;border:1px solid rgba(11,13,18,.08);border-radius:20px;
  box-shadow:0 24px 60px rgba(11,13,18,.16),0 4px 12px rgba(11,13,18,.05);
  padding:26px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;}
.mnav-menu.open .mnav-panel{opacity:1;visibility:visible;transform:translateY(0);
  transition-delay:0s;}
@media(prefers-reduced-motion:reduce){
  .mnav-panel{transition:none;}
  .mnav-chev{transition:none;}
}

.mnav-eyebrow{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:12.5px;font-weight:600;color:#746D96;margin-bottom:18px;}
.mnav-cols{display:grid;gap:26px;}
#mnav-product .mnav-cols{grid-template-columns:302px 178px 238px;}
#mnav-resources .mnav-cols{grid-template-columns:290px 290px;}
.mnav-collabel{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#746D96;margin-bottom:8px;padding-left:8px;}

/* These live inside .mnav-links, whose bare `a` rule would otherwise force
   14px/600/nowrap on the whole row and flatten the two-line item. Reset it. */
.mnav-links a.mnav-item{display:flex;align-items:center;gap:12px;padding:9px 8px;min-height:44px;
  border-radius:10px;font-weight:400;font-size:inherit;white-space:normal;}
.mnav-links a.mnav-item:hover{background:#F5F4FB;}
.mnav-tile{width:32px;height:32px;flex:none;border-radius:10px;background:#EFEFFF;color:#2B2AE0;
  display:flex;align-items:center;justify-content:center;}
.mnav-tile svg{width:17px;height:17px;}
/* Scoped to .mnav-txt on purpose: a bare `.mnav-item span` also matches the
   icon tile (itself a span) and would out-specify .mnav-tile, collapsing the
   32px indigo square into a line of 12px text. */
.mnav-txt{min-width:0;}
.mnav-item .mnav-txt b{display:block;font-size:14px;font-weight:600;color:#161232;
  line-height:21px;}
.mnav-item .mnav-txt span{display:block;font-size:12px;font-weight:400;color:#5F5980;
  line-height:18px;margin-top:1px;}

.mnav-links a.mnav-src{display:flex;align-items:center;gap:11px;padding:8px;min-height:44px;border-radius:10px;
  font-size:15px;font-weight:500;color:#161232;white-space:nowrap;}
.mnav-links a.mnav-src:hover{background:#F5F4FB;}
/* Real favicons, the same source the rest of the site already uses
   (connections.html and the homepage pills both pull s2/favicons). The
   coloured initial underneath is the fallback: the <img> covers it completely
   with an opaque white plate, and its onerror removes itself, which uncovers
   the letter. So a blocked or 404'd favicon degrades to a tile rather than a
   hole. */
.mnav-logo{position:relative;width:22px;height:22px;border-radius:7px;flex:none;overflow:hidden;
  border:1px solid #E8E6F2;background:#fff;}
.mnav-logo::before{content:attr(data-fb);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;background:var(--fb,#746D96);color:#fff;
  font-size:10px;font-weight:800;line-height:1;}
.mnav-logo img{position:relative;display:block;width:100%;height:100%;object-fit:contain;
  background:#fff;padding:2px;}
.mnav-links a.mnav-all{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0 8px;
  padding:0;font-size:13px;font-weight:700;color:#2B2AE0;background:none;transition:gap .16s;}
.mnav-links a.mnav-all:hover{gap:9px;background:none;}
.mnav-all svg,.mnav-fcta svg{width:14px;height:14px;flex:none;}

.mnav-links a.mnav-feature{position:relative;overflow:hidden;border-radius:14px;padding:20px;
  color:#fff;background:linear-gradient(150deg,#5b53ea 0%,#1D1CBA 62%,#3b2fae 100%);
  display:flex;flex-direction:column;min-height:238px;white-space:normal;font-weight:400;}
.mnav-links a.mnav-feature:hover{
  background:linear-gradient(150deg,#655dee 0%,#4a3fd4 62%,#4335bd 100%);}
.mnav-gem{position:absolute;right:-34px;bottom:-40px;width:170px;opacity:.16;}
.mnav-ftop{display:flex;align-items:center;gap:9px;margin-bottom:14px;position:relative;}
.mnav-fico{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.18);flex:none;
  display:flex;align-items:center;justify-content:center;}
.mnav-fico svg{width:17px;height:17px;}
.mnav-feature h4{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0;color:#fff;}
.mnav-pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;
  border-radius:999px;background:rgba(255,255,255,.2);font-size:9.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;}
.mnav-pill i{width:6px;height:6px;border-radius:50%;background:#7dffb0;display:block;}
.mnav-feature p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.85);position:relative;
  margin:0;}
.mnav-fcta{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;position:relative;transition:gap .16s;}
.mnav-links a.mnav-feature:hover .mnav-fcta{gap:11px;}

/* Group headings inside the burger sheet, so the collapsed menu keeps the
   grouping the panels give the desktop bar. */
.mnav-sheet .mnav-sheetlabel{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#746D96;
  padding:16px 12px 4px;}


/* Touch sizing by pointer, not by width. A tablet is wide enough to miss the
   phone breakpoints above but is still driven by a thumb, so it was left with
   the 38px desktop button. Height only -- the bar's width budget is unchanged. */
@media (pointer:coarse){
  .mnav-btn{height:44px;}
  .mnav-links a.mnav-item,.mnav-links a.mnav-src{min-height:44px;}
}