/* AI-chatbotit (ai-chatbotit.php). Tiedostot ladataan numerojärjestyksessä, joten myöhempi ohittaa aiemman.
   Responsiivisuus koko sivulle, ladataan viimeisenä. */

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1100px) {
    .hero-page-grid { grid-template-columns: 1fr; gap: 40px; }
    .chat-visual { max-width: 400px; }
    .kipina-band-grid { grid-template-columns: 1fr; gap: 56px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  }
  @media (max-width: 700px) {
    .usecase-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .container { padding: 0 20px; }
    .hero-page { padding: 120px 0 60px; }
    .block { padding: 70px 0; }
    .kipina-band { padding: 80px 0; }
    .cta-band { padding: 80px 0; }
    .section-head { margin-bottom: 50px; }
    .hero-cta-row { flex-direction: column; }
    .btn-primary { justify-content: center; }
    .ai-hi { justify-content: center; }
    .ai-hi:hover .ai-hi-input,
    .ai-hi:focus-within .ai-hi-input { width: 140px; }
    .chat-visual { max-width: 320px; }
    .process-grid { grid-template-columns: 1fr; gap: 32px; }
    .process-step::before { font-size: 60px; }
    .kipina-band-grid { gap: 44px; }
    .usecase-card { padding: 26px 22px; }
    .tj-box { padding: 26px 22px; margin-top: 48px; }
  }
  @media (max-width: 900px) {
    .tj-box { grid-template-columns: 1fr; gap: 32px; }
  }