@media (max-width: 820px) {
  .site-header { position: sticky; }

  .nav-wrap {
    height: auto;
    min-height: 78px;
    padding: .75rem 0;
    flex-wrap: wrap;
  }

  .main-nav {
    position: static;
    order: 4;
    width: 100%;
    flex-basis: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .main-nav.open {
    display: grid;
    gap: 0;
    margin-top: .5rem;
    border-top: 1px solid #e5eaed;
  }

  .main-nav a {
    padding: .85rem .15rem;
    border-bottom: 1px solid #e5eaed;
  }

  .nav-wrap { gap: .45rem; }

  .brand-mark { width: 38px; height: 38px; }
  .brand-name b { font-size: 1.55rem; }
  .brand-name small { font-size: .36rem; }

  .account-button { padding: .62rem .7rem; font-size: .78rem; }

  .menu-toggle {
    order: 2;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    gap: 5px !important;
  }

  .menu-toggle span { width: 23px !important; height: 2px !important; flex: 0 0 2px; }
  .menu-toggle b { display: none !important; }
}

@media(max-width:820px){
  .nav-wrap{min-width:0}
  .nav-wrap>.brand{flex:1 1 auto;min-width:0}
  .nav-wrap>.brand .brand-logo{width:min(220px,100%);max-width:100%;height:auto}
  .nav-wrap>.account-button,.nav-wrap>.menu-toggle{flex:none}
  .hero-grid,.two-columns,.incoming-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .hero-grid>*,.two-columns>*,.incoming-grid>*,.faq-grid>*{min-width:0}
}
@media(max-width:500px){
  .nav-wrap{gap:.35rem}
  .nav-wrap>.account-button{padding:.55rem .6rem;font-size:.75rem;white-space:nowrap}
  .hero h1{font-size:clamp(2.25rem,10vw,3rem);overflow-wrap:anywhere}
}