/* okitoki-v4 — features page groups. Not in the mock-up: built from tokens like v-cards;
 * the coloured badge keeps v3's per-feature colour from the CMS. */

.v-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v-space);
}
.v-features__item {
    --v-feature-color: rgb(var(--v-color-primary));
    display: flex;
    flex-direction: column;
    gap: var(--v-space-xs);
    padding: var(--v-space-lg);
    border: 1px solid rgb(var(--v-color-border));
    border-radius: var(--v-radius);
    background-color: rgb(var(--v-color-surface));
    box-shadow: var(--v-shadow);
}
.v-features__badge {
    align-self: flex-start;
    margin-bottom: var(--v-space-xs);
    padding: 2px var(--v-space-sm);
    border: 1px solid var(--v-feature-color);
    border-radius: var(--v-radius-lg);
    color: var(--v-feature-color);
    font-size: var(--v-font-size-xs);
    font-weight: var(--v-font-weight-bold);
    text-transform: uppercase;
}
.v-features__heading {
    margin: 0;
    font-size: var(--v-font-size);
    line-height: var(--v-font-line-height-heading);
}
.v-features__text { color: rgb(var(--v-color-text-secondary)); line-height: var(--v-font-line-height); }
.v-features__text > :last-child { margin-bottom: 0; }

@media (max-width: 991.98px) { .v-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .v-features__grid { grid-template-columns: 1fr; } }