/* GlideAPI responsive foundation. Loaded last on every rendered surface. */
html { max-width: 100%; overflow-x: clip; }
body { min-width: 0; max-width: 100%; overflow-x: clip; }
img, picture, video, canvas, svg { max-width: 100%; }
pre, code { max-width: 100%; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
button, input, select, textarea { max-width: 100%; }

@media (max-width: 1024px) {
  .main-content, .admin-workspace, .docs-content, .page, .doc-page { min-width: 0; }
  .hero, .page-hero, .docs-hero, .partner-hero, .about-hero { min-width: 0; }
  .route-map, .request-machine, .terminal, .router, .model-card, .pricing-card { min-width: 0; }
  .docs-content pre, .doc-body pre, .terminal pre, .machine-code { overflow-x: auto; }
}

@media (max-width: 760px) {
  /* Public pages: no desktop-width gutters or fixed visual objects. */
  .nav, .site-nav, .axion-nav { max-width: 100vw; }
  .hero, .steps, .code-section, .page, .doc-page, .about-canvas, .partner-canvas {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .hero h1, .page-hero h1, .docs-hero h1, .about-copy h1, .partner-hero h1 {
    overflow-wrap: anywhere;
  }
  .hero .proof, .hero-actions, .story-actions, .page-actions, .panel-actions {
    flex-wrap: wrap;
  }
  .hero .proof > *, .hero-actions > *, .story-actions > * { min-width: 0; }
  .pricing-hero, .billing-grid, .rate-panel, .partner-close, .about-close { min-width: 0; }
  .pricing-hero, .billing-grid, .rate-panel, .partner-close { grid-template-columns: 1fr !important; }
  .rate-panel { margin-inline: 18px !important; padding: 28px 20px !important; }

  /* Docs: prevent content/code from escaping its single-column reading area. */
  .docs-nav button, .docs-nav a { max-width: 100%; overflow-wrap: anywhere; }
  .docs-content, .doc-body, .doc-section-head { min-width: 0; }
  .doc-page-nav { gap: 10px; }

  /* Portal and admin controls retain touch-size without forcing a page width. */
  .portal-sidebar, .admin-sidebar { min-width: 0; }
  .top-bar, .panel-header, .hero-meta, .copy-row { min-width: 0; }
  .copy-row { flex-wrap: wrap; }
  .copy-row code { width: 100%; }
  .usage-table, .activity-table, .admin-table, .table-wrap { max-width: 100%; overflow-x: auto; }
  .modal, .dialog, [role="dialog"] { max-width: calc(100vw - 24px); }
}

@media (max-width: 480px) {
  :root { --sp-lg: 18px; --sp-xl: 24px; --sp-2xl: 30px; }
  .hero h1, .page-hero h1, .docs-hero h1 { font-size: clamp(34px, 11vw, 48px) !important; line-height: 1.02 !important; }
  .hero .lede, .page-hero p, .docs-hero p { font-size: 16px; }
  .axion-nav__inner, .site-nav .nav-inner { padding-inline: 14px !important; }
  .axion-nav__brand img, .site-nav .brand-mark, .brand img { max-width: 132px; }
  .portal-sidebar .sidebar-actions { grid-template-columns: 1fr; }
  .portal-sidebar .sidebar-actions .btn { width: 100%; }
  .mobile-console-bar .logo-mark { max-width: 132px; }
  .admin-sidebar { padding-inline: 10px !important; }
  .admin-brand .logo-mark { width: 128px !important; }
  .top-bar h1 { font-size: 21px; line-height: 28px; }
  .top-bar .subtitle { font-size: 12px; }
  .customer-search { width: 100%; }
  .form-grid, .form-grid-2, .settings-grid, .grid-2 { grid-template-columns: 1fr !important; }
  .btn { min-height: 36px; }
}