

.hm-node {
  position: relative;
  background: var(--om-white);
  border: 1px solid var(--om-line);
  border-radius: var(--om-r-lg);
  padding: var(--om-sp-5) var(--om-sp-6);
  box-shadow: var(--om-shadow-card);
  display: flex;
  align-items: flex-start;
  gap: var(--om-sp-4);
}
.hm-node__pin {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--om-surface);
  color: var(--om-primary);
  position: relative;
}
.hm-node__pin::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(242, 87, 28, 0.28);
  animation: hm-pulse 2.4s var(--om-ease) infinite;
}
@keyframes hm-pulse {
  0% { transform: scale(0.85); opacity: 1; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-node__pin::after { animation: none; opacity: 0.5; }
}
.hm-node h3 { margin-bottom: 4px; font-size: var(--om-fs-lg); }
.om-steps h3 { margin-bottom: 6px; font-size: var(--om-fs-lg); }
.hm-node p {
  margin: 0;
  font-size: var(--om-fs-sm);
  color: var(--om-ink-soft);
}
.hm-node__ping {
  font-family: var(--om-font-mono);
  color: var(--om-primary-deep);
  font-weight: 600;
}

.hm-scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--om-sp-5);
  padding: 6px;
}
@media (max-width: 760px) {
  .hm-scenes { grid-template-columns: 1fr; }
}
.hm-scene {
  display: flex;
  flex-direction: column;
  gap: var(--om-sp-4);
}
.hm-scene .om-badge { align-self: flex-start; }
.hm-scene blockquote {
  margin: 0;
  font-size: var(--om-fs-md);
  line-height: var(--om-lh-snug);
  color: var(--om-dark);
  font-family: var(--om-font-heading);
  font-weight: 600;
}
.hm-scene footer {
  margin-top: auto;
  font-size: var(--om-fs-xs);
  color: var(--om-ink-soft);
}

.hm-audience .om-card { height: 100%; }
.hm-audience ul {
  margin: 0;
  padding-left: 1.15em;
  font-size: var(--om-fs-sm);
  color: var(--om-ink-soft);
}
.hm-audience li + li { margin-top: 6px; }

.om-section--dark .hm-node,
.om-section--dark .hm-node h3,
.om-section--dark .hm-node p {
  color: var(--om-ink);
}
.om-section--dark .hm-node h3 { color: var(--om-dark); }
.om-section--dark .hm-node p { color: var(--om-ink-soft); }
