/* Site-wide responsive layer. Kept separate from styles.css (the design-system
   entry point) since this is site-specific layout behavior, not a design token. */

@media (max-width: 860px) {
  .sbol-grid-2,
  .sbol-grid-3,
  .sbol-grid-4,
  .sbol-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .sbol-page-pad {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }

  .sbol-hero-title {
    font-size: var(--text-2xl) !important;
  }

  .sbol-nav-links {
    display: none !important;
  }

  .sbol-header-inner {
    gap: var(--space-4) !important;
  }

  .sbol-footer-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: var(--space-7) !important;
  }

  .sbol-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .sbol-cta-row > * {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .sbol-footer-grid {
    grid-template-columns: 1fr !important;
  }
}