/* ------------------------------------------------------------------
   Mobile nav fix.

   Cause: below 992px the Webflow CSS pins .brand-logo to a fixed pixel
   width (340px, then 250px, then 220px). An <img> with an explicit width
   is a flex item that will not shrink below it, so on a 390px screen the
   logo, the Sign Up button and the hamburger needed more room than the
   bar had. The overflow landed as the Sign Up button sitting on top of
   the logo, with its label wrapping to two lines.

   Fix: size the logo by HEIGHT and let width follow the aspect ratio,
   allow the brand to shrink, and stop the buttons from being squeezed.

   Loaded after the Webflow stylesheets on every page. Self-contained —
   delete this file and remove the <link> to revert.
   ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .navbar-frame {
    grid-column-gap: 12px;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
  }

  /* let the brand give up space instead of overflowing */
  .navbar-frame .brand {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 0;
    margin-right: auto;
  }

  .navbar-frame .brand-logo {
    width: auto;
    max-width: 100%;
    height: 38px;
  }

  /* the CTA and hamburger keep their size */
  .navbar-frame .nav-f1 {
    flex: 0 0 auto;
  }

  .navbar-frame .nav-f1 .button-copy {
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.2;
  }

  .navbar-frame .menu-button {
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 479px) {
  .navbar-frame .brand-logo {
    height: 32px;
  }

  .navbar-frame .nav-f1 .button-copy {
    padding: 9px 14px;
    font-size: 14px;
  }
}