/* Luxenest — Why section premium icon treatment */
.lxr-home-page .lxr-why-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 42px;
    padding: 4px 17px 4px 5px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(221, 187, 113, .36);
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(218, 176, 82, .34) 0%,
            rgba(137, 115, 74, .26) 25%,
            rgba(47, 61, 78, .58) 54%,
            rgba(18, 38, 62, .92) 78%,
            rgba(11, 29, 52, .98) 100%
        );
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.lxr-home-page .lxr-why-badge-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.lxr-home-page .lxr-why-badge-icon img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(219, 174, 77, .18));
}

.lxr-home-page .lxr-why-badge-divider {
    width: 1px;
    height: 21px;
    flex: 0 0 1px;
    margin: 0 12px 0 8px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(229, 195, 119, .58),
        transparent
    );
}

.lxr-home-page .lxr-why-badge-text {
    color: rgba(247, 242, 232, .86);
    font-family: 'Manrope', sans-serif;
    font-size: .67rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Keep the heading rhythm that existed under the old label. */
.lxr-home-page .lxr-why-intro h2 {
    margin-top: 26px;
}

.lxr-home-page .lxr-why-card-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(221, 187, 113, .10);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 28% 22%,
            rgba(220, 177, 78, .15) 0%,
            rgba(220, 177, 78, .05) 58%,
            rgba(220, 177, 78, 0) 100%
        );
}

.lxr-home-page .lxr-why-card-icon img {
    width: 31px;
    height: 31px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(203, 150, 48, .18));
}

/* Existing React-parity CSS gives these headings a large top gap for the old spark icon. */
.lxr-home-page .lxr-why-cards h3 {
    margin-top: 18px;
}

@media (max-width: 640px) {
    .lxr-home-page .lxr-why-badge {
        min-height: 38px;
        padding: 3px 14px 3px 4px;
    }

    .lxr-home-page .lxr-why-badge-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    .lxr-home-page .lxr-why-badge-icon img {
        width: 27px;
        height: 27px;
    }

    .lxr-home-page .lxr-why-card-icon {
        width: 42px;
        height: 42px;
    }

    .lxr-home-page .lxr-why-card-icon img {
        width: 28px;
        height: 28px;
    }

    .lxr-home-page .lxr-why-cards h3 {
        margin-top: 16px;
    }
}