/* The one top menu, on every page. On phones the links stay visible as a row that scrolls sideways under the logo. */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(11,12,15,0.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.08); padding-top: env(safe-area-inset-top); }
.topbar .bar { display: flex; align-items: center; gap: 20px; padding: 0 22px; height: 56px; }
.topbar .home { display: flex; align-items: center; flex: none; }
.topbar .home img { height: 30px; display: block; }
.topbar nav { display: flex; flex-wrap: nowrap; gap: 26px; margin-left: auto; margin-right: 8px; }
.topbar nav a { color: #9aa2ad; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.topbar nav a:hover, .topbar nav a.on { color: #f5f6f8; }
.topbar .get-sm { flex: none; padding: 8px 16px; border-radius: 999px; background: linear-gradient(90deg, #06929b, #ed1f61); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; text-decoration: none; }
@media (max-width: 760px) {
  .topbar .bar { flex-wrap: wrap; height: auto; padding: 0 14px; gap: 0 12px; }
  .topbar .home { height: 52px; }
  .topbar .get-sm { margin-left: auto; }
  .topbar nav { order: 3; flex-basis: 100%; margin: 0 -14px; padding: 0 14px 10px; gap: 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { font-size: 14px; }
  .topbar nav a.on { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: #00c2c7; }
}