```css
/* =========================================================
   ACCION LABS
   CHALLENGE & DELIVER

   PANELS       = LIGHT SOLID COLORS
   TOP BORDER   = SOLID PRIMARY COLORS
   CONNECTOR    = GRADIENT
   ARROW        = GRADIENT

   MULTI COLOR:
   CARD 1 TOP BORDER = #db7b2c
   CARD 2 TOP BORDER = #d43d95

   IMPORTANT:
   - No background fill animation
   - No hover background color change
   - Only top border uses card-specific colors
========================================================= */


/* =========================================================
   BASE
========================================================= */

.al-challenge-deliver {

    --cd-solid: #c23aa8;

    --cd-light: #f8eafa;

    --cd-accent: #c23aa8;

    /* Connector / arrow gradient only */
    --cd-gradient:
        linear-gradient(
            100deg,
            #ff7e3f 0%,
            #c23aa8 42%,
            #7a2fd0 66%,
            #2a5fe0 100%
        );

    --cd-background: #f8f5fc;

    --cd-panel-background: var(--cd-light);

    width: 100%;

    padding: 0;

    background: transparent;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   BOX SIZING
========================================================= */

.al-challenge-deliver *,
.al-challenge-deliver *::before,
.al-challenge-deliver *::after {

    box-sizing: border-box;
}


/* =========================================================
   GRADIENT PURPLE
   PANEL = LIGHT PURPLE
   BORDER = SOLID PURPLE
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-gradient-purple {

    --cd-solid: #7b36b0;

    --cd-light: #f1eafa;

    --cd-accent: #7b36b0;

    --cd-gradient:
        linear-gradient(
            135deg,
            #1a4fc9 0%,
            #7b36b0 100%
        );
}


/* =========================================================
   RED THEME
   PANEL = LIGHT PINK
   BORDER = SOLID PRIMARY
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-red-theme {

    --cd-solid: #c23aa8;

    --cd-light: #f8eafa;

    --cd-accent: #c23aa8;

    --cd-gradient:
        linear-gradient(
            100deg,
            #ff7e3f 0%,
            #c23aa8 42%,
            #7a2fd0 66%,
            #2a5fe0 100%
        );
}


/* =========================================================
   SMARTER PEOPLE
   PANEL = LIGHT RED
   BORDER = SOLID RED
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-people_solid,
.al-challenge-deliver.color-people_gradient {

    --cd-solid: #b73734;

    --cd-light: #f9eaea;

    --cd-accent: #b73734;

    --cd-gradient:
        linear-gradient(
            100deg,
            #b73734 0%,
            #db7b2c 100%
        );
}


/* =========================================================
   SMARTER PRODUCTS
   PANEL = LIGHT PURPLE
   BORDER = SOLID PURPLE
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-products_solid,
.al-challenge-deliver.color-products_gradient {

    --cd-solid: #5c2d83;

    --cd-light: #f0eafa;

    --cd-accent: #5c2d83;

    --cd-gradient:
        linear-gradient(
            100deg,
            #5c2d83 0%,
            #d43d95 100%
        );
}


/* =========================================================
   SMARTER PROCESSES
   PANEL = LIGHT BLUE
   BORDER = SOLID BLUE
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-processes_solid,
.al-challenge-deliver.color-processes_gradient {

    --cd-solid: #0f2e78;

    --cd-light: #eaf0fb;

    --cd-accent: #0f2e78;

    --cd-gradient:
        linear-gradient(
            100deg,
            #0f2e78 0%,
            #259ecf 100%
        );
}


/* =========================================================
   DATA
   PANEL = LIGHT GREEN
   BORDER = SOLID GREEN
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-data_solid,
.al-challenge-deliver.color-data_gradient {

    --cd-solid: #146800;

    --cd-light: #eaf6e7;

    --cd-accent: #146800;

    --cd-gradient:
        linear-gradient(
            100deg,
            #146800 0%,
            #81b838 100%
        );
}


/* =========================================================
   PLATFORMS
   PANEL = LIGHT TEAL
   BORDER = SOLID TEAL
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-platforms_solid,
.al-challenge-deliver.color-platforms_gradient {

    --cd-solid: #0d5966;

    --cd-light: #e7f4f5;

    --cd-accent: #0d5966;

    --cd-gradient:
        linear-gradient(
            100deg,
            #0d5966 0%,
            #05a393 100%
        );
}


/* =========================================================
   GOVERNANCE
   PANEL = LIGHT RED
   BORDER = SOLID DARK RED
   CONNECTOR = GRADIENT
========================================================= */

.al-challenge-deliver.color-governance_solid,
.al-challenge-deliver.color-governance_gradient {

    --cd-solid: #892927;

    --cd-light: #f8eaea;

    --cd-accent: #892927;

    --cd-gradient:
        linear-gradient(
            100deg,
            #892927 0%,
            #eb4b55 100%
        );
}


/* =========================================================
   MULTI COLOR
   CHALLENGE = SMARTER PEOPLE
   DELIVER   = SMARTER PRODUCTS

   CARD 1 TOP BORDER = #db7b2c
   CARD 2 TOP BORDER = #d43d95

   PANELS = WHITE
   CONNECTOR = COMBINED GRADIENT
========================================================= */

.al-challenge-deliver.color-multi_color {

    --cd-background: #f8f5fc;
}


/* =========================================================
   MULTI COLOR
   CHALLENGE PANEL
   CARD 1
========================================================= */

.al-challenge-deliver.color-multi_color
.al-cd-challenge {

    --panel-solid: #db7b2c;

    --panel-light: #f9eaea;

    background: #ffffff;
}


/* =========================================================
   MULTI COLOR
   DELIVER PANEL
   CARD 2
========================================================= */

.al-challenge-deliver.color-multi_color
.al-cd-deliver {

    --panel-solid: #d43d95;

    --panel-light: #f0eafa;

    background: #ffffff;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.al-cd-container {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        168px
        minmax(0, 1fr);

    width: 100%;

    max-width: 100%;

    margin: 0 auto;

    align-items: stretch;
}


/* =========================================================
   PANELS
========================================================= */

.al-cd-panel {

    position: relative;

    display: flex;

    min-width: 0;

    background: var(--cd-panel-background);

    height: 100%;

    margin-bottom: 8px;
}


/* =========================================================
   PANEL TOP BORDER
   SOLID COLOR ONLY
========================================================= */

.al-cd-panel::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: var(--cd-solid);

    z-index: 2;
}


/* =========================================================
   MULTI COLOR TOP BORDER
   CARD 1 = ORANGE
   CARD 2 = PINK
========================================================= */

.al-challenge-deliver.color-multi_color
.al-cd-challenge::before {

    background: #db7b2c;
}


.al-challenge-deliver.color-multi_color
.al-cd-deliver::before {

    background: #d43d95;
}


/* =========================================================
   CONTENT
========================================================= */

.al-cd-content {

    position: relative;

    width: 100%;

    max-width: 1220px;

    margin: 0 auto;

    padding: 40px;

    border: 1px solid rgba(128, 128, 128, 0.17);

    height: 100%;

    background: transparent;

    box-shadow:
        0 2px 10px rgba(128, 128, 128, 0.12);
}


/* =========================================================
   HEADING
========================================================= */

.al-cd-heading {

    position: relative;

    z-index: 1;

    margin: 0 0 20px;

    font-size: 36px;

    line-height: 1.25;

    font-weight: 700;

    color: #151515;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.al-cd-description {

    position: relative;

    z-index: 1;

    color: #151515;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   DESCRIPTION PARAGRAPHS
========================================================= */

.al-cd-description p {

    margin: 0 0 24px;
}


.al-cd-description p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   DESCRIPTION LIST
========================================================= */

.al-cd-description ul {

    padding-inline-start: 30px !important;
}


/* =========================================================
   CENTER CONNECTOR
========================================================= */

.al-cd-connector {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 168px;

    background: transparent;

    z-index: 5;
}


/* =========================================================
   CONNECTOR LINE
   GRADIENT ONLY
========================================================= */

.al-cd-connector::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    height: 2px;

    transform: translateY(-50%);

    background: var(--cd-gradient);

    z-index: 0;
}


/* =========================================================
   MULTI COLOR CONNECTOR
   PEOPLE → PRODUCTS
========================================================= */

.al-challenge-deliver.color-multi_color
.al-cd-connector::before {

    background:
        linear-gradient(
            90deg,
          
            #db7b2c 0%,
           
            #d43d95 100%
        );
}


/* =========================================================
   ARROW CIRCLE
   GRADIENT ONLY
========================================================= */

.al-cd-arrow {

    position: relative;

    z-index: 2;

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--cd-gradient);

    box-shadow:
        0 18px 35px
        rgba(122, 47, 208, 0.22);

    overflow: hidden;
}


/* =========================================================
   MULTI COLOR ARROW
========================================================= */

.al-challenge-deliver.color-multi_color
.al-cd-arrow {

    background:
        linear-gradient(
            100deg,
           
            #db7b2c 0%,
           
            #d43d95 100%
        );
}


/* =========================================================
   CUSTOM CONNECTOR ICON
   GRADIENT ONLY
========================================================= */

.al-cd-custom-icon {

    position: relative;

    z-index: 2;

    width: 112px;

    height: 112px;

    padding: 30px;

    object-fit: contain;

    border-radius: 50%;

    background: var(--cd-gradient);

    box-shadow:
        0 18px 35px
        rgba(122, 47, 208, 0.22);
}


/* =========================================================
   MULTI COLOR CUSTOM ICON
========================================================= */

.al-challenge-deliver.color-multi_color
.al-cd-custom-icon {

    background:
        linear-gradient(
            100deg,
          
            #db7b2c 0%,
           
            #d43d95 100%
        );
}


/* =========================================================
   ARROW HEADS
========================================================= */

.al-cd-arrow-head {

    position: absolute;

    top: 50%;

    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size: 40px;

    font-weight: 400;

    line-height: 1;

    color: #ffffff;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   FIRST ARROW
========================================================= */

.al-cd-arrow-head.first {

    left: 25px;

    animation:
        cdArrowTravel 1.8s
        cubic-bezier(.4, 0, .2, 1)
        infinite;
}


/* =========================================================
   SECOND ARROW
========================================================= */

.al-cd-arrow-head.second {

    left: 25px;

    animation:
        cdArrowTravel 1.8s
        cubic-bezier(.4, 0, .2, 1)
        0.45s
        infinite;
}


/* =========================================================
   DESKTOP ARROW ANIMATION
   LEFT → RIGHT
========================================================= */

@keyframes cdArrowTravel {

    0% {

        opacity: 0;

        transform:
            translate(-18px, -50%);
    }

    15% {

        opacity: 1;
    }

    50% {

        opacity: 1;

        transform:
            translate(8px, -50%);
    }

    75% {

        opacity: 0.8;
    }

    100% {

        opacity: 0;

        transform:
            translate(32px, -50%);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .al-cd-container {

        grid-template-columns:
            minmax(0, 1fr)
            140px
            minmax(0, 1fr);
    }


    .al-cd-connector {

        min-width: 140px;
    }


    .al-cd-content {

        padding:
            55px
            40px;
    }


    .al-cd-heading {

        font-size: 32px;
    }


    .al-cd-description {

        font-size: 17px;
    }


    .al-cd-arrow {

        width: 96px;

        height: 96px;
    }


    .al-cd-custom-icon {

        width: 96px;

        height: 96px;

        padding: 25px;
    }


    .al-cd-arrow-head {

        font-size: 46px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .al-cd-container {

        display: flex;

        flex-direction: column;

        width: 100%;
    }


    /* =====================================================
       PANELS
    ===================================================== */

    .al-cd-panel {

        width: 100%;

        height: auto;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    .al-cd-content {

        width: 100%;

        max-width: 1220px;

        padding:
            45px
            25px;

        height: auto;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .al-cd-heading {

        margin-bottom: 22px;

        font-size: 30px;

        line-height: 1.25;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .al-cd-description {

        font-size: 16px;

        line-height: 1.75;
    }


    /* =====================================================
       CONNECTOR
       TOP → BOTTOM
    ===================================================== */

    .al-cd-connector {

        position: relative;

        width: 100%;

        min-width: 100%;

        height: 120px;

        min-height: 120px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: var(--cd-background);
    }


    /* =====================================================
       VERTICAL CONNECTOR LINE
       GRADIENT
    ===================================================== */

    .al-cd-connector::before {

        top: 0;

        left: 50%;

        width: 2px;

        height: 100%;

        transform:
            translateX(-50%);

        background: var(--cd-gradient);
    }


    /* =====================================================
       MULTI COLOR MOBILE CONNECTOR
    ===================================================== */

    .al-challenge-deliver.color-multi_color
    .al-cd-connector::before {

        background:
            linear-gradient(
                180deg,
                #b73734 0%,
                #db7b2c 45%,
                #5c2d83 55%,
                #d43d95 100%
            );
    }


    /* =====================================================
       MOBILE ARROW CIRCLE
    ===================================================== */

    .al-cd-arrow {

        width: 82px;

        height: 82px;

        flex: 0 0 82px;

        overflow: hidden;
    }


    /* =====================================================
       CUSTOM ICON
    ===================================================== */

    .al-cd-custom-icon {

        width: 82px;

        height: 82px;

        padding: 22px;
    }


    /* =====================================================
       MOBILE ARROW HEADS
    ===================================================== */

    .al-cd-arrow-head {

        top: 25%;

        left: 50% !important;

        font-size: 42px;

        transform-origin: center;
    }


    /* =====================================================
       FIRST MOBILE ARROW
    ===================================================== */

    .al-cd-arrow-head.first {

        animation:
            cdArrowTravelMobile 1.8s
            cubic-bezier(.4, 0, .2, 1)
            infinite;
    }


    /* =====================================================
       SECOND MOBILE ARROW
    ===================================================== */

    .al-cd-arrow-head.second {

        animation:
            cdArrowTravelMobile 1.8s
            cubic-bezier(.4, 0, .2, 1)
            0.45s
            infinite;
    }
}


/* =========================================================
   MOBILE ARROW ANIMATION
   TOP → BOTTOM
========================================================= */

@keyframes cdArrowTravelMobile {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -12px)
            rotate(90deg);
    }

    15% {

        opacity: 1;
    }

    50% {

        opacity: 1;

        transform:
            translate(-50%, 0)
            rotate(90deg);
    }

    75% {

        opacity: 0.8;
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, 12px)
            rotate(90deg);
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .al-cd-content {

        padding:
            40px
            20px;
    }


    .al-cd-heading {

        font-size: 28px;
    }


    .al-cd-description {

        font-size: 16px;
    }


    .al-cd-connector {

        height: 100px;

        min-height: 100px;
    }


    .al-cd-arrow {

        width: 72px;

        height: 72px;

        flex-basis: 72px;
    }


    .al-cd-custom-icon {

        width: 72px;

        height: 72px;

        padding: 18px;
    }


    .al-cd-arrow-head {

        font-size: 36px;
    }
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
========================================================= */

.al-cd-panel:focus-visible {

    outline:
        3px solid
        rgba(26, 79, 201, 0.35);

    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .al-cd-arrow-head,
    .al-cd-arrow,
    .al-cd-custom-icon {

        animation: none !important;

        transition: none !important;
    }
}
```