.comparison-table-block-component {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-7xl) var(--spacing-xl);
    gap: var(--spacing-4xl);
    @media (min-width: 768px) {
        padding: var(--spacing-9xl) var(--spacing-4xl);
        gap: var(--spacing-7xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
    }
}
.comparison-table-block-component.light {
    background-color: #FFF;
}
.comparison-table-block-component.dark {
    background-color: #0C111D;
}
.comparison-table-block-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--spacing-none);
    gap: var(--spacing-4xl);
    margin: 0 auto;
    width: 100%;
    [lang="ar"] & {text-align: right;}
    @media (min-width: 1024px) {
        padding: var(--spacing-none) var(--spacing-4xl);
        max-width: var(--container-max-width-desktop);
    }
}
.comparison-table-block-heading-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-2xl);
}
.comparison-table-block-icons {
    display: flex;
    align-items: end;
    width: fit-content;
    gap: var(--spacing-lg);
}
.comparison-table-block-icon {
    color: #344054;
    [lang="ar"] & {transform: scaleX(-1)}
    @media (min-width: 1024px) {
        gap: var(--spacing-md);
    }
    .dark & {color: #CECFD2;}
    .block-icon {
        .dark & {filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(106%) hue-rotate(202deg) brightness(91%) contrast(88%);}
    }
    .block-icon-size-24 {
        width: 24px;
        height: 24px;
    }
    .block-icon-size-48 {
        width: 48px;
        height: 48px;
    }
    .block-icon-size-96 {
        width: 96px;
        height: 96px;
    }
}
.comparison-table-block-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
}
.comparison-table-detail-eyebrow {
    letter-spacing: 0.0125em;
    font: var(--english-text-sm-semibold);
    [lang="ar"] & {font: var(--arabic-text-sm-semibold);}
    color: var(--color-teal-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    @media (min-width: 768px) {
        font: var(--english-text-md-semibold);
        [lang="ar"] &s {font: var(--arabic-text-md-semibold);}
    }
}
.comparison-table-block-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}
.comparison-table-detail-title__h2 {
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    font: var(--english-display-sm-semibold);
    [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 0;
    @media (min-width: 768px) {
        font: var(--english-display-lg-semibold);
        [lang="ar"] & {font: var(--arabic-display-lg-semibold);}
    }
}
.comparison-table-detail-subtitle__h2 {
    color: var(--color-gray-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    letter-spacing: 0.03em;
    margin-bottom: 0;
    font: var(--english-text-md-regular);
    [lang="ar"] & {
        font: var(--arabic-text-md-regular);
        letter-spacing: 0em;
    }
    @media (min-width: 768px) {
        font: var(--english-text-lg-regular);
        [lang="ar"] & {
            font: var(--arabic-text-lg-regular);
            letter-spacing: 0em;
        }
    }
}
.comparison-table-block-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-max-width-desktop);
    margin: 0 auto;

    .comparison-table-block-container {
        display: flex;
        flex-direction: column;
        padding: 0;
        @media (min-width: 1024px) {
            padding: 0 32px;
        }
    }
    .comparison-table-block-container.scroll-ready {
        overflow: auto;
        cursor: grab;
        user-select: none;
        scroll-behavior: smooth;
        scrollbar-width: none;
        pointer-events: auto;
        -ms-overflow-style: none;     /* IE/Edge legacy */
    }
    .comparison-table-block-container.grabbing {
        cursor: grabbing;
    }
    .comparison-table {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        gap: 24px;
        @media (min-width: 768px) {
            gap: unset;
            flex-wrap: nowrap;
        }
    }
    .dark .light-icon {
      display: none;
    }
    .dark .dark-icon {
      display: inline-block !important;
    }
    .tooltip-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-left: 4px;
      position: relative;
      cursor: help;
    }
    .tooltip-text {
        visibility: hidden;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        border-radius: 6px;
        padding: 8px 12px;
        width: max-content;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        align-items: center;
        font-size: 12px;
        line-height: 18px;
        font-weight: 600;
        font-family: var(--font-text);
        color: #FFFFFF;
        background-color: #0C111D;

    }
    .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #0C111D transparent transparent transparent;
    }
    .tooltip-icon:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
    .category-header {
        padding: 32px 16px 16px;
        @media (min-width: 768px) {
            height: 36px;
            padding: 0 16px 16px;
        }
    }
    .feature-category {
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        font-family: var(--font-text);
        color: #006B67;
        .dark & {color: var(--color-gray-dark-700-dark);}

    }
    .comparison-column {
        flex: 0 0 100%;
        overflow: hidden;
        background-color: #fff;
        border-radius: 12px;
        border: 1px solid #D0D5DD;
        .dark & {
            background-color: #0C111D;
            border-color: #94969C;
        }
        @media (min-width: 768px) {
            border-radius: 16px;
            border: none;
            flex: 1;
            margin-bottom: 0;
            min-width: 235px;
        }
    }
    .primary-column {
        border: 2px solid #008D89;
        .dark & {border-color: #00AFAB;}
        box-sizing: border-box;
        max-width: 100%;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .feature-header {
        display: flex;
        flex-direction: column;
        text-align: left;
        gap: 8px;
        padding: 32px 16px 0;
        [lang="ar"] & {text-align: right;}
        @media (min-width: 768px) {
            height: auto;
            padding: 24px 24px 0;
            text-align: center;
            [lang="ar"] & {text-align: center;}
        }
    }
    .feature-heading {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-self: flex-start;
        @media (min-width: 768px) {
            align-self: unset;
        }
    }
    .column-icon {
        width: 42px;
        height: 42px;
        border-radius: var(--radius-md);
        padding: 10px;
        border: 1px solid #D0D5DD;
        margin: unset;
        box-shadow: 0px 1px 2px 0px #1018280D;
        img {
            .dark & {
                filter: invert(100%) sepia(5%) saturate(118%) hue-rotate(190deg) brightness(100%) contrast(100%);
            }
        }
        .dark & {border: 1px solid #EAECF0;}
        @media (min-width: 768px) {
            margin: 0 auto;
        }
    }
    .column-eyebrow {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        font-family: var(--font-text);
        color: #006B67;
        .dark & {color: var(--color-gray-dark-700-dark);}

        @media (min-width: 768px) {
            font-size: 14px;
            line-height: 20px;
        }
        @media (min-width: 1024px) {
            font-size: 18px;
            line-height: 28px;
        }
    }
    .column-title {
        font-size: 30px;
        line-height: 38px;
        font-weight: 600;
        font-family: var(--font-display);
        color: var(--text-primary);
        .dark & {color: var(--color-gray-900-dark);}

        margin-bottom: 0;
        @media (min-width: 768px) {
            font-size: 24px;
            line-height: 32px;
        }
        @media (min-width: 1024px) {
            font-size: 36px;
            line-height: 44px;
        }
    }
    .column-subtitle {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        font-family: var(--font-text);
        color: var(--color-gray-600);
        .dark & {color: #94969C}

        letter-spacing: 0.0325em;
        margin-bottom: 0;
        @media (min-width: 768px) {
            font-size: 14px;
            line-height: 20px;
        }
        @media (min-width: 1024px) {
            font-size: 16px;
            line-height: 24px;
        }
    }
    .feature-row-value,
    .feature-row-label {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 0 16px;
        @media (min-width: 768px) {
            padding: 0 24px;
            height: 64px;
        }
    }
    .feature-name {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        font-family: var(--font-text);
        color: #101828;
        gap: 4px;
        .dark & {color: #F5F5F6}

    }
    .feature-row-value:nth-child(odd),
    .feature-row-label:nth-child(odd) {
        background-color: #F9FAFB;
        .dark & {background-color: #161B26}
    }
    .feature-row-value {
        display: flex;
        align-items: center;
        gap: 20px;
        @media (min-width: 768px) {
            justify-content: center;
        }
    }
    .mobile-row-label {
        flex: 1;
        width: 50%;
        @media (min-width: 768px) {
            display: none;
        }
    }
    .cell-value {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        text-align: right;
        @media (min-width: 768px) {
            justify-content: center;
        }
    }
    .value-icon {
        max-height: 24px;
        vertical-align: middle;
    }
    .cell-indicator {
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
    }
    .cell-indicator.plus {
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2 16.8L6 12.6L7.2 11.4L10.2 14.4L16.8 7.8L18 9L10.2 16.8Z' fill='%23079455'/%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23079455' stroke-width='2'/%3E%3C/svg%3E");
        margin: 0 auto;
    }
    .cell-indicator.minus {
        width: 14px;
        height: 2px;
        background: #98A2B3;
        border-radius: 1px;
        margin: 0 4px;
        @media (min-width: 768px) {
            margin: 0 auto;
        }
    }
    .value-title {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        font-family: var(--font-text);
        color: #475467;
        .dark & {color: #94969C}

    }
    .value-description {
      color: #6B7280;
      font-style: italic;
    }
    .comparison-column-footer {
        padding: 32px 24px 32px;
        align-content: center;
        .comparison-column-footer-cta {
            .button--xl {
                width: 100%;
                height: unset;
            }
            .button--xl:hover .button-text {
                color: #FFF;
            }
            .button-text {
                font-weight: 600;
                font-family: var(--font-text);
                color: #000000;
                .dark & {color: #000000}

                @media (min-width: 768px) {
                    font-size: 16px;
                    line-height: 24px;
                }
            }
        }
    }
    .mobile-only {
        display: block;
        @media (min-width: 768px) {
            display: none;
        }
    }
    .feature-labels {
        display: none;
        .dark & {background-color: #0C111D;}
        @media (min-width: 768px) {
            display: block;
        }
    }
    .feature-labels.columns-5 {
        flex: 0 auto;
    }
    .feature-labels.columns-3 {
        flex: 1;
    }
    @media (min-width: 768px) {
        .comparison-column .category-header {
            background-color: transparent;
            padding: 4px 24px 16px;
            min-height: 40px;
        }
       .feature-row-label + .category-header {
            margin-top: 36px;
        }
        .feature-row-value + .category-header {
            margin-top: 36px;
        }
    }
    @media (max-width: 767px) {
      .feature-row-value {
        position: relative;
        justify-content: space-between;
      }
    }
}