/* buildcontrol — Mobile navigation drawer. */
/* ---------- mobile navigation ---------- */
.mnav-btn{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--n-150,#E8EBEF);
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  margin-left:auto;margin-right:10px;padding:0}
.mnav-btn span{display:block;width:18px;height:2px;border-radius:2px;background:#113967;transition:transform .25s,opacity .2s}
.mnav-btn.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mnav-btn.on span:nth-child(2){opacity:0}
.mnav-btn.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mnav-ov{position:fixed;inset:0;background:rgba(11,32,60,.5);z-index:98;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .25s,visibility .25s}
.mnav-ov.on{opacity:1;visibility:visible;pointer-events:auto}

.mnav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;z-index:99;
  transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:-8px 0 30px rgba(11,32,60,.18)}
.mnav.on{transform:translateX(0)}
.mnav-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--n-150,#E8EBEF);position:sticky;top:0;background:#fff;z-index:2}
.mnav-hd b{font-family:var(--f-header,'DM Sans',sans-serif);font-weight:700;font-size:14px;color:#113967}
.mnav-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--n-150,#E8EBEF);background:#fff;
  cursor:pointer;display:grid;place-items:center}
.mnav-x svg{width:14px;height:14px;fill:#5A6068}
.mnav-body{padding:14px 18px 26px}
.mnav-body a{display:block;padding:11px 0;font-family:var(--f-header,'DM Sans',sans-serif);
  font-weight:600;font-size:15px;color:#212121;border-bottom:1px solid #F2F5F9}
.mnav-body a:last-child{border-bottom:none}
.mnav-grp{margin-top:16px}
.mnav-grp .gh{font-family:var(--f-header,'DM Sans',sans-serif);font-weight:600;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#8FA8C6;padding:8px 0 4px}
.mnav-grp a{font-weight:500;font-size:14px;color:#3E434A;padding:9px 0}
.mnav-cta{display:flex;align-items:center;justify-content:center;height:46px;margin-top:20px;border-radius:8px;
  background:linear-gradient(180deg,#2D6BC8 0%,#1F58AE 100%);color:#fff!important;
  font-family:var(--f-header,'DM Sans',sans-serif);font-weight:700;font-size:14.5px;border-bottom:none!important}
body.mnav-lock{overflow:hidden}

@media(max-width:1149px){.mnav-btn{display:flex}}
@media(prefers-reduced-motion:reduce){.mnav,.mnav-ov,.mnav-btn span{transition:none}}

/* ---------- phone header: fit logo + CTA + burger inside 320px ---------- */
/* The header row is a flex line, and both the burger and the Book A Demo pill
   were shrinkable — at 360px and below the pill ran past the right edge and the
   42px burger was squeezed to 26px. Pin both against shrinking, compact them,
   and move the burger to the far right where a phone user expects it. */
@media(max-width:640px){
  .nav-in{height:62px;gap:8px}
  .logo img{height:46px}
  .nav-cta{order:2;flex:none;margin-left:auto;height:40px;gap:8px;
    padding:0 5px 0 15px;font-size:13.5px;box-shadow:0 3px 10px rgba(31,88,174,.24)}
  .nav-cta .arw{width:30px;height:30px}
  .nav-cta .arw svg{width:15px;height:15px}
  .mnav-btn{order:3;flex:none;width:40px;height:40px;margin-left:0;margin-right:0}
}
@media(max-width:380px){
  .logo img{height:40px}
  .nav-cta{height:38px;gap:6px;padding:0 4px 0 12px;font-size:12.5px}
  .nav-cta .arw{width:28px;height:28px}
  .nav-cta .arw svg{width:14px;height:14px}
  .mnav-btn{width:38px;height:38px}
}

/* ---------- drawer CTAs: Book a Free Demo + Start Free Trial ---------- */
/* Both buttons declare display:flex with centred alignment, but the selector
   .mnav-body a (0,1,1) outranks the bare .mnav-cta / .mnav-trial classes
   (0,1,0), so the browser forced them back to display:block. align-items and
   justify-content then did nothing: each label sat jammed against the top-left
   of its box, and the generic 11px anchor padding applied on top. Matching the
   anchor specificity here is what makes the button rules take effect at all. */
.mnav-body a.mnav-cta,
.mnav-body a.mnav-trial{
  display:flex;align-items:center;justify-content:center;
  padding:0 14px;text-align:center;line-height:1.2;
}
/* The two sit as a pair at the foot of the drawer, so give them one consistent
   gap rather than the 20px/10px the separate rules had. */
.mnav-body a.mnav-cta{margin-top:22px}
.mnav-body a.mnav-trial{margin-top:10px}