/*
 * File: page_styles/mobile-tightening.css
 * Purpose: Tighten spacing for better mobile visibility of BEFORE/AFTER animation
 * Load this AFTER solutions.css
 */

/* MOBILE-FIRST SPACING ADJUSTMENTS */
@media (max-width: 768px) {
    
    /* Reduce top margins throughout */
    .zander-legacy-container {
        margin-top: -30px !important;
    }
    
    /* Tighten benefits section padding */
    .instant-benefits {
        padding: 1rem 0 !important;
        margin: 0.5rem 0 !important;
    }
    
    /* Compact headline spacing */
    .benefits-headline {
        margin-bottom: 1rem !important;
    }
    
    .benefits-headline h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }
    
    .benefits-headline h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }
    
    /* Optimize BEFORE/AFTER animation area */
    .transformation-example {
        margin: 1rem 0 !important;
    }
    
    .before-after-grid {
        gap: 0.8rem !important;
        margin: 0.8rem 0 !important;
    }
    
    .example-box {
        padding: 1rem !important;
        border-radius: 8px !important;
    }
    
    .example-header {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .example-text {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.3rem !important;
    }
    
    .example-reaction {
        font-size: 0.8rem !important;
    }
    
    /* Tighten platform comparison */
    .platform-comparison {
        margin: 1rem 0 !important;
        font-size: 1rem !important;
    }
    
    .platform-comparison p {
        margin: 0.3rem 0 !important;
    }
    
    /* Compact signup button */
    .simple-signup-section {
        margin: 1rem 0 !important;
        padding: 1rem !important;
    }
    
    /* Reduce header spacing before Butterfly Effect */
    .zander-header {
        margin-top: 1rem !important;
    }
    
    .zander-header h1 {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Tighten subsequent sections */
    .intro-text-wrapper {
        margin: 0.5rem 0 !important;
    }
    
    .zander-bio-section {
        margin-top: 0.5rem !important;
    }
    
    /* Reduce empowerment highlight size on mobile */
    .empowerment-highlight {
        font-size: 1rem !important;
    }
}

/* EXTRA SMALL MOBILE (480px and below) */
@media (max-width: 480px) {
    
    /* Even tighter spacing for small screens */
    .instant-benefits {
        padding: 0.8rem 0 !important;
        margin: 0.3rem 0 !important;
    }
    
    .benefits-headline h2 {
        font-size: 1rem !important;
    }
    
    .benefits-headline h3 {
        font-size: 1.1rem !important;
    }
    
    /* Optimize animation boxes for small screens */
    .example-box {
        padding: 0.8rem !important;
    }
    
    .example-header {
        font-size: 0.9rem !important;
    }
    
    .example-text {
        font-size: 0.85rem !important;
    }
    
    .example-reaction {
        font-size: 0.75rem !important;
    }
    
    /* Compact signup button for small screens */
    .simple-signup-section {
        padding: 0.8rem !important;
    }
    
    .simple-signup-section a {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .simple-signup-section p {
        font-size: 0.8rem !important;
    }
    
    /* Butterfly Effect header */
    .zander-header h1 {
        font-size: 1.2rem !important;
    }
}
/* 
 * PATCH: Move headline up 1.5 lines for better AFTER box visibility
 * ADD TO: page_styles/mobile-tightening.css (at the end)
 */

/* HEADLINE POSITIONING ADJUSTMENT */
@media (max-width: 768px) {
    
    /* Move the main headline up significantly */
    .benefits-headline h2 {
        margin-top: -1.8rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    /* Adjust subsequent spacing to compensate */
    .benefits-headline h3 {
        margin-top: -0.5rem !important;
        margin-bottom: 0.8rem !important;
    }
}

/* EXTRA SMALL MOBILE - Even more aggressive positioning */
@media (max-width: 480px) {
    
    .benefits-headline h2 {
        margin-top: -2rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    .benefits-headline h3 {
        margin-top: -0.6rem !important;
        margin-bottom: 0.6rem !important;
    }
}