:root {
    --upcoming-accent: #3b82f6;
}

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

    html,
    body {
        width: 100vw;
        overflow-x: hidden !important;
        margin: 0;
        padding: 0;
    }

    .hero-premium {
        padding: 3rem 1.5rem !important;
        /* Force side padding */
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-content {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .hero-title {
        font-size: clamp(1.75rem, 8vw, 2.1rem) !important;
        line-height: 1.1 !important;
        word-break: break-word;
        width: 100%;
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
        padding: 0 0.5rem !important;
        line-height: 1.4 !important;
        width: 100%;
        box-sizing: border-box;
    }

    .container {
        padding-left: 1.5rem !important;
        /* Standard side padding for AI pages */
        padding-right: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .section {
        padding: 3rem 0 !important;
        width: 100%;
        overflow: hidden;
    }
    /* Phase Headers and Content */
    .phase-header {
        padding: 1.5rem !important;
        gap: 1.25rem !important;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

        .phase-header h3 {
            font-size: 1.4rem !important;
            margin-bottom: 0.25rem !important;
        }

        .phase-header div[style*="max-width: 400px"] {
            max-width: 100% !important;
            padding: 1rem !important;
            font-size: 0.8rem !important;
            border-radius: 10px;
        }

    .phase-content {
        padding: 2rem 1.5rem !important;
        /* Better padding for readability */
        width: 100%;
        box-sizing: border-box;
    }

        .phase-content h4 {
            font-size: 1.1rem !important;
            word-break: break-word;
            line-height: 1.4 !important;
            margin-bottom: 0.75rem !important;
        }

        .phase-content p,
        .phase-content li {
            font-size: 0.9rem !important;
            line-height: 1.5 !important;
        }
    /* Grid Layouts Stack */
    .acceleration-grid,
    .mentorship-grid,
    .order-grid,
    /* if any */
    .community-grid,
    .methodology-grid,
    .analytics-grid,
    .vision-grid,
    .prerequisites-grid,
    .details-grid,
    .phase-content,
    .support-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100%;
    }
        /* Order adjustments for mentorship */
        .mentorship-grid div:nth-child(2) {
            order: -1 !important;
        }
    /* Buttons and Actions */
    .hero-actions,
    .final-cta {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 0 1rem !important;
        box-sizing: border-box;
    }

    .btn-premium,
    .btn-glass,
    .btn-primary,
    .btn-secondary-outline {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        text-align: center;
        justify-content: center;
        display: flex !important;
        padding: 0.9rem 1.5rem !important;
        font-size: 1rem !important;
    }
    /* Technical Repo Mirror */
    .repo-mirror {
        padding: 1.25rem !important;
        font-size: 0.75rem !important;
        overflow-x: auto;
        border-radius: 12px;
    }

        .repo-mirror div[style*="padding-left"] {
            padding-left: 1rem !important;
        }
    /* Badge fixes */
    .hero-badge {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
        margin-bottom: 1rem !important;
    }

    .badges-container {
        max-width: 100% !important;
        padding: 0 1rem;
    }
}