/* Decorative outline icons share a quiet, consistent medical visual language. */
.semantic-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

.care-symbol {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Consultation cards: the larger badge anchors each service category. */
.consultation-mark.semantic-icon {
  width: 54px;
  height: 54px;
  border: 1px solid #d9e4d5;
  border-radius: 15px;
  background: #edf3e9;
  color: #234d40;
}

.consultation-mark .care-symbol {
  width: 30px;
  height: 30px;
}

/* Care selection keeps the same icon column at every viewport width. */
.care-option {
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
}

.care-index.semantic-icon {
  align-self: start;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e7eee3;
  color: #31594a;
}

.care-index .care-symbol {
  width: 22px;
  height: 22px;
}

.care-option[aria-pressed="true"] .care-index.semantic-icon {
  background: var(--mint);
  color: var(--navy);
}

/* Existing hover and focus motion continues to target these marker classes. */
.step-number.semantic-icon {
  width: 48px;
  height: 48px;
  border: 1px solid #d7e5d3;
  border-radius: 14px;
  background: #e7f0e2;
  color: #225c46;
}

.step-number .care-symbol {
  width: 25px;
  height: 25px;
}

/* The compact mint icons remain distinct on the ongoing-care navy surface. */
.pharmacy-steps .support-icon.semantic-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--navy-light);
  color: var(--mint);
  line-height: 1;
}

.support-icon .care-symbol {
  width: 20px;
  height: 20px;
}
.how-grid {
  list-style: none;
}