/* Keep the same three-line hierarchy on compact landscape screens. */

@media (min-width: 901px) and (max-width: 1180px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 20px;
  }

  .hero-copy {
    align-self: center;
    max-width: 680px;
    margin-top: 0;
  }

  .hero-copy h1 {
    max-width: 680px;
    font-size: clamp(46px, 4.5vw, 54px);
  }

  .hero-visual .scene {
    width: 150%;
    margin-left: -48%;
  }

  .hero-rail {
    width: min(92%, 380px);
    justify-self: end;
    transform: none;
  }

  .hero-proof {
    right: 0;
  }
}