/* Rich, lightweight evidence icons for the public landing page. */
.landing-evidence-head {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
}

.landing-evidence-icon {
  --evidence-line: #4b3ab8;
  --evidence-fill: #ddd8ff;
  --evidence-soft: #f7f5ff;
  --evidence-accent: #7c68f1;
  width: 72px;
  height: 72px;
  overflow: visible;
  border: 1px solid #d9d3ff;
  border-radius: 12px;
  background: #f0edff;
  color: var(--evidence-line);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 10px 20px rgba(55, 44, 129, 0.1);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.landing-evidence-icon.amber {
  --evidence-line: #8e5206;
  --evidence-fill: #ffe2ad;
  --evidence-soft: #fff9ef;
  --evidence-accent: #d98b17;
  border-color: #f3d5a4;
  background: #fff0d8;
  color: var(--evidence-line);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.76),
    0 10px 20px rgba(135, 78, 6, 0.1);
}

.landing-evidence-icon.mint {
  --evidence-line: #08705e;
  --evidence-fill: #bce9de;
  --evidence-soft: #f1fbf8;
  --evidence-accent: #16a085;
  border-color: #b9e5db;
  background: #dcf3ed;
  color: var(--evidence-line);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.76),
    0 10px 20px rgba(7, 104, 86, 0.1);
}

.landing-evidence-illustration {
  width: 53px;
  height: 53px;
  overflow: visible;
}

.landing-evidence-illustration .evidence-icon-line {
  fill: none;
  stroke: var(--evidence-line);
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-evidence-illustration .evidence-icon-fill {
  fill: var(--evidence-fill);
  stroke: var(--evidence-line);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-evidence-illustration .evidence-icon-soft {
  fill: var(--evidence-soft);
  stroke: var(--evidence-line);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-evidence-illustration .evidence-icon-accent {
  fill: var(--evidence-accent);
  stroke: var(--evidence-line);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-evidence-icon b {
  right: -7px;
  bottom: -6px;
  min-width: 31px;
  height: 26px;
  padding-inline: 7px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 6px 14px rgba(29, 39, 61, 0.14);
}

@media (hover: hover) and (pointer: fine) {
  .landing-evidence-grid article:hover .landing-evidence-icon {
    transform: translateY(-4px) rotate(-1deg);
    border-color: var(--evidence-accent);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.78),
      0 16px 28px rgba(42, 51, 76, 0.15);
  }

  .landing-evidence-grid article:nth-child(2):hover .landing-evidence-icon {
    transform: translateY(-4px);
  }

  .landing-evidence-grid article:nth-child(3):hover .landing-evidence-icon {
    transform: translateY(-4px) rotate(1deg);
  }
}

@media (max-width: 980px) {
  .landing-evidence-head {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
  }

  .landing-evidence-icon {
    width: 64px;
    height: 64px;
  }

  .landing-evidence-illustration {
    width: 47px;
    height: 47px;
  }
}

@media (max-width: 720px) {
  .landing-evidence-head {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 15px;
  }

  .landing-evidence-icon {
    width: 66px;
    height: 66px;
  }

  .landing-evidence-illustration {
    width: 49px;
    height: 49px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-evidence-icon {
    transition: none;
  }
}