/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-panel{ max-width: 560px; }
  .pain-grid{ grid-template-columns: repeat(2, 1fr); }
  .flow{ grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .flow-arrow{ display: none; }
  .brain-grid{ grid-template-columns: repeat(2, 1fr); }
  .sec-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px){
  .nav-links, .nav-cta{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-links{
    position: absolute; top: 100%; left: 0; right: 0; background: var(--ink-raised);
    border-bottom: 1px solid var(--hairline); flex-direction: column; align-items: flex-start;
    padding: 8px 24px 20px; gap: 4px; display: none;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ padding: 10px 0; width: 100%; }
  .nav-links.open ~ .nav-cta,
  .nav-links.open{ display: flex; }
  .nav.has-open-menu .nav-cta{ display: none; }

  .knowledge{ grid-template-columns: 1fr; }
  .diff-row{ grid-template-columns: 1fr; }
  .diff-cell--old{ border-right: none; border-bottom: 1px solid var(--hairline); }
  .role-row{ grid-template-columns: 1fr; }
  .role-row > div{ padding: 10px 20px; }
  .role-row--head{ display: none; }
  .role-row:not(.role-row--head){ padding: 14px 0; }
  .role-row:not(.role-row--head) > div::before{ content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ash-dim); margin-bottom: 4px; }
  .role-row:not(.role-row--head) > div.role-name::before{ display: none; }
  .contact-cards{ grid-template-columns: 1fr; }
  .pricing-notes{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px){
  .pain-grid{ grid-template-columns: 1fr; }
  .flow{ grid-template-columns: 1fr; }
  .brain-grid{ grid-template-columns: 1fr; }
  .sec-grid{ grid-template-columns: 1fr; }
  .reason-grid{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; }
  .modal-inner{ padding: 28px 22px; }
  .footer-links{ grid-template-columns: 1fr; }
  .radar-badge{ left: 16px; }
}