/* Site nav — sticky at every width.
   ≥1061px: logo · four links · Sign in / Sign up.  ≤1060px: logo · Sign up · menu → drawer.
   At the top of the page the bar is transparent and lies over the hero's tab (see 01-hero.css):
   the logo sits in the dark tab, links and buttons on the ground beside it. --hero-top is the gap
   above the hero shell; the header scrolls up by that much, then sticks (top: -gap), so its
   height never changes and nothing jumps. Scrolled (.stuck) or open, the bar turns light. */
:root { --hero-top: 18px; --tab-h: 84px; }
@media (max-width: 720px) { :root { --hero-top: 10px; --tab-h: 68px; } }

.mnav {
  position: sticky;
  top: calc(-1 * var(--hero-top));
  z-index: 50;
  padding-top: var(--hero-top);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.mnav.stuck, .mnav.open {
  border-bottom-color: var(--line);
  background: rgba(244, 248, 251, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* the hero tucks under the bar's last --tab-h px, so an open drawer must be opaque */
.mnav.open { background: var(--ground); }
.mnav__bar {
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(var(--container), 100% - 2 * var(--gutter));
  min-height: var(--tab-h);
  margin-inline: auto;
  padding-block: 10px;
}
/* light logo on the dark tab; dark logo once the bar is light */
.mnav__logo-dark,
.mnav.stuck .mnav__logo-light,
.mnav.open .mnav__logo-light { display: none; }
.mnav.stuck .mnav__logo-dark,
.mnav.open .mnav__logo-dark { display: block; }
.mnav .logo--sm .logo__img { height: 46px; }
.mnav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
}
.mnav__links a { color: var(--muted); white-space: nowrap; transition: color .2s var(--ease); }
.mnav__links a:hover, .mnav__links a:focus-visible { color: var(--ink); }
.mnav__cta { display: flex; align-items: center; gap: 10px; }
.mnav__burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
@media (max-width: 720px) {
  .mnav .logo--sm .logo__img { height: 38px; }
}
/* small phones: at the top of the page there is no room for Sign up beside the hero's tab
   (the hero has Register Now right below); it returns once the bar is stuck */
@media (max-width: 460px) {
  .mnav:not(.stuck):not(.open) .mnav__signup { display: none; }
}
.mnav__icon-close, .mnav.open .mnav__icon-open { display: none; }
.mnav.open .mnav__icon-close { display: block; }

.mnav__drawer { padding: 6px var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.mnav__links-list { margin-bottom: 18px; }
.mnav__links-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mnav__ctas { display: flex; gap: 10px; }
.mnav__ctas .btn { flex: 1 1 0; }
.mnav.open .mnav__signup { visibility: hidden; }

/* desktop: no drawer */
@media (min-width: 1061px) {
  .mnav__drawer { display: none !important; }
}
/* touch widths: links move into the drawer */
@media (max-width: 1060px) {
  .mnav__bar { gap: 12px; }
  .mnav__links { display: none; }
  .mnav__cta { margin-left: auto; }
  .mnav__signin { display: none; }
  .mnav__burger { display: grid; }
}

/* Sticky CTA bar — phones only */
.mbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--t-state) var(--ease);
}
.mbar .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
.mbar.show { transform: none; }
@media (min-width: 721px) {
  .mbar { display: none; }
}