@media (max-width: 1100px) {
    .nav-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        border-top: 2px solid var(--color-black);
        border-bottom: 2px solid var(--color-black);
        flex-direction: column;
        gap: 0;
        z-index: 1000;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        border-bottom: 1px solid var(--color-black);
    }

    .nav-menu li:last-child {
        border-bottom: none;
    }

    .nav-menu a {
        display: block;
        padding: var(--space-4) var(--container-padding);
        font-size: 16px;
    }

    .nav-cta {
        display: none;
    }

    .nav-lang-item {
        margin-left: 0;
        padding: var(--space-4) var(--container-padding);
    }

    .nav-lang-select {
        width: 100%;
        padding: var(--space-3) var(--space-4);
        font-size: 16px;
    }

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

    .hero-title {
        font-size: 56px;
    }

    .hero-intro {
        font-size: 18px;
    }

    .hero-details {
        font-size: 15px;
    }

    .phone-mockup {
        width: 280px;
        height: 560px;
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .stat-item {
        border-right: none;
        border-bottom: 2px solid var(--color-black);
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .features-title {
        font-size: 48px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brands {
        padding: var(--space-12) var(--container-padding);
    }

    .how-it-works {
        padding: var(--space-8) var(--container-padding);
    }

    .how-container {
        grid-template-columns: 1fr;
    }

    .how-screenshot {
        order: -1;
    }

    .how-title {
        font-size: 48px;
    }

    .how-step {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .step-title {
        font-size: 16px;
    }

    .how-image-grid {
        grid-template-columns: 1fr;
    }

    .pricing-container {
        grid-template-columns: 1fr;
    }

    .pricing-right {
        border-left: 2px solid var(--color-black);
        border-top: none;
    }

    .pricing-title,
    .faq-title {
        font-size: 48px;
    }

    .price-amount {
        font-size: 72px;
    }

    .pricing-justification {
        font-size: 13px;
    }

    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* Tablet portrait and smaller (800px and below) */
@media (max-width: 800px) {
    .hero {
        padding: 80px var(--container-padding) var(--space-16);
    }

    .how-it-works {
        padding: var(--space-16) var(--container-padding);
    }

    .brands {
        padding: var(--space-16) var(--container-padding);
    }
}

/* Tablet and smaller (768px and below) */
@media (max-width: 768px) {
    .hero-hook {
        font-size: 32px;
    }

    .hero-subheadline {
        font-size: 15px;
    }

    .hero-features {
        font-size: 14px;
    }

    .stats-heading {
        font-size: 28px;
        margin-bottom: var(--space-6);
    }

    .stats-hook,
    .stats-problem {
        font-size: 16px;
    }

    .stat-desc {
        font-size: 12px;
    }

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

    .how-intro {
        margin-bottom: var(--space-24);
    }

    .how-intro-text {
        font-size: 16px;
    }

    .how-steps {
        margin-bottom: var(--space-10);
    }

    .how-conclusion {
        margin-top: 0;
        margin-bottom: 0;
    }

    .brands {
        padding-bottom: var(--space-4);
    }

    .brands-grid {
        margin-bottom: var(--space-10);
    }

    .brands-count {
        margin-top: var(--space-4);
        margin-bottom: var(--space-6);
    }

    .brands-why {
        margin-top: var(--space-8);
        margin-bottom: var(--space-4);
    }

    .brands-request-intro {
        margin-top: var(--space-8);
    }

    .brands-explanation {
        padding: 0 var(--space-4);
    }

    .pricing-justification {
        margin-bottom: var(--space-16);
    }

    .btn-pricing {
        margin-bottom: var(--space-6);
    }

    .btn-request-brand {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: var(--space-4) auto;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    :root {
        --container-padding: var(--space-4);
    }

    .hero {
        padding: 100px var(--container-padding) var(--space-12);
    }

    /* Fixed Sizes & Typography */
    .hero .hero-content .hero-title {
        font-size: 32px;
    }

    .hero-hook {
        font-size: 24px;
        /* "Stop guessing" - Increased per feedback */
    }

    .hero-intro {
        font-size: 16px;
    }

    .hero-details {
        font-size: 13px;
    }

    .hero-privacy {
        font-size: 12px;
    }

    .phone-mockup {
        width: 260px;
        height: 520px;
    }

    .phone-content {
        padding: var(--space-2);
    }

    .phone-app-header {
        font-size: 20px;
        margin-bottom: var(--space-3);
    }

    .phone-form {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .phone-gender-selector {
        gap: var(--space-1);
        margin-bottom: var(--space-3);
    }

    .gender-btn {
        padding: var(--space-2);
        font-size: 9px;
    }

    .phone-field {
        font-size: 10px;
    }

    /* Stats Section Fixes */
    .stats-heading {
        margin-bottom: var(--space-6);
        font-size: 24px;
    }

    .stats-intro p {
        margin-bottom: var(--space-4);
        line-height: 1.5;
    }

    .stats-conclusion {
        margin-bottom: var(--space-12);
    }

    .stat-number {
        font-size: 36px;
    }

    .features-title {
        font-size: 28px;
    }

    /* Brands Section Fixes */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: var(--space-8);
    }

    .brand-item {
        font-size: 14px;
    }

    /* How It Works Fixes */
    .how-title {
        font-size: 28px;
    }

    .how-intro {
        margin-bottom: var(--space-6);
    }

    .how-conclusion {
        margin-top: var(--space-12);
        margin-bottom: var(--space-6);
    }

    /* Progressive padding reduction for mobile */
    .stats {
        padding-top: var(--space-8);
        /* 32px - was 48px */
        padding-bottom: var(--space-8);
        /* 32px - was 48px */
    }

    .features,
    .brands,
    .how-it-works,
    .pricing {
        padding-top: var(--space-8);
        /* 32px */
        padding-bottom: var(--space-8);
        /* 32px */
    }

    .how-step {
        gap: var(--space-4);
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .step-title {
        font-size: 16px;
    }

    /* Pricing Section Fixes */
    .pricing-title,
    .faq-title {
        font-size: 28px;
    }

    .pricing-justification {
        margin: var(--space-4) 0;
        display: block;
        font-size: 14px;
    }

    .price-amount {
        font-size: 42px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation - AAA Compliance */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--color-black);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1);
}

/* Focus styles for dark backgrounds */
.hero a:focus-visible,
.features a:focus-visible,
.footer a:focus-visible,
.hero button:focus-visible,
.features button:focus-visible,
.footer button:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .feature-card,
    .brand-item,
    .how-step {
        border-width: 3px;
    }
}

/* ================================================
   COMING SOON STATE
   ================================================ */

.coming-soon {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

button.coming-soon:hover,
span.coming-soon:hover {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 0.6;
}

/* Coming soon buttons inherit their parent button styles */
button.btn-appstore.coming-soon,
button.btn-pricing.coming-soon,
button.btn-footer.coming-soon {
    border: 2px solid var(--color-black);
    background: var(--color-white);
    color: var(--color-black);
}

span.nav-cta.coming-soon {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 0.6;
    cursor: not-allowed;
}

/* ================================================
   CONTENT PAGES (Privacy, Help)
   ================================================ */

.content-page {
    background: var(--color-white);
    padding: 120px var(--container-padding) var(--space-24);
    min-height: 100vh;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.content-wrapper h1 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: var(--space-12);
    text-align: left;
}

.content-wrapper .last-updated {
    font-size: 14px;
    color: #666;
    margin-bottom: var(--space-16);
}

.content-section {
    margin-bottom: var(--space-12);
}

.content-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--space-6);
    margin-top: var(--space-8);
}

.content-section h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--space-4);
    margin-top: var(--space-6);
}

.content-section p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

.content-section ul,
.content-section ol {
    margin-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.content-section li {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: var(--space-3);
}

.content-section ul {
    list-style: disc;
}

.content-section ol {
    list-style: decimal;
}

.content-section a {
    color: var(--color-black);
    text-decoration: underline;
    font-weight: 600;
}

.content-section a:hover {
    color: #4D4D4D;
    /* AAA: 8.6:1 contrast - darker for better visibility */
}

.content-section.highlight {
    background: #f5f5f5;
    padding: var(--space-6);
    border-left: 4px solid var(--color-black);
}

.faq-item {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid #e0e0e0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.faq-answer {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}