/* ==========================================================================
   Responsive & Accessibility Styles
   ========================================================================== */

/* Mobile Phones (max-width: 640px) */
@media (max-width: 640px) {
  .container {
    padding: 0 18px;
  }

  .site-header {
    height: 58px;
  }

  .brand-title {
    font-size: 1.05rem;
  }

  .hero-section {
    padding: 36px 0 24px;
  }

  .display-title {
    font-size: 2.1rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .calc-panel, .results-panel {
    padding: 24px 18px;
    border-radius: var(--radius-md);
  }

  .rate-input {
    font-size: 1.8rem;
  }

  .rate-suffix {
    font-size: 1.3rem;
  }

  .savings-amounts-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .savings-big-num {
    font-size: 1.6rem;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-sheet {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    max-height: 85vh;
    padding: 28px 20px 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Reduced Motion Support (Apple HIG §14) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .user-pin {
    transition: none !important;
  }

  .modal-sheet {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
}