/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES

   Loaded AFTER each page's inline <style> block, deliberately. The page
   styles define multi-column grids at equal specificity, so a media query in
   styles.css would lose the cascade and be silently ignored. Loading this file
   last wins on source order and avoids !important everywhere.

   Before this existed the site had no breakpoints at all: every grid below
   held its desktop column count on a phone, and body{overflow-x:hidden} hid
   the symptom by clipping the content rather than letting it scroll.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {

  /* ── Layout grids: collapse to a single column ───────────────────────── */
  .hero-inner,
  .features-top,
  .features-grid,
  .svc-grid,
  .svc-panel,
  .svc-bullets,
  .svc-social-grid,
  .ind-grid,
  .process-grid,
  .stats-dashboard-inner,
  .terminal-section-inner,
  .terminal-stats,
  .llm-split-inner,
  .ba-grid,
  .unified-svc-layout,
  .mission-inner,
  .principles-grid,
  .stack-grid,
  .stack-inner,
  .why-row,
  .blog-grid,
  .featured-card,
  .newsletter-inner,
  .alt-grid,
  .booking-meta,
  .contact-inner,
  .form-row,
  .gs-trust,
  .slot-grid,
  .gs-panel.active,
  .sp-bullets,
  .sp-panel,
  .svc-bottom,
  .svc-top,
  .cta-band-inner,
  .related-grid,
  .hub-grid,
  .hub-how-grid,
  .stat-grid {
    grid-template-columns: 1fr !important;
  }

  /* Compact numeric grids read better two-up than stacked. */
  .hero-stats,
  .mission-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Oversized desktop gutters become dead space on a phone. */
  .hero-inner,
  .contact-inner,
  .stack-inner,
  .newsletter-inner,
  .cta-band-inner,
  .mission-inner,
  .llm-split-inner,
  .terminal-section-inner {
    gap: 32px !important;
  }

  /* ── Grid/flex children that refuse to shrink ────────────────────────── */
  /* min-width:auto is the default on grid and flex items, which is what lets
     a long word or a fixed-width child push past the viewport. */
  .hero-inner > *,
  .contact-inner > *,
  .stack-inner > *,
  .newsletter-inner > *,
  .cta-band-inner > *,
  .mission-inner > *,
  .featured-card > *,
  .gs-panel.active > *,
  .unified-svc-layout > * {
    min-width: 0;
  }

  /* Flex rows that stay side-by-side and blow out at phone widths. */
  .roi-results {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 24px !important;
  }

  .roi-result-item { min-width: 0; }

  .newsletter-form {
    min-width: 0 !important;
    width: 100%;
    flex-wrap: wrap;
  }

  .newsletter-input { min-width: 0; }

  .gs-form-wrap {
    min-width: 0;
    max-width: 100%;
  }

  /* Right-aligned CTA columns look broken once stacked. */
  .cta-band-right,
  .svc-top > *:last-child {
    align-items: flex-start !important;
  }

  /* ── Wide tables scroll instead of overflowing the page ──────────────── */
  .compare-inner,
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare-table {
    min-width: 520px;
  }

  /* ── Typography that was sized for a desktop column ──────────────────── */
  .article-body,
  .article-faq { font-size: 1rem; }

  .marquee-row { overflow: hidden; }
}

@media (max-width: 520px) {
  .hero-stats,
  .mission-stats,
  .booking-meta {
    grid-template-columns: 1fr !important;
  }

  /* Buttons stacked in a narrow column should fill it rather than sit ragged. */
  .cta-band-right .btn,
  .hero-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}