/* The liquid pill for the marketing nav: the same glass highlight as the client portal's pill. It sits behind the link of the page you are on (the
   link carries aria-current="page"). When you click another page, nav.js glides a copy of it from the old link to the new one, then opens the page,
   where the highlight is already waiting under the new link. People who ask for less motion get the page straight away. */
.nav-links { position: relative; }
.nav-link { position: relative; z-index: 1; }
.nav-link[aria-current="page"] { isolation: isolate; color: var(--color-ink, var(--fg, #FAFAFB)); }
.nav-link[aria-current="page"]::before,
.nav-glide {
  content: ''; position: absolute; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(155 80 255 / 0.26));
  box-shadow: inset 0 0 0 1px rgb(180 123 255 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 18px -6px rgb(155 80 255 / 0.55);
}
.nav-link[aria-current="page"]::before { inset: 0; z-index: -1; }
@media (hover: hover) and (pointer: fine) { .nav-link[aria-current="page"]:hover { background: none; } }

/* While the copy glides: it carries the highlight, the old link lets go of it and the new link lights up. */
.nav-glide { top: 0; left: 0; z-index: 0; will-change: transform, width; }
.nav-links.is-gliding .nav-link[aria-current="page"]::before { opacity: 0; }
.nav-links.is-gliding .nav-link[aria-current="page"] { color: var(--color-muted, var(--muted, #B7B7C2)); transition: color 0.3s ease; }
.nav-links.is-gliding .nav-link.is-target { color: var(--color-ink, var(--fg, #FAFAFB)); transition: color 0.3s ease; }