.nav-earn-short{display:none}
@media(max-width:760px){
  .nav-wrap{top:8px;padding-inline:12px}
  .nav-wrap .nav,.nav-inner{flex-wrap:wrap;gap:6px;border-radius:999px;padding:6px 12px;min-height:56px;height:auto}
  .nav-wrap .nav .wordmark,.nav-inner .wordmark{display:inline-flex;align-items:center;min-height:44px;font-size:20px;flex-shrink:0}
  .nav-links{width:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
  .nav-links a,.nav-links a.textlink,.nav-links a.quiet{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:13px;white-space:nowrap}
  .nav-links .btn,.nav-links .button{padding:10px 12px;font-size:13px}
  .nav-earn-full{display:none}.nav-earn-short{display:inline}
  .earn .nav-inner{padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));border-radius:0}
}
/* With FAQ in the header there are four links. At <=340px the row ran 7px over
   and wrapped to two lines, so the gutters give a little here only. */
@media(max-width:340px){
  .nav-wrap{padding-inline:8px}
  .nav-wrap .nav{gap:8px;padding:6px 8px}
  .nav-links{gap:3px}
  .nav-links .btn{padding:10px 9px}
}