/* ── Nav ─────────────────────────────────────────────────────────────── */
:root {
  /* Single source of truth for the fixed nav's height — any page-level
     content wrapper that needs to clear it (padding-top, etc.) should
     reference this instead of hardcoding 50px, so the two can never drift
     out of sync again (see docs/DECISIONS.md 2026-07-07, the status feed/
     permalink 10px overlap this was introduced to fix). */
  --nav-height: 50px;
}
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-height); display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: var(--color-authority);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-logo { font-family: var(--font-d); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: #ffffff; display: flex; align-items: center; gap: 7px; }
/* Wraps the nav logo image so the notification badge SVG (each page sets its
   own top/right/width/height inline, scaled to that page's own icon size —
   14px everywhere except pricing.html's 18px) can position itself relative
   to the icon rather than the whole nav bar. */
.nav-logo-badge-wrap { position: relative; display: inline-flex; }
.nav-right { display: flex; align-items: center; gap: 8px; }
/* Shared base — .btn-login (outlined) and .btn-nav-get-started (solid-fill
   CTA) must always render at the identical height/width. Every size-affecting
   property (padding, border width, font-size/weight, border-radius) lives
   here once; each variant below only overrides fill (background/color/
   border-color) — .btn-login previously had a visible 1px border while
   .btn-nav-get-started had border:none, silently making it 2px shorter/
   narrower than .btn-login despite identical padding/font-size/font-weight
   (2026-07-07) — border is now transparent-by-default here so both always
   reserve the same 1px, and neither rule can drift the other's size again. */
.btn-login,
.btn-nav-get-started {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600; font-family: var(--font-b);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-login { background: none; border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
.btn-login:hover { color: #ffffff; border-color: rgba(255,255,255,.6); }
.btn-nav-get-started { background: #ffffff; color: var(--color-authority); }
.btn-nav-get-started:hover { background: rgba(255,255,255,.85); }
.nav-login-mobile { display: none; }
@media (max-width: 480px) {
  .nav { padding: 0 16px; }
  .btn-login { display: none; }
  .nav-login-mobile { display: inline-flex; align-items: center; color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; text-decoration: none; padding: 7px 8px; font-family: var(--font-b); transition: color .15s; }
  .nav-login-mobile:hover { color: #fff; }
}