/* Scoped signal presentation; the text carries the direction. */
#signal-hero { --signal-color: #65FF52; min-height: 180px; padding: 28px; align-items: center; }
#signal-hero.direction-down { --signal-color: #FF3F5F; }
#signal-hero > div { margin-left: 146px; width: calc(100% - 146px); gap: 12px; }
#signal-hero > div > span { font-size: 12px; line-height: 18px; letter-spacing: .065em; font-weight: 600; }
#signal-hero #signal-direction { font-size: clamp(48px, 8vw, 72px); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; }
#signal-hero .direction-guide { position: absolute; left: -20px; top: 0; width: 172px; height: 180px; overflow: visible; color: var(--signal-color); stroke: currentColor; stroke-width: 16; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#signal-hero.direction-up .direction-guide { transform: scaleY(-1); }
#signal-hero.direction-down .direction-guide { transform: none; }
.direction-guide .guide-aura { stroke-width: 27; filter: blur(9px); opacity: .32; animation: guide-glow 2800ms ease-in-out 750ms infinite; }
.direction-guide .guide-core { filter: drop-shadow(0 0 4px currentColor); }
#signal-hero .direction-guide-motion { animation: guide-enter-down 750ms cubic-bezier(.2,.7,.2,1) both; }
#signal-hero.direction-up .direction-guide-motion { animation-name: guide-enter-up; }
.direction-guide .guide-shaft { stroke-dasharray: 100; animation: guide-draw 650ms cubic-bezier(.2,.7,.2,1) both; }
.direction-guide .guide-tip { animation: guide-tip-appear 350ms ease-out 300ms both; }
/* The up arrow reflects the down shape, including its entry movement. */
@keyframes guide-enter-up { from { transform: translate(-18px, -26px); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes guide-enter-down { from { transform: translate(-18px, -26px); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes guide-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes guide-tip-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes guide-glow { 0%, 100% { opacity: .24; } 50% { opacity: .55; } }
.expired .direction-guide { opacity: .55; }
.expired .guide-aura { animation-play-state: paused; }
#level-benefits .level-benefit { padding: 14px 0; }
#level-benefits .level-benefit > .button { flex: none; margin: 0; }
@media (max-width: 559px) {
  #signal-hero { min-height: 164px; padding: 22px 14px; }
  #signal-hero > div { margin-left: 86px; width: calc(100% - 86px); }
  #signal-hero > div > span { font-size: 10px; letter-spacing: .035em; }
  #signal-hero #signal-direction { font-size: clamp(44px, 11vw, 60px); }
  #signal-hero .direction-guide { left: -18px; width: 112px; height: 164px; stroke-width: 20; }
  #level-benefits .level-benefit > .button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #signal-hero .direction-guide-motion, #signal-hero .guide-aura, #signal-hero .guide-shaft, #signal-hero .guide-tip { animation: none; }
}