/**
 * PackPlus V2 — Typography System
 *
 * One family, one fluid scale. System grotesk/geometric-sans stack
 * (San Francisco / Segoe UI / Roboto, depending on OS) — no webfont
 * request is added, so this stays true to CLAUDE.md's "no external
 * fonts loaded yet" constraint while still reading as a modern
 * grotesk on every major platform. Every display size uses clamp()
 * so it feels designed at each viewport, not just scaled.
 *
 * Letter-spacing is limited to four repeated values across the whole
 * page (tight / normal / wide / wider) rather than one-off numbers
 * per section.
 */

.packplus-v2-page {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

.packplus-v2-page h1,
.packplus-v2-page h2,
.packplus-v2-page h3 {
	margin: 0;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.02em;
}

/* ---- Labels ---- */

.pp-eyebrow {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pp-green-dark);
}

.pp-number {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pp-meta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

/* ---- Preloader ---- */

.pp-preloader__mark {
	margin: 0;
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pp-preloader__label {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pp-white) 65%, transparent);
}

.pp-preloader__count {
	margin: 1.5rem 0 0;
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* ---- Navigation ---- */

.pp-nav__mobile-summary {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pp-nav__links a {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---- Hero ---- */

.pp-hero__heading {
	font-size: clamp(2.75rem, 8vw, 6.75rem);
}

.pp-hero__line {
	display: block;
	overflow: hidden;
}

.pp-hero__line-inner {
	display: block;
}

.pp-hero__copy {
	margin: 1.5rem 0 0;
	max-width: 34ch;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.55;
	color: var(--pp-text-muted);
}

/* ---- Shared homepage section primitives (Sections 02–09) ---- */

.pp-section__heading {
	font-size: clamp(2.25rem, 5.5vw, 4.25rem);
	margin: 0;
}

.pp-section__copy {
	margin: 1.25rem 0 0;
	max-width: var(--pp-copy-max);
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	line-height: 1.6;
	color: var(--pp-text-muted);
}

/* ---- Buttons ---- */

.pp-btn {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}