/* ============================================================
   RTC MEMBER PORTAL - MOBILE STYLES
   ============================================================ */

@media (max-width: 768px) {
    .container, .container-sm { padding: 20px 14px; }
    .hero { padding: 36px 24px; border-radius: 16px; }
    .hero h1 { font-size: 26px; }
    .hero p { font-size: 15px; }
    .btn-hero-primary, .btn-hero-secondary { padding: 12px 22px; font-size: 14px; }

    .features-grid { grid-template-columns: 1fr; gap: 14px; }
    .feature-card { padding: 20px; }

    .pricing-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .plan-card { padding: 16px 10px; }
    .plan-name { font-size: 14px; }
    .plan-price { font-size: 22px; }
    .plan-description { font-size: 11px; min-height: 50px; }
    .plan-cta { padding: 8px; font-size: 12px; }
    .plan-badge { font-size: 9px; padding: 3px 8px; }

    .form-card { padding: 24px 20px; border-radius: 12px; }
    .form-header h1 { font-size: 22px; }

    .dashboard-card { padding: 20px; }
    .portal-grid { grid-template-columns: 1fr; }

    .footer-inner { flex-direction: column; text-align: center; }
    .footer-inner > div { text-align: center !important; }
}

@media (max-width: 480px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 22px; }
    .form-control { font-size: 16px; /* prevent iOS zoom */ }
}