/* 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; }

/* Solutions dropdown: opens on hover or keyboard focus (desktop only) */
.nv-drop { position: relative; }
.nv-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease-out-soft); }
.nv-panel { position: absolute; top: 100%; left: -12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 520px; margin-top: 14px; padding: 10px;
  border-radius: 24px; background: var(--paper); border: 1px solid rgba(15,27,61,0.08); box-shadow: 0 24px 60px rgba(15,27,61,0.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms var(--ease-out-soft), transform 260ms var(--ease-out-soft), visibility 0s 260ms; }
.nv-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* keeps hover alive across the gap */
.nv-drop:hover .nv-panel, .nv-drop:focus-within .nv-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nv-drop:hover .nv-chev, .nv-drop:focus-within .nv-chev { transform: rotate(180deg); }
.nv-drop:hover > .nv-link { background: var(--mist); color: var(--ink); }
.nv-panel a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; white-space: normal; transition: background-color 160ms; }
.nv-panel a:hover { background: var(--mist); }
.nv-panel b { font: 600 15px/1.2 var(--font-sans); color: var(--ink); } .nv-panel span { font: 400 13px/1.35 var(--font-sans); color: var(--slate); }
.nv-panel .nv-salon { grid-column: 1 / -1; background: var(--mist); }
.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; }
  .nv-panel, .nv-chev { display: none; } /* phone: "Solutions" is a plain link to the section */
  /* 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; } }