/* ============================================================
   BENEFIT ROW — icon + stacked title/caption. Currently used 4x
   inside membership's benefit list (Refills / Subscription /
   Membership / Referral). The wrapping list's own spacing/rhythm
   lives in css/sections/membership.css; this file owns just the
   row's internal composition and typography.
   ============================================================ */
.benefit-icon {
  flex: 0 0 auto;
  /* sized to span the two-line title+caption block, not just the title's
     cap-height */
  width: 52px;
  height: 52px;
  margin-top: 0;
}
.benefit-copy { display: flex; flex-direction: column; }
/* same pairing as the "Nothing unnecessary" editorial intro
   (css/sections/simplicity.css .editorial-intro-label + -body): a small
   tracked-caps label over muted body copy. */
.feature-title {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.feature-caption {
  margin-top: 8px;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-muted);
  text-align: left;
}