/**
 * PackPlus V2 — Section 05: From Idea to Delivery
 *
 * The one deliberately dark (ink) surface among the homepage's mostly
 * light/paper sections — a controlled typographic contrast moment
 * between the image-led sections above and below it (see CLAUDE.md
 * "Forbidden Visual Patterns" — restraint over decoration). A single
 * vertical process line whose fill grows with scroll (process.js), not
 * a five-icon-card grid. Reduced motion shows the line fully grown and
 * static — see process.js.
 */

.pp-process {
	background: var(--pp-ink);
	color: var(--pp-white);
}

.pp-process .pp-eyebrow {
	color: var(--pp-green);
}

.pp-process__heading {
	color: var(--pp-white);
}

.pp-process__timeline {
	position: relative;
	margin-top: var(--pp-space-xl);
	padding-left: clamp(2.5rem, 6vw, 4rem);
}

.pp-process__line {
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0;
	width: 1px;
	background: var(--pp-line-on-dark);
}

.pp-process__line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: top;
	transform: scaleY(0);
	background: var(--pp-green);
}

.pp-process__step {
	position: relative;
	padding: 0 0 clamp(3rem, 6vw, 4.5rem);
}

.pp-process__step:last-child {
	padding-bottom: 0;
}

.pp-process__step-tick {
	position: absolute;
	top: 0.6rem;
	left: calc(-1 * clamp(2.5rem, 6vw, 4rem));
	width: 0.85rem;
	height: 1px;
	background: var(--pp-white);
	transform: translateX(-0.05rem);
}

.pp-process__step-index {
	display: block;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	color: color-mix(in srgb, var(--pp-white) 45%, transparent);
}

.pp-process__step-title {
	margin: 0.4rem 0 0;
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	color: var(--pp-white);
}

.pp-process__step-copy {
	margin: 0.75rem 0 0;
	max-width: 40ch;
	color: color-mix(in srgb, var(--pp-white) 75%, transparent);
}

/*
 * The line-fill is a decorative scroll progress indicator, driven by
 * process.js. Under reduced motion the complete process must still be
 * visible per CLAUDE.md — handled here in CSS rather than relying on
 * JS, so it holds even if process.js never runs.
 */
@media (prefers-reduced-motion: reduce) {
	.pp-process__line-fill {
		transform: scaleY(1);
	}
}