:root{
  --heeler-brand-green:#b9f34d;
  --heeler-header-bg:#070807;
  --heeler-header-line:#252c22;
  --heeler-header-pad:clamp(16px,3vw,32px);
  --heeler-logo-width:clamp(180px,16vw,220px);
  --heeler-header-row:56px;
  --heeler-control-min:44px;
}

/* Stage 3 shared shell: compact brand rhythm across legacy entry points and calculators. */
.topbar,
.top{
  min-height:var(--heeler-header-row)!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:6px 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:42px!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,
.topbar .nav-action{
  min-height:var(--heeler-control-min)!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

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

/* Keep first-screen content attached to the compact shared shell. */
body > .topbar + main > .hero,
.top + .wrap .hero{
  padding-top:32px!important;
}

@media(max-width:850px){
  :root{
    --heeler-logo-width:190px;
    --heeler-header-row:54px;
  }
  .topbar,.top{min-height:var(--heeler-header-row)!important;padding:6px 20px!important;gap:10px!important}
  .topbar .brand-wordmark,.topbar .brand img,.top > a:first-child img,.top img{height:40px!important}
}

@media(max-width:560px){
  :root{
    --heeler-logo-width:155px;
    --heeler-header-row:52px;
  }
  .topbar,.top{min-height:var(--heeler-header-row)!important;padding:4px 14px!important;gap:6px!important}
  .topbar .brand-wordmark,.topbar .brand img,.top > a:first-child img,.top img{height:38px!important}
  .topbar .top-actions,.topbar .toplinks{gap:4px!important}
  .topbar .nav-action{min-width:44px!important;padding:6px 7px!important}
  .topbar .nav-action span{font-size:10px!important}
  .topbar .nav-action b{font-size:11px!important}
  .topbar .toplinks a,.top > a:last-child{min-height:44px!important;padding:8px 10px!important;font-size:13px!important;line-height:1.2!important;white-space:nowrap}
}