/* ============================================================
   Site-17 — Responsive CSS
   ============================================================ */

@media (max-width: 900px) {
  .grid-2, .grid-2.reverse { grid-template-columns: 1fr; gap: 32px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .risk-grid { grid-template-columns: 1fr; }
  .glossary-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .container, .nav-inner, .hero-inner, .page-header-inner { padding-left: 20px; padding-right: 20px; }
  .section { padding: 48px 0; }
  .hero { padding: 56px 0 48px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 20px 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-legal, .footer-bottom { padding-left: 20px; padding-right: 20px; }

  /* Mobile nav */
  .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); flex-direction: column; padding: 16px 20px; gap: 0; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 15px; }
  .nav-links .nav-cta { text-align: center; margin-top: 8px; padding: 12px; }
  .nav-toggle { display: flex; }

  /* Table scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
  .tier-table { min-width: 560px; }

  /* Page header */
  .page-header { padding: 40px 0 32px; }

  /* CTA block */
  .cta-block { padding: 32px 20px; }
  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn { justify-content: center; }

  /* Step item */
  .step-item { grid-template-columns: 40px 1fr; gap: 16px; }
  .step-num { width: 40px; height: 40px; font-size: 16px; }
}

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  .metrics { grid-template-columns: 1fr; }
  .metric-value { font-size: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }
}