/* okitoki-v4 — integrations catalogue: filter pills reuse the tabs look (v-tabs__control);
 * the logo grid is v-integrations, follow-up cards are v-cards. */

.v-catalog__filter { margin-bottom: var(--v-space-2xl); }
.v-catalog__filter[hidden] { display: none; }
.v-catalog__control[aria-pressed="true"],
.v-catalog__filter .v-tabs__control[aria-pressed="true"] {
    background-color: rgb(var(--v-color-primary));
    color: rgb(var(--v-color-white));
}
.v-catalog__filter .v-tabs__control { box-shadow: inset 0 0 0 1px rgb(var(--v-color-border-element)); }
.v-catalog__cat + .v-catalog__cat { margin-top: var(--v-space-3xl); }
.v-catalog__cat[hidden] { display: none; }
.v-catalog__more { font-size: var(--v-font-size-sm); }
.v-catalog__follow { margin-top: var(--v-space-2xl); }
.v-catalog__follow-heading { margin-bottom: var(--v-space-lg); text-align: center; }
.v-catalog__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-space);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: v-step;
}
.v-catalog__step {
    position: relative;
    padding: var(--v-space-lg) var(--v-space-lg) var(--v-space-lg) calc(var(--v-space-lg) + 40px);
    border-radius: var(--v-radius);
    background: rgb(var(--v-color-surface-contrast));
    counter-increment: v-step;
}
.v-catalog__step::before {
    content: counter(v-step);
    position: absolute;
    top: var(--v-space-lg);
    left: var(--v-space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--v-color-primary), .12);
    color: rgb(var(--v-color-primary));
    font-size: var(--v-font-size-xs);
    font-weight: var(--v-font-weight-bold);
}
.v-catalog__after {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--v-space) var(--v-space-lg);
    margin-top: var(--v-space-xl);
    text-align: center;
}
.v-catalog__after p { margin: 0; font-weight: var(--v-font-weight-bold); }

@media (max-width: 767.98px) { .v-catalog__steps { grid-template-columns: 1fr; } }