/* hero: match the research-section treatment (whitepapers-2026.html) */
	.page-hero h1 { font-weight: 700; letter-spacing: -0.02em; }
	.page-hero .crumbs { color: #4f5d66; } /* AA contrast on #e6edf1 */
	/* ".page-hero .crumbs a" in mrc-2026.css (color: var(--body)) outspecifies
	   the rule above for the <a> links themselves (var(--body) still clears
	   AA here, ~5:1, but the override was silently dead for the links).
	   Matching selector so the whole crumb trail actually uses the intended
	   color, not just the trailing non-link segment. */
	.page-hero .crumbs a { color: #4f5d66; }

	/* .pain-note nested inside .cs-wrap ties in specificity with ".cs-wrap p"
	   and loses on source order (verified bug, 2026-07-13). Same fix as the
	   sibling white paper. */
	.cs-wrap .pain-note p { color: rgba(255,255,255,.9); }

	/* "What's inside" contents panel (anchors to each chapter) */
	.wp-toc { max-width: 900px; margin: 0 auto; }
	.wp-toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.6rem; }
	.wp-toc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
	.wp-toc a { display: flex; align-items: baseline; gap: 1rem; padding: .85rem .3rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; transition: color .2s ease, padding-left .2s ease; }
	.wp-toc a:hover { color: var(--accent); padding-left: .7rem; }
	.wp-toc a .n { font-family: 'Inter Tight', monospace; font-size: .85rem; font-weight: 700; color: var(--accent); flex-shrink: 0; width: 1.6rem; }
	@media (max-width: 700px) { .wp-toc-grid, .wp-toc-grid.cols-3 { grid-template-columns: 1fr; } }

	/* chapter header: eyebrow + big faded number watermark + title */
	.wp-chapter { position: relative; text-align: center; max-width: 800px; margin: 0 auto 2.8rem; padding-top: 1.5rem; }
	.wp-chapter .wp-num { position: absolute; top: -2.2rem; left: 50%; transform: translateX(-50%); font-size: clamp(7rem, 15vw, 11rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--accent); opacity: .07; pointer-events: none; user-select: none; z-index: 0; }
	.wp-chapter > *:not(.wp-num) { position: relative; z-index: 1; }
	.wp-chapter h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; margin: .35rem 0 0; }
	.wp-chapter p.wp-standfirst { font-size: 1.12rem; color: var(--body); line-height: 1.6; margin: 1rem auto 0; max-width: 640px; }

	/* "How low-code helps" answer box: light accent-tinted panel, left rule.
	   Deliberately uses .cs-wrap's default p/li color (var(--body)) rather than
	   a custom color, since var(--body) on this light background comfortably
	   clears AA (~9:1, verified) without any specificity fight. */
	.wp-answer { background: var(--accent-tint); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.7rem 2rem; margin: 1.8rem 0 2.2rem; }
	.wp-answer .wp-answer-lbl { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dk); margin-bottom: .9rem; }
	.wp-answer .wp-answer-lbl i { color: var(--accent); }
	.wp-answer p:last-child, .wp-answer ol:last-child, .wp-answer ul:last-child { margin-bottom: 0; }

	/* explanatory diagram figures (coded inline SVG, design-system palette) */
	.wp-fig { margin: 2.4rem auto 0; max-width: 860px; }
	.wp-fig svg { width: 100%; height: auto; display: block; }
	.wp-fig figcaption { text-align: center; font-size: .85rem; color: #4f5d66; margin-top: .7rem; }