/* Site nav: a pill that spans the content width at the top and shrinks to its content on scroll (site.js). */
.nv { position: sticky; top: 0; z-index: 1000; padding: 12px 24px; }
.nv-pill { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1180px; margin: 0 auto;
  height: 64px; padding: 0 10px 0 22px; border-radius: 999px; background: rgba(255,255,255,0.86); border: 1px solid rgba(15,27,61,0.08);
  box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: max-width 560ms var(--ease-out-soft), box-shadow 320ms var(--ease-out-soft); }
.nv.is-folded .nv-pill { box-shadow: var(--shadow-glass); }
.nv-brand { display: block; flex: none; }
.nv-menu { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.nv-link { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  font: 500 15px/1 var(--font-sans); color: var(--slate); cursor: pointer; transition: background-color 160ms var(--ease-out-soft), color 160ms; }
.nv-link:hover { background: var(--mist); color: var(--ink); }
.nv-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nv-cta { display: inline-flex; align-items: center; height: 44px; margin-left: 8px; padding: 0 22px; border-radius: 999px; background: var(--blue); color: #fff;
  font: 600 15px/1 var(--font-sans); box-shadow: var(--shadow-glow); transition: background-color 160ms var(--ease-out-soft), transform 90ms; }
.nv-cta:hover { background: var(--blue-deep); } .nv-cta:active { transform: scale(0.97); }

/* Logo fold: "nssay" squeezes away and the dot slides to the "a" */
.logo-fold { display: block; width: 121px; height: 31px; overflow: hidden; transition: width 560ms var(--ease-out-soft); }
.brand-logo { display: block; width: 121px; height: 31px; }
.logo-rest { transform-box: fill-box; transform-origin: left center; transition: transform 560ms var(--ease-out-soft), opacity 320ms var(--ease-out-soft); }
.logo-dot { transition: transform 560ms var(--ease-out-soft); }
.nv.is-folded .logo-fold { width: 33px; }
.nv.is-folded .logo-rest { transform: scaleX(0); opacity: 0; }
.nv.is-folded .logo-dot { transform: translateX(-2441px); } /* cx 3118.5 -> 677.5, 44 units after the "a" */

/* Burger + phone menu */
.nv-burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--mist); cursor: pointer; position: relative; flex: none; }
.nv-burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 260ms var(--ease-out-soft); }
.nv-burger span:first-child { top: 17px; } .nv-burger span:last-child { top: 25px; }
.nv.is-open .nv-burger span:first-child { transform: translateY(4px) rotate(45deg); }
.nv.is-open .nv-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nv-bar { display: none; }

@media (max-width: 991px) {
  .nv { padding: 10px 16px; }
  .nv-pill { padding: 0 10px 0 18px; height: 60px; }
  .nv-burger { display: block; }
  .nv-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    border-radius: 26px; background: var(--paper); border: 1px solid rgba(15,27,61,0.08); box-shadow: 0 24px 60px rgba(15,27,61,0.14); }
  .nv.is-open .nv-menu { display: flex; }
  .nv-link { height: 48px; justify-content: space-between; font-size: 16px; color: var(--ink); }
  .nv-cta { display: none; }
  /* Spec: sticky bottom bar on phone — Start free trial (blue) + a secondary action (glass) */
  .nv-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 999; display: flex; gap: 8px; padding: 8px; border-radius: 999px;
    background: rgba(255,255,255,0.88); border: 1px solid rgba(15,27,61,0.08); box-shadow: 0 12px 40px rgba(15,27,61,0.16);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .nv-bar a { flex: 1; display: grid; place-items: center; height: 48px; border-radius: 999px; font: 600 15px/1 var(--font-sans); }
  .nv-bar-cta { background: var(--blue); color: #fff; box-shadow: var(--shadow-glow); }
  .nv-bar-demo { background: var(--mist); color: var(--ink); }
  body { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .nv-pill, .logo-fold, .logo-rest, .logo-dot { transition: none; } }