/* TV viewport fit hotfix — keeps the installer on one screen without clipping. */
@media (min-width:900px) and (min-aspect-ratio:4/3){
  html,body{height:100%;overflow:hidden}
  .install-shell{height:100vh;padding:0 clamp(18px,3vw,52px)}
  .install-header{height:64px}
  .install-stage{
    height:calc(100vh - 64px);
    min-height:0;
    grid-template-columns:minmax(0,1.18fr) minmax(240px,.82fr);
    gap:clamp(18px,3vw,44px);
    align-items:center;
    overflow:hidden;
  }
  .stage-copy{padding:18px 0 48px}
  .eyebrow{margin-bottom:12px;font-size:7px}
  h1{font-size:clamp(44px,5.3vw,74px);line-height:.9}
  .hero-text{margin-top:15px;font-size:clamp(12px,1.05vw,16px);line-height:1.45}
  .device-status{margin-top:15px;padding:11px 14px}
  .status-copy small{font-size:6px}
  .status-copy strong{font-size:13px}
  .primary-action{min-height:48px;margin-top:9px}
  .action-note{margin-top:6px;font-size:9px;line-height:1.35}
  .steps-strip{margin-top:12px;grid-template-columns:repeat(3,1fr)}
  .steps-strip>div{min-height:62px;padding:10px;gap:8px}
  .steps-strip strong{font-size:10px}
  .steps-strip small{font-size:8px;line-height:1.3}
  .brand-stage{min-height:0;height:62vh}
  .logo-frame{width:min(56%,280px)}
  .stage-label{bottom:8%}
  .browser-note{position:absolute;left:0;right:0;bottom:7px;margin:0;padding-top:7px;padding-bottom:0;font-size:7px}
}

/* Some Android-TV browsers expose a 900–980px CSS viewport. The old mobile
   breakpoint made those TVs stack into one column while the page remained
   overflow-hidden. Force TV-sized devices back to the two-column layout. */
@media (min-width:900px){
  body.tv-sized-device .install-stage{
    grid-template-columns:minmax(0,1.18fr) minmax(240px,.82fr);
    gap:clamp(18px,3vw,44px);
    overflow:hidden;
  }
  body.tv-sized-device .stage-copy{padding:18px 0 48px}
  body.tv-sized-device .brand-stage{min-height:0;height:62vh}
  body.tv-sized-device .browser-note{position:absolute;left:0;right:0;bottom:7px;margin:0;padding:7px 0 0}
}

@media (min-width:900px) and (max-height:720px){
  .install-header{height:58px}
  .install-stage{height:calc(100vh - 58px)}
  .stage-copy,body.tv-sized-device .stage-copy{padding:12px 0 38px}
  .eyebrow{margin-bottom:9px}
  h1{font-size:clamp(40px,5vw,64px)}
  .hero-text{margin-top:11px;font-size:12px;line-height:1.35}
  .device-status{margin-top:11px;padding:9px 12px}
  .status-copy strong{font-size:12px}
  .primary-action{min-height:43px;margin-top:8px}
  .action-note{margin-top:5px;font-size:8px}
  .steps-strip{margin-top:8px}
  .steps-strip>div{min-height:53px;padding:8px;gap:7px}
  .steps-strip strong{font-size:9px}
  .steps-strip small{font-size:7px;line-height:1.2}
  .brand-stage,body.tv-sized-device .brand-stage{height:57vh}
  .logo-frame{width:min(52%,240px)}
  .browser-note,body.tv-sized-device .browser-note{bottom:4px;padding-top:5px;font-size:6px}
}