/* Shared small-screen layout, loaded after each page's component styles. */
@media (max-width: 640px) {
  header .nav {
    height: auto;
    min-height: 66px;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  header .nav > .sp,
  header .nav > .links {
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 14px;
    margin-left: 0;
    order: 2;
  }
  header .nav > .btn { margin-left: auto; }
  .hero-grid > *, .cards > *, .cmp > *, .grid > *, .incl > * { min-width: 0; }
  p code, li code, .incl code { overflow-wrap: anywhere; }
  .foot > .sp { margin-left: 0; }
}