/* Compact desktop hero below the full-artwork breakpoint. */
@media (min-width:981px) and (max-width:1279px){
  .hero{background:var(--paper)}
  .hero-grid{width:min(1600px,100%);margin-inline:auto;grid-template-columns:minmax(470px,43%) minmax(0,57%);min-height:600px;background:#eef4f7;align-items:stretch;overflow:hidden;position:relative}

  /* Keep the decorative diagonal completely outside the typography area. */
  .hero-grid::before{content:"";position:absolute;inset:0 auto 0 0;width:clamp(44px,4.6vw,60px);background:var(--paper);clip-path:polygon(0 0,100% 0,18% 100%,0 100%);z-index:0;pointer-events:none}

  .hero-copy{padding-left:clamp(82px,7.2vw,98px);padding-right:30px;padding-top:52px;padding-bottom:52px;justify-content:center;position:relative;z-index:1;background:transparent}
  .hero-copy h1,.hero-lead,.hero-actions,.feature-row,.hero-copy .eyebrow{max-width:520px}
  .hero-copy h1{font-size:clamp(3.6rem,6vw,5rem)}
  .hero-lead{font-size:clamp(1.15rem,1.65vw,1.45rem)}
  .feature-row{margin-top:34px}
  .hero-art{width:100%;min-height:600px;background:transparent;position:relative;z-index:1}
  .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center center}
}

/* Notebook and desktop: keep the composition independent of browser zoom.
   The 32/68 split makes the artwork column exactly 16:9 when the complete
   hero uses the 400:153 aspect ratio, so hero.webp can be shown uncropped. */
@media (min-width:1280px){
  .hero{background:var(--paper)}
  .hero-grid{width:min(1840px,calc(100% - 48px));margin-inline:auto;grid-template-columns:minmax(0,32%) minmax(0,68%);aspect-ratio:400 / 153;min-height:0;background:#eef4f7;align-items:stretch;overflow:hidden;position:relative}
  .hero-grid::before{content:"";position:absolute;inset:0 auto 0 0;width:6%;background:var(--paper);clip-path:polygon(0 0,100% 0,18% 100%,0 100%);z-index:0;pointer-events:none}
  .hero-copy{height:100%;padding:36px clamp(48px,4vw,88px);justify-content:center;position:relative;z-index:1;background:transparent}
  .hero-copy h1,.hero-lead,.hero-actions,.feature-row,.hero-copy .eyebrow{max-width:520px}
  .hero-art{width:100%;height:100%;min-height:0;aspect-ratio:auto;display:block;background:transparent;overflow:hidden;position:relative;z-index:1}
  .hero-art img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center center;transform:none}
}

/* At normal notebook zoom the same composition has fewer vertical CSS pixels
   than at 75% zoom. Compact only the copy so the artwork remains completely
   visible while the CTA stays inside the hero. */
@media (min-width:1280px) and (max-width:1919px){
  .hero-copy{padding-top:24px;padding-bottom:24px;padding-left:clamp(54px,4vw,74px);padding-right:clamp(30px,3vw,52px)}
  .hero-copy .eyebrow{margin-bottom:9px;font-size:.74rem}
  .hero-copy h1{font-size:clamp(4.45rem,4.8vw,5.45rem);line-height:.92}
  .hero-lead{margin-top:18px;font-size:clamp(1.2rem,1.45vw,1.55rem);line-height:1.32}
  .hero-actions{margin-top:20px}
  .hero-actions .btn{padding:13px 20px}
  .feature-row{margin-top:24px}
}

@media (min-width:2200px){
  .hero-grid{width:min(2040px,calc(100% - 72px))}
}