/* =========================================================
   Responsive refinements (in addition to inline rules above)
   ========================================================= */

@media (max-width: 1180px){
  .grid-4{ grid-template-columns: repeat(3, 1fr); }
  .stat-grid{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px){
  :root{ --nav-h: 76px; --nav-h-scrolled: 64px; }
  .ai-flow{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .tech-row{ flex-direction: column; align-items: flex-start; }
  .tech-tags{ justify-content: flex-start; }
  .footer-cta{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px){
  .section{ padding-block: 56px; }
  .section-tight{ padding-block: 42px; }
  .cta-banner{ flex-direction: column; align-items: flex-start; text-align: left; }
  .pricing-grid{ gap: 20px; }
  .stat-grid{ grid-template-columns: repeat(2, 1fr); }
  .index-row{ grid-template-columns: 40px 40px 1fr; }
  .index-row .go{ display: none; }
}

@media (max-width: 640px){
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .hero-actions .btn{ width: 100%; }
  .hero-actions{ flex-direction: column; }
  .cta-banner .cta-actions .btn{ width: 100%; justify-content: center; }
  .cta-banner .cta-actions{ width: 100%; flex-direction: column; }
  .category-head{ align-items: flex-start; }
  .addon-table th, .addon-table td{ padding: 14px 16px; font-size: 13.5px; }
  .ai-flow{ grid-template-columns: 1fr; }
  .tab-nav{ width: 100%; }
  .tab-nav button{ flex: 1; justify-content: center; }
}

@media (max-width: 480px){
  .container, .container-narrow, .container-wide{ padding-inline: 18px; }
  .grid-4{ grid-template-columns: 1fr; }
  .hero-meta{ gap: 18px 26px; }
  .nav-brand .wordmark{ font-size: 16px; }
  .stat-grid{ grid-template-columns: 1fr 1fr; }
  .stat-cell{ padding: 22px 14px; }
}

@media (max-width: 360px){
  .btn{ padding: 13px 20px; font-size: 14px; }
  h1{ word-break: break-word; }
}

/* Prevent horizontal overflow globally */
html, body{ max-width: 100%; overflow-x: hidden; }
img, svg, video, table{ max-width: 100%; }