/* Mobile pass — refinements below ~600px.
   Loaded on every page after tokens.css; adds tighter rules where the
   per-page breakpoints leave layouts cramped on small phones. */

@media (max-width: 600px) {
  /* Global rhythm */
  .container { padding-left: 20px; padding-right: 20px; }
  section { padding: 56px 0; }
  .h-display { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1.05; }
  .h1 { font-size: clamp(32px, 8vw, 44px); line-height: 1.1; }
  .h2 { font-size: clamp(26px, 6.6vw, 36px); line-height: 1.15; }
  .lede { font-size: 16px; }
  .btn { padding: 12px 18px; font-size: 13.5px; }

  /* Footer collapse */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px; }

  /* Home */
  .hero-grid .demo-stage { padding: 16px; }
  .json-pane { font-size: 11px; padding: 16px; }
  .doc-pane { padding: 16px; }
  .demo-tiles { grid-template-columns: 1fr !important; }
  .demo-tile-val { font-size: 19px; }
  .stats-band { grid-template-columns: 1fr !important; }
  .stats-band .item { border-right: 0 !important; border-bottom: 1px solid var(--rule); padding: 24px 0 !important; }
  .stats-band .item:last-child { border-bottom: 0; }
  .cta-block { padding: 32px !important; }
  .pipeline { padding: 24px !important; }

  /* Pricing */
  .tier { padding: 28px !important; }
  .tier .price { font-size: 44px !important; }

  /* Customers */
  .case-row { padding: 24px !important; gap: 24px !important; }
  .case-row .brand { font-size: 22px; }
  .case-row .metric .v { font-size: 22px; min-width: 64px; }
  .feature-quote { padding: 28px !important; gap: 24px; }
  .feature-quote .stat-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Careers */
  .pic-wall { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .pic.tall { grid-row: span 1 !important; aspect-ratio: 4/5 !important; }
  .perk-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 0; }
  .role { grid-template-columns: 1fr !important; gap: 6px !important; padding: 14px 0 !important; }
  .role .meta, .role .arr { font-size: 11px; }
  .role-team-head { flex-direction: column; gap: 4px; align-items: flex-start; }

  /* About */
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .person h4 { font-size: 16px; }
  .person .bio { font-size: 12.5px; }
  .timeline { grid-template-columns: 1fr !important; }
  .tl { padding: 20px 0; border-top: 1px solid var(--rule); border-right: 0 !important; }

  /* Product */
  .feature-row, .feature-row.flip { padding: 40px 0 !important; gap: 24px !important; }

  /* Solutions */
  .doc-types { grid-template-columns: 1fr !important; }
  .doc-type { border-right: 0 !important; }
  .firms { grid-template-columns: 1fr !important; }
  .workflow, .quote-card, .reconcile { padding: 24px !important; }

  /* Security / Trust */
  .badges, .trust-grid { grid-template-columns: 1fr 1fr !important; }
  .controls { padding: 28px !important; }
  .ctrl-grid { gap: 24px !important; }

  /* Blog */
  .feature { padding: 40px 0 !important; gap: 28px !important; }
  .subscribe { padding: 28px !important; }
  .subscribe-form { flex-direction: column; }
  .subscribe-form input, .subscribe-form button { width: 100%; }

  /* Docs */
  .docs-shell { padding: 32px 0 64px !important; gap: 24px !important; }
  .docs-side { max-height: none !important; }

  /* Status / Changelog */
  .panel { padding: 18px !important; }
  .release { padding: 32px 0 !important; }

  /* Contact */
  .ct-grid { gap: 32px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Legal */
  .legal-toc a { font-size: 13px; padding: 6px 8px; }
  .legal-body h2 { font-size: 22px; }
  .legal-body h3 { font-size: 17px; }
}

@media (max-width: 420px) {
  .h-display { font-size: 38px !important; }
  .pic-wall { grid-template-columns: 1fr !important; }
  .badges, .trust-grid, .team-grid { grid-template-columns: 1fr !important; }
  .feature-quote .stat-grid { grid-template-columns: 1fr; }
}