@layer components {
    .comparison-box {
        position: relative;
        padding: var(--space-xl);
        border-radius: var(--radius-2xl, 1rem);
        border: var(--border-thin) solid transparent;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;

        & .comparison-box__header {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            margin-bottom: var(--space-lg);
            position: relative;
            z-index: 1;
        }

        & .comparison-box__icon {
            width: 1.75rem;
            height: 1.75rem;
            flex-shrink: 0;
        }

        & .comparison-box__title {
            font-size: var(--text-xl);
            font-weight: 700;
            color: var(--color-white);
            margin: 0;
        }

        & .comparison-box__content {
            position: relative;
            z-index: 1;

            & ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: var(--space-md);
            }

            & li {
                display: flex;
                gap: var(--space-sm);
                font-size: var(--text-sm);
                line-height: 1.5;

                &::before {
                    content: "";
                    width: 0.375rem;
                    height: 0.375rem;
                    border-radius: var(--radius-full);
                    margin-top: 0.5rem;
                    flex-shrink: 0;
                }
            }
        }

        /* Variants */
        &.comparison-box--red {
            background-color: color-mix(in srgb, var(--clr-slate-900), transparent 50%);
            border-color: color-mix(in srgb, #7f1d1d, transparent 80%); /* red-900/20 approx */

            & .comparison-box__icon {
                color: #ef4444; /* red-500 */
            }

            & .comparison-box__content li {
                color: var(--color-text-muted);

                &::before {
                    background-color: #ef4444;
                }
            }
        }

        &.comparison-box--green {
            background-color: var(--clr-slate-900);
            border-color: color-mix(in srgb, var(--color-primary), transparent 70%); /* primary-500/30 */
            box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary), transparent 90%);

            & .comparison-box__glow {
                position: absolute;
                top: 0;
                right: 0;
                width: 16rem;
                height: 16rem;
                background-color: color-mix(in srgb, var(--color-primary), transparent 90%);
                border-radius: var(--radius-full);
                filter: blur(48px);
                transform: translate(50%, -50%);
                pointer-events: none;
            }

            & .comparison-box__icon {
                color: var(--clr-mint-400); /* green-400 equivalent */
            }

            & .comparison-box__content li {
                color: var(--clr-slate-300);

                &::before {
                    background-color: var(--clr-mint-400);
                }
            }
        }
    }
}