/* One continuous statement: scattered signal, precise alignment, cobalt light. */
.hero .hero-content {
  container-type: inline-size;
  padding-top: clamp(52px, 7vw, 108px);
  padding-bottom: clamp(28px, 4vw, 48px);
}
.hero h1.signal-title {
  max-width: none;
  margin: 0;
  text-align: center;
  font: 500 min(6.5rem, 6.8vw)/1.2 var(--body);
  letter-spacing: -.04em;
  text-transform: none;
  text-shadow: none;
}
@supports (font-size: 1cqi) {
  .hero h1.signal-title { font-size: min(6.5rem, 7.75cqi); }
}
.signal-title .signal-stage {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  justify-content: center;
  gap: .27em;
  white-space: nowrap;
}
.signal-lead, .signal-lockup { flex: 0 0 auto; white-space: nowrap; }
.signal-lead {
  display: inline-block;
  font-size: 1em;
  font-weight: 400;
  color: var(--muted);
  font-kerning: none;
  font-variant-ligatures: none;
}
.signal-lockup { display: inline-flex; align-items: baseline; }
.signal-word {
  position: relative;
  display: inline-block;
  color: var(--ink);
  font-kerning: none;
  font-variant-ligatures: none;
}
.signal-segment { position: relative; display: inline-block; }
.signal-prefix { font-style: italic; }
.signal-hyphen { margin-inline: -.03em -.025em; }
.signal-letter { display: inline-block; transform-origin: 50% 75%; }
.signal-trademark {
  /* Use the actual superscript glyph with no added word space (Butterick). */
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--body);
  font-size: .58em;
  font-style: normal;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: 0;
  margin: 0;
  color: #000;
  /* The glyph's ink is about 40% of the x-height; its top meets the cap line. */
  translate: 0 -.52em;
}
/* A fine cobalt spotlight follows the pointer over the settled letterforms. */
.signal-segment::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background-image: radial-gradient(ellipse 1.7em 1em at var(--signal-x, 50%) var(--signal-y, 50%), #204dff 0%, #204dffb3 36%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  transition: opacity .5s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .signal-title.is-arriving .signal-letter {
    animation: signal-resolve 1.35s cubic-bezier(.16, 1, .3, 1) var(--delay) both,
      signal-light 1s cubic-bezier(.4, 0, .2, 1) var(--light-delay) both;
  }
  .signal-title.is-arriving .signal-trademark {
    animation: signal-mark 1.2s ease 1.45s both;
  }
  .signal-title.is-sweeping .signal-letter {
    animation: signal-light 1s cubic-bezier(.4, 0, .2, 1) var(--sweep-delay) both;
  }
  @keyframes signal-resolve {
    from {
      opacity: 0;
      filter: blur(.12em);
      transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(var(--turn)) scale(.96);
    }
    45% { opacity: .8; }
    to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  }
  @keyframes signal-light {
    0%, 100% { color: inherit; text-shadow: none; }
    42% { color: #204dff; text-shadow: 0 0 .18em #204dff28; }
    58% { color: #6485ff; text-shadow: 0 0 .12em #204dff18; }
  }
  @keyframes signal-mark {
    from { opacity: 0; filter: blur(3px); }
    to { opacity: 1; filter: blur(0); }
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .signal-title.is-settled:not(.is-sweeping) .signal-word.is-lit .signal-segment::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .signal-segment::before { display: none; } }
@media (forced-colors: active) {
  .signal-segment::before { display: none; }
  .signal-letter { animation: none !important; }
  .signal-word, .signal-lead, .signal-trademark { color: CanvasText; }
}