/* Service pages: "How it works" band with the animated diagram (assets/js/components/service-diagram.js). */
.pe-s-diagram {
	background:
		radial-gradient(900px 480px at 80% 30%, rgba(48, 112, 168, 0.16), transparent 60%),
		var(--wp--preset--color--color-background-dark);
}
.pe-diagram { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pe-diagram > * { margin-block: 0; }
.pe-diagram__copy > * { margin: 0; }
.pe-diagram__copy h2 { margin-block-start: 14px; }
.pe-diagram__copy .pe-lead { margin-block-start: 18px; }
.pe-diagram__steps { list-style: none; padding: 0; margin-block-start: 32px !important; counter-reset: pe-step; }
.pe-diagram__steps li {
	counter-increment: pe-step; position: relative; padding: 14px 0 14px 44px;
	border-top: 1px solid var(--wp--preset--color--color-line-dark); color: var(--wp--preset--color--color-text-on-dark);
}
.pe-diagram__steps li::before {
	content: counter(pe-step, decimal-leading-zero); position: absolute; left: 0; top: 15px;
	font-family: var(--wp--preset--font-family--geist-mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.08em;
	color: var(--wp--preset--color--color-highlight);
}
.pe-diagram__visual {
	position: relative; width: 100%; aspect-ratio: 5 / 3;
	border: 1px solid var(--wp--preset--color--color-line-dark); border-radius: var(--wp--custom--radius--large);
	background: rgba(15, 18, 22, 0.6);
	overflow: hidden;
}
.pe-diagram__visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 1023px) { .pe-diagram { grid-template-columns: minmax(0, 1fr); } }