/* RL Journey Steps */
.rl-steps { background: var(--rl-ink-2, #1B1915); }
.rl-steps__list { position: relative; --rl-node: 56px; }
.rl-steps__ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1024px) { .rl-steps__ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rl-steps__ol { grid-template-columns: minmax(0, 1fr); } }

.rl-steps__item { display: grid; gap: 14px; align-content: start; justify-items: start; list-style: none; margin: 0; }
.rl-steps__node {
	position: relative; display: grid; place-items: center; width: 56px; height: 56px;
	border: 1px solid rgba(232, 205, 138, .5); border-radius: 50%;
	background: var(--rl-ink-2, #1B1915); color: var(--rl-gold-lt, #E8CD8A);
	font: 500 14px/1 var(--rl-font-mono, monospace); letter-spacing: .08em;
	transition: background-color .35s var(--rl-ease), color .35s var(--rl-ease);
}
.rl-steps__node svg, .rl-steps__node i { width: 22px; height: 22px; font-size: 22px; fill: currentColor; }
.rl-steps__item:hover .rl-steps__node { background: var(--rl-gold, #C29B4E); color: var(--rl-ink, #0E0D0B); }
.rl-steps__label { margin-top: 10px; font: 400 11px/1 var(--rl-font-mono, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--rl-on-ink-mute, #A9A296); }
.rl-steps__title { font: 500 28px/1.1 var(--rl-font-display, Georgia, serif); color: inherit; }
.rl-steps__title a { color: inherit; }
.rl-steps__text { max-width: 30ch; font-size: 16px; line-height: 1.6; color: var(--rl-on-ink-mute, #A9A296); }

.rl-steps__path {
	position: absolute; left: 0; right: 0; top: calc(var(--rl-node) / 2 - 1px); height: 2px; z-index: 0;
	--rl-path: rgba(232, 205, 138, .45);
	background: repeating-linear-gradient(90deg, var(--rl-path) 0 6px, transparent 6px 14px);
}
.rl-steps-path-solid .rl-steps__path { background: var(--rl-path); }
@media (max-width: 1024px) { .rl-steps__path { display: none; } }
.rl-steps__plane {
	position: absolute; top: 50%; left: 0; display: grid; place-items: center;
	width: 24px; height: 24px; font-size: 22px; color: var(--rl-gold-lt, #E8CD8A);
	transform: translateY(-50%); animation: rl-fly 9s var(--rl-ease) infinite;
}
.rl-steps__plane svg { width: 100%; height: 100%; fill: currentColor; }
.rl-steps__plane.is-builtin svg { transform: rotate(90deg); }
@keyframes rl-fly {
	0% { left: 0; opacity: 0; }
	8% { opacity: 1; }
	88% { opacity: 1; }
	100% { left: calc(100% - 24px); opacity: 0; }
}