.q-anim--quorum-how-it-works .q-anim__panel {
	background: rgba(38, 38, 38, 0.55);
	border-radius: var(--card-radius, 24px);
	overflow: hidden;
}

.q-anim--quorum-how-it-works .q-anim__frame--vertical {
	display: none;
	max-width: 440px;
	margin-inline: auto;
}

@media (max-width: 1023px) {
	.q-anim--quorum-how-it-works .q-anim__frame--horizontal {
		display: none;
	}

	.q-anim--quorum-how-it-works .q-anim__frame--vertical {
		display: block;
	}
}

.q-anim--quorum-how-it-works .hsteps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
	gap: 0 4px;
	align-items: center;
	margin-top: 32px;
}

.q-anim--quorum-how-it-works .hstep {
	background: rgba(38, 38, 38, 0.55);
	border-radius: 20px;
	padding: 36px;
	min-width: 0;
	align-self: stretch;
	color: #fff;
	font-family: Rubik, Arial, sans-serif;
}

.q-anim--quorum-how-it-works .hstep__n {
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: #01ff40;
}

.q-anim--quorum-how-it-works .hstep__ic {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-top: 20px;
	border-radius: 12px;
	border: 1px solid rgba(1, 255, 64, 0.45);
	background: rgba(1, 255, 64, 0.08);
}

.q-anim--quorum-how-it-works .hstep--person .hstep__ic {
	border-color: rgba(146, 226, 255, 0.45);
	background: rgba(146, 226, 255, 0.08);
}

.q-anim--quorum-how-it-works .hstep__title {
	margin: 36px 0 0;
	font-family: Rubik, Arial, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	color: #fff;
}

.q-anim--quorum-how-it-works .hstep__text {
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: normal;
	color: #d3dad8 !important;
}

.q-anim--quorum-how-it-works .hstep__arrow {
	display: grid;
	place-items: center;
}

@media (max-width: 1023px) {
	.q-anim--quorum-how-it-works .hsteps {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.q-anim--quorum-how-it-works .hstep__arrow {
		transform: rotate(90deg);
		height: 24px;
	}
}

.q-anim--quorum-how-it-works .q-anim__panel,
.q-anim--quorum-how-it-works .hstep {
	opacity: 0;
	transform: translateY(24px);
}

.q-anim--quorum-how-it-works .hstep__arrow .shaft {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.q-anim--quorum-how-it-works .hstep__arrow .head {
	opacity: 0;
}

.q-anim--quorum-how-it-works.is-visible .q-anim__panel {
	animation: hiw-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.q-anim--quorum-how-it-works.is-visible .hstep {
	animation: hiw-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	animation-delay: calc(0.6s + var(--i) * 0.35s);
}

.q-anim--quorum-how-it-works.is-visible .hstep__arrow .shaft {
	animation: hiw-draw 0.35s ease forwards;
	animation-delay: calc(0.95s + var(--i) * 0.35s);
}

.q-anim--quorum-how-it-works.is-visible .hstep__arrow .head {
	animation: hiw-fade 0.2s ease forwards;
	animation-delay: calc(1.2s + var(--i) * 0.35s);
}

.q-anim--quorum-how-it-works.is-visible .hstep__ic {
	animation: hiw-ic 6s ease infinite;
	animation-delay: calc(2.6s + var(--i) * 2s);
}

.q-anim--quorum-how-it-works.is-visible .hstep--person .hstep__ic {
	animation-name: hiw-ic-b;
}

.q-anim--quorum-how-it-works .hstep__ic svg * {
	transform-box: fill-box;
	transform-origin: center;
}

.q-anim--quorum-how-it-works.is-visible .hstep:nth-of-type(1) .eyes {
	animation: hiw-blink 6s ease infinite 2.6s;
}

.q-anim--quorum-how-it-works.is-visible .hstep:nth-of-type(1) .ant {
	animation: hiw-ant 6s ease infinite 2.6s;
}

.q-anim--quorum-how-it-works .hstep:nth-of-type(2) .tick {
	stroke-dasharray: 1;
}

.q-anim--quorum-how-it-works.is-visible .hstep:nth-of-type(2) .tick {
	animation: hiw-tick 6s ease infinite 4.6s;
}

.q-anim--quorum-how-it-works.is-visible .hstep:nth-of-type(3) .nod {
	transform-origin: 50% 100%;
	animation: hiw-nod 6s ease infinite 6.6s;
}

@keyframes hiw-up { to { opacity: 1; transform: none; } }
@keyframes hiw-fade { to { opacity: 1; } }
@keyframes hiw-draw { to { stroke-dashoffset: 0; } }
@keyframes hiw-ic {
	0%, 30%, 100% { background: rgba(1, 255, 64, 0.08); box-shadow: none; }
	6%, 24% { background: rgba(1, 255, 64, 0.2); box-shadow: 0 0 18px rgba(1, 255, 64, 0.35); }
}
@keyframes hiw-ic-b {
	0%, 30%, 100% { background: rgba(146, 226, 255, 0.08); box-shadow: none; }
	6%, 24% { background: rgba(146, 226, 255, 0.2); box-shadow: 0 0 18px rgba(146, 226, 255, 0.35); }
}
@keyframes hiw-blink {
	0%, 8%, 14%, 100% { transform: none; }
	11% { transform: scaleY(0.2); }
}
@keyframes hiw-ant {
	0%, 6%, 24%, 100% { transform: none; }
	12% { transform: translateY(-1.5px); }
}
@keyframes hiw-tick {
	0%, 4% { stroke-dashoffset: 1; }
	14%, 100% { stroke-dashoffset: 0; }
}
@keyframes hiw-nod {
	0%, 6%, 22%, 100% { transform: none; }
	10%, 16% { transform: translateY(1.5px); }
}

@media (prefers-reduced-motion: reduce) {
	.q-anim--quorum-how-it-works .q-anim__panel,
	.q-anim--quorum-how-it-works .hstep,
	.q-anim--quorum-how-it-works .hstep__arrow .head {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.q-anim--quorum-how-it-works .hstep__arrow .shaft {
		stroke-dashoffset: 0;
		animation: none;
	}
}