/* 00-nav.css - P2. Every selector starts with .s-nav, per spec 4.4. */

.s-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid transparent;
}
.s-nav.is-scrolled {
  border-bottom-color: var(--line);
}

/* The nav only offers "Book a demo" when no other one is on screen, so the page
   never shows two of them at once: site.js 4b watches the hero CTA row and the
   CTA band's button and toggles .is-cta-visible when neither is in view. Hidden
   only under the .js gate; with JS off (or no IntersectionObserver) it is simply
   visible, because the page must be complete without scripting. */
.js .s-nav__cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.js .s-nav.is-cta-visible .s-nav__cta {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .s-nav__cta { transition: none; }
}

.s-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.s-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.s-nav__links a {
  font: 400 16px var(--font-sans);
  color: var(--ink-64);
  text-decoration: none;
  text-underline-offset: 6px;
  transition: color .15s;
}
.s-nav__links a:hover,
.s-nav__links a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cedar);
  text-decoration-thickness: 2px;
}

@media (max-width: 1199px) {
  .s-nav__links {
    gap: 24px;
  }
}

@media (max-width: 809px) {
  .s-nav__links {
    display: none;
  }
}