/* Three quiet cues: the primary invitation, the connection, the current step. */
.hero .button-primary:not(:disabled){animation:hero-breathe 5.5s ease-in-out infinite}
@keyframes hero-breathe{0%,100%{box-shadow:0 0 0 0 #aafb6000,0 0 12px #aafb6010}50%{box-shadow:0 0 0 4px #aafb600b,0 0 24px #aafb603d}}

/* Light travels beneath the active step, without a frame around the control. */
.phase-tab[aria-selected=true]{position:relative;box-shadow:none}
.phase-tab[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#f4f6f0,transparent),#628346;background-size:45% 100%;background-repeat:no-repeat;animation:step-light 5s ease-in-out infinite;opacity:.8}
@keyframes step-light{0%,15%{background-position:-80% 0}85%,100%{background-position:180% 0}}

/* Connections stop outside the shield, keeping all five labels clear. */
.signal-grid{--signal-gap:55px}
.signal-core::before,.signal-core::after{content:'';position:absolute;top:50%;height:1px;width:var(--signal-gap);pointer-events:none;background:#526d43;opacity:.5;z-index:0}
.signal-core::before{right:100%}.signal-core::after{left:100%}
.signal-core p,.signal-core strong,.signal-mark{z-index:1}
:is(.is-running,.is-complete) .signal-core::before,:is(.is-running,.is-complete) .signal-core::after{background:linear-gradient(90deg,#426133 10%,#76d6aa 48%,#426133 74%);background-size:260% 100%;animation:connection-light 4.8s linear infinite;opacity:.7}
.is-running .signal-core::before,.is-running .signal-core::after{animation-duration:1.8s;box-shadow:0 0 8px #76d6aa2b}
@keyframes connection-light{from{background-position:200% 0}to{background-position:-60% 0}}
.score-after .score-track i{width:var(--score-progress,0%);transition:none;background:linear-gradient(90deg,#76d6aa,#aafb60)}
.is-running .score-after{opacity:1;border-color:#8fbe6d;box-shadow:0 0 22px #aafb6018,0 24px 60px #0007}
.score-number{font-variant-numeric:tabular-nums}
#signal-score{min-width:2ch}
.is-complete .score-after .score-track i{width:98%}
@media(max-width:1100px){.signal-grid{--signal-gap:25px}}
@media(max-width:800px){.signal-grid{--signal-gap:18px}}
@media(max-width:600px){
 .signal-core::before,.signal-core::after{left:50%;right:auto;width:1px;height:16px;top:auto}
 .signal-core::before{bottom:100%}.signal-core::after{top:100%}
 :is(.is-running,.is-complete) .signal-core::before,:is(.is-running,.is-complete) .signal-core::after{background:linear-gradient(180deg,#426133,#76d6aa,#426133);background-size:100% 260%;animation-name:connection-light-phone}
 @keyframes connection-light-phone{from{background-position:0 200%}to{background-position:0 -60%}}
}
@media(prefers-reduced-motion:reduce){
 .hero .button-primary{animation:none!important;box-shadow:none}
 .phase-tab[aria-selected=true]::after{animation:none!important;background:#97c773}
 .signal-core::before,.signal-core::after{animation:none!important;background:#526d43!important;box-shadow:none!important}
 .score-after{transition:none!important}
}