/*
 * Canonical How It Works styles.
 * Unified 2026-08-27: the icon-badge circle design (background-image numbers, no border,
 * larger 48px title) was already the ACTUAL rendered design everywhere — a global rule in
 * css/style.min.css (".how-it-works .how-it-works__circle", 2-class specificity) was silently
 * beating this file's old bare 1-class selectors on every page. Rather than leave that landmine,
 * the winning values are now the canonical ones (matching what Solutions V2 already showed),
 * and the redundant copy in css/style.min.css was removed. Compare V2's own artwork variant
 * (".compare-v2-how-it-works") is untouched — that's a deliberate per-family look, not a dup.
 */
.how-it-works {
	padding-top: 80px;
	padding-bottom: 0;
	background: #fff;
}

.how-it-works .container {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1274px;
	padding-left: 32px;
	padding-right: 32px;
	width: 100%;
}

.how-it-works__wrapper {
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-items: center;
	padding-top: 0;
}

.how-it-works__title {
	max-width: var(--how-it-works-title-max-width, 720px);
	margin: 0;
	color: #282828;
	text-align: center;
	font-size: 48px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -.4px;
}

/* Compare V2's artwork and equal-height cards are intentional family variants. */
.compare-v2-how-it-works .how-it-works__circle--1, .compare-v2-how-it-works .how-it-works__circle--2 {
	color: transparent;
	font-size: 0;
}

.compare-v2-how-it-works .how-it-works__circle--1 {
	background-image: url("https://cdn-ileblak.nitrocdn.com/BVUcRFDZrrxsTSJaPVzWiDYVmfYPPOvG/assets/images/optimized/rev-6ccd0ff/simplydepostag.wpengine.com/wp-content/uploads/2026/06/1.svg");
}

.compare-v2-how-it-works .how-it-works__circle--1.nitro-lazy {
	background-image: none !important;
}

.compare-v2-how-it-works .how-it-works__circle--2 {
	background-image: url("https://cdn-ileblak.nitrocdn.com/BVUcRFDZrrxsTSJaPVzWiDYVmfYPPOvG/assets/images/optimized/rev-6ccd0ff/simplydepostag.wpengine.com/wp-content/uploads/2026/06/2.svg");
}

.compare-v2-how-it-works .how-it-works__circle--2.nitro-lazy {
	background-image: none !important;
}

.how-it-works__steps {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.how-it-works__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	min-width: 0;
}

.how-it-works__indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
}

.how-it-works__line {
	flex: 1;
	height: 2px;
	min-width: 0;
	background: #f2f2f2;
}

.how-it-works__line--hidden {
	background: transparent;
}

.how-it-works__circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: .18px;
	color: #282828;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.how-it-works__circle--1 {
	background-image: url("https://cdn-ileblak.nitrocdn.com/BVUcRFDZrrxsTSJaPVzWiDYVmfYPPOvG/assets/images/optimized/rev-6ccd0ff/simplydepo.com/wp-content/themes/simplydepo/images/1.svg");
}

.how-it-works__circle--1.nitro-lazy {
	background-image: none !important;
}

.how-it-works__circle--2 {
	background-image: url("https://cdn-ileblak.nitrocdn.com/BVUcRFDZrrxsTSJaPVzWiDYVmfYPPOvG/assets/images/optimized/rev-6ccd0ff/simplydepo.com/wp-content/themes/simplydepo/images/2.svg");
}

.how-it-works__circle--2.nitro-lazy {
	background-image: none !important;
}

.how-it-works__circle--3 {
	background-image: url("https://cdn-ileblak.nitrocdn.com/BVUcRFDZrrxsTSJaPVzWiDYVmfYPPOvG/assets/images/optimized/rev-6ccd0ff/simplydepo.com/wp-content/themes/simplydepo/images/3.svg");
}

.how-it-works__circle--3.nitro-lazy {
	background-image: none !important;
}

.how-it-works__card-wrap {
	box-sizing: border-box;
	width: 100%;
	padding: 0 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.how-it-works__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	flex: 1;
	padding: 32px 40px;
	border-radius: 32px;
	background: #f7f7f7;
	text-align: center;
}

.how-it-works__card-title {
	margin: 0;
	color: #282828;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.how-it-works__card-text {
	margin: 0;
	color: rgba(0, 0, 0, .75);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: .16px;
}

@media screen and (max-width: 991px) {
	.how-it-works__steps {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 24px;
	}
	
	.how-it-works__step {
		flex: unset;
		width: 100%;
	}
	
	.how-it-works__indicator {
		display: none;
	}
	
	.how-it-works__card-wrap {
		padding: 0;
	}
	
	/* Compare V3 still loads a legacy global rule after component styles. */
	body.compare-v3-body .how-it-works__indicator {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.how-it-works {
		padding: 0;
	}
	
	.how-it-works .container {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.how-it-works__wrapper {
		gap: 24px;
		padding: 48px 0 0;
	}
	
	.how-it-works__title {
		font-size: 28px;
		line-height: 34px;
		letter-spacing: -.14px;
		text-align: left;
	}
	
	.how-it-works__steps {
		gap: 0;
	}
	
	.how-it-works__step {
		flex-direction: row;
		gap: 20px;
		align-items: stretch;
		width: 100%;
	}
	
	.how-it-works__indicator {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: auto;
		align-self: stretch;
		justify-content: center;
		align-items: center;
	}
	
	/* Override Compare V3's tablet hide rule once the mobile stepper takes over. */
	body.compare-v3-body .how-it-works__indicator {
		display: flex;
	}
	
	.how-it-works__line {
		flex: 1;
		width: 1px;
		height: auto;
	}
	
	.how-it-works__circle {
		width: 32px;
		height: 32px;
		font-size: 16px;
		line-height: 24px;
		background-size: contain;
	}
	
	.how-it-works__card-wrap {
		padding: 0 0 16px;
	}
	
	.how-it-works__card {
		padding: 20px;
		text-align: left;
		border-radius: 16px;
		gap: 4px;
	}
	
	.how-it-works__card-title {
		font-size: 18px;
		line-height: 26px;
		letter-spacing: .09px;
	}
	
	.how-it-works__card-text {
		font-size: 14px;
		line-height: 20px;
		letter-spacing: .14px;
	}
}