/* Small characters inhabit the headline and setup, without a separate logo row. */
/* Anchor characters to the words; only actual letters or surfaces overlap them. */
.hero-title-cluster {
  position: relative;
  isolation: isolate;
  padding: 0;
}
.launch-intro .hero-title-cluster h1 {
  position: relative;
  z-index: 2;
  margin: 0;
}
.hero-title-cluster h1 > span {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.hero-character {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}
.hero-title-cluster .hero-character {
  z-index: -1;
}
.hero-character img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: character-arrive 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.character-muse {
  width: clamp(40px, 0.7em, 56px);
  bottom: calc(100% - 0.24em);
  left: 0.95em;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
}
.character-muse img {
  border-radius: 48%;
}
.character-instinct {
  width: clamp(30px, 0.5em, 40px);
  bottom: calc(100% - 0.08em);
  left: 54%;
  transform: rotate(4deg);
}
.character-instinct img {
  animation-delay: 0.08s;
}
.character-grok {
  width: clamp(27px, 0.45em, 36px);
  bottom: calc(100% - 0.2em);
  right: 1.4em;
  transform: rotate(9deg);
  mix-blend-mode: multiply;
}
.character-grok img {
  border-radius: 50%;
  animation-delay: 0.05s;
}
.character-dots {
  width: clamp(32px, 0.6em, 48px);
  right: 0.12em;
  bottom: -0.29em;
  transform: rotate(10deg);
}
.character-dots img {
  animation-delay: 0.1s;
}
.character-openclaw {
  width: clamp(29px, 0.525em, 42px);
  left: 0.35em;
  bottom: -0.28em;
  transform: rotate(-12deg);
}
.character-openclaw img {
  animation-delay: 0.15s;
}
.hero-cta-cluster {
  position: relative;
  isolation: isolate;
  width: fit-content;
  margin: 30px auto 0;
}
.hero-cta-cluster > .button {
  position: relative;
  z-index: 2;
}
.hero-cta-cluster .character-hermes {
  width: 38px;
  top: 12px;
  left: -52px;
  transform: rotate(-9deg);
}
.character-hermes img {
  animation-delay: 0.1s;
}
.hero-cta-cluster .character-cue {
  width: 36px;
  right: -49px;
  top: -9px;
  transform: rotate(9deg);
}
.character-cue img {
  animation-delay: 0.15s;
}
@keyframes character-arrive {
  from {
    transform: translateY(9px) scale(0.93);
  }
  to {
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 520px) {
  .character-muse {
    left: 0.8em;
    bottom: calc(100% - 0.24em);
  }
  .character-grok {
    right: 1.05em;
  }
  .character-dots {
    right: 0.1em;
    bottom: -0.34em;
  }
  .character-openclaw {
    left: 0.25em;
    bottom: -0.33em;
  }
  .hero-cta-cluster {
    margin-top: 27px;
  }
  .hero-cta-cluster .character-hermes {
    width: 29px;
    left: -39px;
    top: 12px;
  }
  .hero-cta-cluster .character-cue {
    width: 29px;
    right: -38px;
    top: -6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-character img {
    animation: none;
  }
}