/* Shrink the hero-visual/signal-panel box ~20% to match the smaller portrait.
   .signal-main fills remaining space via flex instead of a fixed height, so
   we only need to track ONE height per breakpoint (the panel), not two. */
.signal-panel{
  display:flex;
  flex-direction:column;
}
.signal-main{
  flex:1 1 auto;
  height:auto !important;
}

.hero{min-height:560px}
.hero-visual{height:380px}
.signal-panel{height:324px}

@media(max-width:680px){
  .hero{min-height:696px}
  .hero-visual{height:204px}
  .signal-panel{height:196px;padding:11px}
  .show-callout{top:20px}
  .show-callout h3{font-size:22px;margin:5px 0}
  .show-callout p{font-size:7px;max-width:108px}
  .signal-bars{height:36px;gap:3px;bottom:2px}
}

@media(min-width:1300px) and (max-width:1699px){
  .hero{min-height:612px !important}
  .hero-visual{height:432px !important}
  .signal-panel{height:376px !important}
}

@media(min-width:1700px){
  .hero{min-height:668px !important}
  .hero-visual{height:488px !important}
  .signal-panel{height:428px !important}
}