/* Meikero: home "How it works" — coloured steps, icon chips, arrows, hover and auto-highlight. */

#how .steps li {
	--c: #2563eb;
	background: #fff;
	overflow: visible;
	transition: opacity .7s cubic-bezier(.16, .84, .24, 1), transform .45s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .35s;
}
#how .steps li:nth-child(2) { --c: #7c3aed; }
#how .steps li:nth-child(3) { --c: #16a34a; }

#how .steps li::before { color: var(--c); font-size: 2.2rem; }
#how .steps li h3 { padding-right: 56px; }

/* Icon chip */
.how-ico {
	position: absolute; top: var(--space-4, 32px); right: var(--space-4, 32px);
	width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
	background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), background .3s, color .3s;
}
.how-ico svg { width: 22px; height: 22px; }

/* Bottom progress bar */
.how-bar {
	position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c);
	border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
	transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* Arrow between cards */
.how-arrow {
	position: absolute; z-index: 2; top: 50%; right: calc(var(--space-4, 32px) / -2 - 15px);
	width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; border: 1px solid var(--line); color: var(--c);
	transition: transform .35s, border-color .3s, background .3s, color .3s;
}
.how-arrow svg { width: 14px; height: 14px; }

/* Hover / highlighted state */
#how .steps li:hover,
#how .steps li.is-active {
	transform: translateY(-6px);
	border-color: var(--c);
	box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--c) 60%, transparent);
}
#how .steps li:hover .how-bar,
#how .steps li.is-active .how-bar { transform: scaleX(1); }
#how .steps li:hover .how-ico,
#how .steps li.is-active .how-ico { background: var(--c); color: #fff; transform: rotate(-6deg) scale(1.08); }
#how .steps li:hover .how-arrow,
#how .steps li.is-active .how-arrow { background: var(--c); border-color: var(--c); color: #fff; transform: translateX(4px); }

/* Mobile: single column, arrows point down */
@media (max-width: 820px) {
	.how-arrow { top: auto; right: auto; left: 50%; bottom: calc(var(--space-4, 32px) / -2 - 15px); margin: 0 0 0 -15px; transform: rotate(90deg); }
	#how .steps li:hover .how-arrow,
	#how .steps li.is-active .how-arrow { transform: rotate(90deg) translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	#how .steps li, .how-ico, .how-bar, .how-arrow { transition: none; }
	#how .steps li:hover, #how .steps li.is-active { transform: none; }
}