/* Shared responsive guardrails for every public route. Keep content readable at phone widths. */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }

.page-shell, .page-shell > .container, .page-shell .container,
.site-cinematic .container, .legal-page .container {
  width: min(1180px, calc(100% - 40px));
  max-width: 100%;
  margin-inline: auto;
}

.sf-hero-art img { display: none; }
.sf-grid-art img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .88; }
.sf-grid-art { background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px); background-size: 32px 32px; }

@media (max-width: 760px) {
  .page-shell, .page-shell > .container, .page-shell .container,
  .site-cinematic .container, .legal-page .container { width: min(100% - 28px, 680px); }
  .page-header-shell, .page-header-shell--split, .content-grid, .feature-grid,
  .comparison-grid, .article-grid, .docs-layout, .form-grid { grid-template-columns: 1fr !important; }
  .page-header-aside, .page-header-card, .page-header-actions { width: 100%; }
  .page-header-actions, .hero-actions, .cta-row, .form-actions { flex-wrap: wrap; }
  .page-header-actions > *, .hero-actions > *, .cta-row > * { flex: 1 1 180px; }
  .btn, .btn-cta, .btn-gold, .btn-outline, .glass-button { min-height: 44px; }
  .section, .section-tight, .section-alt { padding-block: 52px; }
  .docs-body, .prose, .article-body { overflow-wrap: anywhere; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .page-breadcrumb { overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
  .page-shell, .page-shell > .container, .page-shell .container,
  .site-cinematic .container, .legal-page .container { width: calc(100% - 24px); }
  h1 { font-size: clamp(2rem, 10vw, 3.2rem); }
  h2 { font-size: clamp(1.65rem, 8vw, 2.5rem); }
  .btn, .btn-cta, .btn-gold, .btn-outline, .glass-button { width: 100%; }
}