/* "feature_cards" layout: optional display heading over an auto-fit grid of white hairline cards.
   Default variant = square image beside title + text. "Numbered" variant = mono number above a
   stacked title + body, no image. */
.feature-cards {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
.feature-cards--pad-both { padding-block: var(--section-pad); }
.feature-cards--pad-top { padding-block: var(--section-pad) 0; }
.feature-cards--pad-bottom { padding-block: 0 var(--section-pad); }
.feature-cards--pad-none { padding-block: 0; }
/* The "small" scale is the source's compact band for a secondary card row. */
.feature-cards--scale-small.feature-cards--pad-both { padding-block: 56px; }
.feature-cards--scale-small.feature-cards--pad-top { padding-block: 56px 0; }
.feature-cards--scale-small.feature-cards--pad-bottom { padding-block: 0 56px; }
@media (max-width: 560px) {
  .feature-cards--scale-small.feature-cards--pad-both { padding-block: 40px; }
  .feature-cards--scale-small.feature-cards--pad-top { padding-block: 40px 0; }
  .feature-cards--scale-small.feature-cards--pad-bottom { padding-block: 0 40px; }
}
.feature-cards__heading { margin-bottom: var(--feature-cards-heading-gap, 28px); }
.feature-cards__intro { margin-bottom: var(--feature-cards-intro-gap, 24px); }
/* A heading followed by an intro owns only the small gap between the two lines of copy. */
.feature-cards__heading:has(+ .feature-cards__intro) { margin-bottom: 8px; }
.feature-cards__card {
  background: rgba(var(--color-card-background)); border: 1px solid var(--theme-line); border-radius: var(--radius-lg);
  padding: 30px; display: flex; gap: 20px; align-items: center;
}
.feature-cards__image { width: 88px; height: 88px; flex: 0 0 auto; background: transparent; }
.feature-cards__text { font-size: var(--feature-cards-text-size, 15px); margin-top: 8px; }
.feature-cards__price { margin-top: 0; }
@media (max-width: 760px) {
  .feature-cards__card { gap: 16px; padding: 24px; }
  .feature-cards__image { width: 64px; height: 64px; }
}
@media (max-width: 480px) {
  .feature-cards__card { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Stacked variant: an optional mono eyebrow (or zero-padded number) above the title, an optional
   display price line, then the body copy. Every gap is a merchant setting, so the same grid renders
   a plain benefit card or a priced tier card without a parallel section. */
.feature-cards--stacked .feature-cards__card { display: block; padding: 28px; }
.feature-cards--stacked .feature-cards__title {
  margin-top: var(--feature-cards-title-gap-top, 0px);
  margin-bottom: var(--feature-cards-title-gap-bottom, 8px);
}
.feature-cards--stacked .feature-cards__text { margin-top: var(--feature-cards-text-gap, 0px); }
/* The number sits outside the body, so the body carries the gap under it. */
.feature-cards--numbered .feature-cards__body { margin-top: 10px; }
@media (max-width: 900px) {
  .feature-cards--stacked .feature-cards__card { padding: 22px; }
}