/* V7 — correct root issue: landscape source must not be rendered as portrait. */
@media (min-width: 861px) {
  body .hero.hero-v2 { max-width: 1360px; min-height: 0; display:grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(24px,3vw,48px); align-items:center; padding: 48px clamp(28px,4vw,58px) 58px; }
  body .hero.hero-v2 .hero-copy {padding: 8px 0; min-width:0; }
  body .hero.hero-v2 .hero-visual {position:relative; display:block; width:100%; height:auto; min-height:0; aspect-ratio: 16 / 10; max-height: none; align-self:center; border-radius: 20px; overflow:hidden; box-shadow: 0 20px 48px rgba(5,32,55,.18); }
  body .hero.hero-v2 .hero-image {inset:0; background-size:cover; background-position:center center; transform:none; }
  body .hero.hero-v2 h1 {font-size:clamp(3.4rem,5.1vw,5.8rem);line-height:1.01;margin:15px 0 20px;}
  body .hero.hero-v2 .hero-quickstart {max-width:610px;}
}
@media (min-width:861px) and (max-width:1100px) {body .hero.hero-v2{padding:32px 24px 45px;gap:22px}body .hero.hero-v2 h1{font-size:clamp(3rem,4.7vw,4.8rem)}}
@media (max-width:860px) {body .hero.hero-v2 .hero-visual {position:relative;display:block; width:100%; height:auto; min-height:0; aspect-ratio:16/10; }body .hero.hero-v2 .hero-image{background-size:cover;background-position:center;transform:none}}

/* V8: taller editorial portrait-landscape hybrid, aligned with main hero content. */
@media (min-width: 861px) {
  body .hero.hero-v2 .hero-visual {
    aspect-ratio: auto;
    height: clamp(440px, 37vw, 530px);
    max-height: 530px;
    align-self: center;
  }
  body .hero.hero-v2 .hero-image {
    background-size: cover;
    background-position: 57% center;
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  body .hero.hero-v2 .hero-visual { height: clamp(420px, 43vw, 485px); }
}