@layer components {
	@scope (.solutions-index) {
		.solutions-hero {
			padding-block-end: calc(var(--stack) * 4);
		}

		.solutions-hero__inner {
			display: flex;
			flex-direction: column;
			gap: var(--gutter);
		}

		.solutions-hero h1 {
			max-inline-size: 50ch;
		}

		.solutions-hero__lede {
			font-size: var(--font-size-lg);
			color: var(--color-text-muted-invert);
			max-inline-size: var(--line-length-md);
		}

		/* Process section */
		.solutions-process {
			background-color: var(--color-bg-dark);
			--hex-fill: var(--color-green);
		}

		.solutions-process h2 {
			color: var(--color-text-invert);
		}

		.solutions-process-step {
			border-block-start: 1px solid oklch(from var(--color-bg) l c h / 20%);
			padding-block-start: calc(var(--stack) * 2);
		}

		.solutions-process-step h3 {
			display: flex;
			align-items: baseline;
			gap: calc(var(--gutter) / 2);
			font-size: var(--font-size-xl);
			color: var(--color-text-invert);
		}

		.solutions-process-step h3::before {
			content: counter(steps, decimal-leading-zero);
			color: var(--primary);
			font-variant-numeric: tabular-nums;
			font-weight: var(--font-weight-medium);
		}

		.solutions-process-step p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted-invert);
		}
	}
}