/* ============================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ============================================ */

/* ---- Large tablet / small desktop ---- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .how-it-works .container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .how-it-works-intro {
        position: static;
    }

    .book-section .container {
        gap: 48px;
    }

    .book-cover-placeholder {
        width: 200px;
    }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
    :root {
        --section-padding: 80px 0;
        --section-padding-dark: 80px 0;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 48px;
    }

    .hero-content p {
        max-width: 100%;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-image {
        max-width: 520px;
        margin: 0 auto;
    }

    .hero::after {
        display: none;
    }

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

    .about-section .container {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-photo-placeholder {
        margin: 0 auto;
    }

    .book-section .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 36px;
    }

    .book-cover-placeholder {
        margin: 0 auto;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .footer-logo {
        grid-column: 1 / -1;
    }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        gap: 12px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    nav ul li a {
        font-size: 0.82rem;
        padding: 6px 10px;
    }

    .hero {
        padding: 140px 0 80px;
    }

    .hero-content h1 {
        font-size: clamp(2.2rem, 8vw, 3.2rem);
    }

    .section-title {
        font-size: clamp(1.7rem, 5vw, 2.2rem);
    }

    #mc_embed_signup {
        padding: 28px 24px;
    }

    .submission-section {
        padding: 28px 20px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

    .services-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .submission-auth-prompt .auth-buttons {
        flex-direction: column;
        align-items: center;
    }

    .pricing-callout {
        flex-direction: column;
        align-items: flex-start;
        border-radius: var(--radius-xl);
        padding: 20px;
        gap: 16px;
    }

    .pricing-callout-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ---- Small mobile ---- */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero {
        padding: 130px 0 64px;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: center;
    }

    .hero-cta-group .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .modal-content {
        padding: 28px 20px;
    }

    .step {
        flex-direction: column;
        gap: 14px;
    }
}