/* A composed, editorial process section. */
.how-it-works-section{
	position:relative;
	overflow:hidden;
	background:#f7f9fa;
	border-top:1px solid #dce4e9;
	border-bottom:1px solid #dce4e9;
}

.how-it-works-section:before{
	content:"";
	position:absolute;
	inset:0 0 auto;
	height:3px;
	background:var(--servio-color-accent);
}

.how-it-works-section__heading{
	position:relative;
	margin-bottom:2.75rem;
}

.how-it-works-section .steps{
	position:relative;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem;
	border:0;
	background:transparent;
}

.how-it-works-section .steps:before{display:none}

.how-it-works-section .step{
	position:relative;
	min-height:260px;
	overflow:hidden;
	padding:2.15rem 2rem 2.1rem;
	border:1px solid #d9e3e8;
	border-radius:6px;
	background:linear-gradient(145deg,#fff 0%,#fff 72%,#f5f8fa 100%);
	box-shadow:0 10px 28px rgb(18 38 58/.055);
	transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.how-it-works-section .step:hover{
	z-index:1;
	border-color:color-mix(in srgb,var(--servio-color-primary) 30%,#d9e3e8);
	box-shadow:0 18px 38px rgb(18 38 58/.11);
	transform:translateY(-4px);
}

.how-it-works-section .step:before{
	display:none;
}

.how-it-works-section .step-number{
	display:block;
	margin:0 0 1.55rem;
	color:color-mix(in srgb,var(--servio-color-primary) 42%,#dce6ec);
	font-family:var(--servio-heading-font);
	font-size:3.15rem;
	font-weight:700;
	letter-spacing:-.075em;
	line-height:.82;
}

.how-it-works-section .step h3{
	position:relative;
	margin-bottom:.8rem;
	font-size:1.5rem;
	letter-spacing:-.025em;
}

.how-it-works-section .step p{
	position:relative;
	margin:0;
	color:var(--servio-color-muted);
	font-size:.94rem;
	line-height:1.7;
}

.how-it-works-section .steps--1{grid-template-columns:minmax(0,1fr);max-width:560px}
.how-it-works-section .steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.how-it-works-section .steps--4,.how-it-works-section .steps--5,.how-it-works-section .steps--6{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:760px){
	.how-it-works-section .steps{grid-template-columns:1fr;gap:.8rem}
	.how-it-works-section .step{min-height:0;padding:1.6rem 1.5rem}
	.how-it-works-section .step-number{margin-bottom:1.25rem;font-size:2.75rem}
}