/* =====================================================
   RemindFlow — responsive.css
===================================================== */

@media (max-width: 900px) {
  .hero-mockup { grid-template-columns: 1fr 1fr; }
  .mock-trust { display: none; }

  .problem-inner { grid-template-columns: 1fr; gap: 48px; }

  .feat-card--featured { grid-column: span 1; grid-template-columns: 1fr; }
  .feat-mini-mockup { display: none; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }

  .price-connector { flex-direction: column; align-items: flex-start; gap: 20px; }
  .price-connector-right { flex-direction: row; align-items: center; }
}

@media (max-width: 680px) {
  body { padding-top: 64px; }

  .nav-links {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(10,15,26,0.98);
    flex-direction: column;
    padding: 28px 32px;
    gap: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .nav-links.open { display: flex; }
  .hamburger { display: flex; }

  .hero { padding: 72px 0 60px; }
  .hero-mockup { grid-template-columns: 1fr; }
  .mock-reminders { display: none; }

  .features-grid { grid-template-columns: 1fr; }
  .feat-card--featured { grid-column: span 1; }

  .ease-grid { flex-direction: column; align-items: stretch; }
  .ease-cell { min-width: unset; }
  .ease-arrow { transform: rotate(90deg); align-self: center; }

  .workflow-steps { flex-direction: column; align-items: stretch; }
  .wf-step { text-align: left; }
  .wf-arrow { transform: rotate(90deg); align-self: center; }

  .founder-card { flex-direction: column; text-align: center; padding: 36px 24px; gap: 24px; }
  .founder-quote { font-size: 18px; }

  .footer-inner { flex-direction: column; text-align: center; gap: 16px; }
  .footer-links { justify-content: center; }

  .price-connector-right { flex-direction: column; align-items: flex-start; gap: 12px; }
  .price-connector-right .price-btn { width: auto; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .nav-container { padding: 0 20px; }
  .hero-trust { font-size: 12px; }
  .stat-num { font-size: 38px; }
}