/* «Webivan» v2 ready solutions: a cloud of large chips, a violet edge on hover. */
.wi-cloud { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wi-cloud > li { display: flex; }
.wi-cloud__chip {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 0 24px 0 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--wi-line-2);
    color: var(--webivan-text) !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: var(--wi-hover-tr);
}
.wi-cloud__chip.is-lg { min-height: 76px; padding-inline: 32px 28px; font-family: var(--webivan-font-display); font-size: clamp(18px, 0.6vw + 14px, 24px); letter-spacing: -0.02em; }
.wi-cloud__chip.is-sm { font-size: 16px; min-height: 56px; }
.wi-cloud__note { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--webivan-mute); font-family: var(--webivan-font-text); font-size: 13px; font-weight: 500; letter-spacing: 0; white-space: nowrap; transition: background-color var(--wi-hover-dur) var(--wi-hover-ease), color var(--wi-hover-dur) var(--wi-hover-ease); }
.wi-cloud__chip svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--webivan-cobalt-2); transition: transform var(--wi-hover-dur) var(--wi-hover-ease), color var(--wi-hover-dur) var(--wi-hover-ease); }
a.wi-cloud__chip:active { scale: var(--wi-hover-press); }
a.wi-cloud__chip:focus-visible { background: var(--wi-hover-bg); box-shadow: inset 0 0 0 1px var(--webivan-cobalt-2), var(--wi-hover-shadow); color: #fff !important; }
a.wi-cloud__chip:focus-visible svg { color: #fff; transform: translateX(var(--wi-hover-nudge)); }
@media (hover: hover) and (pointer: fine) {
    a.wi-cloud__chip:hover { background: var(--wi-hover-bg); box-shadow: inset 0 0 0 1px var(--webivan-cobalt-2), var(--wi-hover-shadow); color: #fff !important; translate: 0 var(--wi-hover-lift-sm); }
    a.wi-cloud__chip:hover .wi-cloud__note { background: var(--wi-hover-tint); color: #fff; }
    a.wi-cloud__chip:hover svg { color: #fff; transform: translateX(var(--wi-hover-nudge)); }
}
.wi-niches__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
@media (max-width: 47.99rem) {
    .wi-cloud { gap: 8px; }
    .wi-cloud__chip, .wi-cloud__chip.is-lg, .wi-cloud__chip.is-sm { min-height: 52px; padding: 10px 18px; font-size: 15px; }
    .wi-cloud__chip.is-lg { font-size: 16px; }
    .wi-cloud__note { font-size: 12px; }
}