.racing-arcade-explainer {
    padding: 80px 0;
    overflow: hidden;
    background-color: #0d0d0d;
    /* Deep dark background */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    color: #fff;
}

.racing-arcade-explainer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Left Column */
.racing-arcade-explainer__col-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
    /* Slight offset for visual balance */
}

.racing-arcade-explainer__eyebrow {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e60000;
    /* Red accent */
    margin-bottom: 16px;
    display: block;
}

.racing-arcade-explainer__headline {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #fff;
    text-transform: uppercase;
}

.racing-arcade-explainer__intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 0;
    max-width: 480px;
}

/* Right Column */
.racing-arcade-explainer__col-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.racing-arcade-explainer__image-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a1a1a;
}

.racing-arcade-explainer__image-placeholder {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #888;
}

.racing-arcade-explainer__image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.racing-arcade-explainer__image:hover {
    transform: scale(1.02);
}

/* Feature List */
.racing-arcade-explainer__features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.racing-arcade-explainer__feature-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 0;
    border-bottom: none;
    width: calc(50% - 10px);
    /* 2 items per row */
}

.racing-arcade-explainer__feature-row:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.racing-arcade-explainer__feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #e60000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-top: 2px;
}

.racing-arcade-explainer__feature-content {
    display: flex;
    flex-direction: column;
}

.racing-arcade-explainer__feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    display: block;
}

.racing-arcade-explainer__feature-desc {
    font-size: 0.95rem;
    color: #aaa;
    margin: 0;
    line-height: 1.4;
}

/* CTA */
.racing-arcade-explainer__cta-wrapper {
    margin-top: 16px;
}

.racing-arcade-explainer__cta {
    display: inline-block;
    padding: 16px 32px;
    background: #e60000;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.2s ease;
    text-align: center;
}

.racing-arcade-explainer__cta:hover {
    background: #cc0000;
    /* Darker shade */
    transform: translateY(-2px);
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .racing-arcade-explainer {
        padding: 48px 0;
    }

    .racing-arcade-explainer__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .racing-arcade-explainer__feature-row {
        width: 100%;
        /* Stack on mobile */
    }

    .racing-arcade-explainer__col-left {
        text-align: left;
        order: 1;
        /* Headline + Intro first */
    }

    .racing-arcade-explainer__headline {
        font-size: 2.25rem;
    }

    /* 
       Wait, the mobile stack order requested is:
       1. Headline + Intro (Left Col)
       2. Machine Image (Top of Right Col)
       3. Feature List (Middle of Right Col)
       4. CTA Button (Bottom of Right Col)
       
       Standard stacking naturally puts Left Col then Right Col.
       Left Col (Headline + Intro) -> Right Col (Image, Features, CTA).
       This matches the natural DOM order created in index.js.
       So standard stacking is correct.
    */

    .racing-arcade-explainer__col-right {
        order: 2;
    }
}