/* UI icons — file-based assets, no inline SVG */

.site-logo {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-logo .site-logo {
  width: 30px;
  height: 30px;
}

.footer-logo .site-logo {
  width: 26px;
  height: 26px;
}

.footer-link-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.42;
  filter: brightness(0) invert(1);
  transition: opacity var(--transition);
}

.footer-links a:hover .footer-link-icon {
  opacity: 0.72;
}

@media (max-width: 900px) {
  .footer-links a .footer-link-icon {
    width: 14px;
    height: 14px;
    opacity: 0.55;
  }

  .footer-links__buy a .footer-link-icon {
    opacity: 0.85;
    filter: brightness(0) saturate(100%) invert(78%) sepia(42%) saturate(800%)
      hue-rotate(353deg) brightness(102%) contrast(98%);
  }
}

.ui-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}

.ui-icon--sm {
  width: 18px;
  height: 18px;
}

.ui-icon--md {
  width: 24px;
  height: 24px;
}

.ui-icon--lg {
  width: 30px;
  height: 30px;
}

.ui-icon--cm {
  width: 17px;
  height: 17px;
  opacity: 0.7;
}

.ui-icon--inverse {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.ui-icon--muted {
  opacity: 0.72;
}

/* Hero demo */
.demo-store-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.demo-store-logo .ui-icon {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}

.result-thumb .ui-icon {
  width: 28px;
  height: 28px;
  opacity: 0.72;
}

/* Pain funnel (dark section) */
.pain-step-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.pain-step-icon .ui-icon--inverse {
  opacity: 0.88;
}

/* Journey */
.journey-step-icon .ui-icon {
  width: 30px;
  height: 30px;
  opacity: 0.78;
}

.journey-step:last-child .journey-step-icon .ui-icon {
  opacity: 0.9;
  filter: brightness(0) saturate(100%) invert(58%) sepia(79%) saturate(1500%)
    hue-rotate(3deg) brightness(98%) contrast(95%);
}

/* Outcomes */
.outcome-icon .ui-icon {
  width: 22px;
  height: 22px;
  opacity: 0.75;
}

/* Use cases (dark cards) */
.usecase-result-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.usecase-result-thumb .ui-icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Maturity */
.maturity-dot .ui-icon {
  width: 22px;
  height: 22px;
  opacity: 0.72;
}

/* Compare matrix */
.cm-val {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  line-height: 1.4;
}

.cm-val.cm-yes .ui-icon--cm {
  filter: brightness(0) saturate(100%) invert(36%) sepia(42%) saturate(1200%)
    hue-rotate(126deg) brightness(92%) contrast(92%);
  opacity: 1;
}

.cm-val.cm-no .ui-icon--cm {
  filter: brightness(0) saturate(100%) invert(36%) sepia(90%) saturate(1500%)
    hue-rotate(336deg) brightness(95%) contrast(92%);
  opacity: 1;
}

.compare-matrix tbody td:last-child .cm-val.cm-yes .ui-icon--cm {
  filter: brightness(0) saturate(100%) invert(58%) sepia(79%) saturate(1500%)
    hue-rotate(3deg) brightness(98%) contrast(95%);
}