/* =============================================================
   responsive.css — Shared mobile responsive styles for IronSet
   Linked from: index.html, pricing.html, signup.html, login.html
   Breakpoints: 768px (tablet), 480px (phone)
   ============================================================= */

/* -------------------------------------------------------
   TABLET  (max-width: 768px)
   ------------------------------------------------------- */
@media (max-width: 768px) {

    /* — Nav — */
    nav {
        padding: 16px 24px;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-right {
        font-size: 0.8rem;
    }

    /* — Hero (index) — */
    .hero {
        padding: 120px 24px 60px;
    }

    .hero h1 {
        font-size: 2.4rem;
        letter-spacing: -1px;
    }

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

    .hero-cta {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* — Stats bar — */
    .stats-bar {
        padding: 40px 24px;
        flex-wrap: wrap;
        gap: 32px;
    }

    .stat-number {
        font-size: 2rem;
    }

    /* — Problem section — */
    .problem {
        grid-template-columns: 1fr;
        padding: 80px 24px;
        gap: 48px;
    }

    .problem-left h2 {
        font-size: 2rem;
    }

    /* — How it works — */
    .how {
        padding: 80px 24px;
    }

    .how-header h2 {
        font-size: 2rem;
    }

    .how-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .how-card {
        padding: 32px 28px;
    }

    /* — Vision — */
    .vision {
        padding: 100px 24px;
    }

    .vision h2 {
        font-size: 1.8rem;
    }

    .vision .hero-cta {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* — Pricing hero — */
    .pricing-hero {
        padding: 120px 24px 60px;
    }

    .pricing-hero h1 {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }

    /* — Pricing cards — */
    .plans {
        grid-template-columns: 1fr;
        padding: 20px 16px 60px;
        max-width: 460px;
        gap: 16px;
    }

    .plan-card {
        padding: 32px 24px;
    }

    /* — Comparison table — */
    .comparison {
        padding: 60px 16px 80px;
        overflow-x: auto;
    }

    .comparison h2 {
        font-size: 1.8rem;
    }

    .comparison-table {
        font-size: 0.8rem;
        min-width: 500px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px;
    }

    /* — CTA section — */
    .cta-section {
        padding: 60px 24px 80px;
    }

    .cta-btn {
        padding: 16px 36px;
        font-size: 1rem;
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* — Form pages (signup / login) — */
    .main {
        padding: 40px 20px;
    }

    .card {
        padding: 32px 24px;
        border-radius: 18px;
    }

    .card-header h1 {
        font-size: 1.6rem;
    }

    input {
        font-size: 16px;
        padding: 14px 16px;
        min-height: 48px;
    }

    .btn-submit {
        padding: 16px;
        min-height: 48px;
        font-size: 1rem;
    }

    /* — Footer — */
    footer {
        padding: 32px 24px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}


/* -------------------------------------------------------
   PHONE  (max-width: 480px)
   ------------------------------------------------------- */
@media (max-width: 480px) {

    /* — Nav — */
    nav {
        padding: 14px 20px;
    }

    .nav-right {
        font-size: 0.72rem;
    }

    /* — Body font min 16px — */
    body {
        font-size: 16px;
    }

    /* — Hero — */
    .hero {
        padding: 110px 20px 48px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-cta {
        font-size: 1rem;
        padding: 16px 24px;
    }

    /* — Stats — */
    .stats-bar {
        padding: 32px 20px;
        gap: 24px;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    /* — Problem — */
    .problem {
        padding: 60px 20px;
        gap: 36px;
    }

    .problem-left h2 {
        font-size: 1.7rem;
    }

    .problem-card {
        padding: 22px 24px;
    }

    /* — How — */
    .how {
        padding: 60px 20px;
    }

    .how-header h2 {
        font-size: 1.7rem;
    }

    .how-card {
        padding: 28px 24px;
    }

    .how-step {
        font-size: 2.4rem;
    }

    /* — Vision — */
    .vision {
        padding: 80px 20px;
    }

    .vision h2 {
        font-size: 1.5rem;
    }

    /* — Pricing — */
    .pricing-hero {
        padding: 110px 20px 48px;
    }

    .pricing-hero h1 {
        font-size: 1.8rem;
    }

    .plans {
        padding: 16px 12px 48px;
    }

    .plan-card {
        padding: 28px 20px;
    }

    .plan-price .amount {
        font-size: 2.8rem;
    }

    /* — CTA — */
    .cta-section {
        padding: 48px 20px 64px;
    }

    .cta-section h2 {
        font-size: 1.6rem;
    }

    /* — Forms (signup / login) — */
    .main {
        padding: 32px 16px;
    }

    .card {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .card-header h1 {
        font-size: 1.5rem;
    }

    input {
        font-size: 16px;
        padding: 14px 16px;
        min-height: 48px;
    }

    .btn-submit {
        padding: 16px;
        min-height: 48px;
    }

    label {
        font-size: 0.9rem;
    }

    /* — Footer — */
    footer {
        padding: 28px 20px;
    }
}