/* =============================================================================
 * Pricing page — scoped styles.
 *
 * Every selector lives under .pricing-page. Pinned to the division's paper
 * ground regardless of the theme toggle (rate cards are read-once surfaces;
 * guaranteed legibility beats toggle consistency). Numerals are JetBrains
 * Mono with tnum — the credential. Text-level accents are Pine; Volt appears
 * only as fills/underlines per the Volt-Is-Never-Text-On-Light rule.
 *
 * Matrix rendering rules (PRICING-HANDOFF.md): final display values only —
 * never a multiplier, factor, or formula. One-time items visibly exempt
 * from the class systems. Tables degrade to contained horizontal scroll on
 * small viewports; the page body never scrolls sideways.
 * ============================================================================= */

.pricing-page {
	--bg:            var(--paper);
	--bg-2:          var(--perf-50);
	--fg:            var(--moss);
	--fg-dim:        rgba(30, 42, 11, 0.68); /* AA at body sizes on paper + surface */
	--line:          rgba(30, 42, 11, 0.12);
	--card:          #FFFFFF;
	--accent-fg:     var(--pine);
	--accent-italic: var(--pine);

	background: var(--bg);
	color: var(--fg);
	font-family: var(--f-sans);
	font-size: var(--t-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.pricing-page * { box-sizing: border-box; }
.pricing-page p { margin: 0; }

.pricing-page .pr-container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (max-width: 560px) { .pricing-page .pr-container { padding: 0 20px; } }

/* ── Type ────────────────────────────────────────────────────────────────── */

.pricing-page .pr-h1 {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(38px, 5.4vw, 72px);
	line-height: 1.0;
	letter-spacing: -0.035em;
	margin: 0 0 22px;
	text-wrap: balance;
}
.pricing-page .pr-h1 em,
.pricing-page .pr-h2 em {
	font-style: normal;
	font-family: inherit;
	color: var(--accent-italic);
}
.pricing-page .pr-h2 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	margin: 0;
	text-wrap: balance;
}
.pricing-page .pr-lead {
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.55;
	color: var(--fg-dim);
	max-width: 58ch;
	text-wrap: pretty;
}
.pricing-page .pr-note {
	margin-top: 22px;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-dim);
}
.pricing-page .pr-section-sub {
	margin-top: 12px;
	font-size: 15px;
	color: var(--fg-dim);
	max-width: 56ch;
	text-wrap: pretty;
}
.pricing-page .mono { font-family: var(--f-mono); font-feature-settings: "tnum"; }

/* ── Rhythm ──────────────────────────────────────────────────────────────── */

.pricing-page .pr-hero { padding: 88px 0 56px; border-bottom: 1px solid var(--line); }
.pricing-page .pr-section { padding: 64px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .pricing-page .pr-section { padding: 80px 0; } }
.pricing-page .pr-section-tint { background: var(--bg-2); }
.pricing-page .pr-final { border-bottom: none; padding-bottom: 120px; }

/* ── Class definitions ───────────────────────────────────────────────────── */

.pricing-page .pr-class-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
@media (max-width: 820px) { .pricing-page .pr-class-grid { grid-template-columns: 1fr; gap: 40px; } }

.pricing-page .pr-class-t {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -0.015em;
	margin: 0 0 8px;
}
.pricing-page .pr-class-sub { font-size: 14.5px; color: var(--fg-dim); max-width: 48ch; text-wrap: pretty; }
.pricing-page .pr-class-list {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	border-top: 1px solid var(--line);
}
.pricing-page .pr-class-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
}
.pricing-page .pr-band {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--moss);
	background: var(--perf-100);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	min-width: 40px;
	text-align: center;
}
.pricing-page .pr-class-foot { margin-top: 14px; font-size: 13.5px; color: var(--fg-dim); max-width: 52ch; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.pricing-page .pr-table-wrap {
	margin-top: 32px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
	overflow-x: auto;
}
.pricing-page .pr-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 15px;
}
.pricing-page .pr-table-flat { min-width: 0; }

.pricing-page .pr-table thead th {
	font-family: var(--f-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-dim);
	text-align: right;
	padding: 18px 24px 14px;
	border-bottom: 1px solid var(--line);
}
.pricing-page .pr-table thead th.pr-rowhead { text-align: left; }

.pricing-page .pr-table tbody th {
	text-align: left;
	font-weight: 600;
	letter-spacing: -0.005em;
	padding: 18px 24px;
	border-bottom: 1px solid var(--line);
	max-width: 380px;
}
.pricing-page .pr-table tbody tr:last-child th,
.pricing-page .pr-table tbody tr:last-child td { border-bottom: none; }

.pricing-page .pr-rowsub {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--fg-dim);
	margin-top: 3px;
	letter-spacing: 0;
}
.pricing-page .pr-table tbody td {
	font-family: var(--f-mono);
	font-feature-settings: "tnum";
	font-size: 16px;
	color: var(--accent-fg);
	text-align: right;
	padding: 18px 24px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
	vertical-align: top;
}
.pricing-page .pr-table tbody tr { transition: background 0.15s; }
.pricing-page .pr-table tbody tr:hover { background: var(--bg-2); }

/* One-time table: two columns, value hugs right, visibly outside the class grid */
.pricing-page .pr-table-flat tbody td { width: 140px; }

/* ── Table CTAs ──────────────────────────────────────────────────────────── */

.pricing-page .pr-table-cta { margin-top: 18px; }
.pricing-page .pr-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg);
	border-bottom: 1px solid var(--accent);
	padding-bottom: 3px;
	transition: color 0.15s;
}
.pricing-page .pr-cta-link:hover { color: var(--accent-fg); }

/* ── Pilot + examples + foundations ─────────────────────────────────────── */

.pricing-page .pr-pilot { max-width: 640px; }
.pricing-page .pr-pilot-body { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--fg-dim); text-wrap: pretty; }

.pricing-page .pr-examples { margin-top: 56px; }
.pricing-page .pr-examples-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-dim);
	margin-bottom: 18px;
}
.pricing-page .pr-example-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 900px) { .pricing-page .pr-example-grid { grid-template-columns: 1fr; } }

.pricing-page .pr-example {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 26px;
	display: flex;
	flex-direction: column;
}
.pricing-page .pr-example-who {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-dim);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.pricing-page .pr-example-lines {
	list-style: none;
	padding: 0;
	margin: 6px 0 14px;
}
.pricing-page .pr-example-lines li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	padding: 8px 0;
	color: var(--fg-dim);
}
.pricing-page .pr-example-lines .mono { color: var(--fg); font-size: 13.5px; }
.pricing-page .pr-example-total {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-weight: 600;
	font-size: 14px;
}
.pricing-page .pr-example-total .mono { font-size: 20px; color: var(--accent-fg); font-weight: 500; }

.pricing-page .pr-foundations {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-dim);
	max-width: 68ch;
	text-wrap: pretty;
}

/* ── Final CTA ───────────────────────────────────────────────────────────── */

.pricing-page .pr-final-cta { margin-top: 28px; }

/* ── Motion preferences ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.pricing-page .pr-table tbody tr,
	.pricing-page .pr-cta-link { transition: none; }
}