/* GetKnowen shared pill nav (from home.css) — used on every page except the home page itself. */
:root{--ease:cubic-bezier(.32,.72,0,1)}
.hx-nav { position: fixed; top: 18px; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.hx-nav-pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(28, 24, 20, .06), 0 18px 40px -24px rgba(60, 38, 16, .35); }
.hx-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; letter-spacing: -.01em; margin-right: 10px; }
.hx-links { display: flex; gap: 2px; }
.hx-links a, .hx-login { padding: 9px 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .5s var(--ease), color .5s var(--ease); }
.hx-links a:hover, .hx-login:hover { background: rgba(28, 24, 20, .05); color: var(--ink); }
.hx-burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(28, 24, 20, .06); position: relative; cursor: pointer; }
.hx-burger span { position: absolute; left: 13px; right: 13px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform .6s var(--ease); }
.hx-burger span:first-child { transform: translateY(-4px); }
.hx-burger span:last-child { transform: translateY(4px); }
.menu-open .hx-burger span:first-child { transform: rotate(45deg); }
.menu-open .hx-burger span:last-child { transform: rotate(-45deg); }
.hx-menu { position: fixed; inset: 0; z-index: 25; background: rgba(250, 247, 242, .86); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); display: flex; align-items: center; padding: 96px 28px 40px; }
.menu-open .hx-menu { opacity: 1; pointer-events: auto; }
.hx-menu nav { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hx-menu nav a { font-size: 30px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-decoration: none; padding: 8px 0; opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hx-menu nav a.hx-btn { font-size: 16px; margin-top: 18px; align-self: flex-start; color: #fff; padding: 7px 7px 7px 24px; letter-spacing: -.005em; }
.menu-open .hx-menu nav a { opacity: 1; transform: none; }
.menu-open .hx-menu nav a:nth-child(2) { transition-delay: .05s; } .menu-open .hx-menu nav a:nth-child(3) { transition-delay: .1s; }
.menu-open .hx-menu nav a:nth-child(4) { transition-delay: .15s; } .menu-open .hx-menu nav a:nth-child(5) { transition-delay: .2s; }
.menu-open .hx-menu nav a:nth-child(6) { transition-delay: .25s; } .menu-open .hx-menu nav a:nth-child(7) { transition-delay: .3s; }

/* ---------- buttons ---------- */
.hx-btn { display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 24px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; transition: transform .5s var(--ease), background .5s var(--ease); box-shadow: 0 14px 30px -16px rgba(150, 56, 18, .55); }
.hx-btn:hover { background: var(--accent-2); }
.hx-btn:active { transform: scale(.98); }
.hx-btn .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); transition: transform .5s var(--ease); }
.hx-btn:hover .ic { transform: translate(3px, -1px) scale(1.06); }
.hx-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.hx-btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(28, 24, 20, .1); }
.hx-btn.ghost .ic { background: rgba(28, 24, 20, .06); }
.hx-btn.ghost:hover { background: var(--paper-2); }
.hx-btn.light { background: #fff; color: var(--ink); box-shadow: none; }
.hx-btn.light .ic { background: var(--accent); color: #fff; }
.hx-btn.sm { padding: 10px 18px; font-size: 14px; box-shadow: none; }
.np-body{padding-top:84px}
.np-body .site-nav{display:none}
@media (max-width:1080px){.hx-links{display:none}}
@media (max-width:900px){.hx-login,.hx-nav-pill>.hx-btn.sm{display:none}.hx-burger{display:block}.hx-nav-pill{width:100%;justify-content:space-between}.np-body{padding-top:76px}}