/* Responsive layer for opteris.ai — desktop styling is inline; these rules take over on small screens */
@media (max-width: 1100px) {
  [style*="min-width: 1100px"] { min-width: 0 !important; }
}
@media (max-width: 900px) {
  /* collapse every multi-column grid to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* comparison table keeps its columns and scrolls horizontally instead */
  div:has(> [style*="1.2fr 1fr 1fr 1.1fr"]) { overflow-x: auto !important; }
  [style*="1.2fr 1fr 1fr 1.1fr"] { grid-template-columns: 1.2fr 1fr 1fr 1.1fr !important; min-width: 720px; }
  /* tighter section frames */
  section, header, footer { padding-left: 20px !important; padding-right: 20px !important; }
  header[style] { padding-top: 72px !important; padding-bottom: 56px !important; }
  section[style] { padding-top: 60px !important; padding-bottom: 60px !important; }
  h1 { font-size: clamp(32px, 9vw, 42px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(26px, 7.5vw, 34px) !important; }
  /* nav and footer wrap instead of overflowing */
  nav > div { flex-wrap: wrap; row-gap: 10px; padding: 12px 20px !important; }
  nav > div > div { flex-wrap: wrap; row-gap: 10px; }
  footer > div { flex-wrap: wrap; row-gap: 14px; }
  footer [style*="margin-left: auto"] { margin-left: 0 !important; flex-wrap: wrap; }
  /* generic: let flex rows wrap on narrow screens */
  [style*="display: flex"] { flex-wrap: wrap; }
  img { max-width: 100%; height: auto; }
  nav img, footer img { height: auto; }
  /* pricing card breathing room */
  [style*="padding: 44px 48px"] { padding: 32px 24px !important; }
}
@media (max-width: 520px) {
  [style*="font-size: 44px"] { font-size: 34px !important; }
}