/* ═══ PIPEIT DESIGN SYSTEM 2.0 - NAVIGATION (standalone) ═══
   The same floating nav and compact mobile menu used across the site, written
   with explicit values instead of custom properties so it can be dropped onto
   the blog pages without inheriting or colliding with their own tokens.

   Markup contract is identical to index.html and the product pages:
     .navwrap > .navbar  |  .mm-backdrop  |  .mobile-menu
   Behaviour comes from assets/site.js. There is no second implementation. */

.navwrap{position:fixed;top:14px;left:0;right:0;z-index:1000;padding:0 16px;transition:top .3s cubic-bezier(0.22,1,0.36,1);}
.navwrap .navbar{max-width:1080px;margin:0 auto;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(15,23,42,.08);border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:10px 10px 10px 22px;box-shadow:0 4px 24px rgba(15,23,42,.06);transition:padding .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s cubic-bezier(0.22,1,0.36,1);position:static;height:auto;top:auto;}
.navwrap.scrolled{top:8px;}
.navwrap.scrolled .navbar{padding:7px 8px 7px 20px;box-shadow:0 8px 32px rgba(15,23,42,.1);}

.navwrap .nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;}
.navwrap .nav-logo-text{font-size:16.5px;font-weight:800;color:#151515;letter-spacing:-.03em;}
.navwrap .nav-links{display:flex;align-items:center;gap:2px;}
.navwrap .nav-links a{font-size:14px;font-weight:500;color:#6B7280;text-decoration:none;padding:8px 14px;border-radius:999px;background:none;transition:color .15s,background .15s;}
.navwrap .nav-links a:hover{color:#151515;background:rgba(15,23,42,.05);}
.navwrap .nav-links a.active{color:#151515;font-weight:600;background:none;}
.navwrap .nav-cta{display:flex;align-items:center;gap:8px;}
.navwrap .nav-cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;border:none;font-family:inherit;line-height:1;transition:transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s cubic-bezier(0.22,1,0.36,1),background .2s;}
.navwrap .nav-cta .btn-ghost{background:transparent;color:#151515;border:1px solid rgba(15,23,42,.13);}
.navwrap .nav-cta .btn-ghost:hover{background:#F1F4F7;}
.navwrap .nav-cta .btn-black{background:#151515;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12);}
.navwrap .nav-cta .btn-black:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(21,21,21,.25);}
.navwrap .btn:focus-visible{outline:2px solid #4A78FF;outline-offset:3px;}

.navwrap .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;cursor:pointer;border:none;background:transparent;padding:8px;border-radius:999px;}
.navwrap .nav-burger span{width:20px;height:2px;background:#151515;border-radius:2px;transition:all .25s cubic-bezier(0.22,1,0.36,1);}
.navwrap .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navwrap .nav-burger.open span:nth-child(2){opacity:0;}
.navwrap .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mm-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:998;opacity:0;transition:opacity .25s cubic-bezier(0.22,1,0.36,1);}
.mm-backdrop.open{display:block;opacity:1;}

body .mobile-menu{display:none;position:fixed;top:8px;left:12px;right:12px;width:calc(100% - 24px);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(15,23,42,.08);border-radius:20px;padding:6px 14px 10px;z-index:999;flex-direction:column;gap:0;box-shadow:0 24px 64px rgba(15,23,42,.2);}
body .mobile-menu.open{display:flex;}
.mobile-menu .mm-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px;}
.mobile-menu .mm-head .nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;border:none;padding:0;}
.mobile-menu .mm-head .nav-logo-text{font-size:16.5px;font-weight:800;color:#151515;letter-spacing:-.03em;}
.mobile-menu .mm-close{width:38px;height:38px;border-radius:50%;background:#F1F4F7;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#151515;flex-shrink:0;}
.mobile-menu .mm-close:focus-visible{outline:2px solid #4A78FF;outline-offset:2px;}
.mobile-menu nav{position:static;padding:0;background:none;top:auto;}
.mobile-menu nav a{font-size:15px;font-weight:600;color:#151515;text-decoration:none;padding:0 6px;height:44px;display:flex;align-items:center;border-bottom:1px solid rgba(15,23,42,.08);background:none;}
.mobile-menu nav a:last-of-type{border-bottom:none;}
.mobile-menu nav a:hover{color:#151515;}
.mobile-menu .mm-cta{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.mobile-menu .mm-cta a.btn{width:100%;padding:12px 24px;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:600;text-decoration:none;border:none;line-height:1;}
.mobile-menu .mm-cta a.btn-black{background:#151515;color:#fff;}
.mobile-menu .mm-cta a.mm-quiet{background:#F1F4F7;color:#151515;border:1px solid rgba(15,23,42,.08);}

@media(max-width:880px){
  .navwrap .nav-links{display:none;}
  .navwrap .nav-cta{display:none;}
  .navwrap .nav-burger{display:flex;}
}
@media(max-width:767px){
  .navwrap{top:8px;padding:0 12px;}
  .navwrap .navbar{padding:7px 8px 7px 14px;}
  .navwrap .nav-logo svg{width:24px;height:24px;}
  .navwrap .nav-logo-text{font-size:17px;}
  .navwrap .nav-burger{width:38px;height:38px;}
}
@media(prefers-reduced-motion:reduce){
  .navwrap,.navwrap .navbar,.mm-backdrop,.navwrap .nav-burger span{transition:none;}
}