/* Systical — Process Path (staggered steps joined by a travelling arrow) */

.sys-pp {
	--pp-accent: #9afd0d;
	--pp-max: 1240px;
	--pp-path: #3a3a3a;
	--pp-num: #2a2a2a;
	--pp-num-size: 168px;
	--pp-step-title: 36px;
	--pp-step-desc: 18px;
	--pp-col-gap: 60px;
	--pp-art-opacity: 0.22;
	--pp-art-w: 56%;
	display: block;
	padding: 110px 40px;
	background-color: #070707;
}

.sys-pp__inner {
	max-width: var(--pp-max);
	margin: 0 auto;
}

/* ---------- heading ---------- */

.sys-pp__head {
	margin-bottom: 64px;
	text-align: center;
}

.sys-pp__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	padding: 9px 18px;
	border-radius: 999px;
	background-color: #141414;
	color: #fff;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.sys-pp__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--pp-accent);
}

.sys-pp__title {
	max-width: 20ch;
	margin: 0 auto;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: #fff;
}

.sys-pp__desc {
	max-width: 68ch;
	margin: 20px auto 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #9a9a9a;
}

/* ---------- steps ---------- */

.sys-pp__steps {
	position: relative;
}

/* Two columns, and each step spans two grid rows starting one row after the
   last — which is what produces the half-step drop between neighbours without
   any per-step offsets to maintain. `--i` is written by PHP so the pattern
   holds for any number of steps. */
.sys-pp__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(90px, auto);
	column-gap: var(--pp-col-gap);
	/* Applies between every half-row, so neighbouring steps in the same column
	   get twice this much air between them. */
	row-gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sys-pp__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 22px;
	grid-row: var(--i) / span 2;
	grid-column: 1;
	max-width: 560px;
}

/* ---------- artwork ----------
   Sits behind the step and arrives as the arrow reaches it. Deliberately
   under both the text and the path: it is atmosphere, and the words have to
   stay the easiest thing on the screen. */
.sys-pp__art {
	position: absolute;
	top: 6%;
	right: 0;
	z-index: 0;
	width: var(--pp-art-w);
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	object-fit: cover;
	opacity: 0;
	transform: rotate(-7deg) scale(0.94);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.sys-pp__step.is-active .sys-pp__art {
	opacity: var(--pp-art-opacity);
	transform: rotate(-7deg) scale(1);
}

/* Mirrored on the right-hand column so the two lean away from the centre
   rather than marching in the same direction. */
.sys-pp__step:nth-child(even) .sys-pp__art {
	right: auto;
	left: 0;
	transform: rotate(7deg) scale(0.94);
}

.sys-pp__step:nth-child(even).is-active .sys-pp__art {
	transform: rotate(7deg) scale(1);
}

.sys-pp__step:nth-child(even) {
	grid-column: 2;
}

/* The number is a background mark, not a heading — it sits behind the text
   baseline rather than pushing it across. */
.sys-pp__num {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	margin-top: -0.18em;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: var(--pp-num-size);
	font-weight: 800;
	line-height: 0.82;
	letter-spacing: -0.05em;
	color: var(--pp-num);
	user-select: none;
}

.sys-pp__body {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding-top: 6px;
}

.sys-pp__step-title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: var(--pp-step-title);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.018em;
	color: #fff;
}

.sys-pp__step-desc {
	margin: 12px 0 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: var(--pp-step-desc);
	line-height: 1.6;
	color: #9a9a9a;
}

/* ---------- the path ---------- */

/* Behind the steps and ignoring the pointer. The path crosses the paragraphs
   on its way between numbers, so `z-index: 1` keeps it above the artwork but
   below the text — the words are never the thing competing for attention. */
.sys-pp__svg {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.sys-pp__track {
	stroke: var(--pp-path);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 7 9;
}

.sys-pp__arrow {
	fill: var(--pp-accent);
	/* Hidden until the script has a path to place it on, so it never flashes
	   in the top-left corner on first paint. */
	opacity: 0;
	transition: opacity 240ms ease;
}

.sys-pp__steps.is-ready .sys-pp__arrow {
	opacity: 1;
}

/* ---------- editor empty state ---------- */

.sys-pp--empty {
	padding: 40px;
	color: #929292;
	font-family: Inter, system-ui, sans-serif;
	text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-pp {
		--pp-col-gap: 36px;
	}

	.sys-pp__step {
		max-width: none;
	}
}

/* One column below this — two columns of steps plus a number leaves the text
   about twenty characters wide. The script redraws the path from the new
   positions, so it becomes a single vertical line with no extra rules. */
@media (max-width: 860px) {
	.sys-pp__list {
		display: flex;
		flex-direction: column;
		gap: 34px;
	}

	.sys-pp__step,
	.sys-pp__step:nth-child(even) {
		grid-row: auto;
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.sys-pp {
		padding: 64px 18px;
	}

	.sys-pp__head {
		margin-bottom: 40px;
	}

	.sys-pp__desc {
		margin-top: 16px;
		font-size: 15px;
	}

	.sys-pp__step {
		gap: 14px;
	}

	.sys-pp__step-desc {
		margin-top: 10px;
	}

	/* One column stacks the steps closer together, so the artwork has to stay
	   inside its own step rather than drifting over its neighbours. */
	.sys-pp__art {
		top: 2%;
		max-height: 78%;
	}
}

/* The arrow is scroll-linked rather than autoplaying, but it is still motion
   nobody asked for — the dashed path alone carries the sequence. */
@media (prefers-reduced-motion: reduce) {
	.sys-pp__arrow {
		display: none;
	}

	.sys-pp__art {
		transition: none;
	}
}