/* The header CTA now reads "Build Your Habitually U", which is wider than the old
   "Start Free". Between the hamburger breakpoint (~900px) and ~1120px the header
   ran out of room, so tighten the CTA (and the nav gaps) in that window only.
   The base .btn-nav rule uses !important, so these must too. */
@media (max-width:1120px){
  .btn-nav{ padding:9px 15px !important; font-size:.78rem !important; letter-spacing:0 !important; }
  .btn-outline-nav{ padding:9px 13px !important; font-size:.78rem !important; }
  .nav-links{ gap:0 !important; }
  .nav-cta{ gap:6px !important; }
}
@media (max-width:1000px){
  .btn-nav{ padding:8px 12px !important; font-size:.75rem !important; }
  .btn-outline-nav{ padding:8px 10px !important; font-size:.75rem !important; }
  .nav-links a,.nav-links button,.nav-links .nav-label{ font-size:.75rem !important; }
}
/* The full label is too wide for the header once the viewport drops below ~1060px
   (the hamburger doesn't take over until ~950px), so shorten it to "Join" in that
   window rather than let it clip. aria-label keeps the full wording for screen readers. */
/* The global `span:not([class*=badge])...` rule forces every span to #2b2b2b, which
   was making this label dark-on-navy. Force white on both properties to beat it. */
#huJoinCta,#huJoinCta .cta-full,#huJoinCta .cta-mini{
  color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }
#huJoinCta .cta-mini{ display:none; }
@media (max-width:1060px){
  #huJoinCta .cta-full{ display:none; }
  #huJoinCta .cta-mini{ display:inline; }
}