.key-takeaways-box {
    background-color: #F5FAFE !important;
    border: 1px solid #D8E7F4 !important;
    border-top: 4px solid #0088F1 !important;
    border-radius: 8px !important;
    padding: 32px 32px 0 32px !important; /* Bottom padding is 0 to allow footer to sit flush */
    margin: 40px 0 !important;
    
    .takeaways-eyebrow {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        color: #29276C !important;
        text-transform: uppercase !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }
    
    .takeaways-intro {
        font-size: 18px !important;
        line-height: 1.6 !important;
        color: #222222 !important;
        margin-bottom: 28px !important;
    }

    ul.takeaways-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 32px 0 !important;
        
        > li {
            position: relative;
            padding-left: 36px;
            margin-bottom: 20px !important;
            font-size: 16px !important;
            line-height: 1.6 !important;
            color: #222222 !important;
            
            /* Animation starting state */
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            
            &:last-child {
                margin-bottom: 0 !important;
            }

            /* Animation visible state added via JS */
            &.is-visible {
                opacity: 1 !important;
                transform: translateY(0) !important;
            }
            
            /* Custom blue checkmark */
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 3px;
                width: 22px;
                height: 22px;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230088F1'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3Cpath fill='%23ffffff' d='M10 15.5l-3.5-3.5 1.4-1.4 2.1 2.1 5.5-5.5 1.4 1.4z'/%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;
            }

            a {
                color: #0088F1 !important;
                font-weight: 600 !important;
                text-decoration: none !important;
                
                &:hover {
                    text-decoration: underline !important;
                }
            }
        }
    }

    .takeaways-footer {
        border-top: 1px solid #D8E7F4 !important;
        margin: 32px -32px 0 -32px !important; /* Pulls footer out to the edges */
        padding: 20px 32px !important;
        
        .takeaways-cta {
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 12px !important;
            font-size: 16px !important;

            a {
                color: #0088F1 !important;
                font-weight: 700 !important;
                text-decoration: none !important;
                display: inline-flex !important;
                align-items: center !important;
                
                /* Custom right arrow */
                &::before {
                    content: "";
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    margin-right: 8px;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
                    background-size: contain;
                    background-repeat: no-repeat;
                    position: relative;
                    top: 1px;
                }

                &:hover {
                    text-decoration: underline !important;
                }
            }

            /* "Optional" Pill styling applied to the <em> tag */
            em {
                background-color: #E8F4FB !important;
                color: #54607A !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                font-style: normal !important;
                padding: 4px 10px !important;
                border-radius: 12px !important;
            }
        }
    }

    /* Mobile Overrides */
    @media (max-width: 600px) {
        padding: 24px 24px 0 24px !important;
        
        .takeaways-intro {
            font-size: 16px !important;
        }

        ul.takeaways-list > li {
            padding-left: 32px;
            font-size: 15px !important;
            
            &::before {
                width: 20px;
                height: 20px;
                top: 2px;
            }
        }

        .takeaways-footer {
            margin: 24px -24px 0 -24px !important;
            padding: 16px 24px !important;
            
            .takeaways-cta {
                font-size: 15px !important;
                gap: 10px !important;
            }
        }
    }
}