/* Desktop demo is secondary; phones offer only the web app. */
@media (min-width: 821px) {
  .nav { display: grid; grid-template-columns: auto 1fr auto auto; column-gap: 10px; }
  .nav-links { justify-self: center; }
}
.nav .demo-link { background: #d0cdd2; color: #29252d; box-shadow: none; }
.nav .demo-link:hover,
.nav .demo-link:focus-visible { background: #e0dde2; box-shadow: 0 8px 24px #00000026; }
.nav-links > .mobile-menu-link { display: none; }
@media (max-width: 820px) {
  .nav { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto; gap: 8px; align-items: center; }
  .nav .brand { grid-column: 1; grid-row: 1; justify-self: start; margin-right: 0; }
  .nav .brand span { display: inline; max-width: none; white-space: nowrap; }
  .nav > .header-link { display: none; }
  .nav-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; order: 3; gap: 8px; }
  .nav-links > a:not(.mobile-menu-link) { display: none; }
  .nav-links > .mobile-menu-link { display: inline-flex; justify-content: center; min-height: 44px; font-size: 14px; color: #2d0050; }
}