@media (max-width: 900px) {
  .main-nav .nav-link { padding: 8px 9px; font-size: 13px; }
  .product-menu-panel { width: min(330px, calc(100vw - 32px)); }
  .header-inner { gap: 14px; }
  .site-brand { gap: 12px; }
  .site-logo { height: 30px; }
  .main-stage { padding-top: 24px; }
  .hero-copy { font-size: 14px; }
  .browse-head { padding: 16px; }
  .tabs { max-width: 100%; }
  .tab { padding: 10px 14px; font-size: 14px; }
  .browse-content { padding: 16px; }
  .browse-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .browse-item { min-height: 150px; }
  .task-grid, .two-col { grid-template-columns: 1fr; }
  .page-title-row { margin-left: 0; }
}
@media (max-width: 480px) {
  .header-inner { gap: 5px; }
  .site-brand { gap: 8px; }
  .site-logo { height: 22px; }
  .brand-divider, .site-context { display: none; }
  .shell { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 440px) {
  .site-logo { height: 26px; }
  h1 { font-size: 31px; }
  .main-nav { gap: 1px; }
  .main-nav .nav-link { font-size: 11.5px; padding: 7px 4px; }
  .product-menu-chevron { margin-left: 2px; }
  .product-menu-panel { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; grid-template-columns: 1fr; max-height: calc(100vh - 80px); overflow-y: auto; }
  .browse-grid { grid-template-columns: 1fr; }
  .browse-item { min-height: 142px; }

  /* Chat, mobile: icon-only circular launcher (no text pill, no
     greeting bubble) and a full-screen drawer — no small floating
     panel with page content visible (and interactable) around it. */
  .chat-launcher {
    right: max(15px, env(safe-area-inset-right, 0px));
    bottom: max(15px, env(safe-area-inset-bottom, 0px));
    width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: 50%; gap: 0;
  }
  .chat-launcher-label { display: none; }
  /* Cards can otherwise render right up against the fixed floating
     launcher's footprint at this viewport size (audited overlap bug on
     the mWorkOrder current-release card) — reserve clearance instead of
     letting text sit under the button. */
  .spotlight-card, .version-entry { margin-right: 58px; }
  .chat-drawer {
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .chat-header { border-radius: 0; padding-top: max(16px, env(safe-area-inset-top, 0px)); }
}

@media (max-width: 600px) {
  .main-stage > .help-search { width: calc(100% - 32px); }
  .main-stage > .answer-panel { width: calc(100% - 32px); }
}