/* ==========================================================
   Comparison — fully scoped, immune to global overrides
   ========================================================== */
.comparison {
    /* Local tokens */
    --card-bg: rgba(255, 255, 255, .90);
    --card-border: rgba(15, 18, 32, .10);
    --card-blur: 16px;
    --shadow: 0 12px 34px rgba(15, 18, 32, .10);
    --purple-1: #423dfc;
    --purple-2: #7271fb;
    --text: #0f1220;
    /* dark text */
    --muted: rgba(15, 18, 32, .64);
    --icon-yes: var(--purple-2);
    /* purple checks */
    --icon-no: #b9bfd3;
    /* grey crosses */

    padding: clamp(40px, 6vw, 80px) 0;
    /* optional; matches rhythm */
    isolation: isolate;
}

/* ---------- Grid ---------- */
.comparison .comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 14px;
}

/* ---------- Card ---------- */
.comparison .comp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 22px;
    padding: 24px 20px;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(var(--card-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}

.comparison .comp-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(66, 77, 254, .22);
    box-shadow: 0 16px 40px rgba(66, 77, 254, .18), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.comparison .comp-title {
    --g1: #b2b7bd;
    --g2: #5a6067;
    --g3: #0f1115;
    --shine: .30;

    font-size: 24px;
    font-weight: 700;
    margin: 0 0 14px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, var(--shine)) 0%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(180deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    text-shadow: 0 .5px 0 rgba(0, 0, 0, .08);
}

/* ---------- List + masked icons (tintable) ---------- */
.comparison .comp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}

/* hide legacy <img class="comp-ico"> if present */
.comparison .comp-list .comp-ico {
    display: none !important;
}

.comparison .comp-list li {
    position: relative;
    padding-left: 28px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #21243a;
    /* readable dark grey */
    /* icon defaults */
    --icon-size: 18px;
    --icon-url: url("/assets/icons/check-circle.svg");
    --icon-color: var(--icon-yes, var(--purple-2));
}

@supports((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .comparison .comp-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: var(--icon-size);
        height: var(--icon-size);
        background-color: var(--icon-color);

        /* WebKit */
        -webkit-mask-image: var(--icon-url);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;

        /* Standard */
        mask-image: var(--icon-url);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}

/* Fallback when mask-image isn’t supported (no tinting possible) */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .comparison .comp-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: var(--icon-size);
        height: var(--icon-size);
        background: no-repeat center / contain;
        background-image: var(--icon-url);
    }
}

/* ---------- Variants per column ---------- */
.comparison .comp-tile--lead .comp-list li {
    --icon-url: url("/assets/icons/check-circle.svg");
    --icon-color: var(--icon-yes);
}

.comparison .comp-tile--others .comp-list li {
    --icon-url: url("/assets/icons/cross-circle.svg");
    --icon-color: var(--icon-no);
}