/* ===== Mobile slide-in menu + integrations hub scaling ===== */
.menu-btn{display:none;flex:none;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.08);cursor:pointer;padding:0;position:relative;color:#fff}
.menu-btn span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:#fff;transition:.3s}
.menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:28px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
.drawer-head,.drawer-foot,.menu-ov{display:none}
.links .mlink{display:inline-flex;align-items:center;gap:8px}
.links .mlink .i{width:18px;height:18px;color:var(--gold)}

@media(max-width:900px){
 .menu-btn{display:block}
 .nav{flex-wrap:nowrap}
 .links{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,320px);z-index:80;
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  background:linear-gradient(180deg,#0b2144,var(--navy));
  padding:calc(18px + env(safe-area-inset-top,0px)) 0 calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateX(105%);visibility:hidden;
  transition:transform .35s cubic-bezier(.3,.8,.3,1),visibility 0s .35s;
  box-shadow:-20px 0 50px rgba(0,0,0,.45);overflow-y:auto;overscroll-behavior:contain;font-size:16px
 }
 .links.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.3,.8,.3,1),visibility 0s}
 .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 20px 16px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--gold)}
 .drawer-head button{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer}
 .links>a.mlink{padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.07);font-size:16px;font-weight:600}
 .links>a.mlink .txt{display:inline!important}
 .links>a.mlink.on{color:var(--gold);background:rgba(253,182,28,.08);box-shadow:inset 4px 0 0 var(--gold)}
 .links .login{margin:22px 24px 0;justify-content:space-between;padding:4px 4px 4px 22px!important;font-size:15px}
 .links .login .lbl{display:inline!important}
 .links .login .lbl:after{content:" to Dashboard"}
 .drawer-foot{display:block;margin:auto 24px 0;padding-top:22px;font-size:12.5px;color:#a9b8d0}
 .menu-ov{display:block;position:fixed;inset:0;z-index:45;background:rgba(3,10,22,.6);opacity:0;pointer-events:none;transition:opacity .3s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
 .menu-ov.show{opacity:1;pointer-events:auto}
 body.menu-open{overflow:hidden}
}

/* Integrations hub: scales to any width (JS sets --hs) */
.hubwrap{position:relative;width:100%;height:calc(380px*var(--hs,1))}
.hubwrap .hub{position:absolute;left:50%;top:0;margin:0;zoom:1!important;transform:translateX(-50%) scale(var(--hs,1));transform-origin:top center}
@media(max-width:560px){.hubwrap .hub{margin:0!important}}
.ni{-webkit-tap-highlight-color:transparent}
@media(max-width:900px){.irow.hl{transform:none}}

/* extra safety on every page */
html,body{max-width:100%;overflow-x:hidden}
table{max-width:100%}
pre,code{overflow-wrap:anywhere}
@media(max-width:560px){
 .irow{flex-wrap:nowrap}
 .irow .live{display:inline}
 .faq,.fq{gap:12px}
}
@media(max-width:380px){.irow .live{display:none}}
body.menu-open .wa{display:none}