/* The Viaduct nav: one floating glass bar shared by the product page, the
   extension guides and the legal pages. Colours come from the page's own
   --ink/--body/--lip tokens; buttons come from the page's .btn-teal/.btn-ghost.
   nav.js adds html.glassy where the displacement map works (Chromium); the
   plain blur below is everyone else's glass. */
.nav { position: fixed; top: 12px; inset-inline: 0; z-index: 60; padding-inline: 12px; }
.nav-pill {
  position: relative; max-width: 1024px; margin-inline: auto; height: 54px;
  padding: 0 10px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(20, 26, 25, .55); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px; box-shadow: var(--lip);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  transition: background-color .3s, border-color .3s;
}
.nav.scrolled .nav-pill { background: rgba(14, 18, 17, .82); border-color: rgba(255, 255, 255, .12); }
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
html.glassy .nav-pill {
  background: rgba(20, 26, 25, .30);
  backdrop-filter: url(#nav-glass) blur(9px) saturate(1.25);
  box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, .20), inset 0 0 7px 2px rgba(255, 255, 255, .06), var(--lip);
}
html.glassy .nav.scrolled .nav-pill { background: rgba(14, 18, 17, .58); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 21px; height: 21px; display: block; }
.brand span { font-family: "Cabinet Grotesk", Inter, system-ui, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.nav-links { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--body); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-actions a:hover { text-decoration: none; }

@media (max-width: 1023px) {
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  .nav { top: 10px; }
  .nav-pill { height: 50px; }
  .nav .nav-download { display: none; }
}
/* The logo and buttons are smaller than a fingertip; widen what catches the
   tap without changing how they look. */
@media (pointer: coarse) {
  .brand, .nav-actions a { position: relative; }
  .brand::after, .nav-actions a::after { content: ""; position: absolute; inset: -8px; }
}