/* Portrait layouts share one composition: copy followed immediately by the phone.
   JS sizes the matching art to the actual copy and available viewport height. */
@media(max-width:760px) and (min-height:551px){
  .story-backdrop img{
    width:var(--phone-image-width,640px);
    height:auto;
    left:var(--phone-image-left,-170px);
    top:var(--phone-image-top,420px);
    right:auto;
    bottom:auto;
    object-fit:contain;
    mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent);
  }
  .story-backdrop:after{
    background:linear-gradient(0deg,#10120e 0%,transparent 12%),linear-gradient(90deg,#10120e66,transparent 35%);
  }
  .story-backdrop>span{
    top:var(--phone-caption-top,auto);
    bottom:auto;
    right:var(--pad);
    font-size:6px;
  }
  .scene-intro .scene-content{max-width:100%}
  .scene-usecase .fineprint{max-width:100%}
}
@media(max-width:760px) and (min-height:551px) and (max-height:730px){
  .scene-intro h1{font-size:clamp(32px,10vw,43px);margin-bottom:20px}
  .scene-intro .muted{display:none}
  .scene-intro .lead{font-size:12px;line-height:1.7;margin-bottom:15px}
  .scene-usecase h2{font-size:26px;margin-bottom:16px}
  .scene-usecase .lead{font-size:12px;margin-bottom:10px}
  .scene-usecase .muted{font-size:9px;line-height:1.7;margin-bottom:10px}
  .scene-usecase .usecase-tags{margin-top:12px}
  .scene-usecase .fineprint{font-size:6px;margin-top:10px}
}
@media(max-width:760px) and (min-height:551px) and (max-height:620px){
  .scene-intro .micro{display:none}
  .scene-intro .eyebrow{margin-bottom:12px}
}