@media (max-width:1240px){
    .stage{ grid-template-columns:236px minmax(280px, var(--phone-w, 380px)) 1fr; gap:16px; }
    .device-name{ max-width:110px; }
  }
  @media (max-width:980px){
    .stage{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; overflow-y:auto; }
    .rail{ max-height:220px; }
    /* Stacked, the column is no longer stretched by the grid, so it needs its own
       definite height - otherwise the frame would be sized from its own height. */
    .shotpane{ height:64vh; }
    .hero-top{ flex-wrap:wrap; }
  }
  @media (max-width:600px){
    .wrap{ padding:12px; }
    .hero-actions{ width:100%; flex-wrap:wrap; justify-content:flex-start; }
    .hero-actions .session-btn{ flex:1 0 100%; max-width:100%; }
  }