/* Mockup version switcher (shared by index.html and alternative.html) */
:root { --switch-h: 34px; }

.switcher {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--switch-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.switcher__label { color: #777; margin-right: 10px; }
.switcher a {
  padding: 4px 14px;
  border-radius: 999px;
  color: #bbb;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.switcher a:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.switcher a[aria-current="page"] { background: #fff; color: #000; }

/* push the fixed site nav below the switcher */
.nav { top: var(--switch-h) !important; }
html { scroll-padding-top: calc(70px + var(--switch-h)); }

@media (max-width: 420px) {
  .switcher__label { display: none; }
}