/* v6.9.357 — compact hero at zoomed-out desktop sizes and clear the info-panel/metrics overlap. */

@media (min-width:1181px){
  /* Do not let browser zoom-out turn 100vh into a very tall CSS canvas.
     The stage itself is ~700px tall, so cap the hero's minimum height while
     still allowing it to grow if its real content needs more room. */
  .hero#home{
    min-height:min(calc(100vh - 10px), 860px)!important;
    align-content:start!important;
    grid-auto-rows:max-content!important;
  }

  /* The metrics were being pulled more than 120px back over the stage. That
     caused the right product-information panel to sit on top of the last card.
     Keep a deliberate overlap with the gold stage, but give both areas room. */
  .hero#home > .metrics{
    margin:-70px 0 0!important;
    transform:translateY(-4px)!important;
  }

  /* A tiny lift keeps the bottom edge of the taller product-info panel clear
     without changing the otherwise approved horizontal/vertical composition. */
  .hero#home .hero-feature-panel.showroom-v199{
    transform:translateY(-26px)!important;
  }
}

/* At very wide CSS viewports (browser zoom <= ~80% on a typical Full-HD
   display), explicitly keep the whole hero content-height driven. */
@media (min-width:2200px){
  .hero#home{
    min-height:820px!important;
  }
}

/* Existing stacked tablet/mobile layout remains untouched. */
@media (max-width:1180px){
  .hero#home{
    align-content:normal!important;
  }
}