/* mobile.css — ReasonDx Global Mobile Responsive Styles */

/* ─── Base responsive adjustments ─── */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
  }

  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }

  .container,
  .section,
  .page-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Card grids → single column */
  .feature-grid,
  .card-grid,
  .cards,
  .how-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Stats strips */
  .stats-strip {
    flex-direction: column;
    gap: 20px !important;
    padding: 32px 16px !important;
  }

  /* Tables → horizontal scroll */
  .table-wrapper,
  table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Buttons → full width on small screens */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 24px !important; }

  .cred-bar {
    flex-direction: column;
    gap: 12px !important;
  }
}