.octy-how-method {
	width: 100%;
	--octy-how-bar-width: 25%;
}

.octy-how-method *,
.octy-how-method *::before,
.octy-how-method *::after {
	box-sizing: border-box;
}

.octy-how-method .how-title,
.octy-how-method .how-sub,
.octy-how-method .step-title,
.octy-how-method .step-desc {
	margin-top: 0;
	overflow-wrap: break-word;
}

.octy-how-method .how-title em {
	font-style: italic;
}

.octy-how-method .how-marker,
.octy-how-method .how-cta {
	display: inline-flex;
	align-items: center;
}

.octy-how-method .how-layout {
	display: grid;
	align-items: flex-start;
	position: relative;
	min-width: 0;
}

.octy-how-method .how-sticky {
	position: sticky;
}

.octy-how-method .how-progress {
	display: flex;
	align-items: center;
}

.octy-how-method .how-progress-track {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.octy-how-method .how-progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--octy-how-bar-width, 25%);
}

.octy-how-method .how-progress-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.octy-how-method .how-cta {
	text-decoration: none;
}

.octy-how-method .how-steps {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 0;
}

.octy-how-method .how-steps::before,
.octy-how-method .how-steps::after {
	content: "";
	position: absolute;
	width: 1px;
	z-index: 0;
	pointer-events: none;
}

.octy-how-method .how-steps::before {
	top: var(--octy-how-line-top, 36px);
	bottom: var(--octy-how-line-bottom, 156px);
	left: var(--octy-how-line-x, 36px);
}

.octy-how-method .how-steps::after {
	top: var(--octy-how-line-top, 36px);
	left: var(--octy-how-line-x, 36px);
	height: var(--octy-how-line-height, 0%);
}

.octy-how-method .how-step-v {
	position: relative;
	padding-left: var(--octy-how-step-pad, 108px);
	z-index: 1;
}

.octy-how-method .how-step-v .step-num {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 2;
	flex-shrink: 0;
}

.octy-how-method .step-desc {
	margin-bottom: 0;
}

@media (max-width: 991px) {
	.octy-how-method .how-sticky {
		position: static;
	}

	.octy-how-method .how-step-v .step-tag,
	.octy-how-method .how-step-v .step-title,
	.octy-how-method .how-step-v .step-desc {
		opacity: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.octy-how-method .how-progress-bar,
	.octy-how-method .how-steps::after,
	.octy-how-method .how-step-v .step-tag,
	.octy-how-method .how-step-v .step-title,
	.octy-how-method .how-step-v .step-desc,
	.octy-how-method .how-step-v .step-num,
	.octy-how-method .how-cta {
		transition: none !important;
	}
}