/* Product process block
   ========================================================================== */

.product-process.section--parallax {
	background-color: var(--color-black);
}

.product-process {
	padding: var(--section-spacing) 0;
}

.product-process__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px 48px;
	align-items: end;
	margin-bottom: var(--section-header-spacing);
}

.product-process__intro {
	margin-bottom: 0;
}

.product-process__subtitle {
	max-width: 42ch;
}

.product-process__how-link {
	margin-top: 16px;
}

.product-process__how-link a {
	color: var(--color-accent);
	text-decoration: none;
	font-weight: 700;
}

.product-process__how-link a:hover {
	color: var(--color-white);
	text-decoration: underline;
}

.product-process__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
}

.product-process__steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.product-process .step-card--process {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 20px;
	background-color: var(--surface-glass);
	border: 1px solid var(--border-subtle-on-dark);
	backdrop-filter: blur(6px);
}

.product-process .step-card--process > .numbered-marker {
	margin-bottom: 18px;
}

.product-process .step-card__title {
	font-size: var(--font-size-base);
	font-weight: 800;
	margin-bottom: 12px;
}

.product-process .step-card__desc {
	font-size: var(--font-size-sm);
	line-height: 1.65;
}

@media (max-width: 1200px) {
	.product-process__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.product-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.product-process__top {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.product-process__actions {
		justify-content: stretch;
		flex-direction: column;
	}

	.product-process__steps {
		grid-template-columns: 1fr;
	}
}