/* ==========================================================================
   Responsive: tablet and phone
   ========================================================================== */

@media (max-width: 860px) {
  /* Header collapses to brand + Menu button */
  .hdr { grid-template-columns: 1fr auto; }
  .hdr nav, .hdr .pill-btn { display: none; }
  .menu-btn { display: block; }

  /* Two-column layouts stack */
  .split, .caps, .get-row, .foot-top { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; margin-top: var(--xl3); }
  .foot-cols { grid-template-columns: 1fr 1fr; }

  /* Browser demo */
  .win { height: 360px; --side-w: 150px; }
  .o-rail { width: 42px; }
  .o-site { padding: 16px; }
  .o-tab .o-x { display: none; }
  .o-tiles span:nth-child(n+5) { display: none; }

  /* Phones: tabs collapse to favicons, like compact tabs in the app */
  @media (max-width: 600px) {
    .win { --side-w: 52px; }
    .o-shield, .o-cap i:nth-child(-n+2), .o-tool .o-ib:nth-child(2) { display: none; }
    .o-title { display: none; }
    .o-tab { flex: 0 0 32px; justify-content: center; padding: 0; }
    .win[data-tabs="left"] .o-omni, .win[data-tabs="right"] .o-omni { display: none; }
    .win[data-tabs="left"] .o-tool .o-ib:not(:last-child), .win[data-tabs="right"] .o-tool .o-ib:not(:last-child) { display: none; }
    .win[data-tabs="left"] .o-head .o-cap i:not(.cl), .win[data-tabs="right"] .o-head .o-cap i:not(.cl) { display: none; }
    .win[data-tabs="left"] .o-new::after, .win[data-tabs="right"] .o-new::after { content: none; }
    .win[data-tabs="left"] .o-new, .win[data-tabs="right"] .o-new { justify-content: center; padding: 0; }
    .o-tiles span:nth-child(n+4) { display: none; }
  }

  .hero { height: clamp(580px, 88vh, 740px); }
  .engine { min-height: 640px; }
}