/* The prototype never gives .feature-cards its own bare gap rule — the one real page section
   that uses it (Home/Pricing's Features section) scopes it to .features .feature-cards instead,
   setting both --cards-gap and gap together (layout/features.css). A reusable tt360/card-grid
   instance can't rely on that ancestor class existing, so this bare rule (same 20px value) gives
   the component a real default regardless of what wraps it.

   --cards-gap has to be set here too, not just gap: this rule only ever set the literal gap
   property, so the visual gap between cards was already the correct 20px, but card-layouts.css's
   own width formula (cards-cols-3.cards-type-tile > *) reads the --cards-gap custom property, not
   this gap value, and that variable was still at its component default of 24px. Every card was
   computing its width as if 24px of gap needed subtracting instead of 20px, measuring 373px
   instead of the prototype's 376px — found against the real rendered width, not assumed. */
.feature-cards {
    --cards-gap: 20px;
    gap: 20px;
    margin-top: 55px;
}

.feature-card {
    padding: 28px;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 4px;
}

.feature-card .title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(var(--terra-green), 1);
}

.feature-card .description {
    margin: 11px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.feature-card.feature-card-type-highlight {
    position: relative;
    border: 2px solid rgba(var(--gold), 1);
}

/* Sits on the top border. Named status because Bootstrap already has a badge class. */
.feature-card .status {
    position: absolute;
    top: -8px;
    right: 20px;
    padding: 4px 12px;
    font-family: var(--font-eyebrow);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.66px;
    text-transform: uppercase;
    color: rgba(var(--white), 1);
    background-color: rgba(var(--gold), 1);
    border-radius: 4px;
}