/**
 * wc-hc-benefit-item.css
 * Individual benefit row — red bar, title, description.
 */

.benefit-row {
  background: var(--white);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
}

.benefit-bar {
  width: 3px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--red-bright);
  border-radius: 2px;
}

.benefit-content {
  flex: 1;
  overflow-wrap: break-word;
}

.benefit-title {
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
  line-height: 1.3;
}

.benefit-desc {
  font-size: var(--t-small);
  color: var(--body-text);
  line-height: 1.65;
  overflow-wrap: break-word;
}