.hpn-kn {
    --hpn-kn-purple: var(--hpn-primary, #613e91);
    --hpn-kn-purple-dark: #4d2f78;
    --hpn-kn-orange: var(--hpn-orange, #f19f39);
    --hpn-kn-surface: #fbf7ff;
    --hpn-kn-row: rgba(255, 255, 255, 0.68);
    --hpn-kn-border: var(--hpn-border-soft, #eadff5);
    --hpn-kn-text: var(--hpn-primary, #613e91);

    background: var(--hpn-kn-surface);
    color: var(--hpn-kn-text);
    display: flow-root;
    padding: clamp(10px, 2vw, 18px) 0 clamp(28px, 5vw, 54px);
}

.hpn-kn *,
.hpn-kn *::before,
.hpn-kn *::after {
    box-sizing: border-box;
}

.hpn-kn__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hpn-kn__item {
    align-items: center;
    background: var(--hpn-kn-row);
    border: 1px solid rgba(234, 223, 245, 0.85);
    display: grid;
    gap: clamp(12px, 2vw, 22px);
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 10px 18px;
}

.hpn-kn__number {
    align-items: center;
    background: var(--hpn-kn-purple);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: var(--hpn-font-size-small, 13px);
    font-weight: 800;
    height: 26px;
    justify-content: center;
    line-height: 1;
    width: 26px;
}

.hpn-kn__name {
    color: var(--hpn-kn-text);
    font-size: var(--hpn-font-size-body, 14px);
    font-weight: 700;
    line-height: 1.35;
    min-width: 0;
}

.hpn-kn__link {
    align-items: center;
    background: #fff;
    border: 1px solid var(--hpn-kn-purple);
    border-radius: 3px;
    color: var(--hpn-kn-purple);
    display: inline-flex;
    font-size: var(--hpn-font-size-small, 13px);
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    line-height: 1;
    min-height: 34px;
    min-width: 122px;
    padding: 9px 14px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    white-space: nowrap;
}

.hpn-kn__link:hover,
.hpn-kn__link:focus-visible {
    background: var(--hpn-kn-orange);
    border-color: var(--hpn-kn-orange);
    color: #fff;
    outline: none;
}

.hpn-kn__link-icon {
    font-size: 15px;
    line-height: 1;
}

.hpn-kn__empty {
    color: var(--hpn-kn-text);
    font-size: var(--hpn-font-size-body, 14px);
    font-weight: 700;
    margin: 0;
}

@media (max-width: 640px) {
    .hpn-kn__item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .hpn-kn__link {
        grid-column: 2;
        justify-self: start;
    }
}