/* ============================================================================
   features.css — the features grid.
   ========================================================================= */

.feat-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.feat { display: flex; flex-direction: column; }

.feat__icon {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: var(--sp-5);
    border-radius: var(--radius);
    background: var(--accent-wash);
    color: var(--accent);
}

.feat__icon svg { width: 1.65rem; height: 1.65rem; }

.feat__title {
    font-size: var(--step-1);
    letter-spacing: -.012em;
    margin-bottom: var(--sp-3);
}

.feat__text {
    color: var(--ink-soft);
    font-size: var(--step--1);
    flex: 1;
}

.feat .link { align-self: flex-start; margin-top: var(--sp-5); }

/* The price card is the one that should catch the eye on the way down. */
.feat--price {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.feat--price .feat__icon {
    background: var(--accent);
    color: var(--accent-ink);
}

.feat--price .feat__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    color: var(--accent);
}