:root{
  --heeler-brand-green:#b9f34d;
  --heeler-header-bg:#070807;
  --heeler-header-line:#252c22;
  --heeler-header-pad:clamp(20px,4vw,64px);
  --heeler-logo-width:clamp(260px,20vw,340px);
}

/* One visual header rhythm across the homepage and both calculators. */
.topbar,
.top{
  min-height:74px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  padding:10px var(--heeler-header-pad)!important;
  background:rgba(7,8,7,.98)!important;
  border-bottom:1px solid var(--heeler-header-line)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(12px);
}

.topbar .brand,
.top > a:first-child{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  flex:0 0 auto!important;
}

.topbar .brand-wordmark,
.topbar .brand img,
.top > a:first-child img,
.top img{
  display:block!important;
  width:var(--heeler-logo-width)!important;
  height:54px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
}

.topbar .top-actions,
.topbar .toplinks{
  margin-left:auto!important;
  align-items:center!important;
}

.top > a:last-child,
.topbar .toplinks a{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.top > a:last-child{
  border-color:#3f4b38!important;
  background:#0d110c!important;
  color:#f4f6f2!important;
}

/* Pull the homepage into the brand bar instead of leaving a black moat. */
body > .topbar + main > .hero{
  padding-top:38px!important;
}

/* Keep the first calculator screen visually attached to the header. */
.top + .wrap .hero{
  padding-top:38px!important;
}

@media(max-width:850px){
  :root{--heeler-logo-width:240px;}
  .topbar,.top{min-height:68px!important;padding:8px 18px!important;gap:12px!important}
  .topbar .brand-wordmark,.topbar .brand img,.top > a:first-child img,.top img{height:48px!important}
}

@media(max-width:560px){
  :root{--heeler-logo-width:195px;}
  .topbar,.top{min-height:64px!important;padding:8px 14px!important}
  .topbar .brand-wordmark,.topbar .brand img,.top > a:first-child img,.top img{height:42px!important}
  .topbar .nav-action{min-width:auto!important;padding:7px 9px!important}
  .topbar .nav-action span{font-size:10px!important}
  .topbar .nav-action b{font-size:10px!important}
  .topbar .toplinks a,.top > a:last-child{padding:9px 10px!important;font-size:10px!important;white-space:nowrap}
}