.public-feature-card {
    width: 100%;
    min-height: 250px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 1rem;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.public-feature-card:hover,
.public-feature-card:focus-visible {
    transform: translateY(-4px);
    border-color: #8e7cff;
    background: rgba(108, 92, 255, .2);
    outline: none;
}

.public-feature-card:focus-visible {
    box-shadow: 0 0 0 4px rgba(142, 124, 255, .32);
}

.public-feature-card__arrow {
    transition: transform .18s ease;
}

.public-feature-card:hover .public-feature-card__arrow {
    transform: translate(3px, -3px);
}

.public-feature-dialog {
    width: min(640px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1.25rem;
    background: #fff;
    color: #0f1117;
    box-shadow: 0 28px 90px rgba(15, 17, 23, .4);
}

.public-feature-dialog::backdrop {
    background: rgba(15, 17, 23, .74);
    backdrop-filter: blur(4px);
}

.public-feature-dialog__content {
    padding: 1.5rem;
}

.uc-dark .public-feature-dialog {
    background: #1f2937;
    color: #fff;
}

.supported-integration {
    min-height: 112px;
    border: 1px solid rgba(108, 92, 255, .18);
}