/* Navbar research lab routes: /navbar1, /navbar2, /navbar3.
   The base / route receives no data-navbar-variant attribute and remains unchanged. */

.nv-lab,
.nvx { display: none; }

html[data-navbar-variant] body > .fnav.nav-morph { display: none; }
html[data-navbar-variant] .nv-lab { display: block; }
html[data-navbar-variant="1"] .nvx-1,
html[data-navbar-variant="2"] .nvx-2,
html[data-navbar-variant="3"] .nvx-3 { display: flex; }

.nvx {
  --nv-surface: rgba(11, 11, 13, 0.72);
  --nv-border: rgba(255, 255, 255, 0.105);
  --nv-muted: rgba(255, 255, 255, 0.58);
  --nv-strong: rgba(255, 255, 255, 0.96);
  position: fixed;
  z-index: 80;
  font-family: var(--preview-sans);
  color: var(--nv-strong);
  pointer-events: none;
}

.nvx a,
.nvx button { pointer-events: auto; }

.nvx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  color: var(--nv-strong);
  font-size: 15px;
  font-weight: 590;
  letter-spacing: -0.025em;
}

.nvx-brand img {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 8px;
  object-fit: contain;
}

.nvx-links,
.nvx-actions {
  display: flex;
  align-items: center;
}

.nvx-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--nv-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.008em;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
}

.nvx-link:active { transform: scale(0.97); }

.nvx-divider {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.12);
}

.nvx-menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nvx-menu span {
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 220ms var(--ease-out), opacity 160ms ease;
}

.nvx[data-open="true"] .nvx-menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nvx[data-open="true"] .nvx-menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nvx-drawer {
  position: absolute;
  top: calc(100% + 10px);
  left: 16px;
  right: 16px;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(10, 10, 12, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 22px 60px -24px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  transition: grid-template-rows 280ms var(--ease-out), opacity 180ms ease,
    transform 280ms var(--ease-out), border-color 180ms ease;
}

.nvx[data-open="true"] .nvx-drawer {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(255, 255, 255, 0.1);
  pointer-events: auto;
}

.nvx-drawer-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.nvx-drawer .nvx-link {
  justify-content: flex-start;
  min-height: 48px;
  padding: 0 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.76);
}

.nvx-drawer .nvx-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--ember-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 560;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.24), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}

.nvx-mobile-cta svg { width: 17px; height: 17px; }

.nvx :focus-visible {
  outline: 2px solid rgba(255, 138, 76, 0.95);
  outline-offset: 3px;
}

/* 01 — Editorial rail: visible hierarchy, full-width hairline, quiet chrome. */
.nvx-1 {
  top: 0;
  left: 0;
  right: 0;
  height: 74px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(5, 5, 6, 0.08);
  transition: height 360ms var(--ease-out), background-color 260ms ease,
    border-color 260ms ease, backdrop-filter 260ms ease;
}

.nvx-1.is-scrolled {
  height: 66px;
  background: rgba(7, 7, 9, 0.78);
  border-color: rgba(255, 255, 255, 0.105);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
}

.nvx-1 .nvx-inner {
  width: min(1280px, calc(100% - 64px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.nvx-1 .nvx-links { justify-self: center; gap: 2px; }
.nvx-1 .nvx-actions { justify-self: end; gap: 6px; }

.nvx-1 .nvx-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.78);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 240ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nvx-1 .nvx-link:hover { color: var(--nv-strong); }
  .nvx-1 .nvx-link:hover::after { transform: scaleX(1); transform-origin: left center; }
}

/* 02 — Framed dock: one contained surface with clear functional zones. */
.nvx-2 {
  top: 18px;
  left: 50%;
  width: min(1204px, calc(100% - 48px));
  height: 74px;
  transform: translateX(-50%);
  align-items: center;
  border: 1px solid var(--nv-border);
  border-radius: 19px;
  background: rgba(12, 12, 14, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 26px 68px -34px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.075);
  transition: top 380ms var(--ease-out), width 440ms cubic-bezier(0.62, 0, 0.15, 1),
    height 380ms var(--ease-out), border-radius 380ms var(--ease-out), background-color 260ms ease;
}

.nvx-2.is-scrolled {
  top: 10px;
  width: min(980px, calc(100% - 48px));
  height: 62px;
  border-radius: 16px;
  background: rgba(9, 9, 11, 0.88);
}

.nvx-2 .nvx-inner {
  width: 100%;
  height: 100%;
  padding: 0 10px 0 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nvx-2 .nvx-brand { justify-self: start; }
.nvx-2 .nvx-links { justify-self: center; gap: 2px; }
.nvx-2 .nvx-actions { justify-self: end; gap: 6px; }

.nvx-2 .nvx-link:hover {
  color: var(--nv-strong);
  background: rgba(255, 255, 255, 0.06);
}

/* 03 — Split islands: brand, wayfinding, and conversion stay legible as zones. */
.nvx-3 {
  --nv-collapse-duration: 460ms;
  --nv-collapse-ease: cubic-bezier(0.62, 0, 0.15, 1);
  top: 16px;
  left: 50%;
  width: min(1180px, calc(100% - 48px));
  min-height: 56px;
  box-sizing: border-box;
  transform: translateX(-50%);
  align-items: center;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: top var(--nv-collapse-duration) var(--nv-collapse-ease),
    width var(--nv-collapse-duration) var(--nv-collapse-ease),
    min-height var(--nv-collapse-duration) var(--nv-collapse-ease),
    border-color 280ms ease,
    border-radius var(--nv-collapse-duration) var(--nv-collapse-ease),
    background-color 280ms ease,
    -webkit-backdrop-filter 300ms ease,
    backdrop-filter 300ms ease,
    box-shadow 320ms ease;
}

.nvx-3.is-scrolled {
  top: 10px;
  width: min(590px, calc(100% - 48px));
  min-height: 50px;
  border-color: transparent;
  border-radius: 7px;
}

.nvx-3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -22px rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
}

.nvx-3.is-scrolled::before { opacity: 1; }

.nvx-island {
  min-height: 56px;
  display: flex;
  align-items: center;
  border: 1px solid var(--nv-border);
  border-radius: 16px;
  background: rgba(11, 11, 13, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 20px 52px -32px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

/* Variant 03 is deliberately de-framed: the navigation reads as one quiet
   typographic line over the hero, with only the conversion action retaining
   a surface. */
.nvx-3 .nvx-island {
  border-color: transparent;
  background: transparent;
  /* Same reason as the per-link rule below: a resting blur(0) is a visual
     no-op that permanently composites the island and every glyph inside it. */
  box-shadow: none;
  transition: -webkit-backdrop-filter 320ms cubic-bezier(0.23, 1, 0.32, 1),
              backdrop-filter 320ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Match the quiet secondary CTA: the navbar stays clear until it is being
   used, then softly blurs the hero texture directly behind that nav zone. */
.nvx-3 .nvx-island:focus-within {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

@media (hover: hover) and (pointer: fine) {
  .nvx-3 .nvx-island:hover {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition-duration: 160ms;
  }
}

.nvx-3 .nvx-brand-island,
.nvx-3 .nvx-link-island,
.nvx-3 .nvx-action-island {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  transition: left var(--nv-collapse-duration) var(--nv-collapse-ease),
    right var(--nv-collapse-duration) var(--nv-collapse-ease),
    transform var(--nv-collapse-duration) var(--nv-collapse-ease),
    min-height var(--nv-collapse-duration) var(--nv-collapse-ease),
    padding var(--nv-collapse-duration) var(--nv-collapse-ease),
    gap var(--nv-collapse-duration) var(--nv-collapse-ease);
}

/* The wayfinding group is centered on the viewport, not in the leftover
   flex space between the unequal brand and conversion groups. */
.nvx-3 .nvx-brand-island { left: 0; padding: 0; }
.nvx-3 .nvx-link-island {
  left: 50%;
  padding: 6px;
  gap: 3px;
  transform: translate(-50%, -50%);
}
.nvx-3 .nvx-action-island {
  right: 0;
  padding: 6px 0;
  gap: 10px;
}

.nvx-3.is-scrolled .nvx-island { min-height: 50px; }
.nvx-3.is-scrolled .nvx-brand-island { left: 5px; }
.nvx-3.is-scrolled .nvx-link-island { padding: 4px; }
.nvx-3.is-scrolled .nvx-action-island {
  right: 5px;
  padding: 4px 0;
  gap: 12px;
}

.nvx-3 .nvx-full-logo {
  position: absolute;
  left: 0;
  top: 50%;
  width: auto;
  height: 30px;
  border-radius: 0;
  object-fit: contain;
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%) scale(1);
  transition: opacity 170ms ease,
    filter 220ms ease,
    transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.nvx-3 .nvx-brand-island .nvx-brand {
  position: relative;
  width: 108px;
  min-width: 0;
  height: 40px;
  transition: width var(--nv-collapse-duration) var(--nv-collapse-ease);
}

.nvx-3 .nvx-mark-logo {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-50%) scale(0.25);
  transition: opacity 220ms ease,
    filter 300ms cubic-bezier(0.2, 0, 0, 1),
    transform 300ms cubic-bezier(0.2, 0, 0, 1);
}

.nvx-3 .nvx-link {
  min-height: 42px;
  padding: 0 15px;
}

.nvx-3 .nvx-link::before,
.nvx-3 .nvx-link::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

/* Hover lab controls ----------------------------------------------------- */
.nvx-hover-switch {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 84;
  display: none;
  align-items: center;
  gap: 3px;
  max-width: calc(100vw - 36px);
  padding: 4px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(12, 12, 14, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 18px 44px -30px rgba(0, 0, 0, 0.9);
  font-family: var(--preview-sans);
  scrollbar-width: none;
}

.nvx-hover-switch::-webkit-scrollbar { display: none; }
html[data-navbar-variant="3"] .nvx-hover-switch { display: flex; }
html[data-navbar-locked="true"] .nvx-hover-switch { display: none; }

.nvx-hover-label {
  padding: 0 8px 0 7px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nvx-hover-switch button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.56);
  font: inherit;
  font-size: 12px;
  font-weight: 520;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background-color 220ms var(--ease-out), transform 180ms var(--ease-out);
}

.nvx-hover-switch button:hover { color: rgba(255, 255, 255, 0.9); }
.nvx-hover-switch button:active { transform: scale(0.97); }
.nvx-hover-switch button[aria-pressed="true"] {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}
.nvx-hover-switch button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
}

.nvx-3 :focus-visible {
  outline-color: rgba(255, 255, 255, 0.86);
}

/* 01 — Rule: a single centered hairline resolves without moving the label. */
html[data-nav-hover="rule"] .nvx-3 .nvx-island > .nvx-link::after {
  left: 50%;
  bottom: 6px;
  width: 20px;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(-50%) scaleX(0.18);
  transition: opacity 160ms ease, transform 280ms var(--ease-out);
}

/* 02 — Ink: a denser label is perfectly overlaid, so weight changes without
   changing the link's measured width or moving its neighbors. */
html[data-nav-hover="ink"] .nvx-3 .nvx-island > .nvx-link::after {
  content: attr(data-label);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.96);
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.012em;
  transform: scale(0.985);
  transition: opacity 190ms ease, transform 300ms var(--ease-out);
}

/* 03 — Focus: hierarchy changes across the group, with no new geometry. */
html[data-nav-hover="focus"] .nvx-3 .nvx-link-island > .nvx-link {
  transition: color 260ms var(--ease-out), background-color 180ms ease, transform 180ms var(--ease-out);
}

/* 04 — See how: the hero's quiet-link recipe, reused verbatim in the nav lab.
   The magnetic letter motion is shared by the page's existing JS routine. */
/* No resting backdrop-filter. `blur(0px)` paints identically to `none`, but it
   still forces the element onto its own composited layer — which drops LCD
   subpixel antialiasing and renders the label in grayscale AA. On 14px light
   text over a near-black background that reads as permanently blurry, and the
   link island sits at a fractional x (595.21 at 1440w), so the layer composites
   off the pixel grid on top of that. `none` -> `blur(5px)` still interpolates
   (an omitted filter list animates from the identity), so the hover frost is
   unaffected. */
html[data-nav-hover="quiet"] .nvx-3 .nvx-island > .nvx-link {
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  transition: backdrop-filter 320ms cubic-bezier(0.23, 1, 0.32, 1),
              -webkit-backdrop-filter 320ms cubic-bezier(0.23, 1, 0.32, 1),
              color 180ms ease;
}

/* A backdrop-filter on the parent creates a new backdrop root in Safari,
   which prevents the child link from sampling and blurring the hero behind
   it. Keep this mode's island unfiltered so each hovered link can reproduce
   the hero CTA's visible 5px frost independently. */
html[data-nav-hover="quiet"] .nvx-3 .nvx-island {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (hover: hover) and (pointer: fine) {
  html[data-nav-hover] .nvx-3 .nvx-island > .nvx-link:hover { color: var(--nv-strong); }

  html[data-nav-hover="rule"] .nvx-3 .nvx-island > .nvx-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  html[data-nav-hover="ink"] .nvx-3 .nvx-island > .nvx-link:hover {
    color: rgba(255, 255, 255, 0.12);
  }
  html[data-nav-hover="ink"] .nvx-3 .nvx-island > .nvx-link:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  html[data-nav-hover="focus"] .nvx-3 .nvx-link-island:hover > .nvx-link {
    color: rgba(255, 255, 255, 0.34);
  }
  html[data-nav-hover="focus"] .nvx-3 .nvx-link-island > .nvx-link:hover {
    color: rgba(255, 255, 255, 0.96);
  }

  html[data-nav-hover="quiet"] .nvx-3 .nvx-link-island:hover > .nvx-link {
    color: rgba(255, 255, 255, 0.38);
  }
  html[data-nav-hover="quiet"] .nvx-3 .nvx-island > .nvx-link:hover {
    color: #ffffff;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: backdrop-filter 160ms cubic-bezier(0.23, 1, 0.32, 1),
                -webkit-backdrop-filter 160ms cubic-bezier(0.23, 1, 0.32, 1),
                color 180ms ease;
  }
}

/* Mirror the selected treatment for keyboard navigation. */
html[data-nav-hover="rule"] .nvx-3 .nvx-island > .nvx-link:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}
html[data-nav-hover="ink"] .nvx-3 .nvx-island > .nvx-link:focus-visible {
  color: rgba(255, 255, 255, 0.12);
}
html[data-nav-hover="ink"] .nvx-3 .nvx-island > .nvx-link:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
html[data-nav-hover="focus"] .nvx-3 .nvx-link-island:focus-within > .nvx-link {
  color: rgba(255, 255, 255, 0.34);
}
html[data-nav-hover="focus"] .nvx-3 .nvx-link-island > .nvx-link:focus-visible {
  color: rgba(255, 255, 255, 0.96);
}
html[data-nav-hover="quiet"] .nvx-3 .nvx-link-island:focus-within > .nvx-link {
  color: rgba(255, 255, 255, 0.38);
}
html[data-nav-hover="quiet"] .nvx-3 .nvx-island > .nvx-link:focus-visible {
  color: #ffffff;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Once collapsed, mirror the pricing pill's internals exactly: mark-only
   logo, left-aligned plain-text links, and no per-link glass surfaces. */
.nvx-3.is-scrolled .nvx-brand-island .nvx-brand { width: 40px; }
.nvx-3.is-scrolled .nvx-full-logo {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-50%) scale(0.25);
}
.nvx-3.is-scrolled .nvx-mark-logo {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%) scale(1);
}
.nvx-3.is-scrolled .nvx-link-island {
  left: 65px;
  gap: 10px;
  padding: 0;
  transform: translateY(-50%);
}
html[data-nav-hover] .nvx-3.is-scrolled .nvx-island > .nvx-link {
  min-height: 40px;
  padding: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  transition: color 180ms ease;
}
.nvx-3.is-scrolled .nvx-action-island > .nvx-link { padding: 0 12px; }
.nvx-3.is-scrolled .nvx-link::before,
.nvx-3.is-scrolled .nvx-link::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  html[data-nav-hover] .nvx-3.is-scrolled .nvx-link-island:hover > .nvx-link {
    color: rgba(255, 255, 255, 0.60);
  }
  html[data-nav-hover] .nvx-3.is-scrolled .nvx-island > .nvx-link:hover {
    color: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

html[data-nav-hover] .nvx-3.is-scrolled .nvx-island > .nvx-link:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nvx-3 .nvx-drawer { top: calc(100% + 8px); }

@media (max-width: 820px) {
  .nvx-hover-switch { display: none !important; }

  .nvx-links,
  .nvx-actions .nvx-link,
  .nvx-actions .nvx-divider,
  .nvx-3 .nvx-link-island,
  .nvx-3 .nvx-action-island .nvx-link { display: none; }

  .nvx-menu { display: inline-flex; }

  .nvx-1 { height: 68px; }
  .nvx-1.is-scrolled { height: 62px; }
  .nvx-1 .nvx-inner {
    width: calc(100% - 28px);
    display: flex;
    justify-content: space-between;
  }
  .nvx-1 .nvx-actions { margin-left: auto; }

  .nvx-2,
  .nvx-2.is-scrolled {
    top: 10px;
    width: calc(100% - 24px);
    height: 60px;
    border-radius: 15px;
  }
  .nvx-2 .nvx-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 8px 0 10px;
  }
  .nvx-2 .nvx-actions { margin-left: auto; }

  .nvx-3,
  .nvx-3.is-scrolled {
    top: 10px;
    width: calc(100% - 24px);
    min-height: 60px;
    gap: 8px;
  }
  .nvx-3 .nvx-brand-island {
    position: static;
    flex: 1;
    min-height: 60px;
    padding-left: 2px;
    transform: none;
  }
  .nvx-3 .nvx-action-island {
    position: static;
    min-height: 60px;
    padding: 7px 0;
    transform: none;
  }
  .nvx-3 .nav-join { display: none; }

  .nvx .nav-join { transform: scale(0.94); transform-origin: right center; }
}

@media (max-width: 430px) {
  .nvx-brand span { display: none; }
  .nvx-1 .nav-join,
  .nvx-2 .nav-join { display: none; }
}

@media (max-width: 560px) {
  .nvx-hover-switch {
    left: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }
  .nvx-hover-label { display: none; }
  .nvx-hover-switch button { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .nvx,
  .nvx *,
  .nvx *::before,
  .nvx *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Navbar 3 uses a staged handoff rather than a resize morph: the expanded
   bar leaves upward, then the compact pill enters downward into its place. */
.nvx-3,
.nvx-3.is-scrolled {
  top: 16px;
  left: 0;
  right: 0;
  width: 100%;
  height: 56px;
  min-height: 56px;
  transform: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
}

.nvx-3::before { display: none; }

.nvx-3 .nvx-expanded-shell {
  --nvx-handoff-y: 0px;
  position: absolute;
  top: 0;
  /* 1283, not 1180: the landing page overrode this in its own <style> so the
     logo and CTA line up with the edges of the browser-frame graphic below the
     hero. Every page that copied the navbar then had to repeat that override or
     sit at a different width. It is the navbar's width, so it ships with the
     navbar. The shell deliberately overhangs its 1180 container; it is centred
     with left:50% + translateX(-50%), so it overhangs symmetrically. */
  left: 50%;
  width: min(1283px, calc(100% - 48px));
  min-height: 56px;
  transform: translate(-50%, var(--nvx-handoff-y));
  opacity: 1;
  transition: transform 170ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease;
}

.nvx-3 .nvx-collapsed-shell {
  --nvx-handoff-y: -16px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  box-sizing: border-box;
  width: min(590px, calc(100% - 48px));
  height: 50px;
  /* Concentric with the Join-waitlist button it contains: for two nested
     rounded rectangles to share a centre of curvature,
        outer radius = inner radius + gap.
     The button is 10px with a uniform 5px inset (50px pill, 40px button, so
     5px top and bottom, and 5px to the right edge), giving 10 + 5 = 15px.
     It was 7px — TIGHTER than the 10px button inside it, so the child's corner
     bulged against a squarer parent corner. All four corners, per the same
     rule. */
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -22px rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--nvx-handoff-y));
  transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1), opacity 180ms ease;
}

.nvx-3.is-scrolled .nvx-expanded-shell {
  opacity: 0;
  pointer-events: none;
  --nvx-handoff-y: -16px;
}

.nvx-3.is-scrolled .nvx-collapsed-shell {
  opacity: 1;
  pointer-events: auto;
  --nvx-handoff-y: 0px;
  /* Overlap the outgoing rail rather than waiting for it to clear: a delay
     equal to the exit duration leaves a frame with an empty nav, which reads
     as a blink. Matches the GSAP handoff's 80ms overlap. */
  transition-delay: 80ms;
}

/* GSAP owns the handoff values when available, so an interrupted scroll never
   restarts a CSS transition from a stale frame. */
.nvx-3[data-gsap-handoff="true"] .nvx-expanded-shell,
.nvx-3[data-gsap-handoff="true"] .nvx-collapsed-shell { transition: none; }

/* Hold the exiting layer in its original layout while it moves away. */
.nvx-3 .nvx-expanded-shell .nvx-brand-island { left: 0; padding: 0; }
.nvx-3 .nvx-expanded-shell .nvx-link-island {
  left: 50%;
  gap: 3px;
  padding: 6px;
  transform: translate(-50%, -50%);
}
.nvx-3 .nvx-expanded-shell .nvx-action-island {
  right: 0;
  gap: 10px;
  padding: 6px 0;
}
.nvx-3.is-scrolled .nvx-expanded-shell .nvx-island { min-height: 56px; }
.nvx-3.is-scrolled .nvx-expanded-shell .nvx-brand-island { left: 0; }
.nvx-3.is-scrolled .nvx-expanded-shell .nvx-link-island {
  left: 50%;
  gap: 3px;
  padding: 6px;
  transform: translate(-50%, -50%);
}
.nvx-3.is-scrolled .nvx-expanded-shell .nvx-action-island {
  right: 0;
  gap: 10px;
  padding: 6px 0;
}
/* The expanded layer keeps its final desktop hit areas and spacing while the
   compact-state class remains in place during a reverse handoff. */
html[data-nav-hover] .nvx-3.is-scrolled .nvx-expanded-shell .nvx-island > .nvx-link {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--nv-muted);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nvx-3.is-scrolled .nvx-expanded-shell .nvx-brand { width: 108px; }
.nvx-3.is-scrolled .nvx-expanded-shell .nvx-full-logo {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%) scale(1);
}

/* Compact pill internals retain the approved collapsed design. */
.nvx-3 .nvx-collapsed-shell .nvx-island {
  position: absolute;
  z-index: 1;
  top: 50%;
  min-height: 50px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateY(-50%);
}
.nvx-3 .nvx-collapsed-brand { left: 5px; }
.nvx-3 .nvx-collapsed-brand img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
}
.nvx-3 .nvx-collapsed-links {
  left: 65px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nvx-3 .nvx-collapsed-actions {
  right: 5px;
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-nav-hover] .nvx-3 .nvx-collapsed-shell .nvx-link {
  min-height: 40px;
  padding: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: color 180ms ease;
}
.nvx-3 .nvx-collapsed-actions > .nvx-link { padding: 0 12px; }
@media (hover: hover) and (pointer: fine) {
  html[data-nav-hover] .nvx-3 .nvx-collapsed-shell .nvx-link:hover {
    color: rgba(255, 255, 255, 0.95);
  }
}

@media (max-width: 820px) {
  .nvx-3,
  .nvx-3.is-scrolled {
    top: 10px;
    left: 50%;
    right: auto;
    width: calc(100% - 24px);
    height: 60px;
    min-height: 60px;
    transform: translateX(-50%);
  }
  .nvx-3 .nvx-expanded-shell {
    position: relative;
    left: 0;
    width: 100%;
    min-height: 60px;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none;
  }
  .nvx-3 .nvx-collapsed-shell { display: none; }
}

/* ---------- magnet hover (hover-lab #17) ----------
   The nav's signature hover: each glyph rises toward the pointer with a
   gaussian falloff. The label is split into .ch spans by navbar-variants.js.

   This lived inline on the landing page and was copy-pasted into the pricing
   page, so the waitlist page -- which renders the same markup -- silently had
   no hover at all. It belongs to the navbar, so it ships with the navbar:
   every page that loads these two files now gets the identical interaction. */
.nvx-3 .nvx-island > .nvx-link .lbl {
  display: inline-block;
  white-space: pre;
}
.nvx-3 .nvx-island > .nvx-link .lbl .ch {
  display: inline-block;
  will-change: transform;
}

/* ---------- the navbar's Join button ----------
   Copied verbatim from the landing page's shared-aspekta.css, scoped to .nvx so
   the navbar carries its own appearance instead of inheriting whatever the host
   page happens to define. Before this, .nav-join was defined four times -- in
   shared-aspekta.css, again in pricing/index.html, differently in
   pricing/shell.css (which styles .lbl/.tile, children this markup does not
   have), and by hand in the waitlist page. Scoping under .nvx (0,2,0) outranks
   every bare .nav-join (0,1,0), so the nav resolves to one definition.

   .nav-join is NOT nav-only -- the landing page's pricing cards use it too --
   so the unscoped rules stay where they are for those. */
.nvx .btn-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -1px 1px rgba(0, 0, 0, 0.75), 0 2px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.nvx .btn-tile .lucide { flex-shrink: 0; }

.nvx .nav-join {
  position: relative;
  display: block;
  width: 138px;
  height: 40px;
  border-radius: 10px;
  background: var(--ember-deep);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.47);
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
}
.nvx .nav-join:active { transform: scale(0.98); }
.nvx .nav-join .btn-label {
  position: absolute;
  left: 11px;
  top: 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #ffffff;
  z-index: 1;
  pointer-events: none;
  transition: color 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.nvx .nav-join .btn-tile {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;
  width: 36px;
  height: auto;
  border-radius: 9px;
  justify-content: flex-end;
  padding-right: 9px;
  transition: width 260ms var(--ease-out);
  will-change: width;
}
.nvx .nav-join .btn-tile .lucide { transition: transform 260ms var(--ease-out); }
/* Filled state: label and arrow settle toward each other into one centered
   lockup — same duration/ease as the fill, one gesture */
@media (hover: hover) and (pointer: fine) {
  .nvx .nav-join:hover .btn-tile { width: calc(100% - 4px); }
  .nvx .nav-join:hover .btn-label {
    color: #000000;
    transform: translateX(4px);
    transition-delay: 50ms, 0ms;
  }
  .nvx .nav-join:hover .btn-tile .lucide { transform: translateX(-4px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — navbar 03 (≤820px). THE authoritative mobile block.

   It lives at the END of this file on purpose. The earlier @media blocks at
   ~697 and ~962 were being silently undone: `.nvx-3 .nav-join { display: none }`
   at 751 loses to `.nvx .nav-join { display: block }` at 1028 because they carry
   the same (0,2,0) specificity and the later declaration wins regardless of the
   media query. That single line is why the ember CTA rendered unpositioned over
   the hero headline on every phone. Anything mobile goes HERE, after every
   desktop rule, or the next person gets the same ghost.

   The shape: one real bar — logo left, ember CTA + menu right — that is
   transparent over the hero and frosts once the page scrolls, so no headline
   ever reads underneath it again.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* ---- the bar itself ---------------------------------------------------- */
  .nvx-3,
  .nvx-3.is-scrolled {
    /* left/right insets instead of width + translateX(-50%): a transform on
       this element would become the containing block for the fixed-position
       scrim below, and the scrim has to cover the viewport. */
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    width: auto;
    height: 56px;
    min-height: 56px;
    transform: none;
  }

  /* The desktop scroll handoff (rail → compact pill) is disabled below 820px
     in navbar-variants.js, so the expanded shell is the only layer on phones.
     Pin it flat and let it lay its islands out as a plain flex row. */
  .nvx-3 .nvx-collapsed-shell { display: none; }
  .nvx-3 .nvx-expanded-shell,
  .nvx-3.is-scrolled .nvx-expanded-shell {
    position: static;
    left: auto;
    width: 100%;
    height: 56px;
    min-height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    /* 7px inset → the 42px controls inside sit concentric with the 18px bar
       radius (18 − 7 = 11, the controls' own radius). */
    padding: 0 7px;
    border-radius: 18px;
    /* !important guards against the inline transform GSAP writes on the shells
       (xPercent:-50) if a desktop session is resized down to phone width. */
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 260ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1),
                -webkit-backdrop-filter 260ms cubic-bezier(0.23, 1, 0.32, 1),
                backdrop-filter 260ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* Frost once the hero's own dark band is gone from behind the bar, and
     whenever the drawer is open so bar + drawer read as one object.
     data-mobile-scrolled is stamped by the host page (see the waitlist page's
     nav-scroll effect); without it the bar simply stays clear, as before. */
  .nvx-3[data-mobile-scrolled="true"] .nvx-expanded-shell,
  .nvx-3[data-open="true"] .nvx-expanded-shell {
    background: rgba(12, 11, 10, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06),
                0 18px 40px -24px rgba(0, 0, 0, 0.85);
  }

  /* ---- islands become plain flex children -------------------------------- */
  .nvx-3 .nvx-island,
  .nvx-3 .nvx-expanded-shell .nvx-island,
  .nvx-3.is-scrolled .nvx-expanded-shell .nvx-island {
    position: static;
    z-index: auto;
    top: auto;
    left: auto;
    right: auto;
    min-height: 42px;
    padding: 0;
    transform: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: none;
  }
  /* the bar owns the frost now — an island-level blur would double it */
  .nvx-3 .nvx-island,
  .nvx-3 .nvx-island:focus-within {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nvx-3 .nvx-brand-island,
  .nvx-3 .nvx-expanded-shell .nvx-brand-island,
  .nvx-3.is-scrolled .nvx-expanded-shell .nvx-brand-island {
    flex: 0 0 auto;
    padding: 0 0 0 5px;
  }
  /* wayfinding lives in the drawer on phones */
  .nvx-3 .nvx-link-island,
  .nvx-3 .nvx-expanded-shell .nvx-link-island,
  .nvx-3.is-scrolled .nvx-expanded-shell .nvx-link-island { display: none; }

  .nvx-3 .nvx-action-island,
  .nvx-3 .nvx-expanded-shell .nvx-action-island,
  .nvx-3.is-scrolled .nvx-expanded-shell .nvx-action-island {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
  }
  /* Login is a drawer row on phones; the bar keeps one action only. */
  .nvx-3 .nvx-action-island > .nvx-link { display: none; }

  /* ---- brand ------------------------------------------------------------- */
  .nvx-3 .nvx-brand-island .nvx-brand {
    width: 98px;
    height: 42px;
  }
  .nvx-3 .nvx-full-logo,
  .nvx-3.is-scrolled .nvx-expanded-shell .nvx-full-logo {
    height: 26px;
    opacity: 1;
    filter: none;
    transform: translateY(-50%) scale(1);
  }
  .nvx-3 .nvx-mark-logo { display: none; }

  /* ---- the conversion action --------------------------------------------- */
  /* Was display:none, which is what made the CTA a floating orphan once the
     later .nvx .nav-join rule put it back. It is the whole point of the page,
     so it stays in the bar — just compact. */
  .nvx-3 .nav-join,
  .nvx .nvx-3 .nav-join {
    display: block;
    /* 12 left inset + 74px label + 8 gap + 36 tile + 3 right inset. Measured,
       not guessed — at 112px the label was being clipped to "Join waitl". */
    width: 136px;
    height: 42px;
    border-radius: 11px;
    transform: none;
  }
  .nvx-3 .nav-join .btn-label {
    left: 12px;
    top: 12px;
    font-size: 13.5px;
    line-height: 18px;
    white-space: nowrap;
  }
  .nvx-3 .nav-join .btn-tile {
    top: 3px;
    bottom: 3px;
    right: 3px;
    width: 36px;
    /* concentric inside the 11px button with its 3px inset */
    border-radius: 8px;
    padding-right: 9px;
  }
  .nvx-3 .nav-join .btn-tile .lucide { width: 16px; height: 16px; }

  /* ---- menu button ------------------------------------------------------- */
  .nvx-3 .nvx-menu {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    gap: 5px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: background-color 180ms ease, transform 160ms var(--ease-out);
  }
  .nvx-3 .nvx-menu:active { transform: scale(0.96); }
  .nvx-3 .nvx-menu span { width: 15px; height: 1.5px; }

  /* ---- drawer ------------------------------------------------------------ */
  /* Flush with the bar's own edges. It used to inset another 16px inside a bar
     that was already inset, so the panel sat visibly narrower than the bar. */
  .nvx-3 .nvx-drawer {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    border-radius: 18px;
    background: rgba(12, 11, 10, 0.94);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    backdrop-filter: blur(24px) saturate(1.25);
  }
  .nvx-3 .nvx-drawer-inner {
    padding: 7px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
  }
  .nvx-3 .nvx-drawer .nvx-link {
    justify-content: flex-start;
    min-height: 54px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.011em;
    color: rgba(255, 255, 255, 0.82);
    /* rows arrive after the panel has finished opening */
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out),
                background-color 160ms ease, color 160ms ease;
  }
  .nvx-3 .nvx-drawer .nvx-link:active { background: rgba(255, 255, 255, 0.06); }
  /* The drawer CTA is the same button as the one in the bar, so it gets the
     same construction: ember pill, label left, white tile right holding a black
     arrow. It was a flat orange bar with a bare white chevron floating on it —
     the only CTA on the site not built this way.

     No markup change needed. Every drawer in the codebase already ships
     `<span>Join waitlist</span><svg>`, so the tile is made by giving that svg a
     white box and flipping `currentColor` (which its strokes already use) to
     black. One rule, all ten pages that load this sheet.

     Concentric: 12px pill radius − 4px inset = 8px tile radius. */
  .nvx-3 .nvx-drawer .nvx-mobile-cta {
    min-height: 52px;
    margin-top: 7px;
    padding: 0 4px 0 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.30),
                inset 0 -2px 3px rgba(0, 0, 0, 0.47);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  }
  .nvx-3 .nvx-drawer .nvx-mobile-cta svg {
    box-sizing: border-box;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 13px;
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10),
                inset 0 -1px 1px rgba(0, 0, 0, 0.75),
                0 2px 3px rgba(0, 0, 0, 0.20);
  }
  /* Press state has to override the stagger's resting translateX, or tapping
     would snap the row back to its pre-enter offset. */
  .nvx-3[data-open="true"] .nvx-drawer .nvx-mobile-cta:active {
    transform: translateX(0) scale(0.98);
    transition: transform 160ms var(--ease-out);
  }

  /* Stagger in on open; on close everything leaves together and fast, so the
     panel never looks like it is being disassembled row by row. */
  .nvx-3[data-open="true"] .nvx-drawer .nvx-link,
  .nvx-3[data-open="true"] .nvx-drawer .nvx-mobile-cta {
    opacity: 1;
    transform: translateX(0);
  }
  .nvx-3[data-open="true"] .nvx-drawer .nvx-link:nth-child(1) { transition-delay: 90ms; }
  .nvx-3[data-open="true"] .nvx-drawer .nvx-link:nth-child(2) { transition-delay: 130ms; }
  .nvx-3[data-open="true"] .nvx-drawer .nvx-link:nth-child(3) { transition-delay: 170ms; }
  .nvx-3[data-open="true"] .nvx-drawer .nvx-link:nth-child(4) { transition-delay: 210ms; }
  .nvx-3[data-open="true"] .nvx-drawer .nvx-mobile-cta { transition-delay: 250ms; }

  /* Login is account access, not wayfinding — a hairline says so without
     needing a second heading or a different type size. */
  .nvx-3 .nvx-drawer .nvx-link:nth-child(4) {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0 0 11px 11px;
    color: rgba(255, 255, 255, 0.58);
  }

  /* ---- small phones (≤360px: iPhone SE, Galaxy S-mini) -------------------- */
  /* At 320px the full lockup measures 299px into 282px of usable bar. Trim the
     wordmark and the CTA rather than let either one clip. */
  @media (max-width: 360px) {
    .nvx-3 .nvx-brand-island .nvx-brand { width: 88px; }
    .nvx-3 .nvx-full-logo { height: 24px; }
    .nvx-3 .nav-join,
    .nvx .nvx-3 .nav-join { width: 124px; height: 40px; }
    .nvx-3 .nav-join .btn-label { left: 11px; top: 11px; font-size: 12.5px; }
    .nvx-3 .nav-join .btn-tile { width: 34px; padding-right: 8px; }
    .nvx-3 .nvx-menu { width: 40px; height: 40px; }
    .nvx-3 .nvx-expanded-shell,
    .nvx-3.is-scrolled .nvx-expanded-shell { gap: 6px; padding: 0 6px; }
  }

  /* ---- scrim ------------------------------------------------------------- */
  /* A real element (injected by navbar-variants.js) rather than a pseudo, so a
     tap on it can close the drawer — the script's outside-pointerdown check
     treats a pseudo-element's target as the nav itself and would never fire. */
  .nvx-scrim {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(6, 6, 7, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--ease-out);
  }
  .nvx-3[data-open="true"] .nvx-scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Above the mobile breakpoint the scrim must never paint, whatever state the
   drawer attribute is left in after a resize. */
@media (min-width: 821px) {
  .nvx-scrim { display: none; }
}