/* @generated by Skylit - do not edit */
/**
 * Skylit dev cache — pattern: olt-step-item
 * Auto-generated on save_post. Do not hand-edit.
 */

.olt-step {
		--olt-step-hover-shift: clamp(18px, 2.4vw, 34px);
		position: relative;
		display: grid;
		gap: 14px;
		width: 100%;
		padding-block: 26px;
		padding-inline-start: 0;
		padding-inline-end: var(--olt-step-hover-shift);
		overflow: hidden;
		border-bottom: 1px solid var(--olt-color-line);
		isolation: isolate;
		}.olt-step .olt-number {
		order: 1;
		}.olt-step h3 {
		order: 2;
		margin: 0;
		margin-inline-start: 0;
		font-family: var(--olt-font-display);
		font-size: var(--olt-type-card-title);
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.18;
		transition: margin-inline-start 360ms cubic-bezier(0.22, 1, 0.36, 1);
		}.olt-step p {
		order: 3;
		margin: 0;
		margin-inline-start: 0;
		color: var(--olt-color-muted);
		font-size: var(--olt-type-body);
		line-height: 1.75;
		}.olt-step .olt-number, .olt-step p {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), margin-inline-start 360ms cubic-bezier(0.22, 1, 0.36, 1);
		}.olt-step p {
		transition-duration: 280ms, 420ms, 360ms;
		}.olt-step::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, rgba(17, 16, 14, 0), rgba(17, 16, 14, 0.055) 34%, rgba(17, 16, 14, 0.03) 58%, rgba(17, 16, 14, 0));
		background-size: 100% 180%;
		background-position: center bottom;
		background-repeat: no-repeat;
		opacity: 0;
		transition: background-position 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease;
		}.olt-step:hover h3, .olt-step:focus-within h3 {
		margin-inline-start: var(--olt-step-hover-shift);
		}.olt-step:hover .olt-number, .olt-step:focus-within .olt-number {
		opacity: 1;
		margin-inline-start: var(--olt-step-hover-shift);
		transform: translateY(0);
		}.olt-step:hover p, .olt-step:focus-within p {
		opacity: 1;
		margin-inline-start: var(--olt-step-hover-shift);
		transform: translateY(0);
		transition-delay: 90ms, 90ms, 90ms;
		}.olt-step:hover::before, .olt-step:focus-within::before {
		opacity: 1;
		background-position: center top;
		}

@media (prefers-reduced-motion: reduce) {
		.olt-step .olt-number, .olt-step h3, .olt-step p, .olt-step::before {
		transition: none;
		}.olt-step .olt-number, .olt-step p {
		opacity: 1;
		transform: none;
		margin-inline-start: 0;
		}.olt-step:hover h3, .olt-step:focus-within h3 {
		margin-inline-start: 0;
		}
		}