body.composite-page {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		font-size: 16px !important;
		line-height: 1.5 !important;
		background: #FDFCFA !important;
		font-family: 'Source Serif 4', Georgia, serif !important;
	}
	body.composite-page main {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.composite-page * { box-sizing: border-box; }
	body.composite-page h1, body.composite-page h2, body.composite-page h3, body.composite-page h4 {
		margin: 0;
	}

	:root {
		--warm-white: #FDFCFA;
		--cream: #F5F0E6;
		--cream-deep: #EDE6D5;
		--white: #FFFFFF;
		--charcoal: #1F2A2E;
		--charcoal-soft: #2b3438;
		--taupe: #C4B7A2;
		--taupe-deep: #A99A82;
		--taupe-darker: #8a7c66;
		--amber: #C58940;
		--amber-deep: #a26e2e;
		--amber-soft: #d1a374;
		--rust: #a04a3d;
		--rust-deep: #7d3a30;
		--pass-tone: #4a7a54;
		--pass-deep: #375a3f;
		--muted: #7a736a;
		--divider: #e8e2d4;
		--divider-soft: #efe9d9;
		--chrome: #f4f1e9;
		--chrome-line: #d4d0c8;
	}
	* { box-sizing: border-box; margin: 0; padding: 0; }
	html { scroll-behavior: smooth; }
	body {
		background: var(--warm-white);
		font-family: 'Source Serif 4', Georgia, serif;
		color: var(--charcoal);
		min-height: 100vh;
		-webkit-font-smoothing: antialiased;
	}

	/* STICKY HEADER NAV */
	header.top {
		position: sticky;
		top: 0;
		z-index: 100;
		background: rgba(253, 252, 250, 0.92);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--divider-soft);
		padding: 1.1rem 2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.brand {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
	}
	.brand img {
		height: 44px;
		width: auto;
		display: block;
		transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.brand:hover img {
		transform: scale(1.03);
	}
	.nav-links {
		display: flex;
		gap: 2rem;
		font-family: 'Source Serif 4', serif;
		font-size: 0.95rem;
	}
	.nav-links a {
		color: var(--charcoal);
		text-decoration: none;
		position: relative;
		padding: 0.35rem 0;
		transition: color 0.25s ease;
	}
	.nav-links a::after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 1.5px;
		background: var(--amber);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.nav-links a:hover { color: var(--amber-deep); }
	.nav-links a:hover::after { transform: scaleX(1); }
	.contact-btn {
		background: var(--rust-deep);
		color: var(--warm-white);
		font-family: 'Source Serif 4', serif;
		font-size: 0.92rem;
		font-weight: 500;
		padding: 0.55rem 1.25rem 0.55rem 1rem;
		border-radius: 999px;
		text-decoration: none;
		border: none;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		box-shadow: 0 8px 22px -12px rgba(125, 58, 48, 0.5);
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
			background 0.3s ease,
			box-shadow 0.3s ease;
	}
	.contact-btn:hover {
		background: #8a4238;
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 14px 32px -12px rgba(125, 58, 48, 0.65);
	}
	.contact-btn svg {
		width: 17px;
		height: 17px;
		flex-shrink: 0;
	}

	/* MOBILE HAMBURGER (portrait ≤ 640px only) */
	.nav-toggle {
		display: none;
		background: transparent;
		border: none;
		padding: 0.35rem 0.5rem;
		margin-right: 0.35rem;
		cursor: pointer;
		color: var(--charcoal);
		border-radius: 4px;
		transition: background 0.2s ease;
	}
	.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(31, 42, 46, 0.06); outline: none; }
	.nav-toggle svg { width: 22px; height: 22px; display: block; }
	.top-right-group { display: inline-flex; align-items: center; }

	/* LANGUAGE SWITCHER (EN | FR) · text-only per ratified decision */
	.lang-switcher-top {
		display: inline-flex;
		align-items: baseline;
		gap: 0.4rem;
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		margin-right: 1.1rem;
	}
	.lang-switcher-top .lang-toggle {
		color: #8b8579;
		text-decoration: none;
		padding: 0.1rem 0.15rem;
	}
	.lang-switcher-top .lang-toggle:hover {
		color: var(--amber-deep);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.lang-switcher-top .lang-toggle[aria-current='page'] {
		color: var(--amber-deep);
		font-weight: 700;
		text-decoration: none;
	}
	.lang-switcher-top .lang-sep { color: #c9c2b4; }
	footer.site .site-address {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		letter-spacing: 0.06em;
		color: rgba(31, 42, 46, 0.72);
		margin: 1.5rem 0 0.75rem 0;
	}
	footer.site .site-copyright {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.68rem;
		letter-spacing: 0.10em;
		color: rgba(31, 42, 46, 0.7);
		margin: 0;
	}
	footer.site .lang-note {
		margin: 1.75rem auto 0 auto;
		max-width: 720px;
		font-family: 'Source Serif 4', serif;
		font-size: 0.85rem;
		color: rgba(31, 42, 46, 0.75);
		line-height: 1.6;
	}
	footer.site .lang-note a {
		color: var(--rust-deep);
		text-decoration: none;
		border-bottom: 1px solid rgba(125, 58, 48, 0.35);
	}

	/* MOBILE DRAWER */
	.nav-drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 78%;
		max-width: 320px;
		background: var(--warm-white);
		box-shadow: -20px 0 60px -20px rgba(31, 42, 46, 0.35);
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
		z-index: 200;
		padding: 5rem 2rem 2rem 2rem;
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}
	.nav-drawer.open { transform: translateX(0); }
	.nav-drawer a {
		font-family: 'Source Serif 4', serif;
		font-size: 1.15rem;
		color: var(--charcoal);
		text-decoration: none;
		padding: 0.9rem 0;
		border-bottom: 1px solid var(--divider-soft);
		transition: color 0.2s ease, padding-left 0.25s ease;
	}
	.nav-drawer a:hover, .nav-drawer a:focus-visible { color: var(--amber-deep); padding-left: 0.35rem; outline: none; }
	.nav-drawer a:last-of-type { border-bottom: none; }
	.nav-drawer .drawer-close {
		position: absolute;
		top: 1.1rem;
		right: 1.25rem;
		background: transparent;
		border: none;
		padding: 0.5rem;
		cursor: pointer;
		color: var(--charcoal);
		border-radius: 999px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.2s ease, transform 0.2s ease;
	}
	.nav-drawer .drawer-close:hover { background: rgba(31, 42, 46, 0.08); transform: rotate(90deg); }
	.nav-drawer .drawer-close svg { width: 22px; height: 22px; display: block; }
	.nav-drawer .drawer-contact {
		margin-top: 1.4rem;
		background: var(--rust-deep);
		color: var(--warm-white);
		border: none;
		text-align: center;
		padding: 0.85rem 1rem;
		border-radius: 999px;
		font-family: 'Source Serif 4', serif;
		font-size: 1rem;
		font-weight: 500;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}
	.nav-drawer .drawer-contact:hover { padding-left: 1rem; color: var(--warm-white); }
	.nav-drawer .drawer-contact svg { width: 17px; height: 17px; }
	.nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(31, 42, 46, 0.5);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease;
		z-index: 150;
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
	.nav-backdrop.open { opacity: 1; pointer-events: auto; }
	body.drawer-open { overflow: hidden; }

	/* HERO */
	.hero {
		max-width: 940px;
		margin: 0 auto;
		padding: 8rem 2rem 2.5rem 2rem;
	}
	.hero .eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--amber-deep);
		margin-bottom: 2.25rem;
	}
	.hero h1 {
		font-family: 'Source Serif 4', serif;
		font-weight: 400;
		font-size: 3.6rem;
		line-height: 1.05;
		letter-spacing: -0.025em;
		color: var(--charcoal);
		margin-bottom: 2.5rem;
	}
	.hero h1 em {
		font-style: italic;
		color: var(--amber-deep);
	}
	.hero .motto {
		font-family: 'Source Serif 4', serif;
		font-style: italic;
		font-size: 1.2rem;
		color: var(--charcoal-soft);
		margin-bottom: 2.75rem;
	}
	.hero .dek {
		font-family: 'Source Serif 4', serif;
		font-size: 1.05rem;
		line-height: 1.65;
		color: var(--charcoal);
		max-width: 640px;
	}

	/* v4 HERO VISUAL WRAP · iPad horizontal mockup that dominates the
	   viewport width-wise. Kept OUTSIDE the .hero (940px) container
	   so the mockup can breathe up to 1400px on wide screens.
	   Rationale: a vertical iPhone in a 940px column stays visually
	   small; a horizontal iPad at 1400px "saute aux yeux" (per direction). */
	.hero-visual-wrap {
		width: 100%;
		padding: 0 2rem 5rem 2rem;
		display: flex;
		justify-content: center;
	}
	.hero-visual {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
	}
	.hero-visual picture {
		display: block;
		width: 100%;
		max-width: 1400px;
	}
	.hero-visual img {
		display: block;
		width: 100%;
		height: auto;
		filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.16));
	}
	.hero-caption {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		letter-spacing: 0.14em;
		color: var(--muted);
		text-transform: uppercase;
		text-align: center;
		margin: 0;
	}
	.hero-caption .caption-highlight {
		color: var(--amber-deep);
	}

	/* v5 (2026-07-16): Hero terminal caption. Sits below the CICE terminal card.
	   Same monospace institutional signature as .hero-caption, kept as a separate
	   class so v5 changes stay isolated and rollback-friendly. */
	.hero-caption-terminal {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		letter-spacing: 0.14em;
		color: var(--muted);
		text-transform: uppercase;
		text-align: center;
		margin-top: 1.25rem;
	}
	.hero-caption-terminal .caption-highlight {
		color: var(--amber-deep);
	}
	@media (max-width: 640px) {
		.hero-caption-terminal { font-size: 0.62rem; letter-spacing: 0.12em; }
	}

	/* v6 (2026-07-16): Hero workflow split. Terminal (process) on the left,
	   arrow, then client notification card (delivery) on the right. Linear-style
	   dual-panel layout so the reader sees the machinery AND the output in
	   one glance. Kept as isolated classes so the v6 addition can be rolled
	   back independently of v5 by removing .hero-workflow* rules and the
	   associated markup below the CICE terminal hero. */
	.hero-workflow-wrap {
		width: 100%;
		padding: 0 clamp(1.5rem, 4vw, 4rem) 3rem clamp(1.5rem, 4vw, 4rem);
		display: flex;
		justify-content: center;
	}
	.hero-workflow {
		display: grid;
		grid-template-columns: 1.6fr 0.15fr 1fr;
		gap: clamp(1rem, 2vw, 2rem);
		align-items: center;
		width: 100%;
		max-width: 1680px;
		margin: 0 auto;
	}
	.workflow-terminal,
	.workflow-notification {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: stretch;
		min-width: 0;
	}
	.workflow-arrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: clamp(1.75rem, 3vw, 3rem);
		color: #999;
		text-align: center;
		line-height: 1;
	}
	.workflow-label {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		color: var(--muted);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-align: center;
	}
	.workflow-label .workflow-label-num {
		color: var(--amber-deep);
		margin-right: 0.5rem;
	}
	@media (max-width: 900px) {
		.hero-workflow {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}
		.workflow-arrow {
			transform: rotate(90deg);
			font-size: 2rem;
		}
	}

	/* v6 comparison block: dark theme shown below the workflow split so
	   Sebastien can compare warm-white (in-workflow) vs dark (comparison).
	   Marked temporary; remove this block plus the associated markup once
	   Sebastien picks the definitive variant. */
	.hero-terminal-compare {
		width: 100%;
		max-width: 1200px;
		margin: 2.5rem auto 4rem auto;
		padding: 0 clamp(1.5rem, 4vw, 4rem);
	}
	.hero-terminal-compare-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.68rem;
		letter-spacing: 0.14em;
		color: var(--muted);
		text-align: center;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}
	.hero-terminal-compare-eyebrow .compare-highlight {
		color: var(--amber-deep);
	}

	/* v7 (2026-07-16): Linear-style floating overlay layout. Terminal is the
	   dominant fullwidth surface; a compact client notification card floats
	   over the top-right corner via absolute positioning. On narrow viewports
	   (<= 900px) the overlay collapses to a stacked block under the terminal
	   so nothing is cut off. Rollback to v6: comment the v7 markup blocks in
	   the body and un-comment the v6 blocks above them (the v6 CSS above is
	   retained for zero-diff rollback). */
	.hero-workflow-v7-wrap {
		width: 100%;
		padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 3rem clamp(1.5rem, 4vw, 4rem);
		display: flex;
		justify-content: center;
	}
	.hero-workflow-v7-wrap--compare {
		padding-top: 1.5rem;
		padding-bottom: 5rem;
	}
	.hero-workflow-v7 {
		max-width: 1400px;
		width: 100%;
		margin: 0 auto;
	}
	.hero-workflow-v7-compare-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.68rem;
		letter-spacing: 0.14em;
		color: var(--muted);
		text-align: center;
		margin-bottom: 1.25rem;
		text-transform: uppercase;
	}
	.hero-workflow-v7-compare-eyebrow .compare-highlight {
		color: var(--amber-deep);
	}
	.workflow-frame {
		position: relative;
		width: 100%;
	}
	/* v9 (2026-07-16): overlay ANCHORED to the terminal (flush bottom-right
	   with a tight inner margin) so the notification reads as "part of the
	   terminal" rather than a floating external card. The heavy drop-shadow
	   is removed for the same reason (the terminal already carries its own
	   shadow). Slide-in is now driven by the "terminal:typing-complete" event
	   dispatched by CiceTerminalVisual, replacing the fragile fixed-delay
	   animation. The .is-visible class is toggled by the script at the bottom
	   of this file. Palette and border-radius overrides on .client-notif
	   below make the card share the terminal's warm-white surface. */
	.notification-overlay {
		position: absolute;
		bottom: 16px;
		/* v10 (2026-07-16): right 16px -> 0 per Sebastien "son flanc droit
		   soit pile sur le flanc droit de l'ecran de Cice". Card right edge
		   is now flush with terminal right edge. Border-radius kept at 12px
		   on all four corners for softer institutional feel even when flush. */
		right: 0;
		z-index: 10;
		width: 40%;
		min-width: 460px;
		max-width: 560px;
		opacity: 0;
		transform: translate(20px, 20px);
		transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}
	.notification-overlay.is-visible {
		opacity: 1;
		transform: translate(0, 0);
	}
	.notification-overlay .client-notif {
		max-width: 100%;
		/* Palette matches the CICE terminal light variant exactly (bg #F7F5F0).
		   v10 (2026-07-16): border darkened #E8E4DD -> #C7BEB0 and a subtle
		   1px outline shadow added per Sebastien "le contour du pop up qui soit
		   un peu plus prononce que l'on voit mieux la demarcation". Kept 1px
		   width + outline shadow (softer/institutional) over a heavier 1.5px
		   border. Border-radius stays 12px on all four corners (INCERTAIN:
		   Sebastien may prefer flush right corners squared, default reco 12px
		   for softer feel). */
		background: #F7F5F0;
		border: 1px solid #C7BEB0;
		border-radius: 12px;
		box-shadow: 0 0 0 1px rgba(31, 42, 46, 0.05);
	}
	.workflow-caption {
		text-align: center;
		margin-top: 1.75rem;
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		color: var(--muted);
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}
	.workflow-caption .caption-highlight {
		color: var(--amber-deep);
	}
	@media (max-width: 1180px) {
		.notification-overlay {
			bottom: 12px;
			/* v10 (2026-07-16): flush right at all viewport widths >= 900px so
			   the card's right edge lines up with the terminal's right edge. */
			right: 0;
			width: 45%;
			min-width: 400px;
		}
	}
	@media (max-width: 900px) {
		.hero-workflow-v7-wrap {
			padding-top: 1.5rem;
		}
		.notification-overlay {
			position: static;
			width: 100%;
			min-width: 0;
			max-width: 100%;
			margin-top: 2rem;
			transform: none;
		}
		.notification-overlay.is-visible {
			transform: none;
		}
	}
	@media (max-width: 640px) {
		.workflow-caption { font-size: 0.62rem; letter-spacing: 0.12em; }
		.hero-workflow-v7-compare-eyebrow { font-size: 0.6rem; }
	}
	@media (prefers-reduced-motion: reduce) {
		.notification-overlay {
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
		}
	}

	/* HERO VITRINE (Silver, M4 pre-approved). SVG-adjacent CSS-only artifact.
	   Verdict-form vitrine metaphor: 3 cascade cards. Front = R-01 reference
	   CALIBRATED (illustrative default per spec H2). Mid, back = pending
	   placeholders. Idle oscillation respects prefers-reduced-motion. */
	.hero-vitrine {
		margin: 4rem auto 0;
		max-width: 720px;
		perspective: 1600px;
	}
	.vitrine-stack {
		position: relative;
		height: 440px;
		transform-style: preserve-3d;
		animation: vitrine-float 14s ease-in-out infinite;
	}
	.verdict-card {
		position: absolute;
		left: 50%;
		top: 0;
		width: 480px;
		max-width: calc(100% - 2rem);
		background: linear-gradient(180deg, var(--warm-white) 0%, var(--cream) 100%);
		border: 1px solid var(--divider);
		border-radius: 4px;
		box-shadow:
			0 2px 6px rgba(31, 42, 46, 0.05),
			0 12px 32px rgba(31, 42, 46, 0.08),
			0 24px 60px rgba(31, 42, 46, 0.06);
		transform-origin: 50% 100%;
		transition:
			transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.35s ease;
		text-decoration: none;
		color: inherit;
		display: block;
	}
	.verdict-card:focus-visible {
		outline: 2px solid var(--amber);
		outline-offset: 4px;
	}
	/* Back card: farthest, dimmest, smallest offset in Z */
	.verdict-card--back {
		transform: translate(-50%, -24px) translateZ(-90px) rotateX(2deg);
		opacity: 0.55;
		width: 420px;
		padding: 1.1rem 1.4rem;
		z-index: 1;
	}
	/* Mid card: intermediate */
	.verdict-card--mid {
		transform: translate(-50%, -12px) translateZ(-45px) rotateX(1deg);
		opacity: 0.78;
		width: 450px;
		padding: 1.1rem 1.4rem;
		z-index: 2;
	}
	/* Front card: full detail, no offset */
	.verdict-card--front {
		transform: translate(-50%, 0) translateZ(0);
		z-index: 3;
	}
	/* Hover on the stack spreads the cascade so mid and back become legible. */
	.vitrine-stack:hover .verdict-card--back {
		transform: translate(calc(-50% + 220px), -8px) translateZ(-30px) rotateX(0deg);
		opacity: 0.95;
	}
	.vitrine-stack:hover .verdict-card--mid {
		transform: translate(calc(-50% - 220px), -4px) translateZ(-15px) rotateX(0deg);
		opacity: 1;
	}
	.vitrine-stack:hover .verdict-card--front {
		transform: translate(-50%, 4px) translateZ(20px);
	}
	.vitrine-stack:hover {
		animation-play-state: paused;
	}
	.verdict-card--back:focus-visible,
	.verdict-card--mid:focus-visible {
		opacity: 1;
	}

	/* FRONT CARD content: verdict-form miniature */
	.verdict-card--front {
		padding: 1.5rem 1.75rem 1.35rem 1.75rem;
	}
	.vc-header {
		display: flex;
		align-items: flex-start;
		gap: 0.9rem;
		border-bottom: 1px solid var(--divider);
		padding-bottom: 0.85rem;
		margin-bottom: 0.9rem;
	}
	.vc-seal {
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--cream-deep);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.vc-seal img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		opacity: 0.85;
		border-radius: 0;
	}
	.vc-header-meta {
		flex: 1 1 auto;
		min-width: 0;
	}
	.vc-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.62rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 0.25rem;
	}
	.vc-subject {
		font-family: 'Source Serif 4', serif;
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--charcoal);
		line-height: 1.25;
	}
	.vc-verdict-band {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.75rem;
		margin-bottom: 1rem;
	}
	.vc-verdict-pill {
		display: inline-block;
		font-family: 'Source Serif 4', serif;
		font-size: 1.05rem;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		padding: 0.35rem 0.75rem;
		border-radius: 2px;
	}
	.vc-verdict-pill--pass {
		background: rgba(74, 122, 84, 0.1);
		color: var(--pass-deep);
		border-left: 2px solid var(--pass-tone);
	}
	.vc-verdict-pill--refuse {
		background: rgba(160, 74, 61, 0.1);
		color: var(--rust-deep);
		border-left: 2px solid var(--rust);
	}
	.vc-verdict-pill--pending {
		background: rgba(196, 183, 162, 0.18);
		color: var(--taupe-darker);
		border-left: 2px solid var(--taupe-deep);
	}
	.vc-doctrine {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.68rem;
		color: var(--muted);
		letter-spacing: 0.06em;
	}
	.vc-gates {
		list-style: none;
		margin: 0 0 0.9rem 0;
		padding: 0;
	}
	.vc-gates li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.4rem 0;
		border-bottom: 1px solid var(--divider-soft);
		font-family: 'Source Serif 4', serif;
		font-size: 0.82rem;
		color: var(--charcoal-soft);
	}
	.vc-gates li:last-child { border-bottom: none; }
	.vc-gate-name { flex: 1 1 auto; }
	.vc-gate-mark {
		flex: 0 0 auto;
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.66rem;
		letter-spacing: 0.12em;
		padding: 0.15rem 0.45rem;
		border-radius: 2px;
	}
	.vc-gate-mark--pass {
		color: var(--pass-deep);
		background: rgba(74, 122, 84, 0.08);
	}
	.vc-footer {
		border-top: 1px solid var(--divider);
		padding-top: 0.7rem;
	}
	.vc-footer-line {
		font-family: 'Source Serif 4', serif;
		font-style: italic;
		font-size: 0.72rem;
		color: var(--muted);
		letter-spacing: 0.04em;
	}

	/* MID / BACK card content (minimal, revealed on hover) */
	.vc-mini {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.75rem;
	}
	.vc-mini-id {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.68rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.vc-mini-verdict {
		font-family: 'Source Serif 4', serif;
		font-size: 0.78rem;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.vc-mini-verdict--refuse { color: var(--rust-deep); }
	.vc-mini-verdict--pending { color: var(--taupe-darker); }
	.vc-mini-subject {
		display: block;
		margin-top: 0.35rem;
		font-family: 'Source Serif 4', serif;
		font-size: 0.78rem;
		color: var(--charcoal-soft);
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		transition: opacity 0.4s ease, max-height 0.4s ease;
	}
	.vitrine-stack:hover .vc-mini-subject,
	.verdict-card--mid:focus-visible .vc-mini-subject,
	.verdict-card--back:focus-visible .vc-mini-subject {
		opacity: 1;
		max-height: 3rem;
	}

	.vitrine-caption {
		margin-top: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		color: var(--muted);
	}
	.vitrine-cta {
		color: var(--amber-deep);
		text-decoration: none;
		transition: color 0.25s ease;
	}
	.vitrine-cta:hover { color: var(--rust-deep); }

	@keyframes vitrine-float {
		0%, 100% { transform: rotateY(-3deg) rotateX(1deg); }
		50%      { transform: rotateY(3deg)  rotateX(-1deg); }
	}
	@media (prefers-reduced-motion: reduce) {
		.vitrine-stack { animation: none; }
		.verdict-card { transition: none; }
	}

	/* SECTION FRAMES
	   Layout fix 2026-07-17 (Sebastien MEASURED report, evening 2026-07-16):
	   Container widened 1240 -> 1400 to align with .hero-visual, and lede
	   widened 640 -> 1100 to remove the right-side empty band flagged on
	   #numbers and #quadrant screenshots. Title-to-body gap now scales via
	   clamp() so it feels intentional on wide screens instead of glued.
	   A consecutive-lede rule adds vertical rhythm when two paragraphs
	   stack (see #quadrant). Rollback: restore 1240 / 640 / 2.75rem. */
	.section-wrap {
		width: 100%;
		padding: 6rem 2rem;
	}
	.section-wrap.cream { background: var(--cream); }
	.section-inner {
		max-width: 1400px;
		margin: 0 auto;
	}
	.section-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--amber-deep);
		margin-bottom: 2.25rem;
	}
	body.composite-page .section-title {
		font-family: 'Source Serif 4', serif;
		font-size: 2.75rem;
		font-weight: 400;
		line-height: 1.08;
		letter-spacing: -0.02em;
		color: var(--charcoal);
		margin-bottom: 1.5rem;
	}
	.section-title em {
		font-style: italic;
		color: var(--amber-deep);
	}
	.section-lede {
		font-family: 'Source Serif 4', serif;
		font-size: 1.05rem;
		line-height: 1.65;
		color: var(--charcoal);
		max-width: 1100px;
		margin-top: 0;
		margin-bottom: 2.25rem;
	}
	.section-lede + .section-lede {
		margin-top: 0;
	}
	.section-lede:last-of-type {
		margin-bottom: 3rem;
	}

	/* JUSTIFIED BODY TEXT (Sebastien preference) */
	.hero .dek,
	.section-lede,
	.stat .desc,
	.feature p.dek,
	.sidebar-item p,
	.level-desc,
	.pending-block .text-sub {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	@media (max-width: 480px) {
		.hero .dek,
		.section-lede,
		.stat .desc,
		.feature p.dek,
		.sidebar-item p,
		.level-desc,
		.pending-block .text-sub {
			text-align: left;
		}
	}

	/* NUMBERS · STATS GRID */
	.stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}
	@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
	@media (max-width: 500px) { .stats { grid-template-columns: 1fr; } }
	.stat {
		background: transparent;
		border: 1px solid var(--divider);
		border-radius: 4px;
		padding: 2.5rem 1.75rem 1.75rem 1.75rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		min-height: 320px;
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
	}
	.stat.in-view { opacity: 1; transform: translateY(0); }
	.stat:hover {
		transform: translateY(-6px) scale(1.02);
		border-color: var(--amber-soft);
		box-shadow: 0 20px 40px -20px rgba(31, 42, 46, 0.22),
			0 0 0 1px rgba(197, 137, 64, 0.15);
		background: rgba(197, 137, 64, 0.03);
	}
	.stat .headline, .stat .desc { transition: color 0.3s ease; }
	.stat:hover .headline { color: var(--amber-deep); }
	.stat .number {
		font-family: 'Source Serif 4', serif;
		font-size: 4rem;
		font-weight: 400;
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--amber-deep);
		font-variant-numeric: tabular-nums;
		transition: color 0.3s ease;
	}
	.stat:hover .number { color: var(--amber); }
	.stat .headline {
		font-family: 'Source Serif 4', serif;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.35;
		color: var(--charcoal);
		margin-top: 0.5rem;
	}
	.stat .desc {
		font-family: 'Source Serif 4', serif;
		font-size: 0.92rem;
		line-height: 1.55;
		color: #4a5559;
		flex: 1;
	}
	.stat .source {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.7rem;
		color: var(--muted);
		letter-spacing: 0.02em;
		padding-top: 1rem;
		border-top: 1px solid var(--divider);
	}
	.stat .source em {
		font-family: 'Source Serif 4', serif;
		font-style: italic;
		font-size: 0.85rem;
		color: var(--charcoal);
		display: block;
		margin-bottom: 0.2rem;
	}

	/* DIPTYCH · VERDICT CARDS */
	.diptych {
		max-width: 1400px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	@media (max-width: 1180px) {
		.diptych { grid-template-columns: 1fr; gap: 5rem; max-width: 700px; }
	}
	.stage { position: relative; }
	.stage-link {
		display: block;
		text-decoration: none;
		color: inherit;
		cursor: pointer;
		border-radius: 12px;
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.stage-link .window {
		transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.stage-link:hover { transform: translateY(-6px); }
	.stage-link.left:hover .window {
		box-shadow: 0 26px 60px -18px rgba(160, 74, 61, 0.35),
			0 0 0 1px rgba(160, 74, 61, 0.18);
	}
	.stage-link.right:hover .window {
		box-shadow: 0 26px 60px -18px rgba(74, 122, 84, 0.32),
			0 0 0 1px rgba(74, 122, 84, 0.18);
	}
	.stage-link:focus-visible {
		outline: 2px solid var(--rust);
		outline-offset: 6px;
	}
	/* CTA hint under each verdict card (discoverability : cards are clickable) */
	.cta-hint {
		margin-top: 0.85rem;
		padding: 0.7rem 1.1rem 0.55rem 1.1rem;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		text-align: center;
		font-size: 0.82rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		transition: color 0.3s ease, letter-spacing 0.3s ease;
	}
	.cta-hint--rust { color: var(--rust-deep); }
	.cta-hint--green { color: var(--pass-deep); }
	.cta-arrow {
		display: inline-block;
		margin-left: 0.25rem;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.stage-link:hover .cta-hint { letter-spacing: 0.04em; }
	.stage-link:hover .cta-arrow { transform: translateX(4px); }
	.seal-img {
		position: absolute;
		width: 320px;
		height: 320px;
		top: 50%;
		z-index: 0;
		pointer-events: none;
		object-fit: contain;
		opacity: 0.68;
		transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
	}
	.stage.left .seal-img {
		left: -150px;
		transform: translateY(-50%) rotate(-8deg);
		filter: drop-shadow(0 10px 22px rgba(160, 74, 61, 0.20));
	}
	.stage.right .seal-img {
		right: -150px;
		transform: translateY(-50%) rotate(8deg);
		filter: drop-shadow(0 10px 22px rgba(74, 122, 84, 0.20));
	}
	.stage.left:hover .seal-img {
		opacity: 0.82;
		transform: translateY(-50%) rotate(-4deg) scale(1.04);
	}
	.stage.right:hover .seal-img {
		opacity: 0.82;
		transform: translateY(-50%) rotate(4deg) scale(1.04);
	}
	@media (max-width: 1180px) {
		.stage.left .seal-img, .stage.right .seal-img {
			left: auto; right: -100px;
			width: 240px; height: 240px;
		}
	}

	.window {
		position: relative;
		z-index: 1;
		background: var(--white);
		border-radius: 6px;
		box-shadow:
			0 30px 60px -25px rgba(31, 42, 46, 0.18),
			0 8px 18px -10px rgba(31, 42, 46, 0.08),
			0 0 0 1px rgba(31, 42, 46, 0.06);
		overflow: hidden;
	}
	.chrome {
		height: 30px;
		background: var(--chrome);
		border-bottom: 1px solid var(--chrome-line);
		display: flex;
		align-items: center;
		padding: 0 0.8rem;
		gap: 0.75rem;
	}
	.traffic { display: flex; gap: 0.35rem; }
	.traffic i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; display: block; }
	.traffic i:nth-child(2) { background: #febc2e; }
	.traffic i:nth-child(3) { background: #28c840; }
	.chrome-label {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.62rem;
		color: #6a625a;
		letter-spacing: 0.05em;
	}
	.chrome-label .dim { color: #a29a8f; }

	.card-body {
		display: grid;
		grid-template-columns: 210px 1px 1fr;
		gap: 1.4rem;
		padding: 1.35rem 1.5rem;
		background: var(--white);
	}
	.summary { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
	.card-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.58rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		margin-bottom: 0.45rem;
	}
	.card-eyebrow.rust { color: var(--rust); }
	.card-eyebrow.pass { color: var(--pass-tone); }
	.card-eyebrow.pending { color: var(--amber-deep); }
	.verdict-title {
		font-family: 'Source Serif 4', serif;
		font-size: 1.45rem;
		font-weight: 500;
		line-height: 1.02;
		letter-spacing: -0.015em;
		margin-bottom: 0.35rem;
	}
	.verdict-title.fail { color: var(--rust); }
	.verdict-title.pass { color: var(--pass-tone); }
	.verdict-title.pending { color: var(--amber-deep); }
	.subtitle-card {
		font-family: 'Source Serif 4', serif;
		font-size: 0.82rem;
		color: var(--muted);
		font-style: italic;
		line-height: 1.35;
		margin-bottom: 0.9rem;
	}
	.meta-list {
		display: grid;
		grid-template-columns: 4.2rem 1fr;
		gap: 0.28rem 0.5rem;
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.58rem;
		color: var(--muted);
	}
	.meta-list dt { letter-spacing: 0.06em; text-transform: uppercase; }
	.meta-list dd { color: var(--charcoal); }
	.summary-footer { display: flex; flex-direction: column; gap: 0.4rem; }
	.mtl-tag {
		display: inline-block;
		align-self: flex-start;
		padding: 0.25rem 0.5rem;
		border: 1.5px solid var(--amber);
		color: var(--amber-deep);
		border-radius: 3px;
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.58rem;
		font-weight: 500;
		letter-spacing: 0.08em;
	}
	.mtl-tag.rust { border-color: var(--rust); color: var(--rust); }
	.mtl-tag.pass { border-color: var(--pass-tone); color: var(--pass-tone); }
	.mtl-tag.pending { border-color: var(--amber-deep); color: var(--amber-deep); }
	.mtl-context {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.55rem;
		color: var(--muted);
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}
	.audit-line {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.55rem;
		color: var(--muted);
	}
	.audit-line .hash { color: var(--amber-deep); }
	.vdivider { width: 1px; background: var(--divider); }
	.gates { display: flex; flex-direction: column; padding-left: 0.75rem; padding-right: 0.25rem; }
	.gate {
		display: grid;
		grid-template-columns: 1.5rem 1fr auto;
		align-items: center;
		gap: 0.65rem;
		padding: 0.5rem 0;
		border-bottom: 1px solid rgba(232, 226, 212, 0.6);
	}
	.gate:first-child { padding-top: 0; }
	.gate:last-child { border-bottom: 0; }
	.gate-num {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.58rem;
		letter-spacing: 0.1em;
		color: var(--amber-deep);
	}
	.gate-mid { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
	.gate-name {
		font-family: 'Source Serif 4', serif;
		font-size: 0.85rem;
		color: var(--charcoal);
		font-weight: 500;
		line-height: 1.15;
	}
	.gate-value {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.62rem;
		color: var(--muted);
		white-space: nowrap;
	}
	.gate-value .neg { color: var(--rust); font-weight: 500; }
	.gate-value .pos { color: var(--pass-tone); font-weight: 500; }
	.gate-value .pending-val { color: var(--amber-deep); font-weight: 500; }
	.status-mark { display: flex; align-items: center; justify-content: center; margin-left: 0.5rem; }
	.tag {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.55rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		padding: 0.24rem 0.5rem;
		border-radius: 3px;
		white-space: nowrap;
	}
	.tag.fail {
		color: var(--rust);
		background: rgba(160, 74, 61, 0.09);
		border: 1px solid rgba(160, 74, 61, 0.28);
	}
	.tag.approved {
		color: var(--pass-tone);
		background: rgba(74, 122, 84, 0.10);
		border: 1px solid rgba(74, 122, 84, 0.30);
	}
	.tag.pending {
		color: var(--amber-deep);
		background: rgba(162, 110, 46, 0.10);
		border: 1px solid rgba(162, 110, 46, 0.32);
	}
	.gate:hover .tag.fail {
		background: rgba(160, 74, 61, 0.14);
		border-color: rgba(160, 74, 61, 0.45);
	}
	.gate:hover .tag.approved {
		background: rgba(74, 122, 84, 0.16);
		border-color: rgba(74, 122, 84, 0.5);
	}
	.gate:hover .tag.pending {
		background: rgba(162, 110, 46, 0.16);
		border-color: rgba(162, 110, 46, 0.5);
	}

	/* PENDING CARD · uses amber-deep, no seal watermark yet */
	.pending-block {
		max-width: 940px;
		margin: 4rem auto 0 auto;
		border: 1px solid rgba(162, 110, 46, 0.28);
		background: rgba(162, 110, 46, 0.04);
		border-radius: 6px;
		padding: 1.75rem 2rem;
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 1.5rem;
		align-items: center;
	}
	.pending-block .icon {
		width: 44px; height: 44px;
		border: 1.5px solid var(--amber-deep);
		border-radius: 50%;
		display: grid; place-items: center;
		color: var(--amber-deep);
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		letter-spacing: 0.06em;
	}
	.pending-block .text {
		display: flex; flex-direction: column; gap: 0.2rem;
	}
	.pending-block .text-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.6rem;
		letter-spacing: 0.14em;
		color: var(--amber-deep);
		text-transform: uppercase;
	}
	.pending-block .text-line {
		font-family: 'Source Serif 4', serif;
		font-size: 0.98rem;
		color: var(--charcoal);
		font-weight: 500;
	}
	.pending-block .text-sub {
		font-family: 'Source Serif 4', serif;
		font-style: italic;
		font-size: 0.85rem;
		color: var(--muted);
	}

	/* MTL LADDER, unified with /methodology style */
	.ladder {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		max-width: 780px;
		margin: 0 auto;
	}
	@keyframes rise {
		from { opacity: 0; transform: translateY(16px); }
		to { opacity: 1; transform: translateY(0); }
	}
	.level {
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: 1.5rem;
		align-items: start;
		padding: 1.5rem 1.75rem 1.5rem 1.35rem;
		background: var(--warm-white);
		border: 1px solid var(--divider);
		border-left: 6px solid var(--muted);
		border-radius: 4px;
		cursor: pointer;
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.35s ease,
			border-color 0.25s ease;
	}
	.level.l1 { border-left-color: var(--muted); }
	.level.l2 { border-left-color: var(--amber); }
	.level.l3 { border-left-color: var(--amber-deep); }
	.level.l4 { border-left-color: var(--pass-tone); }
	.level.l5 { border-left-color: var(--pass-deep); }
	.level:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 34px -20px rgba(162, 110, 46, 0.35),
			0 4px 12px -6px rgba(31, 42, 46, 0.08);
	}
	.level.l1:hover { border-left-color: var(--charcoal-soft); }
	.level.l2:hover { border-left-color: var(--amber-deep); }
	.level.l3:hover { border-left-color: #8a5f2d; }
	.level.l4:hover { border-left-color: var(--pass-deep); }
	.level.l5:hover { border-left-color: #285032; }
	.level-num {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}
	.level-num .code {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.7rem;
		letter-spacing: 0.16em;
		color: var(--muted);
	}
	.level-num .digit {
		font-family: 'Source Serif 4', serif;
		font-size: 2rem;
		line-height: 1;
		font-weight: 400;
		color: var(--amber-deep);
	}
	.level-body { display: flex; flex-direction: column; gap: 0.4rem; }
	.level-name {
		font-family: 'Source Serif 4', serif;
		font-size: 1.2rem;
		font-weight: 500;
		color: var(--charcoal);
		letter-spacing: -0.005em;
	}
	.level-desc {
		font-family: 'Source Serif 4', serif;
		font-size: 0.95rem;
		line-height: 1.55;
		color: var(--charcoal-soft);
	}
	.level-context {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		color: var(--amber-deep);
		letter-spacing: 0.05em;
	}
	.level-context .sep { color: rgba(31, 42, 46, 0.2); margin: 0 0.4rem; }
	.level-context .allowed { color: var(--pass-tone); }
	.level-context .denied { color: var(--rust); }
	.l1 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
	.l2 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.20s both; }
	.l3 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
	.l4 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both; }
	.l5 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both; }

	/* NEWSROOM */
	.newsroom-grid {
		display: grid;
		grid-template-columns: 1.35fr 1fr;
		gap: 4rem;
		margin-top: 1.5rem;
	}
	@media (max-width: 900px) { .newsroom-grid { grid-template-columns: 1fr; } }
	.feature { cursor: pointer; }
	.feature .art {
		aspect-ratio: 3/2;
		background: var(--cream);
		border-radius: 6px;
		display: grid;
		place-items: center;
		margin-bottom: 1.5rem;
		overflow: hidden;
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
	}
	.feature .art svg { width: 55%; height: auto; }
	.feature:hover .art {
		transform: translateY(-3px);
		box-shadow: 0 20px 40px -20px rgba(31, 42, 46, 0.18);
	}

	/* newsroom SVG animation handled via SMIL directly in svg */
	.eyebrow-inline {
		font-family: 'Source Serif 4', serif;
		font-size: 0.9rem;
		color: var(--muted);
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 0.8rem;
		margin-bottom: 0.7rem;
	}
	.eyebrow-inline .date {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.8rem;
		letter-spacing: 0.02em;
	}
	.feature h3 {
		font-family: 'Source Serif 4', serif;
		font-size: 2.05rem;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: -0.01em;
		margin-bottom: 1.75rem;
		color: var(--charcoal);
		transition: color 0.3s ease;
	}
	.feature:hover h3 { color: var(--amber-deep); }
	.feature p.dek {
		font-family: 'Source Serif 4', serif;
		font-size: 1rem;
		line-height: 1.6;
		color: #3d474b;
	}
	.sidebar { display: flex; flex-direction: column; }
	.sidebar-item {
		padding: 1.6rem 0;
		border-bottom: 1px solid var(--divider-soft);
		cursor: pointer;
		position: relative;
	}
	.sidebar-item::before {
		content: '';
		position: absolute;
		left: -1.25rem;
		top: 1.6rem;
		bottom: 1.6rem;
		width: 1.5px;
		background: var(--rust);
		transform: scaleY(0);
		transform-origin: center top;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.sidebar-item:hover::before { transform: scaleY(1); }
	.sidebar-item:first-child { padding-top: 0; }
	.sidebar-item:first-child::before { top: 0; }
	.sidebar-item:last-child { border-bottom: 0; }
	.sidebar-item h4 {
		font-family: 'Source Serif 4', serif;
		font-size: 1.28rem;
		font-weight: 500;
		line-height: 1.2;
		margin: 0.5rem 0 0.6rem 0;
		letter-spacing: -0.005em;
		color: var(--charcoal);
		transition: color 0.25s ease;
	}
	.sidebar-item:hover h4 { color: var(--amber-deep); }
	.sidebar-item p {
		font-family: 'Source Serif 4', serif;
		font-size: 0.94rem;
		line-height: 1.55;
		color: #4a5559;
	}

	/* FOOTER */
	footer.site {
		background: var(--taupe-deep);
		color: var(--charcoal);
		padding: 5rem 2rem 3rem 2rem;
		text-align: center;
	}
	footer.site .devise {
		font-family: 'Source Serif 4', serif;
		font-style: italic;
		font-size: 1.35rem;
		line-height: 1.5;
		max-width: 720px;
		margin: 0 auto 2rem auto;
		color: var(--charcoal);
	}
	footer.site .attr {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.7rem;
		letter-spacing: 0.14em;
		color: rgba(31, 42, 46, 0.72);
		text-transform: uppercase;
	}
	footer.site .contact {
		margin-top: 2rem;
		font-family: 'Source Serif 4', serif;
		font-size: 1rem;
		color: var(--charcoal);
	}
	footer.site .contact a {
		color: var(--rust-deep);
		text-decoration: none;
		border-bottom: 1px solid transparent;
		transition: border-color 0.25s ease;
		font-weight: 500;
	}
	footer.site .contact a:hover { border-color: var(--rust-deep); }
	footer.site .site-social {
		display: flex;
		justify-content: center;
		gap: 1.5rem;
		margin: 2rem 0 1.5rem 0;
	}
	footer.site .site-social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		text-decoration: none;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.3s ease;
	}
	footer.site .site-social a.linkedin {
		background: #0A66C2;
		color: #ffffff;
	}
	footer.site .site-social a.x {
		background: #000000;
		color: #ffffff;
	}
	footer.site .site-social a:hover {
		transform: translateY(-3px) scale(1.06);
		box-shadow: 0 10px 22px -12px rgba(31, 42, 46, 0.35);
	}
	footer.site .site-social svg {
		width: 20px;
		height: 20px;
		display: block;
	}
	footer.site .site-social a.linkedin svg {
		width: 26px;
		height: 26px;
	}

	/* ==============================
	   MOBILE RESPONSIVE RULES
	   ============================== */

	/* Tablets and small laptops */
	@media (max-width: 900px) {
		header.top {
			padding: 0.9rem 1.25rem;
		}
		.brand img {
			height: 38px;
		}
		.nav-links {
			gap: 1rem;
			font-size: 0.82rem;
		}
		.hero {
			padding: 5rem 1.5rem 4rem 1.5rem;
		}
		.hero h1 {
			font-size: 2.4rem;
			line-height: 1.1;
		}
		.hero .dek {
			font-size: 1rem;
		}
		.hero-vitrine {
			margin-top: 3rem;
			max-width: 100%;
		}
		.vitrine-stack { height: 400px; }
		.verdict-card--front { width: 420px; }
		.verdict-card--mid { width: 400px; }
		.verdict-card--back { width: 380px; }
		.hero-visual-wrap { padding: 0 1.5rem 4rem 1.5rem; }
		.section-wrap {
			padding: 4rem 1.5rem;
		}
		.section-title {
			font-size: 2rem;
			margin-bottom: 2.25rem;
		}
		.section-lede {
			font-size: 1rem;
		}
		.section-eyebrow {
			margin-bottom: 1.85rem;
		}
	}

	/* Mobile phones */
	@media (max-width: 640px) {
		/* Header. hide section nav on mobile, keep logo + Contact */
		header.top {
			padding: 0.75rem 1rem;
		}
		.brand img {
			height: 34px;
		}
		.nav-links {
			display: none;
		}
		.nav-toggle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		.contact-btn {
			font-size: 0.82rem;
			padding: 0.5rem 1rem;
		}

		/* Hero */
		.hero {
			padding: 3rem 1.25rem 2.5rem 1.25rem;
		}
		.hero .eyebrow {
			font-size: 0.62rem;
			letter-spacing: 0.12em;
			margin-bottom: 2.5rem;
		}
		.hero h1 {
			font-size: 1.75rem;
			line-height: 1.15;
			letter-spacing: -0.015em;
			margin-bottom: 3rem;
		}
		.hero .motto {
			font-size: 1rem;
			margin-bottom: 3rem;
		}
		.hero .dek {
			font-size: 0.95rem;
			line-height: 1.55;
		}

		/* v4 Hero visual · mobile */
		.hero-visual-wrap { padding: 0 1rem 3rem 1rem; }
		.hero-caption { font-size: 0.62rem; letter-spacing: 0.12em; }

		/* Vitrine on mobile: reduce cascade offsets so cards stay in the viewport
		   and hover-fan becomes a small tap-friendly reveal. */
		.hero-vitrine { margin-top: 2.5rem; perspective: 1000px; }
		.vitrine-stack { height: 380px; animation: none; }
		.verdict-card--front { width: 100%; padding: 1.2rem 1.25rem 1rem 1.25rem; }
		.verdict-card--mid { width: 92%; padding: 0.9rem 1.1rem; }
		.verdict-card--back { width: 84%; padding: 0.9rem 1.1rem; opacity: 0.7; }
		.vitrine-stack:hover .verdict-card--back {
			transform: translate(calc(-50% + 90px), -6px) rotateX(0deg);
		}
		.vitrine-stack:hover .verdict-card--mid {
			transform: translate(calc(-50% - 90px), -3px) rotateX(0deg);
		}
		.vc-header { gap: 0.7rem; padding-bottom: 0.7rem; margin-bottom: 0.7rem; }
		.vc-seal { width: 34px; height: 34px; }
		.vc-subject { font-size: 0.88rem; }
		.vc-verdict-pill { font-size: 0.92rem; padding: 0.3rem 0.6rem; }
		.vc-gates li { font-size: 0.76rem; padding: 0.32rem 0; }

		/* Sections */
		.section-wrap {
			padding: 3rem 1.25rem;
		}
		.section-eyebrow {
			font-size: 0.62rem;
			letter-spacing: 0.12em;
			margin-bottom: 2.5rem;
		}
		.section-title {
			font-size: 1.65rem;
			line-height: 1.12;
			margin-bottom: 3rem;
		}
		.section-lede {
			font-size: 0.95rem;
			line-height: 1.55;
			margin-top: 1.5rem;
			margin-bottom: 2.5rem;
		}

		/* Stats. full width, less padding */
		.stat {
			min-height: auto;
			padding: 1.75rem 1.25rem 1.25rem 1.25rem;
			gap: 0.75rem;
		}
		.stat .number {
			font-size: 3rem;
		}
		.stat .headline {
			font-size: 0.95rem;
		}
		.stat .desc {
			font-size: 0.88rem;
		}

		/* Diptych. reduce seal size + card padding */
		.diptych {
			gap: 3rem;
			max-width: 100%;
		}
		.seal-img {
			width: 200px !important;
			height: 200px !important;
		}
		.stage.left .seal-img,
		.stage.right .seal-img {
			left: auto !important;
			right: -60px !important;
		}
		.card-body {
			grid-template-columns: 1fr;
			gap: 1rem;
			padding: 1.1rem 1.1rem;
		}
		.vdivider {
			width: auto;
			height: 1px;
		}
		.verdict-title {
			font-size: 1.3rem;
		}
		.pending-block {
			grid-template-columns: 1fr;
			gap: 0.9rem;
			padding: 1.35rem 1.25rem;
			text-align: left;
			margin: 3rem auto 0 auto;
		}
		.pending-block .icon {
			width: 36px;
			height: 36px;
		}

		/* MTL ladder */
		.ladder {
			gap: 0.6rem;
			max-width: 100%;
		}
		.level {
			grid-template-columns: 2.75rem 1fr;
			gap: 1rem;
			padding: 1rem 1rem 1rem 0.75rem;
		}
		.level-num .digit {
			font-size: 1.2rem;
		}
		.level-name {
			font-size: 0.98rem;
		}
		.level-desc {
			font-size: 0.85rem;
		}
		.level-context {
			font-size: 0.62rem;
		}

		/* Newsroom */
		.newsroom-grid {
			gap: 3rem;
		}
		.feature h3 {
			font-size: 1.55rem;
		}
		.feature p.dek {
			font-size: 0.95rem;
		}
		.sidebar-item {
			padding: 1.25rem 0;
		}
		.sidebar-item h4 {
			font-size: 1.1rem;
		}
		.sidebar-item p {
			font-size: 0.88rem;
		}
		.eyebrow-inline {
			font-size: 0.82rem;
		}
		.eyebrow-inline .date {
			font-size: 0.72rem;
		}

		/* Footer */
		footer.site {
			padding: 3rem 1.25rem 2rem 1.25rem;
		}
		footer.site .devise {
			font-size: 1.1rem;
			line-height: 1.45;
		}
		footer.site .attr {
			font-size: 0.62rem;
		}
	}

	/* Very small phones */
	@media (max-width: 400px) {
		.hero h1 {
			font-size: 1.55rem;
		}
		.section-title {
			font-size: 1.5rem;
		}
		.stat .number {
			font-size: 2.5rem;
		}
	}

	/* v13 (2026-07-17): Pedagogy diptych of physical devices. Two iPhones side
	   by side render where allocator-facing verdicts land: the rust device shows
	   the Slack channel #verdicts receiving a NOT-CALIBRATED verdict on Synapse
	   v0.3 posted by the @CalibrationJudge bot; the green device shows a
	   portfolio dashboard where Reference R-01 CALIBRATED is being monitored.
	   Positioned above #numbers so the reader sees "verdict delivery in the
	   real workflow" before reading the industry numbers. Kept as its own
	   .section-diptych class so it can be rolled back independently of the
	   existing #verdicts SVG diptych (which stays intact deeper on the page). */
	.section-diptych {
		padding: clamp(4rem, 8vw, 8rem) 0;
		background: var(--warm-white);
	}
	.section-diptych .diptych-inner {
		max-width: 2400px;
		margin: 0 auto;
		padding: 0 clamp(0.5rem, 2vw, 2rem);
	}
	.section-diptych .diptych-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.72rem;
		color: var(--amber-deep);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		display: block;
		margin-bottom: 1.5rem;
		text-align: center;
	}
	.section-diptych .diptych-title {
		font-family: 'Source Serif 4', serif;
		font-size: clamp(2rem, 4vw, 3rem);
		font-weight: 400;
		line-height: 1.08;
		letter-spacing: -0.02em;
		color: var(--charcoal);
		margin: 0 auto clamp(1.5rem, 3vw, 2rem) auto;
		text-align: center;
	}
	.section-diptych .diptych-title em {
		font-style: italic;
		color: var(--amber-deep);
	}
	.section-diptych .diptych-lede {
		font-family: 'Source Serif 4', serif;
		font-size: clamp(1rem, 1.5vw, 1.15rem);
		color: #4a5559;
		line-height: 1.65;
		max-width: 780px;
		margin: 0 auto clamp(3rem, 5vw, 5rem) auto;
		text-align: center;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.diptych-devices {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 0.6fr) auto minmax(0, 0.6fr) minmax(0, 2fr);
		gap: clamp(0.5rem, 1.5vw, 1.5rem);
		align-items: center;
		margin: 0 auto;
		max-width: 100%;
	}
	.diptych-device {
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		max-width: 100%;
	}
	.diptych-device picture,
	.diptych-device img {
		display: block;
		width: 100%;
		max-width: 900px;
		height: auto;
	}
	.diptych-device img {
		filter: drop-shadow(0 24px 48px rgba(31, 42, 46, 0.14));
		transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.diptych-device.device-not-calibrated img {
		filter: brightness(1.20) contrast(1.05) saturate(0.94) drop-shadow(0 24px 48px rgba(31, 42, 46, 0.14));
	}

	/* v14 (2026-07-17): subtle hover halo. Rust halo for the NOT-CALIBRATED
	   device, green halo for the CALIBRATED device. Small lift and scale
	   telegraphs interactivity without pulling focus from the surrounding
	   text. Fully respects prefers-reduced-motion. */
	.diptych-device.device-not-calibrated:hover img,
	.diptych-device.device-not-calibrated:focus-within img {
		filter: brightness(1.22) contrast(1.06) saturate(0.94)
		        drop-shadow(0 30px 60px rgba(125, 58, 48, 0.22))
		        drop-shadow(0 0 32px rgba(125, 58, 48, 0.28));
		transform: translateY(-6px) scale(1.015);
	}
	.diptych-device.device-right:hover img,
	.diptych-device.device-right:focus-within img {
		filter: drop-shadow(0 30px 60px rgba(74, 122, 84, 0.22))
		        drop-shadow(0 0 32px rgba(74, 122, 84, 0.28));
		transform: translateY(-6px) scale(1.015);
	}

	/* Gentle float-in-place pulse while hovered, adds the "bouge un peu" motion
	   Sebastien asked for. Runs only during the hover state. */
	@keyframes diptych-halo-float {
		0%, 100% { transform: translateY(-6px) scale(1.015); }
		50%       { transform: translateY(-9px) scale(1.020); }
	}
	.diptych-device:hover img,
	.diptych-device:focus-within img {
		animation: diptych-halo-float 3.2s ease-in-out 0.5s infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.diptych-device img {
			transition: none;
			animation: none !important;
		}
		.diptych-device:hover img,
		.diptych-device:focus-within img {
			transform: none;
			animation: none !important;
		}
	}

	/* v14 (2026-07-17): editorial explainers between the two devices.
	   Sebastien direction: iPhone left, explainer left right-aligned,
	   thin vertical divider centered, explainer right left-aligned,
	   iPhone right. Fills the empty middle space with pedagogical
	   content paired to each verdict. */
	.diptych-explainer {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 0.5rem 0;
	}
	.diptych-explainer.explainer-left {
		text-align: right;
	}
	.diptych-explainer.explainer-right {
		text-align: left;
	}
	.diptych-explainer .explainer-eyebrow {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.68rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		margin-bottom: 0.35rem;
	}
	.diptych-explainer.explainer-left .explainer-eyebrow {
		color: var(--rust-deep, #7d3a30);
	}
	.diptych-explainer.explainer-right .explainer-eyebrow {
		color: #4a7a54;
	}
	.diptych-explainer ul {
		list-style: none;
		padding: 0;
		margin: 0;
		font-family: 'Source Serif 4', serif;
		font-size: clamp(0.88rem, 1.05vw, 1rem);
		color: #3a4448;
		line-height: 1.6;
	}
	.diptych-explainer li {
		padding: 0.65rem 0;
		border-top: 1px solid rgba(31, 42, 46, 0.12);
	}
	.diptych-explainer li:first-child {
		border-top: none;
		padding-top: 0.25rem;
	}
	.diptych-divider {
		width: 1px;
		align-self: stretch;
		background: linear-gradient(
			to bottom,
			transparent 0%,
			rgba(31, 42, 46, 0.32) 15%,
			rgba(31, 42, 46, 0.32) 85%,
			transparent 100%
		);
		justify-self: center;
		min-height: 320px;
	}
	.diptych-device figcaption {
		margin-top: clamp(2.5rem, 5vw, 4rem);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 0 1rem;
	}
	.diptych-device .device-label {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.7rem;
		color: var(--muted);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	.diptych-device .device-verdict {
		font-family: 'Source Serif 4', serif;
		font-size: clamp(1.25rem, 2vw, 1.75rem);
		font-weight: 600;
		letter-spacing: 0.08em;
	}
	.diptych-device .device-verdict--rust {
		color: var(--rust-deep);
	}
	.diptych-device .device-verdict--green {
		color: var(--pass-tone);
	}
	.diptych-device .device-context {
		font-family: 'Source Serif 4', serif;
		font-size: 0.9rem;
		color: var(--muted);
		font-style: italic;
	}
	.section-diptych .diptych-footnote {
		font-family: 'Source Serif 4', serif;
		font-style: italic;
		font-size: 0.85rem;
		color: var(--muted);
		line-height: 1.6;
		max-width: 900px;
		margin: clamp(3rem, 5vw, 4rem) auto 0 auto;
		text-align: center;
	}
	.section-diptych .diptych-footnote a {
		color: var(--rust-deep);
		text-decoration: none;
		border-bottom: 1px solid rgba(125, 58, 48, 0.3);
		transition: border-color 0.25s ease;
	}
	.section-diptych .diptych-footnote a:hover {
		border-bottom-color: var(--rust-deep);
	}
	@media (max-width: 1100px) {
		.diptych-devices {
			display: flex;
			flex-direction: column;
			gap: clamp(2rem, 4vw, 4rem);
			max-width: 640px;
			margin: 0 auto;
		}
		.diptych-device.device-left {
			margin-right: 0;
		}
		.diptych-explainer.explainer-left,
		.diptych-explainer.explainer-right {
			text-align: left;
			padding: 0 clamp(1rem, 3vw, 2rem);
		}
		.diptych-divider {
			width: 100%;
			min-height: 1px;
			height: 1px;
			background: linear-gradient(
				to right,
				transparent 0%,
				rgba(31, 42, 46, 0.32) 15%,
				rgba(31, 42, 46, 0.32) 85%,
				transparent 100%
			);
			align-self: stretch;
		}
	}


	/* Uniform nav style · match Constitution reference · 2026-08-04 late-evening */
	.nav-links,
	.nav-links a,
	.internal-links,
	.internal-links a {
		font-family: 'Source Serif 4', Georgia, serif !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		font-size: 1rem !important;
	}
	.nav-links a,
	.internal-links a {
		font-weight: 500 !important;
		color: #1F2A2E !important;
	}
	.nav-links a.nav-current,
	.internal-links a.nav-current {
		color: #a26e2e !important;
	}
	/* Lang-switcher-top uniform · match Constitution reference */
	.lang-switcher-top,
	.lang-switcher-top a {
		font-family: 'JetBrains Mono', ui-monospace, monospace !important;
		font-size: 0.72rem !important;
		letter-spacing: 0.08em !important;
	}