/* =====================================================
   Mobile-Specific Styles
   ===================================================== */

/* General Responsive Adjustments */
@media (max-width: 768px) {
    .container {
        padding: 0 24px; /* Adjusted padding for tablets */
    }

    .vsl-headline {
        font-size: 36px;
        line-height: 44px;
    }

    /* Remove underline from main title on mobile */
    .vsl-headline .highlight::after {
        display: none;
    }

    .assessment-subtitle {
        font-size: 20px;
        line-height: 28px;
    }

    .vsl-subtext {
        font-size: 16px;
        line-height: 24px;
        max-width: 90%;
        margin: 0 auto 32px;
    }

    .skills-features,
    .features-grid,
    .experience-stats-top {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        gap: 24px;
    }

    /* Improved "What You Get" section for mobile */
    .experience-stats-top {
        display: flex;
        flex-direction: column;
        gap: 32px;
        margin: 32px 0 60px 0;
        align-items: center;
    }

    .top-stat-item {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(251, 50, 188, 0.1);
        border-radius: 16px;
        padding: 24px;
        transition: all 0.3s ease;
    }

    .top-stat-item:hover {
        background: rgba(251, 50, 188, 0.05);
        border-color: rgba(251, 50, 188, 0.2);
        transform: translateY(-2px);
    }

    .stat-number {
        font-size: 40px;
        height: 60px;
        margin-bottom: 16px;
    }

    .stat-label {
        font-size: 15px;
        line-height: 1.4;
        max-width: 100%;
    }

    /* Center-align skill icons for mobile since text is center-aligned */
    .skill-icon {
        margin: 0 auto 20px;
    }

    /* Improved Next Steps section for mobile - better spacing and connector visibility */
    .next-steps-flow {
        flex-direction: column;
        align-items: center;
        gap: 40px; /* Increased gap to make connectors more visible */
    }

    .step-connector {
        transform: rotate(90deg);
        margin: -10px 0; /* Reduced negative margin to show more of the connector */
        height: 60px; /* Increased height for better visibility */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .connector-line {
        height: 3px; /* Made line slightly thicker for mobile visibility */
        background: linear-gradient(180deg, transparent, rgba(251, 50, 188, 0.6), transparent);
    }

    .pricing-card {
        margin-bottom: 24px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .modal-content {
        width: 90%;
    }
}

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

    .vsl-headline {
        font-size: 28px;
        line-height: 36px;
    }

    /* Ensure underline stays hidden on smaller mobile screens */
    .vsl-headline .highlight::after {
        display: none;
    }

    h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .assessment-subtitle {
        font-size: 18px;
        line-height: 26px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-large {
        width: 100%;
        text-align: center;
        padding: 16px;
    }

    .skill-box,
    .feature-item,
    .top-stat-item {
        padding: 20px;
    }

    /* Enhanced mobile layout for smaller screens */
    .experience-stats-top {
        gap: 24px;
        margin: 24px 0 40px 0;
    }

    .top-stat-item {
        padding: 20px;
        border-radius: 12px;
    }

    .stat-number {
        font-size: 36px;
        height: 50px;
        margin-bottom: 12px;
    }

    .stat-label {
        font-size: 14px;
        line-height: 1.3;
    }

    /* Center-align skill icons for smaller mobile screens */
    .skill-icon {
        margin: 0 auto 20px;
    }

    /* Further optimized Next Steps spacing for smaller mobile screens */
    .next-steps-flow {
        gap: 32px; /* Slightly smaller gap for very small screens */
    }

    .step-connector {
        margin: -8px 0; /* Less negative margin for smaller screens */
        height: 50px;
    }
    
    .pricing-wrapper {
        padding: 0;
    }

    .pricing-card {
        padding: 24px;
    }
    
    .criteria-item {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .faq-question h4 {
        font-size: 16px;
    }

    .modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-body {
        padding: 16px;
    }
}