body {
        font-family: 'Inter', sans-serif;
        background-color: #f5f5f5;
    }

    /* Subscription Plan Section */
    .subscription-plan-section {
        background-color: #ffffff;
        border-radius: 24px;
        padding: 24px 24px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

.subscription-plan-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-radius: 8px;
    background: var(--Theme-Purple-50, #F3F1FD);
    padding: 5px 16px;
}

.subscription-plan-section .section-title {
    margin: 0;
    color: var(--Text-Grey-700, #344054);
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.72px;
}

    .subscription-plan-section .price-wrap {
        text-align: right;
    }

.subscription-plan-section .price-amount {
    color: var(--Theme-Blue-500, #3A58EF);
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -0.96px;
}

    .subscription-plan-section .price-period {
        color: var(--Text-Grey-700, #344054);
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }

    .subscription-plan-section .plan-columns {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        position: relative;
    }

    .subscription-plan-section .plan-columns::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 60px;
        bottom: 0;
        width: 1px;
        background-color: #e0e0e0;
        transform: translateX(-50%);
    }

    .subscription-plan-section .plan-column {
        flex: 1;
    }

    .subscription-plan-section .column-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px 24px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 20px;
        width: 100%;
        color: var(--White, #FFF);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 800;
        line-height: 28px; /* 175% */
    }

    .subscription-plan-section .column-header.news-insights {
        background-color: #182878;
        color: #ffffff;
    }

    .subscription-plan-section .column-header.unlimited-cpe {
        background-color: #182878;
        color: #ffffff;
    }

    .subscription-plan-section .plus-separator {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #182878;
        border-radius: 50%;
        margin-top: 0;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    .subscription-plan-section .plus-separator svg {
        width: 16px;
        height: 16px;
    }

    .subscription-plan-section .feature-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .subscription-plan-section .feature-list li {
        display: flex;
        align-items: flex-start;
        padding: 14px 0;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        padding-left: 32px;
        color: var(--Text-Grey-600, #475467);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px; /* 155.556% */
    }

    .subscription-plan-section .feature-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 16px;
        width: 20px;
        height: 20px;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g clip-path="url(%23clip0_13780_5363)"><circle cx="10" cy="9.58329" r="9.16667" fill="%23D8DEFC"/><path d="M13.288 6.28404C13.0595 6.30101 12.8469 6.40774 12.6968 6.58092L9.45726 10.3387C9.41394 10.3885 9.36072 10.4286 9.301 10.4566C9.24128 10.4846 9.17638 10.4998 9.11045 10.5013C9.04451 10.5027 8.979 10.4904 8.91809 10.4651C8.85719 10.4398 8.80223 10.4021 8.75674 10.3544L7.27236 8.79186C7.1142 8.62575 6.89653 8.52928 6.66723 8.52366C6.43794 8.51804 6.21581 8.60374 6.0497 8.76191C5.8836 8.92007 5.78713 9.13774 5.78151 9.36703C5.77589 9.59633 5.86159 9.81846 6.01976 9.98456L8.52236 12.6096C8.60598 12.6963 8.70671 12.7648 8.81817 12.8106C8.92963 12.8563 9.04939 12.8785 9.16985 12.8755C9.29031 12.8726 9.40885 12.8446 9.51795 12.7935C9.62705 12.7423 9.72432 12.6691 9.80361 12.5783L14.0067 7.71113C14.116 7.58087 14.1846 7.42146 14.2042 7.2526C14.2238 7.08374 14.1935 6.91284 14.1171 6.76101C14.0406 6.60919 13.9213 6.4831 13.774 6.39833C13.6266 6.31356 13.4577 6.27383 13.288 6.28404Z" fill="%233A58EF"/></g><defs><clipPath id="clip0_13780_5363"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .subscription-plan-section .feature-list li.exclude_item::before {
        background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11.998" cy="11.5005" r="11" fill="%23FEE4E2"/><rect x="7.19922" y="14.8369" width="10.8" height="1.8" rx="0.9" transform="rotate(-45 7.19922 14.8369)" fill="%23F04438"/><rect x="8.47461" y="7.2002" width="10.8" height="1.8" rx="0.9" transform="rotate(45 8.47461 7.2002)" fill="%23F04438"/></svg>');
    }

    .subscription-plan-section .feature-list li:last-child {
        border-bottom: none;
    }

    /* Subscription Plan Component */
        .subscription-plan-section-header {
            font-family: 'Inter', sans-serif;
        }

        .subscription-plan-section-header .subscription-plan-wrapper {
            background-color: #d8defc;
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .subscription-plan-section-header .plan-title-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .subscription-plan-section-header .plan-title {
            font-size: 20px;
            font-weight: 700;
            line-height: 30px;
            color: #2a3343;
            margin: 0;
        }

        .subscription-plan-section-header .arrow-icon {
            width: 40px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .subscription-plan-section-header .arrow-icon svg {
            width: 100%;
            height: 100%;
        }

        .subscription-plan-section-header .plans-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .subscription-plan-section-header .plan-option {
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-radius: 8px;
            padding: 8px 16px;
        }

        .subscription-plan-section-header .plan-option.active {
            background-color: #ffffff;
            
        }

        .subscription-plan-section-header .plan-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .subscription-plan-section-header .radio-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Hide default radio input */
        .subscription-plan-section-header .radio-input {
            display: none;
        }

        .subscription-plan-section-header .radio-btn {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #d0d5dd;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .subscription-plan-section-header .radio-input:checked + .radio-btn {
            background-color: #f9f5ff;
            border: 2px solid #3a58ef;
        }

        .subscription-plan-section-header .radio-btn .radio-inner {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #3a58ef;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .subscription-plan-section-header .radio-input:checked + .radio-btn .radio-inner {
            opacity: 1;
        }

        .subscription-plan-section-header .plan-name {
            font-size: 20px;
            font-weight: 700;
            line-height: 30px;
            color: #2a3343;
            margin: 0;
            transition: all 0.2s ease;
        }

        .subscription-plan-section-header .plan-option:not(.active) .plan-name {
            font-weight: 600;
            color: #5d667b;
        }

        .subscription-plan-section-header .plan-price-wrapper {
            display: flex;
            align-items: flex-end;
        }

        .subscription-plan-section-header .plan-price {
            font-size: 20px;
            font-weight: 700;
            line-height: 30px;
            color: #3a58ef;
            margin: 0;
            transition: all 0.2s ease;
        }

        .subscription-plan-section-header .plan-option:not(.active) .plan-price {
            color: #2a3343;
        }

        .subscription-plan-section-header .plan-period {
            font-size: 12px;
            font-weight: 500;
            line-height: 28px;
            color: #2a3343;
            margin: 0;
        }

        /* Hover effect */
        .subscription-plan-section-header .plan-option:hover {
            opacity: 0.9;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .subscription-plan-section-header .subscription-plan-wrapper {
                flex-direction: column;
                gap: 16px;
                align-items: flex-start;
            }

            .subscription-plan-section-header .plans-wrapper {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                width: 100%;
            }

            .subscription-plan-section-header .plan-option.active {
                width: 100%;
                box-sizing: border-box;
            }
        }

    /* Responsive Styles */
    @media (max-width: 991.98px) {
        .subscription-plan-section {
            padding: 32px;
            margin: 24px 16px;
        }

        .subscription-plan-section .section-title {
            font-size: 26px;
        }

        .subscription-plan-section .price-amount {
            font-size: 40px;
        }
    }

    @media (max-width: 767.98px) {
        .subscription-plan-section {
            padding: 24px 20px;
            border-radius: 16px;
        }

        .subscription-plan-section .section-header {
            flex-direction: column;
            gap: 0px;
        }

        .subscription-plan-section .price-wrap {
            text-align: left;
        }

        .subscription-plan-section .section-title {
            font-size: 24px;
        }

        .subscription-plan-section .price-amount {
            font-size: 36px;
        }

        .subscription-plan-section .plan-columns {
            flex-direction: column;
            gap: 0;
        }

        .subscription-plan-section .plan-columns::before {
            display: none;
        }

        .subscription-plan-section .plus-separator {
            margin: 20px auto;
        }

        .subscription-plan-section .plan-column {
            width: 100%;
        }

        .subscription-plan-section .column-header {
            width: 100%;
            min-width: unset;
        }

        .subscription-plan-section .feature-list li {
            font-size: 14px;
            padding: 12px 0;
            padding-left: 28px;
        }

        .subscription-plan-section .feature-list li::before {
            top: 14px;
            width: 18px;
            height: 18px;
        }
    }

    @media (max-width: 575.98px) {
        .subscription-plan-section {
            padding: 20px 16px;
            margin: 16px 12px;
        }

        .subscription-plan-section .section-title {
            font-size: 22px;
        }

        .subscription-plan-section .price-amount {
            font-size: 32px;
        }

        .subscription-plan-section .price-period {
            font-size: 14px;
        }

    }