.nav-pill.nav-localized {
  width: calc(100% - 40px);
  max-width: 920px;
  padding: 0 24px;
  gap: 24px;
}
.nav-localized .brand { flex-shrink: 0; }
.nav-localized .nav-links { flex: 1; justify-content: space-evenly; gap: 24px; }
.language-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 34px;
  padding: 3px;
  border-radius: 999px;
  background: #dfe5fa;
  isolation: isolate;
}
.language-selector::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 45px;
  height: 28px;
  background: #6366f1;
  border-radius: 999px;
  z-index: -1;
  transition: transform .24s ease;
}
.language-selector[data-active-language="en"]::before { transform: translateX(45px); }
.language-selector button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font: 600 12px/1 Poppins, system-ui, sans-serif;
  letter-spacing: 0;
  padding: 0;
  width: 45px;
  height: 28px;
  cursor: pointer;
  transition: color .24s ease;
}
.language-selector button[aria-checked="true"] { color: #fff; }
.language-selector button:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; }
@media (max-width: 767px) {
  .nav-pill.nav-localized { width: calc(100% - 28px); padding: 0 16px; gap: 12px; }
  .nav-localized .brand { margin-right: auto; }
  .nav-localized .language-selector { order: 2; }
  .nav-localized .menu-toggle { order: 3; flex-shrink: 0; }
  .nav-localized .nav-links { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .language-selector::before, .language-selector button { transition: none; }
}