/* ============================================================
   Trade Ledger Pro — responsive.css
   All responsive breakpoints. Loaded last so these overrides win.
   ============================================================ */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-art { order: -1; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step .arr { display: none; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .showcase { grid-template-columns: 1fr; gap: 40px; }
  .showcase.rev .txt, .showcase.rev .art { order: initial; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .foot-brand-col { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 860px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

@media (max-width: 720px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .g-4, .g-3, .g-2 { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .trust-row .stat b { font-size: 19px; }
  .float-card { display: none; }
  .metric-list { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .contact-trust { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
}

@media (max-width: 640px) {
  .toc ol { columns: 1; }
}

@media (max-width: 600px) {
  .road-row { grid-template-columns: 1fr; gap: 6px; }
  .foot-top { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .legal-card { padding: 22px 20px; }
  .legal-intro { padding: 24px 22px; }
}