/* Top bar, identical on every page. The header was transparent, so it took on
   whatever sat behind it (a dark hero, the cream page, scrolled content) and
   looked different from page to page. It now has its own background and
   bottom line, from the theme's colour tokens, so it follows light/dark mode.
   Linked last in <head> on every page. */
header.nav#nav{
  background:color-mix(in srgb,var(--ground,#FAF8F5) 90%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--line,#E6E1D8);
}

/* The current page: teal and semi-bold, in the main links and in
   Contact / Pay alike. */
header.nav#nav a[aria-current="page"]{color:#0A7B77;font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) header.nav#nav a[aria-current="page"]{color:#2FD8D0}
}
:root[data-theme="dark"] header.nav#nav a[aria-current="page"]{color:#2FD8D0}

/* One size for the Request Demo button on every page. */
header.nav#nav .btn--primary{min-height:40px;height:40px;min-width:140px;padding:0 20px;font-size:14px;letter-spacing:0}