/* ─────────────────────────────────────────────────────────────
   Icon system — minimal gold line icons that replace the emoji.
   Goal: a quiet, premium look (Linear / Stripe / Apple register)
   instead of multicolor emoji that read as "toy".

   Usage:  <svg class="ic"><use href="#ic-dsd"></use></svg>
   The <symbol> defs live once per page inside an inline
   <svg class="ic-defs">…</svg> block (see icons-sprite.html).

   Icons inherit currentColor, so colour them via the parent:
   gold for eyebrows, white for card headers, dim for inline. */

.ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Hide the sprite defs block */
.ic-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Eyebrow icon (next to .dsp-sub-tag / .section-tag): gold, slightly larger */
.dsp-sub-tag .ic,
.section-tag .ic {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: 7px;
  color: var(--accent-gold);
}

/* Big feature/card icon (replaces .feature-icon / .pillar-icon emoji) */
.ic-feature {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
  color: var(--accent-gold);
  margin-bottom: 12px;
  display: block;
}
.feature-card .ic-feature,
.pillar-card .ic-feature,
.value-item .ic-feature,
.community-card .ic-feature { color: var(--accent-gold); }

/* Inline list icon (replaces the emoji at the start of feature-list / substep) */
.ic-li {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: 8px;
  color: var(--accent-gold);
}

/* Card-header inline icon (e.g. Tube / Vinyl titles) */
.dsp-color-meta h4 .ic { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 8px; color: var(--accent-gold); }