/*
 * The changes to how the Business pages look. They are not in the Business site's source:
 * scripts/sync-business-site.mjs copies this file next to the pages and links it after the site's own
 * stylesheets, on every page except the demo.
 *
 * On a 390px phone the top bar is wider than the screen, so the page scrolls sideways. The Business tag
 * beside the wordmark, the Open an account button and the menu button need 373px of a 326px row. Below 420px
 * the tag goes and the wordmark stays, which leaves the bar 40px to spare. The site's own copy at the
 * pinned commit does the same at 390px, so the cause is not the move to /business.
 *
 * The row of small links at the foot of the page (Terms, Privacy, vIBAN Terms, Cookie settings and the
 * copyright line) is a single line of 40px gaps. With the two this move adds, vIBAN Terms and Cookie
 * settings, it needs 379px of the same 326px row. Below 420px it tightens its gaps, and wraps if it still
 * does not fit.
 *
 * Remove this file, and its line in the sync, once both rows fit a phone at the source.
 */
@media (max-width: 420px) {
  .nav-inner .nav-tag {
    display: none;
  }

  .footer-bottom {
    flex-wrap: wrap;
    gap: 8px 24px;
  }
}