/* Phosphor icon helpers — standalone SVGs in icons/ (loaded via <img>, like arc.svg) */

:root {
  --ph-filter-amber: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(1729%) hue-rotate(360deg) brightness(99%) contrast(92%);
  --ph-filter-muted: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
  --ph-filter-muted2: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
  --ph-filter-white: brightness(0) invert(1);
  --ph-filter-sage: brightness(0) saturate(100%) invert(36%) sepia(56%) saturate(649%) hue-rotate(56deg) brightness(92%) contrast(88%);
  --ph-filter-red: brightness(0) saturate(100%) invert(20%) sepia(75%) saturate(3000%) hue-rotate(350deg) brightness(90%) contrast(90%);
}

img.ph-icon {
  display: block;
  flex-shrink: 0;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
  object-fit: contain;
}

.uc-cap-icon img.ph-icon,
.how-step-icon img.ph-icon,
.value-icon img.ph-icon {
  width: 100%;
  height: 100%;
  filter: var(--ph-filter-amber);
}

img.ph-icon.ph-icon-xs { width: 14px; height: 14px; }
img.ph-icon.ph-icon-sm { width: 18px; height: 18px; }
img.ph-icon.ph-icon-md { width: 24px; height: 24px; filter: var(--ph-filter-amber); }
img.ph-icon.ph-icon-lg { width: 32px; height: 32px; }
img.ph-icon.ph-icon-xl { width: 48px; height: 48px; }
img.ph-icon.ph-icon-2xl { width: 72px; height: 72px; }

.ph-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  vertical-align: baseline;
}

.ph-inline .ph-icon {
  vertical-align: middle;
}

/* Capability / step icon slots */
.uc-cap-icon,
.how-step-icon,
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  color: var(--amber, #e8621a);
}

.uc-cap-icon { width: 20px; height: 20px; margin-top: 2px; }
.how-step-icon { width: 32px; height: 32px; margin-bottom: 14px; }
.value-icon { width: 22px; height: 22px; margin-bottom: 12px; }

.blog-card-img img.ph-icon {
  width: 48px;
  height: 48px;
  filter: var(--ph-filter-muted);
}

.blog-card.featured .blog-card-img img.ph-icon {
  width: 72px;
  height: 72px;
}

.workflow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted2, #9b9b9b);
  padding-top: 28px;
}

.workflow-arrow img.ph-icon {
  width: 22px;
  height: 22px;
  filter: var(--ph-filter-muted2);
}

.swipe-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  color: var(--muted2, #9b9b9b);
}

.swipe-breadcrumb-sep img.ph-icon {
  width: 14px;
  height: 14px;
  filter: var(--ph-filter-muted2);
}

.hl-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.hl-note img.ph-icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
  filter: var(--ph-filter-muted);
}

.check-box.checked {
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-box.checked::after {
  content: none;
}

.check-box.checked img.ph-icon {
  width: 14px;
  height: 14px;
  filter: var(--ph-filter-white);
}

.plan-fe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  margin-top: 1px;
}

.plan-fe-icon img.ph-icon {
  width: 14px;
  height: 14px;
}

.plan-fe-yes img.ph-icon { filter: var(--ph-filter-sage); }
.plan-fe-no img.ph-icon { filter: var(--ph-filter-red); }

.persona-link,
.uc-loop-link,
.blog-card-read,
.post-back,
.nav-cta,
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.persona-link img.ph-icon,
.uc-loop-link img.ph-icon,
.blog-card-read img.ph-icon,
.post-back img.ph-icon,
.nav-cta img.ph-icon,
.cta-primary img.ph-icon {
  width: 14px;
  height: 14px;
}

.persona-link img.ph-icon,
.uc-loop-link img.ph-icon,
.blog-card-read img.ph-icon,
.nav-cta img.ph-icon,
.cta-primary img.ph-icon {
  filter: var(--ph-filter-amber);
}

.post-back img.ph-icon {
  filter: var(--ph-filter-muted);
}

.about-stat-num img.ph-icon {
  width: 32px;
  height: 32px;
  filter: var(--ph-filter-amber);
}