.fx-jr { display: flex; flex-direction: column; gap: 52px; }
.fx-jr__main { max-width: 760px; }
.fx-jr__aside { max-width: 360px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.fx-jr__body { position: relative; }
.fx-jr__track { position: absolute; left: 24px; top: 23px; width: calc(100% - 100% / var(--n, 5)); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.fx-jr__fill { display: block; height: 100%; background: linear-gradient(90deg, #5B2BD9, #EE5A3A); transform-origin: left center; animation: fxJFill 15s linear infinite; }
.fx-jr__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); align-items: start; }
.fx-jr__step { display: flex; flex-direction: column; gap: 10px; padding-right: 22px; }
.fx-jr__node {
	position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--violet); border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: ease-out;
}
.fx-jr__node.is-last { color: var(--cta); }
.fx-jr__copy { display: flex; flex-direction: column; gap: 10px; }
.fx-jr__n { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-jr__tagm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.fx-jr__t { font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; }
.fx-jr__d { font-size: 15px; line-height: 1.55; color: var(--muted); }
.fx-jr__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--violet); line-height: 1.3; }
.fx-jr__stat { margin-top: 6px; padding: 14px; border-radius: 14px; background: var(--violet-soft); display: flex; flex-direction: column; gap: 4px; }
.fx-jr__sn { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.03em; color: var(--violet); }
.fx-jr__st { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.fx-jr__ss { font-size: 11.5px; color: var(--muted); }
.fx-jr__stat.is-coral { background: var(--coral-soft); }
.fx-jr__stat.is-coral .fx-jr__sn { color: var(--cta); }

/* Five steps: node n lights when the fill reaches it (72% of the loop), stays lit to 92%; the last is coral. */
.fx-jr[data-n="5"] .jn-0 { animation-name: fxJn0; }
.fx-jr[data-n="5"] .jn-1 { animation-name: fxJn1; }
.fx-jr[data-n="5"] .jn-2 { animation-name: fxJn2; }
.fx-jr[data-n="5"] .jn-3 { animation-name: fxJn3; }
.fx-jr[data-n="5"] .jn-4 { animation-name: fxJn4; }
.fx-jr:not([data-n="5"]) .fx-jr__node { background: var(--violet); color: #fff; border-color: var(--violet); }
.fx-jr:not([data-n="5"]) .fx-jr__node.is-last { background: var(--coral); border-color: var(--coral); }
@keyframes fxJn0 { 0%, 92% { background-color: #5B2BD9; color: #fff; border-color: #5B2BD9; box-shadow: 0 0 0 7px #EEEBFE; } 100% { background-color: #fff; color: #5B2BD9; border-color: #E3DEEF; box-shadow: 0 0 0 0 #EEEBFE; } }
@keyframes fxJn1 { 0%, 16% { background-color: #fff; color: #5B2BD9; border-color: #E3DEEF; box-shadow: 0 0 0 0 #EEEBFE; } 18%, 92% { background-color: #5B2BD9; color: #fff; border-color: #5B2BD9; box-shadow: 0 0 0 7px #EEEBFE; } 100% { background-color: #fff; color: #5B2BD9; border-color: #E3DEEF; box-shadow: 0 0 0 0 #EEEBFE; } }
@keyframes fxJn2 { 0%, 34% { background-color: #fff; color: #5B2BD9; border-color: #E3DEEF; box-shadow: 0 0 0 0 #EEEBFE; } 36%, 92% { background-color: #5B2BD9; color: #fff; border-color: #5B2BD9; box-shadow: 0 0 0 7px #EEEBFE; } 100% { background-color: #fff; color: #5B2BD9; border-color: #E3DEEF; box-shadow: 0 0 0 0 #EEEBFE; } }
@keyframes fxJn3 { 0%, 52% { background-color: #fff; color: #5B2BD9; border-color: #E3DEEF; box-shadow: 0 0 0 0 #EEEBFE; } 54%, 92% { background-color: #5B2BD9; color: #fff; border-color: #5B2BD9; box-shadow: 0 0 0 7px #EEEBFE; } 100% { background-color: #fff; color: #5B2BD9; border-color: #E3DEEF; box-shadow: 0 0 0 0 #EEEBFE; } }
@keyframes fxJn4 { 0%, 70% { background-color: #fff; color: #CC3F25; border-color: #E3DEEF; box-shadow: 0 0 0 0 #FFE8E2; } 72%, 92% { background-color: #EE5A3A; color: #fff; border-color: #EE5A3A; box-shadow: 0 0 0 7px #FFE8E2; } 100% { background-color: #fff; color: #CC3F25; border-color: #E3DEEF; box-shadow: 0 0 0 0 #FFE8E2; } }
@keyframes fxJFill { 0% { transform: scaleX(0); opacity: 1; } 72% { transform: scaleX(1); opacity: 1; } 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

@media (max-width: 960px) {
	.fx-jr { gap: 36px; }
	.fx-jr__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.fx-jr__step { position: relative; flex-direction: row; gap: 16px; padding: 0 0 26px; }
	.fx-jr__copy { gap: 6px; flex: 1; min-width: 0; }
	.fx-jr__n { margin-top: 2px; }
	.fx-jr__tagm { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
	.fx-jr__tag { display: none; }
	.fx-jr__node { flex: none; }
	/* Vertical: one connector per step (grey line + a fill that grows as the next node lights). */
	.fx-jr__track { display: none; }
	.fx-jr__step:not(:last-child)::before, .fx-jr__step:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--line); }
	.fx-jr__step:not(:last-child)::after { background: linear-gradient(180deg, #5B2BD9, #EE5A3A); transform-origin: top center; transform: scaleY(0); animation: fxJSeg 15s linear infinite; }
	.fx-jr__step:nth-child(2)::after { animation-name: fxJSeg1; }
	.fx-jr__step:nth-child(3)::after { animation-name: fxJSeg2; }
	.fx-jr__step:nth-child(4)::after { animation-name: fxJSeg3; }
	.fx-jr__stat { margin-top: 10px; display: block; padding: 14px 16px; }
	.fx-jr__sn { font-size: 26px; margin-right: 8px; float: left; }
	.fx-jr__st, .fx-jr__ss { font-size: 13px; }
	.fx-jr__st::after { content: " "; }
}
@media (max-width: 600px) {
	.fx-jr { gap: 28px; }
	.fx-jr__t { font-size: 19px; }
	.fx-jr__d { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-jr .fx-jr__node { background-color: #5B2BD9 !important; color: #fff !important; border-color: #5B2BD9 !important; }
	.fx-jr .fx-jr__node.is-last { background-color: #EE5A3A !important; border-color: #EE5A3A !important; }
	.fx-jr__fill { transform: none !important; }
}
@keyframes fxJSeg { 0% { transform: scaleY(0); opacity: 1; } 18%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes fxJSeg1 { 0%, 18% { transform: scaleY(0); opacity: 1; } 36%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes fxJSeg2 { 0%, 36% { transform: scaleY(0); opacity: 1; } 54%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes fxJSeg3 { 0%, 54% { transform: scaleY(0); opacity: 1; } 72%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-jr__step::after { transform: none !important; } }
.fx-jr__tool { margin-top: 12px; }
.fx-jr__tool + .fx-jr__tool { margin-top: 8px; }