/* ===================================================================
   responsive.css — phone-first adjustments
   =================================================================== */

@media (max-width: 640px) {
  .container,
  #app,
  #dashboard,
  #app-header {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .hero-stat .num {
    font-size: 1.6rem;
  }

  .action-grid {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .summary-grid div:last-child {
    grid-column: 1 / -1;
  }

  .readiness-wrap {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 1.4rem;
  }

  .question {
    font-size: 2.2rem;
  }

  button {
    min-height: 46px;
  }

  .card {
    padding: var(--space-4);
  }
}

@media (min-width: 641px) {
  .menu-grid {
    grid-template-columns: 1fr 1fr;
  }
}