/* Jatkokehitys 6/6: responsiivisuus */
  @media (min-width: 861px) {
    .hero-cta-row:has(.ai-hi) { flex-wrap: nowrap; }
    .hero-cta-row:has(.ai-hi) > * { min-width: 0; }
    .hero-cta-row .ai-hi-input { min-width: 0; }
    .hero-cta-row .btn-primary { flex-shrink: 0; white-space: nowrap; }
  }

  @media (max-width: 1100px) {
    .jk-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .hero-page-inner { max-width: 680px; }
    .jk-stage { margin: 0 auto; max-width: 500px; }
    .jk-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jk-promises li:nth-child(3)::before { display: none; }
    .jk-promises li:nth-child(n+3) { border-top: 1px solid var(--border); }
    .jk-why-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .jk-team, .jk-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .jk-team-intro, .jk-faq-intro { position: static; }
    .jk-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
    .jk-loop::before { display: none; }
    .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; gap: 30px; }
    .price-card.featured { order: -1; }
  }

  @media (max-width: 860px) {
    .jk-bento { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 700px) {
    .jk-signals { grid-template-columns: minmax(0, 1fr); }
    .jk-signal:nth-child(2), .jk-signal:nth-child(4) { translate: none; }
    .adv-grid { grid-template-columns: minmax(0, 1fr); }
    .jk-loop { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .jk-loop::before {
      display: block;
      top: 30px;
      bottom: 30px;
      left: 30px;
      right: auto;
      width: 3px;
      height: auto;
    }
    .jk-step {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      column-gap: 18px;
      text-align: left;
      padding: 0 0 32px;
    }
    .jk-step-num { grid-row: span 2; margin: 0; }
    .jk-step h3 { margin: 16px 0 6px; }
  }

  @media (max-width: 600px) {
    .container { padding: 0 20px; }
    .jk-hero { padding: 120px 0 104px; }
    .jk-hero-layout p { font-size: 17px; }
    .jk-hero-layout p + p { font-size: 16px; }
    .hero-cta-row { flex-direction: column; align-items: stretch; }
    .hero-cta-row .ai-hi, .hero-cta-row .btn-primary { justify-content: center; }
    .ai-hi:hover .ai-hi-input,
    .ai-hi:focus-within .ai-hi-input { width: 150px; }
    .jk-stage { aspect-ratio: auto; padding-top: 64px; }
    .jk-queue { position: relative; top: auto; left: auto; width: 100%; padding: 20px 18px 18px; transform: none; }
    .jk-queue-title { font-size: 19px; }
    .jk-q-name { font-size: 14px; white-space: normal; line-height: 1.3; }
    .jk-pill { padding: 4px 9px; font-size: 11px; }
    .jk-tile--speed { padding: 10px 14px 10px 10px; gap: 10px; }
    .jk-ring { width: 48px; height: 48px; }
    .jk-tile-text strong, .jk-tile--leads strong { font-size: 24px; }
    .jk-tile--leads { display: none; }
    .jk-wires { display: none; }
    .jk-hero-layout .jk-stage-note { position: static; margin-top: 14px; text-align: right; }
    .jk-promises-wrap { margin-top: -48px; }
    .jk-promises { grid-template-columns: minmax(0, 1fr); }
    .jk-promises li { padding: 20px; }
    .jk-promises li + li { border-top: 1px solid var(--border); }
    .jk-promises li + li::before { display: none; }
    .block, .jk-why { padding: 76px 0; }
    .advantage-band, .cta-band { padding: 84px 0; }
    .section-head { margin-bottom: 44px; }
    .jk-area-visual { height: 190px; }
    .jk-area-body { padding: 28px 24px 30px; }
    .jk-area h3 { font-size: 21px; }
    .price-card { padding: 34px 24px 28px; }
    .inline-cta { flex-direction: column; align-items: stretch; padding: 24px 22px; gap: 18px; }
    .inline-cta .ai-hi { justify-content: center; }
    .jk-log { padding: 18px 16px 6px; }
    .jk-log li { grid-template-columns: 44px minmax(0, 1fr); font-size: 13.5px; }
    .jk-log b { display: none; }
    .faq-item summary { padding: 18px 20px; font-size: 16px; }
    .faq-item p { padding: 0 20px 20px; }
    .cta-band-actions { flex-direction: column; align-items: stretch; }
    .cta-band-actions .ai-hi, .cta-band-actions .btn-primary { justify-content: center; }
  }
