/**
 * PackPlus V2 — Section 07: Why PackPlus (Sprint 3R)
 *
 * Four large editorial value rows on a neutral grey surface — not icon
 * cards. All copy is visible by default; hover/focus only transitions
 * the row's background to PackPlus green as a fast, restrained accent
 * (never required to read the content). Odd/even rows alternate
 * left/right alignment for spatial progression without pinning.
 */

.pp-why {
	background: var(--pp-grey);
	color: var(--pp-text);
}

.pp-why__heading {
	color: var(--pp-text);
}

.pp-chapter {
	padding: clamp(2rem, 5vw, 3.25rem) var(--pp-gutter);
	margin-left: calc(-1 * var(--pp-gutter));
	margin-right: calc(-1 * var(--pp-gutter));
	border-top: 1px solid var(--pp-line);
	max-width: none;
	transition: background-color var(--pp-duration-fast) var(--pp-ease-standard);
}

.pp-chapter:first-of-type {
	margin-top: var(--pp-space-xl);
}

.pp-chapter:nth-of-type(even) {
	text-align: right;
}

.pp-chapter__number {
	display: block;
	font-size: clamp(2.5rem, 6vw, 4rem);
	color: color-mix(in srgb, var(--pp-text) 35%, transparent);
}

.pp-chapter__title {
	margin: 0.5rem 0 0;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--pp-text);
}

.pp-chapter__copy {
	margin: 0.75rem 0 0;
	color: var(--pp-text-muted);
}

@media (hover: hover) {
	.pp-chapter:hover {
		background: var(--pp-green);
	}

	.pp-chapter:hover .pp-chapter__number {
		color: color-mix(in srgb, var(--pp-ink) 55%, transparent);
	}

	.pp-chapter:hover .pp-chapter__title,
	.pp-chapter:hover .pp-chapter__copy {
		color: var(--pp-ink);
	}
}