/* Mobile header: burger + full-screen offcanvas.
   Scoped classes (.burger / .navx) so this drops onto every page (incl. the
   inline-styled home) without colliding. Behaviour in splatoo-nav.js. */

/* burger button (injected into the toolbar) — desktop hidden.
   Same box as the offcanvas close so the toggle never jumps. */
.burger{display:none;width:var(--header-h);height:var(--header-h);border:0;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex:0 0 auto;transition:background .18s var(--ease)}
.burger:hover span{background:var(--c-accent)}
.burger span{display:block;width:18px;height:2px;background:var(--c-ink);transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* full-screen offcanvas */
.navx{position:fixed;inset:0;z-index:120;--nav-mod:var(--header-h);background:var(--c-bg);display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;overscroll-behavior:contain}
.navx.is-open{opacity:1;visibility:visible;transform:none}

/* glow + grid backdrop over the whole menu */
.navx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(114% 100% at 22% -8%,rgba(200,250,30,.24),transparent 60%)}
.navx::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(200,250,30,.136) 0 1px,transparent 1px),linear-gradient(180deg,rgba(200,250,30,.136) 0 1px,transparent 1px);background-size:var(--nav-mod) var(--nav-mod);background-position:right var(--space-gutter) top 0;-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
.navx>*{position:relative;z-index:1}
.navx__bar{display:flex;align-items:stretch;justify-content:space-between;height:var(--nav-mod);padding:0 var(--space-gutter);flex:0 0 auto}
.navx__bar .logo{font-size:22px}
.navx__bar .logo img,.navx__bar .logo .logo-img,.navx__bar .logo .logo__img{height:26px}
.navx__close{width:var(--nav-mod);align-self:stretch;border:1px solid rgba(200,250,30,.16);background:transparent;color:var(--c-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:18px;line-height:1}
.navx__close:hover{color:var(--c-accent);border-color:var(--c-accent);background:rgba(200,250,30,.06)}

/* primary links — vertically centred in the space between claim and CTA */
.navx__links{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:26px var(--space-gutter)}
.navx__links a{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,7vw,40px);letter-spacing:-.02em;line-height:1.1;color:var(--c-ink);padding:9px 0;transition:color .18s var(--ease)}
.navx__links a:hover,.navx__links a.is-active{color:var(--c-accent)}

/* use cases — direct select, pinned just above the CTA (thumb reach) */
.navx__uc{flex:0 0 auto;padding:14px var(--space-gutter) 24px}
.navx__uc .eyebrow{margin-bottom:16px}
.navx__chips{display:flex;flex-wrap:wrap;gap:8px}
.navx__chips a,.navx__chips .navx__chip--soon{font-size:14px;border:1px solid var(--c-line-2);padding:10px 15px;transition:.18s var(--ease)}
.navx__chips a{color:var(--c-ink-2)}
.navx__chips a:hover{border-color:var(--c-accent);color:var(--c-accent)}
.navx__chips .navx__chip--soon{color:rgba(244,245,242,.6);border-color:var(--c-line-2);border-style:dashed;cursor:default;display:inline-flex;align-items:center;gap:8px}
.navx__chips .navx__chip--soon small{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);opacity:1}

/* bottom CTA — green */
.navx__cta{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--c-accent);color:var(--c-ink-on-accent);font-family:var(--font-display);font-weight:500;font-size:clamp(20px,5vw,26px);letter-spacing:-.01em;padding:26px var(--space-gutter);text-decoration:none;transition:background .18s var(--ease)}
.navx__cta:hover{background:#b6e617}
.navx__cta span{font-size:.9em}

html.nav-open{overflow:hidden}

@media(max-width:760px){
  /* normalise the toolbar so it matches the offcanvas bar exactly (no jump) */
  .toolbar{padding:0 var(--space-gutter)}
  .toolbar .nav,.toolbar .seg{display:none}
  .toolbar .lang,.toolbar__lang{display:none}
  .toolbar__left,.tl{gap:0}
  .toolbar__right,.tr{gap:12px}
  .toolbar .logo{font-size:22px}
  .toolbar .logo img,.toolbar .logo .logo-img,.toolbar .logo .logo__img{height:26px}
  .burger{display:flex}
}
@media(min-width:761px){
  .navx{display:none}
}