/* ══════════════════════════════════════════════════════════
   Mediatasks — "The Standard"  (design pass 3)
   The homepage as a redlined specification document.
   Surfaces: drafting paper + blueprint navy.
   Type: Fraunces (display serif) / IBM Plex Mono (annotation)
         / Inter (body — brand workhorse).
   Redline devices: ink underline, marker ellipse, margin note,
   clause numbers, figure captions, recorded-result stamp.
   ══════════════════════════════════════════════════════════ */

:root {
	/* Brand */
	--blue:   #2563EB;
	--purple: #9333EA;
	--orange: #F97316;

	/* Surfaces */
	--paper:      #F4F2EC;   /* drafting paper */
	--paper-2:    #ECE9E1;   /* tinted paper */
	--paper-line: rgba(23, 28, 44, .12);
	--paper-grid: rgba(23, 28, 44, .05);
	--bp:         #0C1424;   /* blueprint navy */
	--bp-2:       #111B30;
	--bp-line:    rgba(120, 158, 255, .16);
	--bp-grid:    rgba(120, 158, 255, .06);

	/* Ink */
	--ink:        #171C2C;   /* text on paper */
	--ink-dim:    #5B5F70;
	--lt:         #E8EBF4;   /* text on blueprint */
	--lt-dim:     #94A0BE;

	/* Type */
	--serif: 'Fraunces', Georgia, serif;
	--mono:  'IBM Plex Mono', ui-monospace, monospace;
	--sans:  'Inter', system-ui, sans-serif;

	--container: 1180px;
	--gutter: clamp(20px, 4vw, 48px);
	--sec-y: clamp(72px, 9vw, 130px);
}

/* ───────── Base ───────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sans);
	font-size: 17px; line-height: 1.68;
	color: var(--ink); background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.mt-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 10px 18px; font-family: var(--mono); font-size: 13px; }
.mt-skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; }

/* ───────── Layout ───────── */
.mt-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.mt-narrow { max-width: 720px; }
.mt-center { text-align: center; }

.mt-sec { position: relative; padding-block: var(--sec-y); overflow: clip; }
.mt-sec--paper { background: var(--paper); color: var(--ink); border-top: 1px solid var(--paper-line); }
.mt-sec--tinted { background: var(--paper-2); }
.mt-sec--grid {
	background-image:
		linear-gradient(var(--paper-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
	background-size: 26px 26px;
}
/* ───────── Type system ───────── */
.mt-h2 {
	font-family: var(--serif);
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 600; line-height: 1.04;
	letter-spacing: -0.015em; margin: 0 0 .55em;
	font-variation-settings: 'opsz' 100;
	text-wrap: balance;
}
.mt-h2--close { font-size: clamp(42px, 6.5vw, 84px); line-height: 1.02; }
.mt-h3 {
	font-family: var(--serif);
	font-size: clamp(21px, 2.6vw, 29px);
	font-weight: 600; line-height: 1.25; margin: 0 0 .6em;
}
.mt-h3--sub { color: var(--lt); }
.mt-dim { color: var(--lt-dim); }
.mt-sec--paper .mt-dim { color: var(--ink-dim); }

/* Clause header — every section opens like a numbered clause */
.mt-clause {
	display: flex; align-items: baseline; gap: 16px;
	margin-bottom: clamp(28px, 4vw, 44px);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--paper-line);
	font-family: var(--mono);
	font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-dim);
}
.mt-clause__no { font-weight: 600; color: var(--blue); }
.mt-clause--light { border-color: var(--bp-line); color: var(--lt-dim); }
.mt-clause--light .mt-clause__no { color: #7EA0FF; }

/* Verdict lines — the bolded conclusions */
.mt-verdict {
	font-family: var(--serif); font-weight: 600;
	font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35;
	margin-top: 2em;
	padding-left: 18px;
	border-left: 4px solid var(--orange);
}
.mt-verdict--light { color: var(--lt); }
.mt-verdict.mt-center { border-left: 0; padding-left: 0; }
.mt-verdict.mt-center::before {
	content: ""; display: block; width: 44px; height: 4px;
	background: var(--orange); margin: 0 auto 16px;
}

/* ───────── Redline devices ───────── */
.mt-underlined { position: relative; white-space: nowrap; }
.mt-inkline {
	position: absolute; left: -1%; right: -1%; bottom: -0.08em;
	width: 102%; height: .16em; overflow: visible;
}
.mt-inkline path {
	stroke-dasharray: 320; stroke-dashoffset: 320;
}
/* Draw only once the containing block scrolls into view */
.is-in .mt-inkline path, .no-js .mt-inkline path {
	animation: mt-draw 0.9s ease-out .35s forwards;
}
@keyframes mt-draw { to { stroke-dashoffset: 0; } }

.mt-circled { position: relative; display: inline-block; }
.mt-marker-ellipse {
	position: absolute; inset: -22% -9%;
	width: 118%; height: 144%; overflow: visible; pointer-events: none;
}
.mt-marker-ellipse ellipse {
	stroke-dasharray: 780; stroke-dashoffset: 780;
}
.is-in .mt-marker-ellipse ellipse, .no-js .mt-marker-ellipse ellipse {
	animation: mt-draw-long 1.1s ease-out .3s forwards;
}
@keyframes mt-draw-long { to { stroke-dashoffset: 0; } }

.mt-margin-note {
	position: absolute; right: calc(-1 * clamp(0px, 3vw, 40px)); top: 58%;
	transform: rotate(-1.5deg);
	font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
	letter-spacing: .02em; color: var(--orange); text-transform: none;
	width: 130px; font-weight: 500;
}
.mt-margin-note__leader { display: block; width: 90px; height: 40px; margin-bottom: 2px; }

/* ───────── Document reference strip ───────── */
.mt-docref {
	display: flex; flex-wrap: wrap; gap: 0;
	border: 1px solid var(--paper-line);
	background: rgba(255,255,255,.5);
	font-family: var(--mono); font-size: 11.5px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
	margin-bottom: clamp(40px, 6vw, 72px);
	width: fit-content;
}
.mt-docref__item { padding: 9px 18px; border-right: 1px solid var(--paper-line); }
.mt-docref__item:last-child { border-right: 0; }
.mt-docref__item--live { display: inline-flex; align-items: center; gap: 8px; }
.mt-live { width: 7px; height: 7px; border-radius: 50%; background: #17A673; box-shadow: 0 0 8px rgba(23,166,115,.7); }

/* ───────── Hero ───────── */
.mt-hero { padding-block: clamp(64px, 8vw, 110px) clamp(64px, 8vw, 100px); }
.mt-hero__title {
	position: relative;
	font-family: var(--serif);
	font-size: clamp(44px, 7.6vw, 96px);
	font-weight: 600; line-height: 1.02;
	letter-spacing: -0.02em; margin: 0 0 .5em;
	font-variation-settings: 'opsz' 144;
	max-width: 15ch;
}
.mt-marked { color: var(--ink); }
.mt-hero__standfirst {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px); align-items: start;
	max-width: 980px;
	padding-top: clamp(20px, 3vw, 36px);
	border-top: 1px solid var(--paper-line);
}
.mt-hero__lede { font-size: clamp(19px, 2.1vw, 23px); font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: -0.01em; }
.mt-hero__sub { color: var(--ink-dim); margin: 0 0 26px; }
.mt-hero__standfirst > div { grid-column: 2; }
.mt-hero__standfirst .mt-hero__lede { grid-column: 1; grid-row: 1 / span 2; }

/* Fig strip — the mini schematic */
.mt-fig { margin: clamp(48px, 7vw, 88px) 0 0; }
.mt-fig__caption {
	margin-top: 16px;
	font-family: var(--mono); font-size: 12px;
	letter-spacing: .06em; color: var(--ink-dim);
}
.mt-sec--blueprint .mt-fig__caption { color: var(--lt-dim); }

/* ───────── Schematic (Fig.0 mini + Fig.1 interactive) ───────── */
.mt-schematic {
	position: relative;
	display: grid; grid-template-columns: repeat(7, 1fr);
	gap: 0; padding-top: 10px;
}
.mt-schematic__rail {
	position: absolute; left: 7%; right: 7%; top: 20px; height: 2px;
	background: var(--paper-line);
}
.mt-sec--blueprint .mt-schematic__rail { background: var(--bp-line); }
.mt-schematic__station {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 4px 6px 10px; text-align: center;
}
.mt-schematic__tick { width: 2px; height: 14px; background: var(--ink); margin-top: 3px; }
.mt-schematic__no {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	letter-spacing: .1em; color: var(--blue);
}
.mt-schematic__name {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}

/* Fig.1 interactive stations */
.mt-schematic__station--btn {
	background: none; border: 0; cursor: pointer;
	padding: 12px 6px 14px; border-radius: 4px;
	transition: background .15s ease;
	font-family: var(--mono);
}
.mt-schematic__station--btn:hover { background: rgba(120,158,255,.07); }
.mt-schematic__station--btn .mt-schematic__name { color: var(--lt-dim); transition: color .15s; }
.mt-schematic__station--btn .mt-schematic__no { color: #7EA0FF; }
.mt-schematic__node {
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #7EA0FF; background: var(--bp);
	transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mt-schematic__station--btn:hover .mt-schematic__node { border-color: var(--orange); }
.mt-schematic__station--btn.is-active .mt-schematic__node {
	background: var(--orange); border-color: var(--orange);
	box-shadow: 0 0 0 5px rgba(249,115,22,.18), 0 0 18px rgba(249,115,22,.5);
}
.mt-schematic__station--btn.is-active .mt-schematic__name { color: var(--lt); }

/* Callout panel — a drawing annotation box */
.mt-callout {
	margin-top: 26px;
	background: rgba(13, 22, 42, .72);
	border: 1px solid var(--bp-line);
	border-left: 4px solid var(--orange);
	padding: 26px 30px;
	max-width: 780px;
}
.mt-callout__ref {
	display: block;
	font-family: var(--mono); font-size: 11.5px; font-weight: 600;
	letter-spacing: .14em; color: #7EA0FF; margin-bottom: 12px;
}
.mt-callout__does { margin: 0 0 8px; font-size: 17px; }
.mt-callout__without { margin: 0; color: var(--lt-dim); font-size: 15px; }

/* ───────── Split layouts ───────── */
.mt-split {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5.5vw, 92px); align-items: start;
}
.mt-split__body { font-size: 17.5px; }
.mt-list { list-style: none; margin: 1.2em 0; padding: 0; }
.mt-list li { position: relative; padding-left: 28px; margin-bottom: .55em; }
.mt-list li::before {
	content: "—"; position: absolute; left: 0;
	font-family: var(--mono); color: var(--orange); font-weight: 600;
}

/* ───────── Failure grid (Clause 03) ───────── */
.mt-failgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bp-line); border: 1px solid var(--bp-line); }
.mt-failgrid__item { background: var(--bp-2); padding: 24px 24px 20px; transition: background .18s ease; }
.mt-failgrid__item:hover { background: #16233F; }
.mt-failgrid__ref {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	letter-spacing: .14em; color: var(--orange);
}
.mt-failgrid__title { font-family: var(--sans); font-size: 16.5px; font-weight: 700; margin: 8px 0 6px; line-height: 1.3; }
.mt-failgrid__cost { font-size: 14px; color: var(--lt-dim); margin: 0; }

/* ───────── Recorded result (Clause 04) ───────── */
.mt-split--proof { align-items: center; }
.mt-proof__figure { position: relative; }
.mt-proof__stat {
	font-family: var(--serif);
	font-size: clamp(110px, 17vw, 220px);
	font-weight: 600; line-height: .85; letter-spacing: -0.04em;
	margin: 0; color: var(--ink);
	font-variation-settings: 'opsz' 144;
}
.mt-proof__pct { font-size: .45em; vertical-align: .32em; letter-spacing: 0; }
.mt-stamp {
	display: inline-flex; flex-direction: column; gap: 2px;
	margin-top: 26px; padding: 14px 20px;
	border: 2.5px solid var(--orange); border-radius: 3px;
	transform: rotate(-2.5deg);
	font-family: var(--mono); text-transform: uppercase;
	color: var(--orange);
	background: rgba(249,115,22,.045);
	box-shadow: 0 1px 0 rgba(249,115,22,.15);
}
.mt-stamp__row { font-size: 10.5px; letter-spacing: .22em; font-weight: 600; }
.mt-stamp__row--big { font-size: 17px; letter-spacing: .12em; font-weight: 700; }
.mt-datarow { display: grid; gap: 0; margin: 28px 0 0; border-top: 1px solid var(--paper-line); }
.mt-datarow > div {
	display: grid; grid-template-columns: 130px 1fr; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid var(--paper-line);
}
.mt-datarow dt {
	font-family: var(--mono); font-size: 11.5px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
	padding-top: 3px;
}
.mt-datarow dd { margin: 0; font-size: 15px; }

/* ───────── Plates (Clause 06) ───────── */
.mt-plates { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); margin-top: 10px; }
.mt-plate { position: relative; border: 1px solid var(--paper-line); background: #FBFAF7; transition: transform .2s ease, box-shadow .2s ease; }
.mt-plate:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,28,44,.1); }
.mt-plate__media {
	position: relative; aspect-ratio: 16 / 8.5;
	border-bottom: 1px solid var(--paper-line);
	background: var(--paper-2);
	filter: saturate(.92) contrast(1.02);
}
.mt-plate__media img { width: 100%; height: 100%; object-fit: cover; }
.mt-plate__media.is-placeholder {
	background-image:
		linear-gradient(var(--paper-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px),
		radial-gradient(300px 170px at 30% 30%, rgba(37,99,235,.12), transparent 70%),
		radial-gradient(300px 170px at 75% 75%, rgba(249,115,22,.1), transparent 70%);
	background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100%;
}
.mt-plate__body { padding: 22px 26px 28px; }
.mt-plate__ref {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: var(--blue);
}
.mt-plate__title { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 8px 0 10px; }
.mt-plate__body p { margin: 0; color: var(--ink-dim); font-size: 15.5px; }

/* ───────── Specification table (Clause 07) ───────── */
.mt-spec {
	width: 100%; margin-top: clamp(28px, 4vw, 48px);
	border-collapse: collapse; background: #FBFAF7;
	border: 1px solid var(--paper-line);
	font-size: 15.5px;
}
.mt-spec th, .mt-spec td {
	padding: 18px 24px; text-align: left; vertical-align: top;
	border: 1px solid var(--paper-line);
}
.mt-spec thead th {
	font-family: var(--mono); font-size: 11.5px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-dim); background: var(--paper-2); padding-block: 14px;
}
.mt-spec__ref { color: var(--blue); }
.mt-spec tbody th { font-weight: 600; width: 25%; font-family: var(--sans); }
.mt-spec tbody td:not(.mt-spec__cf1) { color: var(--ink-dim); }
.mt-spec__cf1 { background: rgba(37,99,235,.06); font-weight: 600; border-left: 3px solid var(--blue) !important; }
.mt-spec thead .mt-spec__cf1 { background: var(--blue); color: #fff; border-left: 3px solid var(--blue) !important; }

/* ───────── Urgency (Clause 08) ───────── */
.mt-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bp-line); border: 1px solid var(--bp-line); margin-top: 34px; }
.mt-tcard { background: var(--bp-2); padding: 36px 28px; transition: background .18s ease; }
.mt-tcard:hover { background: #16233F; }
.mt-tcard__ref { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--orange); }
.mt-tcard h3 { font-family: var(--serif); margin: 10px 0 0; font-size: 21px; font-weight: 600; line-height: 1.3; }

/* ───────── Closing + appendices (Clause 09) ───────── */
.is-in .mt-underlined--close .mt-inkline path { animation-delay: .2s; }
.mt-appendix { margin-top: clamp(64px, 9vw, 110px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--paper-line); }
.mt-appendix__head {
	display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
	font-family: var(--serif); font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 600; margin: 0 0 26px;
}
.mt-appendix__head .mt-clause__no {
	font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em;
	text-transform: uppercase;
}
.mt-papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
/* Column-count modifiers (default is 3). Use instead of an inline grid-template-columns,
   so the mobile collapse below can win without !important. */
.mt-papers--2 { grid-template-columns: repeat(2, 1fr); }
.mt-papers--3 { grid-template-columns: repeat(3, 1fr); }
.mt-paper {
	border: 1px solid var(--paper-line); background: #FBFAF7;
	padding: 24px 24px 24px; display: flex; flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mt-paper:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(23,28,44,.1); }
.mt-paper__ref {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	letter-spacing: .18em; color: var(--purple); margin-bottom: 10px;
}
.mt-paper__title { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; }
.mt-paper__desc { font-size: 14.5px; color: var(--ink-dim); margin: 0 0 22px; flex-grow: 1; }
.mt-paper__form { display: flex; flex-direction: column; gap: 10px; }
.mt-paper__form input[type="email"] {
	background: #fff; border: 1px solid var(--paper-line);
	color: var(--ink); padding: 12px 14px;
	font-family: var(--mono); font-size: 13.5px;
	transition: border-color .15s;
}
.mt-paper__form input[type="email"]:focus { border-color: var(--blue); outline: none; }
.mt-paper__form input[type="email"]::placeholder { color: var(--ink-dim); }

/* ───────── Buttons ───────── */
.mt-btn {
	display: inline-block; padding: 15px 26px;
	font-family: var(--mono); font-size: 12.5px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none; border-radius: 3px;
	border: 1.5px solid var(--ink); cursor: pointer;
	transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mt-btn:hover { transform: translateY(-2px); }
.mt-btn--ink { background: var(--ink); color: var(--paper); }
.mt-btn--ink:hover { background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 22px rgba(37,99,235,.3); }
.mt-btn--rule { background: transparent; color: var(--ink); }
.mt-btn--rule:hover { border-color: var(--orange); color: var(--orange); }
.mt-btn--small {
	padding: 12px 16px; font-size: 11.5px;
	background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink);
	font-family: var(--mono); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	border-radius: 3px; cursor: pointer; transition: background .15s, border-color .15s;
}
.mt-btn--small:hover { background: var(--blue); border-color: var(--blue); }
.mt-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ───────── Header ───────── */
.mt-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(244,242,236,.9); backdrop-filter: blur(12px);
	color: var(--ink);
	border-bottom: 1px solid var(--paper-line);
}
.mt-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.mt-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mt-logo__word { font-weight: 800; font-size: 19px; letter-spacing: -0.015em; font-family: var(--sans); }
.mt-nav { display: flex; align-items: center; gap: 22px; }
.mt-nav__list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.mt-nav__link, .mt-nav__list a {
	font-family: var(--mono); font-size: 12px; font-weight: 500;
	letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
	white-space: nowrap;
	color: var(--ink-dim); transition: color .15s;
}
.mt-nav__link:hover, .mt-nav__list a:hover { color: var(--ink); }
.mt-nav__cta { border-width: 1.5px; padding: 11px 18px; font-size: 11.5px;
	background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink);
	font-family: var(--mono); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	white-space: nowrap;
	border-radius: 3px; text-decoration: none; transition: background .15s, border-color .15s; }
.mt-nav__cta:hover { background: var(--blue); border-color: var(--blue); }
.mt-nav-toggle { display: none; }

/* ───────── Language toggle (EN / NL) ───────── */
.mt-lang { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.mt-lang__opt {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 9px 12px; background: none; border: 0; cursor: pointer;
	color: var(--ink-dim); transition: background .15s, color .15s;
}
.mt-lang__opt + .mt-lang__opt { border-left: 1.5px solid var(--ink); }
.mt-lang__opt.is-active { background: var(--ink); color: var(--paper); }
.mt-lang__opt:not(.is-active):hover { color: var(--ink); }

/* ───────── Footer ───────── */
.mt-footer {
	background:
		linear-gradient(var(--bp-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
		#0A111F;
	background-size: 26px 26px, 26px 26px, 100% 100%;
	color: var(--lt); padding-block: 60px 28px;
	border-top: 1px solid var(--bp-line);
}
.mt-footer__grid {
	display: grid; grid-template-columns: 1.2fr 1fr .8fr;
	gap: 40px; padding-bottom: 40px;
	border-bottom: 1px solid var(--bp-line);
}
.mt-footer__strap { color: var(--lt-dim); font-size: 14px; }
.mt-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mt-footer__list a, .mt-footer__contact a {
	color: var(--lt-dim); text-decoration: none; font-size: 13.5px;
	font-family: var(--mono); letter-spacing: .04em; transition: color .15s;
}
.mt-footer__list a:hover, .mt-footer__contact a:hover { color: #fff; }
.mt-footer__contact { display: grid; gap: 12px; align-content: start; }
.mt-footer__legal {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding-top: 22px;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
	color: var(--lt-dim);
}
.mt-footer__legal a { color: inherit; }
.mt-footer__disclosure { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.mt-footer__disclosure a:hover { color: var(--lt); }
.mt-footer__legal::after {
	content: "/// END OF DOCUMENT ///";
	flex-basis: 100%; text-align: center; padding-top: 20px;
	letter-spacing: .3em; opacity: .4;
}

/* ───────── Scroll reveal ───────── */
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .26s ease-out, transform .26s ease-out; }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.mt-inkline path, .mt-marker-ellipse ellipse { animation: none !important; stroke-dashoffset: 0 !important; }
	.mt-btn, .mt-plate, .mt-paper, .mt-tcard, .mt-failgrid__item { transition: none; }
}

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
	.mt-margin-note { display: none; }
}
@media (max-width: 960px) {
	.mt-split { grid-template-columns: 1fr; }
	.mt-hero__standfirst { grid-template-columns: 1fr; }
	.mt-hero__standfirst .mt-hero__lede { grid-row: auto; grid-column: 1; }
	.mt-hero__standfirst > div { grid-column: 1; }
	.mt-plates { grid-template-columns: 1fr; }
	.mt-papers { grid-template-columns: 1fr; }
	.mt-cards3 { grid-template-columns: 1fr; }
	.mt-schematic { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
	.mt-schematic__rail { display: none; }
	.mt-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.mt-failgrid { grid-template-columns: 1fr; }
	.mt-schematic { grid-template-columns: repeat(2, 1fr); }
	.mt-footer__grid { grid-template-columns: 1fr; }
	.mt-docref { font-size: 10px; }
	.mt-docref__item { padding: 7px 12px; }

	/* Spec table stacks */
	.mt-spec thead { display: none; }
	.mt-spec, .mt-spec tbody, .mt-spec tr, .mt-spec th, .mt-spec td { display: block; width: 100%; border: 0; }
	.mt-spec { border: 1px solid var(--paper-line); }
	.mt-spec tr { border-bottom: 1px solid var(--paper-line); padding: 8px 0; }
	.mt-spec tbody th { padding-bottom: 2px; }
	.mt-spec td { padding-top: 6px; }
	.mt-spec td::before {
		display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
		letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 3px;
	}
	.mt-spec td:not(.mt-spec__cf1)::before { content: "Existing model"; }
	.mt-spec td.mt-spec__cf1::before { content: "Claimant First (CF1)"; color: var(--blue); }
	.mt-spec__cf1 { border-left: 3px solid var(--blue) !important; }

}

/* ───────── Primary nav → hamburger below 1024px (longer NL labels overflow a horizontal bar) ───────── */
@media (max-width: 1023px) {
	.mt-nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 10px; cursor: pointer; }
	.mt-nav-toggle__bar { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
	.mt-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--paper); border-bottom: 1px solid var(--paper-line);
		padding: 10px var(--gutter) 22px;
	}
	.mt-nav.is-open { display: flex; }
	.mt-nav__list { flex-direction: column; gap: 0; }
	.mt-nav__list a { display: block; padding: 14px 0; }
	.mt-nav__cta { margin-top: 14px; text-align: center; }
}

/* ══════════════════════════════════════════════════════════
   THE EXHIBIT — evidence-media extension
   Full-bleed video hero + Exhibit A band. Everything below
   overrides/extends "The Standard" base above.
   ══════════════════════════════════════════════════════════ */

/* ───────── Hero over evidence footage ───────── */
.mt-hero--exhibit {
	background: var(--bp);
	color: var(--lt);
	min-height: min(94vh, 980px);
	display: flex; align-items: center;
	padding-block: clamp(72px, 9vw, 120px);
	border-top: 0;
}
.mt-hero__content { position: relative; z-index: 2; width: 100%; }

.mt-heromedia { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mt-heromedia__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(.7) contrast(1.06) brightness(.85);
}
/* Legibility scrim: ink from the left where the type sits, lifting to the right */
.mt-heromedia__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(9,14,26,.94) 0%, rgba(9,14,26,.82) 42%, rgba(9,14,26,.5) 72%, rgba(9,14,26,.62) 100%),
		linear-gradient(0deg, rgba(9,14,26,.9) 0%, transparent 30%);
}
/* Drafting grid sits over the footage — the document persists over the evidence */
.mt-heromedia__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(120,158,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120,158,255,.05) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

/* Cinematic CSS fallback when no video file is present:
   slow-drifting light through a deep scene + film grain. Reads as footage. */
.mt-heromedia.is-fallback {
	background:
		radial-gradient(900px 520px at 78% 30%, rgba(37,99,235,.32), transparent 62%),
		radial-gradient(680px 480px at 20% 85%, rgba(147,51,234,.2), transparent 60%),
		linear-gradient(200deg, #101B33 0%, #0A1220 55%, #070D18 100%);
}
.mt-heromedia.is-fallback::before {
	content: ""; position: absolute; inset: -20%;
	background:
		linear-gradient(115deg, transparent 42%, rgba(126,160,255,.1) 50%, transparent 58%),
		linear-gradient(115deg, transparent 66%, rgba(249,115,22,.06) 72%, transparent 78%);
	animation: mt-lightpan 16s ease-in-out infinite alternate;
}
@keyframes mt-lightpan { to { transform: translateX(9%) translateY(-2.5%); } }
.mt-heromedia.is-fallback::after {
	content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero type + furniture recolour for on-media legibility */
.mt-hero--exhibit .mt-hero__title { color: #fff; max-width: 14.5ch; }
.mt-hero--exhibit .mt-hero__sub { color: var(--lt-dim); }
.mt-hero--exhibit .mt-hero__standfirst { border-top-color: var(--bp-line); }
.mt-hero--exhibit .mt-fig__caption { color: var(--lt-dim); }
.mt-hero--exhibit .mt-schematic__rail { background: var(--bp-line); }
.mt-hero--exhibit .mt-schematic__tick { background: var(--lt); }
.mt-hero--exhibit .mt-schematic__no { color: #7EA0FF; }
.mt-hero--exhibit .mt-schematic__name { color: var(--lt-dim); }
.mt-docref--onmedia {
	background: rgba(9,14,26,.55); backdrop-filter: blur(6px);
	border-color: var(--bp-line); color: var(--lt-dim);
}
.mt-docref--onmedia .mt-docref__item { border-color: var(--bp-line); }
.mt-hero--exhibit .mt-btn--ink { background: #fff; color: var(--bp); border-color: #fff; }
.mt-hero--exhibit .mt-btn--ink:hover { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(249,115,22,.35); }
.mt-hero--exhibit .mt-btn--rule { color: #fff; border-color: rgba(255,255,255,.45); }
.mt-hero--exhibit .mt-btn--rule:hover { border-color: var(--orange); color: var(--orange); }

/* ───────── Exhibit A band ───────── */
.mt-exhibit { background: var(--paper); border-top: 1px solid var(--paper-line); }
.mt-exhibit__figure { margin: 0; }
.mt-exhibit__media {
	position: relative; height: clamp(340px, 58vh, 620px); overflow: hidden;
}
.mt-exhibit__media img {
	width: 100%; height: 100%; object-fit: cover;
	filter: saturate(.82) contrast(1.05);
}
.mt-exhibit__media::after {
	/* corner exhibit sticker */
	content: "A"; position: absolute; top: 22px; left: 22px;
	width: 52px; height: 52px; display: grid; place-items: center;
	background: var(--orange); color: #fff;
	font-family: var(--serif); font-size: 26px; font-weight: 700;
	border-radius: 50%; transform: rotate(-6deg);
	box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.mt-exhibit__media.is-fallback {
	background:
		radial-gradient(700px 420px at 30% 40%, rgba(37,99,235,.24), transparent 65%),
		radial-gradient(560px 380px at 78% 70%, rgba(249,115,22,.16), transparent 60%),
		linear-gradient(160deg, #16233F 0%, #0C1424 100%);
}
.mt-exhibit__media.is-fallback::before {
	content: "PHOTOGRAPHY SLOT";
	position: absolute; inset: auto 22px 22px auto;
	font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
	color: rgba(232,235,244,.5);
}
.mt-exhibit__caption {
	display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap;
	max-width: var(--container); margin-inline: auto;
	padding: 22px var(--gutter) 30px;
}
.mt-exhibit__tag {
	font-family: var(--mono); font-size: 12px; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; color: var(--orange);
	white-space: nowrap;
	border-bottom: 2.5px solid var(--orange); padding-bottom: 4px;
}
.mt-exhibit__text {
	font-family: var(--serif); font-size: clamp(17px, 2vw, 21px);
	line-height: 1.5; color: var(--ink); max-width: 62ch;
}

/* ───────── Plates as pinned evidence-board photographs ───────── */
.mt-plate__media { aspect-ratio: 16 / 10; overflow: hidden; }
.mt-plate__media img { transition: transform .5s ease; }
.mt-plate:hover .mt-plate__media img { transform: scale(1.035); }
.mt-plates {
	position: relative;
	gap: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 48px);
	padding: 12px 8px 8px;
}
.mt-plate {
	transform: rotate(var(--tilt, -1.1deg));
	box-shadow: 0 14px 30px rgba(23, 28, 44, .14);
	transition: transform .25s ease, box-shadow .25s ease;
}
.mt-plate:hover { transform: rotate(var(--tilt, -1.1deg)) translateY(-4px); box-shadow: 0 20px 42px rgba(23,28,44,.18); }
.mt-plates .mt-plate:nth-child(1) { --tilt: -1.4deg; }
.mt-plates .mt-plate:nth-child(2) { --tilt: 1deg; }
.mt-plates .mt-plate:nth-child(3) { --tilt: 0.8deg; }
.mt-plates .mt-plate:nth-child(4) { --tilt: -1.2deg; }
/* Thumbtack */
.mt-plate::before {
	content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
	width: 15px; height: 15px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff8a4c, var(--orange) 60%, #c85a10 100%);
	box-shadow: 0 3px 6px rgba(0,0,0,.35); z-index: 3;
}
/* Corkboard string connecting adjacent plates — desktop 2-col grid only */
.mt-plates::after { content: none; }
.mt-plate-string {
	position: absolute; z-index: 1; pointer-events: none; overflow: visible;
}
.mt-plates__string {
	position: absolute; inset: 0; width: 100%; height: 100%;
	z-index: 4; pointer-events: none;
}
@media (max-width: 960px) {
	.mt-plate { transform: none !important; box-shadow: 0 10px 22px rgba(23,28,44,.12); }
	.mt-plate:hover { transform: translateY(-3px) !important; }
	.mt-plate-string { display: none; }
	.mt-plates__string { display: none; }
}

/* ───────── Exhibit A as a pinned, slightly askew photograph ───────── */
.mt-exhibit__media { transform: rotate(-0.6deg); box-shadow: 0 20px 46px rgba(0,0,0,.22); }
.mt-exhibit__media::before {
	content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
	width: 18px; height: 18px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff8a4c, var(--orange) 60%, #c85a10 100%);
	box-shadow: 0 3px 7px rgba(0,0,0,.4); z-index: 3;
}

/* ───────── Recorded-result stamp gets a loose string tether to the stat ───────── */
.mt-proof__figure { position: relative; }
.mt-proof__figure::before {
	/* a short hand-drawn thread linking the number to its stamp */
	content: ""; position: absolute; left: 14%; top: 78%; width: 2px; height: 46px;
	background-image: linear-gradient(var(--ink-dim), var(--ink-dim));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='46'%3E%3Cpath d='M1 0 C -2 12, 4 24, 1 36 C -1 42, 2 44, 1 46' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='46'%3E%3Cpath d='M1 0 C -2 12, 4 24, 1 36 C -1 42, 2 44, 1 46' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	opacity: .35; display: none;
}
@media (min-width: 700px) { .mt-proof__figure::before { display: block; } }

/* ───────── Motion safety ───────── */
@media (prefers-reduced-motion: reduce) {
	.mt-heromedia.is-fallback::before { animation: none; }
	.mt-plate__media img { transition: none; }
}
@media (max-width: 960px) {
	.mt-hero--exhibit { min-height: 0; }
	.mt-exhibit__media { height: clamp(260px, 42vh, 420px); }
}

/* ══════════════════════════════════════════════════════════
   CONTINUOUS PAGE — dissolve the section stack into one flow
   Blended seams between colour changes, a scroll-linked spine
   tying the whole document together, and flowing (not boxed)
   grids so nothing reads as a stacked page-builder block.
   ══════════════════════════════════════════════════════════ */

/* ───────── Seam blends ─────────
   Each section keeps its own background; a soft gradient cap
   dissolves in from the PREVIOUS section's colour instead of
   cutting hard at the boundary. No border-top anywhere now. */
.mt-sec--paper, .mt-sec--blueprint { border-top: 0; }

/* Content must sit above the seam cap */
.mt-sec > .mt-container { position: relative; z-index: 2; }

/* Keep the hero's own grid/paper texture visible under nothing (first section, no seam) */

/* ───────── De-boxed failure grid: flowing connected list ───────── */
.mt-failgrid {
	display: block; background: none; border: 0;
	border-left: 2px solid var(--bp-line);
	margin-left: 8px;
}
.mt-failgrid__item {
	position: relative; background: none;
	padding: 22px 0 22px 34px; margin-bottom: 0;
	border-bottom: 1px solid var(--bp-line);
}
.mt-failgrid__item:last-child { border-bottom: 0; }
.mt-failgrid__item::before {
	content: ""; position: absolute; left: -6px; top: 28px;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--bp); border: 2px solid var(--orange);
}
.mt-failgrid__item:hover { background: none; }
.mt-failgrid__item:hover::before { background: var(--orange); }
.mt-failgrid__ref { display: inline-block; margin-bottom: 4px; }
.mt-failgrid__title { display: block; }

/* ───────── De-boxed urgency cards: same flowing treatment ───────── */
.mt-cards3 {
	display: block; background: none; border: 0;
	border-left: 2px solid var(--bp-line);
	margin-left: 8px; max-width: 620px;
}
.mt-tcard {
	position: relative; background: none;
	padding: 20px 0 20px 34px;
	border-bottom: 1px solid var(--bp-line);
}
.mt-tcard:last-child { border-bottom: 0; }
.mt-tcard::before {
	content: ""; position: absolute; left: -6px; top: 26px;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--bp); border: 2px solid var(--orange);
}
.mt-tcard:hover { background: none; }
.mt-tcard:hover::before { background: var(--orange); }

@media (max-width: 640px) {
	.mt-failgrid, .mt-cards3 { margin-left: 4px; }
	.mt-failgrid__item, .mt-tcard { padding-left: 26px; }
	.mt-failgrid__item::before, .mt-tcard::before { left: -5px; }
}

/* ══════════════════════════════════════════════════════════
   THE BUNDLE — the page as a paginated legal bundle.
   One desk surface; every section is a sheet in the stack:
   overlapping, slightly askew, hole-punched, with tabbed
   dividers on the fore-edge and folio numbers. Ruled legal-pad
   sheets carry the key narrative moments.
   This layer overrides the earlier band/panel/board systems.
   ══════════════════════════════════════════════════════════ */

:root {
	--desk: #D8D2C3;            /* the surface the bundle sits on */
	--pad: #FBF5E0;             /* legal pad cream-yellow */
	--pad-rule: rgba(37, 99, 235, .16);
	--pad-margin: rgba(217, 83, 79, .5);
	--sheet: #FDFCF8;           /* plain white sheet */
}

body { background: var(--desk); overflow-x: hidden; }

/* ───────── The sheet ───────── */
.mt-sheet {
	position: relative;
	width: min(1140px, 94vw);
	margin-inline: auto;
	padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 92px);
	background: var(--sheet);
	border-radius: 2px;
	box-shadow:
		0 1px 2px rgba(30, 26, 12, .18),
		0 14px 34px rgba(30, 26, 12, .22),
		0 30px 60px rgba(30, 26, 12, .12);
}
/* Overlap: each sheet tucks under the previous one's bottom edge */
.mt-sheet + .mt-sheet, .mt-sheet:first-of-type { margin-top: 0; }
main .mt-sheet { margin-top: clamp(-64px, -4.5vw, -30px); }
main .mt-sheet:first-of-type { margin-top: clamp(20px, 3vw, 40px); }
/* Descending z: earlier sheets sit on top, later sheets emerge from under */
main .mt-sheet:nth-of-type(1)  { z-index: 20; }
main .mt-sheet:nth-of-type(2)  { z-index: 19; }
main .mt-sheet:nth-of-type(3)  { z-index: 18; }
main .mt-sheet:nth-of-type(4)  { z-index: 17; }
main .mt-sheet:nth-of-type(5)  { z-index: 16; }
main .mt-sheet:nth-of-type(6)  { z-index: 15; }
main .mt-sheet:nth-of-type(7)  { z-index: 14; }
main .mt-sheet:nth-of-type(8)  { z-index: 13; }
main .mt-sheet:nth-of-type(9)  { z-index: 12; }
main .mt-sheet:nth-of-type(10) { z-index: 11; }
/* Loose stacking: alternate tiny rotations and lateral drift */
main .mt-sheet:nth-of-type(odd)  { transform: rotate(.35deg); }
main .mt-sheet:nth-of-type(even) { transform: rotate(-.3deg); }
main .mt-sheet:nth-of-type(3n)   { transform: rotate(.15deg) translateX(9px); }
main .mt-sheet:nth-of-type(4n)   { transform: rotate(-.45deg) translateX(-8px); }

/* Hole punches on the binding edge (UK bundles live in lever-arch files) */
.mt-sheet::before, .mt-sheet::after {
	content: ""; position: absolute; left: 24px;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--desk);
	box-shadow: inset 0 1.5px 3px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6);
	z-index: 2;
}
.mt-sheet::before { top: 24%; }
.mt-sheet::after  { bottom: 24%; }

/* ───────── Sheet variants ───────── */
.mt-sheet--pad {
	background:
		/* red margin rule */
		linear-gradient(90deg, transparent 0, transparent 74px, var(--pad-margin) 74px, var(--pad-margin) 76px, transparent 76px),
		/* horizontal ruling */
		repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--pad-rule) 31px, var(--pad-rule) 32px),
		var(--pad);
}
.mt-sheet--tinted { background: #F4F1E7; }
.mt-sheet--dark {
	background:
		linear-gradient(var(--bp-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
		linear-gradient(175deg, var(--bp) 0%, var(--bp-2) 100%);
	background-size: 26px 26px, 26px 26px, 100% 100%;
	color: var(--lt);
}
.mt-sheet--dark::before, .mt-sheet--dark::after { box-shadow: inset 0 1.5px 3px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.12); }
.mt-sheet--dark .mt-dim { color: var(--lt-dim); }
.mt-sheet--dark .mt-h3--sub { color: var(--lt); }
.mt-sheet--dark .mt-fig__caption { color: var(--lt-dim); }
.mt-sheet--dark .mt-schematic__rail { background: var(--bp-line); }
.mt-sheet--dark .mt-schematic__tick { background: var(--lt); }
.mt-sheet--photo { padding: clamp(18px, 2.4vw, 30px) 0 clamp(20px, 2.6vw, 34px); background: var(--sheet); }
.mt-sheet--photo .mt-exhibit__media { margin-inline: clamp(18px, 2.4vw, 30px); transform: none; }

/* Content keeps clear of the punch holes and the pad's margin rule */
.mt-sheet .mt-container { padding-left: clamp(88px, 9vw, 116px); padding-right: clamp(24px, 5vw, 72px); }
.mt-sheet--photo .mt-exhibit__caption { padding-left: clamp(88px, 9vw, 116px); }

/* ───────── Tab dividers on the fore-edge ───────── */
.mt-tab {
	position: absolute; right: -34px; top: clamp(64px, 9vw, 120px);
	writing-mode: vertical-rl;
	background: var(--tab-c, var(--blue)); color: #fff;
	font-family: var(--mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
	padding: 14px 9px; border-radius: 0 3px 3px 0;
	box-shadow: 2px 2px 6px rgba(0,0,0,.22);
	z-index: -1; /* tucked behind the sheet edge, like a real divider tab */
}
/* Stagger tab heights so overlapping sheets fan their tabs down the edge */
main .mt-sheet:nth-of-type(2) .mt-tab  { top: 150px; }
main .mt-sheet:nth-of-type(3) .mt-tab  { top: 190px; }
main .mt-sheet:nth-of-type(4) .mt-tab  { top: 110px; }
main .mt-sheet:nth-of-type(5) .mt-tab  { top: 60px; }
main .mt-sheet:nth-of-type(6) .mt-tab  { top: 170px; }
main .mt-sheet:nth-of-type(7) .mt-tab  { top: 130px; }
main .mt-sheet:nth-of-type(8) .mt-tab  { top: 200px; }
main .mt-sheet:nth-of-type(9) .mt-tab  { top: 90px; }
main .mt-sheet:nth-of-type(10) .mt-tab { top: 150px; }

/* ───────── Folio numbers ───────── */
.mt-folio {
	position: absolute; right: 28px; bottom: 18px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
	color: var(--ink-dim); opacity: .75;
}
.mt-sheet--dark .mt-folio { color: var(--lt-dim); }

/* ───────── The hero margin note becomes a counsel's sticky note ───────── */
.mt-margin-note {
	background: #FFE98A; color: var(--ink);
	padding: 12px 14px; width: 138px;
	transform: rotate(-2.5deg);
	box-shadow: 0 6px 14px rgba(0,0,0,.18);
	border-radius: 1px;
	font-weight: 600;
}
.mt-margin-note::before {
	/* strip of tape at the top */
	content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(1deg);
	width: 56px; height: 14px;
	background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.mt-margin-note__leader { display: none; }

/* ───────── Neutralise earlier board/panel devices ───────── */
.mt-plate { transform: none; box-shadow: 0 8px 20px rgba(23,28,44,.1); }
.mt-plate:hover { transform: translateY(-3px); }
.mt-plate::before { content: none; }             /* no thumbtacks */
.mt-plates { padding: 0; }
.mt-exhibit__media::before { content: none; }     /* no pin — the "A" sticker stays */
.mt-exhibit { border-top: 0; background: none; }
.mt-proof__figure::before { display: none !important; } /* no thread tether */

/* Old section paddings don't apply (mt-sec removed from markup);
   footer sits beneath the stack as the desk's far edge. */
.mt-footer { position: relative; z-index: 5; margin-top: clamp(48px, 6vw, 80px); border-top: 0; }

/* Header: sits on the desk, above the stack */
.mt-header { background: rgba(216,210,195,.9); }

/* ───────── Responsive ───────── */
@media (max-width: 1240px) {
	/* No room for fore-edge tabs: fold them in as a chip at the sheet head,
	   below the zone covered by the overlapping sheet above */
	main .mt-sheet { margin-top: -22px; }
	.mt-tab {
		/* In flow on small screens so it can never collide with the clause header */
		position: static; writing-mode: horizontal-tb;
		display: inline-block; width: fit-content;
		margin: 0 0 16px clamp(88px, 9vw, 116px);
		border-radius: 3px; padding: 6px 12px;
		box-shadow: 0 3px 8px rgba(0,0,0,.2);
	}
	main .mt-sheet .mt-tab { top: 30px; }
	/* Beat the desktop fore-edge stagger rules (equal specificity, later source) */
	main .mt-sheet:nth-of-type(n) .mt-tab { top: 30px; }
}
@media (max-width: 640px) {
	.mt-sheet { width: 100%; border-radius: 0; }
	main .mt-sheet { margin-top: clamp(-28px, -4vw, -16px); transform: none !important; }
	.mt-sheet::before, .mt-sheet::after { display: none; }
	.mt-sheet .mt-container { padding-left: var(--gutter); padding-right: var(--gutter); }
	.mt-sheet--pad { background-image:
		repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--pad-rule) 31px, var(--pad-rule) 32px);
		background-color: var(--pad);
	}
	.mt-sheet--photo .mt-exhibit__caption { padding-left: var(--gutter); }
	.mt-tab { margin-left: var(--gutter); margin-bottom: 12px; }
	main .mt-sheet .mt-tab { top: 22px; }
	.mt-folio { right: 16px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.mt-plate, .mt-plate:hover { transition: none; }
}

/* ───────── Brand logo (real lockup, replaces placeholder) ───────── */
.mt-logo__img { display: block; height: 30px; width: auto; }
.mt-logo__img--footer { height: 42px; margin-bottom: 16px; }
@media (max-width: 640px) { .mt-logo__img { height: 26px; } }

/* ───────── Transparent header over footage; colours in on scroll ───────── */
.mt-header {
	position: fixed; left: 0; right: 0; top: 0;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.mt-header.is-scrolled {
	background: rgba(216,210,195,.92);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--paper-line);
}
/* Bigger lockup; light/dark variants swap with the scroll state */
.mt-header .mt-logo__img { height: 56px; }
.mt-header .mt-logo__img--dark { display: none; }
.mt-header.is-scrolled .mt-logo__img--dark { display: block; }
.mt-header.is-scrolled .mt-logo__img--light { display: none; }
/* Nav links read white over the footage, ink once the bar colours in */
.mt-header:not(.is-scrolled) .mt-nav__list a { color: rgba(255,255,255,.82); }
.mt-header:not(.is-scrolled) .mt-nav__list a:hover { color: #fff; }
.mt-header:not(.is-scrolled) .mt-nav-toggle__bar { background: #fff; }
/* Language toggle borrows the white treatment over the footage */
.mt-header:not(.is-scrolled) .mt-lang,
.mt-header:not(.is-scrolled) .mt-lang__opt + .mt-lang__opt { border-color: rgba(255,255,255,.7); }
.mt-header:not(.is-scrolled) .mt-lang__opt { color: rgba(255,255,255,.82); }
.mt-header:not(.is-scrolled) .mt-lang__opt:not(.is-active):hover { color: #fff; }
.mt-header:not(.is-scrolled) .mt-lang__opt.is-active { background: #fff; color: var(--bp); }

/* Pages with no dark hero (legal / generic template, archive, 404): solid bar from the top */
.mt-header.is-solid { background: rgba(216,210,195,.92); backdrop-filter: blur(12px); border-bottom-color: var(--paper-line); }
.mt-header.is-solid .mt-logo__img--dark { display: block; }
.mt-header.is-solid .mt-logo__img--light { display: none; }
.mt-header.is-solid .mt-nav__list a { color: var(--ink-dim); }
.mt-header.is-solid .mt-nav__list a:hover { color: var(--ink); }
.mt-header.is-solid .mt-nav-toggle__bar { background: var(--ink); }
.mt-header.is-solid .mt-lang,
.mt-header.is-solid .mt-lang__opt + .mt-lang__opt { border-color: var(--ink); }
.mt-header.is-solid .mt-lang__opt { color: var(--ink-dim); }
.mt-header.is-solid .mt-lang__opt.is-active { background: var(--ink); color: var(--paper); }

@media (max-width: 640px) { .mt-header .mt-logo__img { height: 42px; } }
@media (max-width: 1023px) {
	/* Open mobile menu always gets the solid bar so links stay legible */
	.mt-header:has(.mt-nav.is-open) { background: rgba(216,210,195,.96); backdrop-filter: blur(12px); border-bottom-color: var(--paper-line); }
	.mt-header:has(.mt-nav.is-open) .mt-nav__list a { color: var(--ink-dim); }
	.mt-header:has(.mt-nav.is-open) .mt-nav-toggle__bar { background: var(--ink); }
	.mt-header:has(.mt-nav.is-open) .mt-logo__img--dark { display: block; }
	.mt-header:has(.mt-nav.is-open) .mt-logo__img--light { display: none; }
	/* Language toggle in the open mobile menu: solid-bar (ink) treatment */
	.mt-nav .mt-lang { margin-top: 14px; align-self: flex-start; }
	.mt-header:has(.mt-nav.is-open) .mt-lang,
	.mt-header:has(.mt-nav.is-open) .mt-lang__opt + .mt-lang__opt { border-color: var(--ink); }
	.mt-header:has(.mt-nav.is-open) .mt-lang__opt { color: var(--ink-dim); }
	.mt-header:has(.mt-nav.is-open) .mt-lang__opt.is-active { background: var(--ink); color: var(--paper); }
}
/* Crossfade between rotating hero clips */
.mt-heromedia__video { opacity: 0; transition: opacity .6s ease; }
.mt-heromedia__video.is-active { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   IMAGERY LAYER — evidence footage hero + jurisdiction exhibits
   London · New York · Amsterdam, graded to the brand.
   ══════════════════════════════════════════════════════════ */
.mt-hero--exhibit .mt-marked { color: #fff; }
.mt-hero--exhibit .mt-hero__lede { color: #fff; }
.mt-heromedia__note {
	position: absolute; right: 18px; bottom: 13px; z-index: 2;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
	text-transform: uppercase; color: rgba(232,235,244,.55);
}
/* First sheet tucks up over the bottom of the footage */
main .mt-hero--exhibit + .mt-sheet { margin-top: clamp(-72px, -5vw, -36px); }

/* Jurisdiction triptych */
.mt-exhibits3 {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.2vw, 28px);
	padding-inline: clamp(18px, 2.4vw, 30px);
}
.mt-exhibits3 figure { margin: 0; }
.mt-sheet--photo .mt-exhibits3 .mt-exhibit__media { margin-inline: 0; height: clamp(200px, 24vw, 330px); }
.mt-exhibit__media--b::after { content: "B"; }
.mt-exhibit__media--c::after { content: "C"; }
.mt-exhibit__place {
	display: block; margin-top: 12px;
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}
.mt-exhibit__place strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .mt-exhibits3 { grid-template-columns: 1fr; } }
@media (max-width: 1240px) { .mt-sheet--photo .mt-exhibits3 { padding-top: 48px; } }

/* ══════════════════════════════════════════════════════════
   FOOTER v2 — the bundle's back cover
   ══════════════════════════════════════════════════════════ */
.mt-footer__thesis {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 24px; padding-bottom: 44px; margin-bottom: 44px;
	border-bottom: 1px solid var(--bp-line);
}
.mt-footer__line {
	margin: 0; font-family: var(--serif); font-weight: 600;
	font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.015em;
	color: #fff; text-wrap: balance; max-width: 26ch;
}
.mt-footer__line em {
	font-style: normal; position: relative; white-space: normal;
	background: linear-gradient(90deg, #7EA0FF, #C084FC 55%, var(--orange));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mt-footer__cta { color: #fff; border-color: rgba(255,255,255,.4); }
.mt-footer__cta:hover { border-color: var(--orange); color: var(--orange); }
.mt-footer__grid { grid-template-columns: 1.25fr 1fr 1fr 1fr; }
.mt-footer__label {
	display: block; margin: 0 0 16px;
	font-family: var(--mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; color: var(--lt-dim);
}
.mt-footer__filing {
	margin: 20px 0 0; padding: 12px 14px; width: fit-content;
	border: 1px solid var(--bp-line);
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--lt-dim); line-height: 2;
}
.mt-footer__filing .mt-live { display: inline-block; vertical-align: baseline; margin-right: 7px; }
.mt-footer__list--index { counter-reset: mtfoot; }
.mt-footer__list--index li { counter-increment: mtfoot; }
.mt-footer__list--index a::before {
	content: counter(mtfoot, decimal-leading-zero) "  ";
	color: #7EA0FF; letter-spacing: .08em;
}
.mt-footer__addr {
	font-style: normal; font-family: var(--mono); font-size: 12.5px;
	letter-spacing: .03em; line-height: 1.75; color: var(--lt-dim); margin: 0 0 8px;
}
.mt-footer__addr strong { display: block; color: var(--lt); font-weight: 600; margin-bottom: 2px; }
.mt-footer__office + .mt-footer__office { margin-top: 20px; }
@media (max-width: 1100px) { .mt-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mt-footer__grid { grid-template-columns: 1fr; } }

/* ───────── Live-jurisdiction tracker — the dot follows the footage ───────── */
.mt-docref__juris { display: inline-flex; align-items: center; gap: 7px; opacity: .55; transition: opacity .45s ease; }
.mt-docref__juris.is-live { opacity: 1; }
.mt-docref__juris .mt-live { opacity: 0; transform: scale(.3); transition: opacity .45s ease, transform .45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.mt-docref__juris.is-live .mt-live { opacity: 1; transform: none; }
.mt-docref__sep { opacity: .45; margin-inline: 9px; }


/* ══════════════════════════════════════════════════════════
   V2 — INTERACTION LAYER
   Spec-note tooltips, Fig.0 rollovers, Fig.1 rail fill +
   hover preview, failure-pattern cross-refs, table row hover.
   ══════════════════════════════════════════════════════════ */
.has-tip { position: relative; }
.mt-tip {
	position: absolute; bottom: calc(100% + 13px); left: 50%;
	width: 230px; padding: 12px 14px 13px;
	transform: translate(-50%, 5px);
	background: rgba(10,17,31,.97);
	border: 1px solid var(--bp-line); border-left: 3px solid var(--orange);
	border-radius: 2px;
	text-align: left; white-space: normal;
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 40;
	transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
	box-shadow: 0 16px 34px rgba(0,0,0,.4);
}
.mt-tip::after {
	content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top-color: rgba(10,17,31,.97);
}
.has-tip:hover > .mt-tip, .has-tip:focus-visible > .mt-tip {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.mt-tip__ref {
	display: block; font-family: var(--mono); font-size: 10px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: #7EA0FF; margin-bottom: 6px;
}
.mt-tip__body {
	display: block; font-family: var(--sans); font-size: 13px; font-weight: 400;
	line-height: 1.5; color: var(--lt); text-transform: none; letter-spacing: 0;
}
.mt-tip--left { left: 0; transform: translate(0, 5px); }
.mt-tip--left::after { left: 22px; transform: none; }
.has-tip:hover > .mt-tip--left, .has-tip:focus-visible > .mt-tip--left { transform: translate(0, 0); }
.mt-tip--right { left: auto; right: 0; transform: translate(0, 5px); }
.mt-tip--right::after { left: auto; right: 22px; transform: none; }
.has-tip:hover > .mt-tip--right, .has-tip:focus-visible > .mt-tip--right { transform: translate(0, 0); }
@media (hover: none) { .mt-tip { display: none; } }

/* Fig. 0 — hoverable, linked stations */
a.mt-schematic__station--mini { text-decoration: none; cursor: pointer; border-radius: 4px; padding: 6px 6px 10px; transition: background .15s ease; }
a.mt-schematic__station--mini:hover { background: rgba(255,255,255,.06); }
a.mt-schematic__station--mini .mt-schematic__tick { transition: background .15s ease; }
a.mt-schematic__station--mini:hover .mt-schematic__tick { background: var(--orange); }
.mt-hero--exhibit a.mt-schematic__station--mini:hover .mt-schematic__name { color: #fff; }

/* Fig. 1 — rail progress fill up to the hovered/active station */
.mt-schematic__railfill {
	position: absolute; left: 7%; top: 20px; height: 2px; width: 0;
	background: var(--orange); box-shadow: 0 0 10px rgba(249,115,22,.45);
	z-index: 0; pointer-events: none;
	transition: width .28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (max-width: 960px) { .mt-schematic__railfill { display: none; } }

/* Fig. 1 — hover previews a stage before committing */
.mt-callout.is-preview { border-left-style: dashed; opacity: .78; }

/* Failure patterns — restored hover + stage cross-references */
.mt-failgrid__item { transition: background .18s ease; }
.mt-failgrid__item:hover { background: linear-gradient(90deg, rgba(120,158,255,.06), transparent 75%); }
.mt-failgrid__xref {
	display: inline-block; margin-top: 10px;
	font-family: var(--mono); font-size: 11px; font-weight: 500;
	letter-spacing: .1em; text-transform: uppercase;
	color: #7EA0FF; text-decoration: none;
	border-bottom: 1px dashed rgba(126,160,255,.45); padding-bottom: 2px;
	transition: color .15s ease, border-color .15s ease;
}
.mt-failgrid__xref:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Table 1 — row hover deepens the CF1 column */
.mt-spec tbody th, .mt-spec tbody td { transition: background .18s ease; }
.mt-spec tbody tr:hover th, .mt-spec tbody tr:hover td:not(.mt-spec__cf1) { background: rgba(23,28,44,.03); }
.mt-spec tbody tr:hover td.mt-spec__cf1 { background: rgba(37,99,235,.13); }

/* Recorded-result stamp — provenance on hover (counter-rotates the tip) */
.mt-stamp.has-tip { cursor: help; }
.mt-stamp .mt-tip { transform: translate(-50%, 5px) rotate(2.5deg); width: 250px; }
.mt-stamp:hover > .mt-tip { transform: translate(-50%, 0) rotate(2.5deg); }

@media (prefers-reduced-motion: reduce) {
	.mt-tip, .mt-schematic__railfill, .mt-failgrid__item, .mt-failgrid__xref { transition: none; }
}

/* ───────── GrowthEngine form wrappers ───────── */
/*
 * These rules style only the WRAPPER around GrowthEngine embeds.
 * The GrowthEngine iframe interior is cross-origin — theme CSS cannot reach it.
 * Match form field colours, fonts, and button styles inside GrowthEngine's form
 * builder using the values documented in GE-FORM-STYLING.md.
 */
.mt-ge-form {
	width: 100%;
}

.mt-ge-form__wrap {
	/* The theme owns the CARD: background, border, radius, padding, lift.
	   GrowthEngine owns only the fields + button (set the GrowthEngine form
	   background to transparent and its padding to 0 — see GE-FORM-STYLING.md).
	   This keeps all 8 form cards visually identical regardless of the embed. */
	background: var(--sheet);              /* #FDFCF8 — plain white sheet */
	border: 1px solid var(--paper-line);
	border-radius: 10px;
	padding: clamp(20px, 2.4vw, 30px);
	box-shadow: 0 12px 34px rgba(23, 28, 44, .06);
	overflow: hidden;     /* clip the iframe corners to the card radius */
	/* Allow the GrowthEngine iframe to expand freely — do not set a fixed height here */
}

/* Make GrowthEngine's injected iframe responsive */
.mt-ge-form__wrap iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	border: 0;
}

/* Placeholder — shown when the Customizer slot is empty (staging / preview) */
.mt-ge-form__placeholder {
	padding: 32px 26px;
	border: 2px dashed var(--paper-line);
	border-radius: 3px;
	background: #FBFAF7;
	text-align: center;
}
.mt-ge-form__placeholder-label {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-dim);
	margin: 0 0 8px;
}
.mt-ge-form__slot-key {
	color: var(--blue);
	font-weight: 600;
}
.mt-ge-form__placeholder-hint {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--ink-dim);
	margin: 0;
	letter-spacing: .04em;
}

/* Privacy notice */
.mt-ge-form__privacy {
	margin: 12px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--ink-dim);
	line-height: 1.6;
}
.mt-ge-form__privacy-link {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ───────── Offices (Contact — "Two offices. One system.") ───────── */
.mt-offices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3vw, 40px);
	margin-top: clamp(28px, 3.5vw, 44px);
}
.mt-office {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--paper-line);
	background: #FBFAF7;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mt-office:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,28,44,.1); }
.mt-office__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mt-office__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-office__flag {
	position: absolute; left: 12px; bottom: 12px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
	color: var(--ink); background: rgba(244,242,236,.92);
	border: 1px solid var(--paper-line);
}
.mt-office__body {
	display: flex; flex-direction: column; flex: 1;
	gap: 10px;
	padding: clamp(18px, 2vw, 28px);
}
.mt-office__ref {
	font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ink-dim);
}
.mt-office__title {
	margin: 0;
	font-family: var(--serif); font-weight: 600;
	font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; color: var(--ink);
}
.mt-office__addr {
	font-style: normal; color: var(--ink-dim);
	line-height: 1.6; font-size: 15px;
}
.mt-office__links {
	display: flex; flex-wrap: wrap; gap: 6px 20px;
	margin-top: auto; padding-top: 6px;
}
.mt-office__links a {
	font-size: 14px; color: var(--ink); text-decoration: none;
	border-bottom: 1px solid var(--paper-line); padding-bottom: 1px;
	transition: border-color .15s ease, color .15s ease;
}
.mt-office__links a:hover { color: var(--blue); border-color: var(--blue); }
@media (max-width: 960px) {
	.mt-offices { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STOPGAP COMPONENT STYLES — added to cover markup that shipped without CSS.
   Matches existing token/aesthetic conventions. Bespoke diagrams
   (mt-lifecycle, mt-cf1, mt-proof, mt-juris tabs, mt-sysmap, mt-flow) are
   intentionally NOT here — those need styling against the design project.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typography utilities ── */
.mt-h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 6vw, 62px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.mt-mono { font-family: var(--mono); }

/* ── Assurance chips (light) ── */
.mt-assure { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mt-assure__chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); padding: 6px 12px; border: 1px solid var(--paper-line); border-radius: 999px; }
.mt-assure__chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex: none; }

/* ── Pull quotes (light default, inverted inside dark sheets) ── */
.mt-quote { margin: 0 0 clamp(20px, 2.5vw, 28px); padding-left: clamp(16px, 2vw, 22px); border-left: 3px solid var(--blue); }
.mt-quote:last-child { margin-bottom: 0; }
.mt-quote p { margin: 0 0 12px; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.32; color: var(--ink); }
.mt-quote cite { display: block; font-family: var(--mono); font-style: normal; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.mt-sheet--dark .mt-quote p { color: var(--lt); }
.mt-sheet--dark .mt-quote cite { color: var(--lt-dim); }

/* ── Read link ── */
.mt-readlink { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--paper-line); padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; }
.mt-readlink:hover { color: var(--blue); border-color: var(--blue); }

/* ── Article meta row ── */
.mt-artmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-dim); }
.mt-artmeta__topic { color: var(--blue); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* ── Featured (Insights, light) ── */
.mt-featured { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 3.5vw, 44px); }
.mt-featured__aside { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
.mt-featured__mini { border-top: 1px solid var(--paper-line); padding-top: 18px; }
.mt-featured__mini:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 960px) { .mt-featured { grid-template-columns: 1fr; } }

/* ── Topic filter chips (Insights library, DARK) ── */
.mt-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(20px, 2.5vw, 30px) 0; }
.mt-filter__chip { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-dim); background: transparent; border: 1px solid var(--bp-line); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.mt-filter__chip:hover { color: var(--lt); border-color: rgba(120,158,255,.4); }
.mt-filter__chip.is-active { color: var(--bp); background: var(--lt); border-color: var(--lt); }

/* ── Docket (Insights article list, DARK) ── */
.mt-docket { border-top: 1px solid var(--bp-line); }
.mt-docket__row { display: grid; grid-template-columns: 64px 1fr; gap: 2px 20px; padding: 22px 0; border-bottom: 1px solid var(--bp-line); }
/* Topic filter: a plain [hidden] attribute is beaten by the display:grid above, so
   inactive rows stayed visible. This lets the hidden attribute actually hide them. */
.mt-docket__row[hidden] { display: none; }
.mt-docket__ref { grid-column: 1; grid-row: 1 / span 3; padding-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--lt-dim); }
.mt-docket__title { grid-column: 2; margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(18px, 2vw, 23px); line-height: 1.2; }
.mt-docket__title a { color: var(--lt); text-decoration: none; }
.mt-docket__title a:hover { color: #fff; }
.mt-docket__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--lt-dim); }
.mt-docket__topic { color: #7EA0FF; text-transform: uppercase; letter-spacing: .08em; }
.mt-docket__desc { grid-column: 2; margin: 8px 0 0; max-width: 68ch; color: var(--lt-dim); line-height: 1.55; font-size: 15px; }
.mt-docket__empty { padding: 24px 0; font-family: var(--mono); color: var(--lt-dim); }
@media (max-width: 640px) {
	.mt-docket__row { grid-template-columns: 1fr; }
	.mt-docket__ref { grid-row: auto; }
	.mt-docket__title, .mt-docket__meta, .mt-docket__desc { grid-column: 1; }
}

/* ── Docket, RICH variant (Articles index): thumbnails + hover ── */
.mt-docket--rich .mt-docket__row { grid-template-columns: 52px 148px 1fr; align-items: start; padding: 20px 14px; transition: background .18s ease, box-shadow .18s ease; }
.mt-docket--rich .mt-docket__ref { grid-column: 1; }
.mt-docket--rich .mt-docket__thumb { grid-column: 2; grid-row: 1 / span 3; display: block; width: 148px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid var(--bp-line); background: var(--bp-2); }
.mt-docket--rich .mt-docket__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.mt-docket--rich .mt-docket__thumb--ph {
	background:
		linear-gradient(var(--bp-line) 1px, transparent 1px) 0 0 / 100% 15px,
		linear-gradient(90deg, var(--bp-line) 1px, transparent 1px) 0 0 / 15px 100%,
		var(--bp-2);
}
.mt-docket--rich .mt-docket__title, .mt-docket--rich .mt-docket__meta, .mt-docket--rich .mt-docket__desc { grid-column: 3; }
.mt-docket--rich .mt-docket__row:hover { background: rgba(126,160,255,.05); box-shadow: inset 3px 0 0 var(--orange); }
.mt-docket--rich .mt-docket__row:hover .mt-docket__thumb img { transform: scale(1.06); }
.mt-docket--rich .mt-docket__row:hover .mt-docket__title a { color: #fff; }
.mt-docket--rich .mt-docket__row:hover .mt-docket__ref { color: var(--orange); }
@media (max-width: 640px) {
	.mt-docket--rich .mt-docket__row { grid-template-columns: 1fr; }
	.mt-docket--rich .mt-docket__thumb { grid-column: 1; grid-row: auto; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 10px; }
	.mt-docket--rich .mt-docket__title, .mt-docket--rich .mt-docket__meta, .mt-docket--rich .mt-docket__desc { grid-column: 1; }
}

/* ── Perspectives (Insights, DARK) ── */
.mt-persp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px); margin-top: clamp(20px, 2.5vw, 30px); }
@media (max-width: 960px) { .mt-persp { grid-template-columns: 1fr; } }

/* ── Topic index (Insights, light tinted) ── */
.mt-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(20px, 2.5vw, 30px); background: var(--paper-line); border: 1px solid var(--paper-line); }
.mt-topic { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--paper); text-decoration: none; transition: background .15s ease; }
.mt-topic:hover { background: #FBFAF7; }
.mt-topic__name { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); }
.mt-topic__count { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-dim); }
.mt-topic__go { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
@media (max-width: 960px) { .mt-topics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mt-topics { grid-template-columns: 1fr; } }

/* ── Cause list (Webinars sessions, DARK) ── */
.mt-causelist { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--bp-line); }
.mt-causelist__row { display: grid; grid-template-columns: 160px 1fr auto; grid-template-areas: "when title reserve" "when desc reserve"; gap: 6px 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--bp-line); }
.mt-causelist__when { grid-area: when; display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-dim); }
.mt-causelist__when strong { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--lt); }
.mt-causelist__title { grid-area: title; margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(18px, 2vw, 23px); line-height: 1.2; color: var(--lt); }
.mt-causelist__desc { grid-area: desc; margin: 6px 0 0; max-width: 60ch; color: var(--lt-dim); line-height: 1.5; font-size: 14.5px; }
.mt-causelist__row .mt-btn { grid-area: reserve; align-self: center; }
@media (max-width: 860px) {
	.mt-causelist__row { grid-template-columns: 1fr; grid-template-areas: "when" "title" "desc" "reserve"; }
	.mt-causelist__row .mt-btn { justify-self: start; margin-top: 10px; }
}

/* ── White-paper cover mock (light) ── */
.mt-cover { display: flex; flex-direction: column; gap: 12px; width: min(300px, 80vw); aspect-ratio: 3 / 4; padding: 32px 28px; background: linear-gradient(160deg, var(--bp), var(--bp-2)); border: 1px solid var(--bp-line); box-shadow: 0 24px 60px rgba(12,20,36,.28); }
.mt-cover__ref { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lt-dim); }
.mt-cover__title { margin: auto 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; color: var(--lt); }
.mt-cover__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--lt-dim); }

/* ── Insights archive (WP-driven listing, light) ── */
.mt-insights-hero { padding-bottom: clamp(8px, 1.5vw, 18px); }
.mt-insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); }
.mt-icard { display: flex; flex-direction: column; border: 1px solid var(--paper-line); background: #FBFAF7; }
.mt-icard__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.mt-icard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-icard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 24px); }
.mt-icard__body .mt-h3 { margin: 0 0 8px; }
.mt-icard__body .mt-h3 a { color: var(--ink); text-decoration: none; }
.mt-icard__body .mt-h3 a:hover { color: var(--blue); }
@media (max-width: 960px) { .mt-insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mt-insights-grid { grid-template-columns: 1fr; } }

/* ── Single article prose (light) ── */
.mt-article { max-width: 720px; }
.mt-article > * + * { margin-top: 1.2em; }
.mt-article p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink); }
.mt-article h2 { margin: 1.6em 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--ink); }
.mt-article h3 { margin: 1.4em 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); }
.mt-article ul, .mt-article ol { margin: 0; padding-left: 1.3em; color: var(--ink); line-height: 1.7; }
.mt-article li + li { margin-top: .5em; }
.mt-article a { color: var(--blue); text-underline-offset: 2px; }
.mt-article blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--blue); font-family: var(--serif); font-style: italic; color: var(--ink-dim); }
.mt-article img { max-width: 100%; height: auto; }

/* ── Article byline (over dark hero media) ── */
.mt-article__byline { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--lt-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   BESPOKE DIAGRAM COMPONENTS — v1.0.3
   Styles for mt-lifecycle, mt-cf1, mt-proof, mt-juris, mt-sysmap, mt-flow.
   All use existing design tokens; no new values introduced.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── mt-lifecycle: interactive lifecycle wrapper (CF1 section, dark) ── */
/* Wraps the .mt-schematic tab rail and the .mt-callout panels beneath it.
   Panel show/hide is managed by the HTML `hidden` attr (via JS) + is-active class;
   the UA [hidden] rule hides inactive panels — do NOT override display on .mt-callout
   or the hover-preview mechanic (which sets hidden=true on the active panel briefly)
   will break. */
.mt-lifecycle {
	margin-top: clamp(28px, 3.5vw, 44px);
}

/* ── mt-cf1: the CF1 lifecycle section (dark blueprint, homepage Cl.05) ── */
/* Used as a scroll target by the stage cross-link JS. Inherits
   .mt-sheet.mt-sheet--dark; adds an orange accent below the clause header
   to signal this is the system's centrepiece. */
.mt-cf1 .mt-clause {
	border-bottom: 1px solid rgba(249, 115, 22, .2);
	padding-bottom: clamp(16px, 2vw, 22px);
	margin-bottom: clamp(16px, 2vw, 22px);
}

/* ── mt-proof: recorded-result section (padded paper, homepage Cl.04) ── */
/* All sub-components (stat, stamp, split) are already styled.
   The section modifier adds an orange accent stripe beside the margin rule,
   reinforcing that this is evidenced performance, not a claim. */
.mt-proof::before {
	content: "";
	position: absolute; left: 77px; top: 0; bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--orange) 0%, rgba(249, 115, 22, 0) 100%);
	border-radius: 0 2px 2px 0;
	opacity: .5;
}
@media (max-width: 860px) { .mt-proof::before { display: none; } }

/* ── mt-juris: jurisdiction tab component (About page, light section) ── */
.mt-juris {
	margin-top: clamp(24px, 3vw, 38px);
	border: 1px solid var(--paper-line);
	background: #FBFAF7;
	border-radius: 2px;
	overflow: hidden;
}
.mt-juris__tabs {
	display: flex;
	border-bottom: 1px solid var(--paper-line);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.mt-juris__tab {
	flex: none;
	padding: 14px 22px;
	font-family: var(--mono); font-size: 12px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-dim); background: none; border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px; cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.mt-juris__tab:hover { color: var(--ink); }
.mt-juris__tab.is-active { color: var(--ink); border-bottom-color: var(--orange); }

/* Panels: hidden via HTML `hidden` attr; .is-active drives display */
.mt-juris__panel.is-active {
	display: grid;
	grid-template-columns: minmax(180px, .38fr) 1fr;
	grid-template-rows: auto 1fr;
}
.mt-juris__media {
	grid-column: 1; grid-row: 1 / span 2;
	position: relative; overflow: hidden; min-height: 260px;
	border-right: 1px solid var(--paper-line);
}
.mt-juris__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-juris__chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.5vw, 28px) 14px;
	border-bottom: 1px solid var(--paper-line);
	align-content: flex-start;
}
.mt-juris__chip {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-dim); border: 1px solid var(--paper-line);
	border-radius: 999px; padding: 5px 12px;
}
.mt-juris__panel.is-active > p {
	grid-column: 2; align-self: start;
	padding: 18px clamp(20px, 2.5vw, 28px) clamp(18px, 2.5vw, 26px);
	margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-dim);
}
@media (max-width: 720px) {
	.mt-juris__panel.is-active {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	.mt-juris__media {
		grid-column: 1; grid-row: 1;
		min-height: 190px;
		border-right: 0;
		border-bottom: 1px solid var(--paper-line);
	}
	.mt-juris__chips { grid-column: 1; }
	.mt-juris__panel.is-active > p { grid-column: 1; }
}

/* ── mt-sysmap: system alignment diagram (Who We Work With, dark) ── */
.mt-sysmap {
	display: flex; flex-direction: column;
	align-items: center; gap: 0;
	max-width: 760px; margin-inline: auto;
}
.mt-sysmap__row {
	display: flex; gap: clamp(10px, 2vw, 28px);
	justify-content: space-between; width: 100%;
}
.mt-sysmap__node {
	flex: 1; display: flex; flex-direction: column; gap: 5px;
	padding: 16px 18px; text-align: center;
	border: 1px solid var(--bp-line); border-radius: 3px;
	background: rgba(120, 158, 255, .05);
	font-family: var(--mono); font-size: 12px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase; color: var(--lt);
}
.mt-sysmap__node small {
	font-family: var(--sans); font-size: 11.5px; font-weight: 400;
	letter-spacing: 0; text-transform: none; color: var(--lt-dim);
}
.mt-sysmap__node--wide {
	flex: none; max-width: 360px; width: 100%;
	border-color: rgba(249, 115, 22, .45);
	background: rgba(249, 115, 22, .06);
}
.mt-sysmap__joins {
	width: 100%; height: 44px; overflow: visible;
}
.mt-sysmap__joins path {
	stroke: var(--bp-line); stroke-width: 1.5; fill: none;
}
.mt-sysmap__layer {
	font-family: var(--mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--orange); background: var(--bp);
	padding: 5px 18px;
	border: 1px solid rgba(249, 115, 22, .4);
	border-radius: 999px;
	margin-bottom: 2px;
}
.mt-sysmap__tick {
	width: 1.5px; height: 22px;
	background: var(--bp-line);
	margin: 0 auto;
}
@media (max-width: 640px) {
	.mt-sysmap__row { flex-direction: column; align-items: center; }
	.mt-sysmap__node { width: 100%; }
	.mt-sysmap__joins { display: none; }
}

/* ── mt-flow: expected vs actual flow diagram (Second Opinion, dark) ── */
.mt-flow {
	display: flex; flex-direction: column; gap: 4px;
	margin-top: clamp(20px, 2.5vw, 30px);
	padding: clamp(20px, 2.5vw, 28px);
	border: 1px solid var(--bp-line); border-radius: 3px;
	background: rgba(13, 22, 42, .55);
}
.mt-flow__label {
	font-family: var(--mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--lt-dim);
	margin: 18px 0 10px;
}
.mt-flow__label:first-child { margin-top: 0; }
.mt-flow__row {
	display: flex; flex-wrap: wrap;
	align-items: center; gap: 6px 4px;
}
.mt-flow__node {
	font-family: var(--mono); font-size: 12.5px; font-weight: 600;
	letter-spacing: .03em; color: var(--lt);
	padding: 8px 14px;
	border: 1px solid var(--bp-line);
	background: rgba(120, 158, 255, .07);
	border-radius: 3px; white-space: nowrap;
}
.mt-flow__row--expected .mt-flow__node {
	border-color: rgba(120, 158, 255, .25);
	color: var(--lt-dim);
}
.mt-flow__arrow {
	font-family: var(--mono); font-size: 14px;
	color: var(--lt-dim); flex: none; padding: 0 2px;
}
.mt-flow__leak {
	font-family: var(--mono); font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--orange);
	padding: 7px 12px;
	border: 1px dashed rgba(249, 115, 22, .38);
	background: rgba(249, 115, 22, .07);
	border-radius: 3px; white-space: nowrap;
}
@media (max-width: 600px) {
	.mt-flow__node, .mt-flow__leak { font-size: 11.5px; padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLAIMANT PARTICIPATION OPINION (CPO) — page additions
   New components + dark-context variants only. No global styles are modified;
   every rule below is additive (applies only where its class is present) and
   uses existing design tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fine print — terms notes, turnaround copy, product disclaimer */
.mt-finenote {
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.7;
	letter-spacing: .02em;
	color: var(--ink-dim);
	margin-top: 1.4em;
}
.mt-finenote a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.mt-cpo-disclaimer { padding-top: clamp(28px, 4vw, 46px); padding-bottom: clamp(28px, 4vw, 46px); }

/* Datarow — light variant for blueprint (dark) sheets */
.mt-datarow--light > div { border-bottom-color: var(--bp-line); }
.mt-datarow--light dt { color: var(--lt-dim); }
.mt-datarow--light dd { color: var(--lt); }

/* Assurance chips over the hero video */
.mt-assure--onmedia .mt-assure__chip {
	color: var(--lt);
	border-color: rgba(232, 235, 244, .32);
	background: rgba(12, 20, 36, .42);
}

/* Illustrative CPO output card (on blueprint sheet) — text only, not a dashboard */
.mt-cpo-output { margin-top: 34px; }
.mt-cpo-output__card {
	max-width: 640px;
	margin-inline: auto;
	background: var(--bp-2);
	border: 1px solid var(--bp-line);
	border-radius: 3px;
	padding: clamp(20px, 2.6vw, 30px);
}
.mt-cpo-output__head {
	display: flex; flex-wrap: wrap; gap: 10px 16px;
	align-items: center; justify-content: space-between;
	padding-bottom: 14px; border-bottom: 1px solid var(--bp-line);
}
.mt-cpo-output__doc {
	font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--lt);
}
.mt-cpo-output__flag {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--bp); background: var(--orange);
	padding: 4px 10px; border-radius: 999px; font-weight: 600;
}
.mt-cpo-output__card .mt-datarow { margin-top: 6px; }
.mt-cpo-output__action { margin: 16px 0 0; color: var(--lt); font-size: 15px; line-height: 1.55; }
.mt-cpo-output__label {
	display: block; font-family: var(--mono); font-size: 11px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--lt-dim);
	margin-bottom: 5px;
}

/* FAQ — semantic <details>, styled to match .mt-paper */
.mt-faq { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.mt-faq__item { border: 1px solid var(--paper-line); background: #FBFAF7; border-radius: 3px; }
.mt-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 18px 22px; cursor: pointer; list-style: none;
	font-family: var(--serif); font-weight: 600;
	font-size: clamp(16px, 1.7vw, 19px); line-height: 1.35; color: var(--ink);
}
.mt-faq__q::-webkit-details-marker { display: none; }
.mt-faq__q:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mt-faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.mt-faq__icon::before, .mt-faq__icon::after {
	content: ""; position: absolute; background: var(--blue); transition: transform .18s ease;
}
.mt-faq__icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.mt-faq__icon::after { top: 0; left: 6px; width: 2px; height: 14px; }
.mt-faq__item[open] .mt-faq__icon::after { transform: scaleY(0); }
.mt-faq__a { padding: 0 22px 20px; color: var(--ink-dim); }
.mt-faq__a p { margin: 0 0 .8em; line-height: 1.6; }
.mt-faq__a p:last-child { margin-bottom: 0; }
.mt-faq__a .mt-list { margin: .4em 0 .8em; }

@media (prefers-reduced-motion: reduce) {
	.mt-faq__icon::before, .mt-faq__icon::after { transition: none; }
}

/* GrowthEngine forms embedded inside a .mt-paper card (e.g. Contact "Not ready
   to talk?" — white_paper / webinar_register / newsletter): the paper IS the
   card, so the embed must NOT draw a second card. Prevents card-in-card and the
   cramped/undersized look. */
.mt-paper .mt-ge-form__wrap {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.mt-paper .mt-ge-form { margin-top: 14px; }

/* Footer newsletter (Option 1): a dedicated DARK GrowthEngine form in the dark footer.
   The embed wrapper must NOT be the light body card, and the theme privacy note must be
   light. The fields/button are styled dark inside GrowthEngine (footer variant in
   GE-FORM-STYLING.md). Iframe is lazy-loaded (loading="lazy") so it doesn't cost page speed. */
.mt-footer .mt-ge-form { margin-top: 14px; max-width: 320px; }
.mt-footer .mt-ge-form__wrap {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.mt-footer .mt-ge-form__privacy { color: var(--lt-dim); }
.mt-footer .mt-ge-form__privacy-link { color: var(--lt); }

/* Contact block now lives in the brand column — space it under the filing block. */
.mt-footer__brand .mt-footer__contact { margin-top: 28px; }

/* Footer newsletter — titled signup in its own subtle box for emphasis
   (matches the bordered "filing" block already in the footer). It's the sole
   content of column 4, so it sits at the top and keeps its natural height. */
.mt-footer__signup {
	align-self: start;
	padding: 18px;
	border: 1px solid var(--bp-line);
	border-radius: 6px;
	background: rgba(255, 255, 255, .02);
}
.mt-footer__signup-desc {
	margin: 6px 0 0;
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--lt-dim);
	max-width: 32ch;
}
.mt-footer__signup-arrow { color: var(--lt-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED ARTICLE (single post) — reading-engagement features. All on-brand.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reading progress bar */
.mt-readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--orange); z-index: 300; transition: width .1s linear; }

/* Long-form layout: "On this page" rail + article */
.mt-longform { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.mt-toc { position: sticky; top: 108px; align-self: start; }
.mt-toc__label { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px; }
.mt-toc__nav { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--paper-line); }
.mt-toc__link { font-family: var(--mono); font-size: 12px; line-height: 1.45; letter-spacing: .02em; color: var(--ink-dim); text-decoration: none; padding: 1px 0 1px 14px; margin-left: -1px; border-left: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.mt-toc__link:hover { color: var(--ink); }
.mt-toc__link.is-active { color: var(--blue); border-left-color: var(--blue); }
@media (max-width: 1023px) {
	.mt-longform { grid-template-columns: 1fr; gap: 22px; }
	.mt-toc { position: static; top: auto; border: 1px solid var(--paper-line); border-radius: 6px; padding: 16px 18px; background: #FBFAF7; }
	.mt-toc__nav { border-left: 0; gap: 8px; }
	.mt-toc__link, .mt-toc__link.is-active { padding-left: 0; border-left: 0; }
}

/* Share row (dark hero byline) */
.mt-share { display: inline-flex; gap: 8px; align-items: center; }
.mt-share__btn { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-dim); background: transparent; border: 1px solid rgba(232,235,244,.28); border-radius: 3px; padding: 6px 11px; cursor: pointer; text-decoration: none; line-height: 1; transition: color .15s ease, border-color .15s ease; }
.mt-share__btn:hover { color: var(--lt); border-color: rgba(232,235,244,.55); }

/* Back to top */
.mt-totop { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--paper-line); background: var(--sheet); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; z-index: 150; box-shadow: 0 8px 24px rgba(23,28,44,.14); }
.mt-totop.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* Prose enhancements */
.mt-article h2, .mt-article h3 { scroll-margin-top: 90px; }
.mt-article h3 { margin: 1.4em 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; color: var(--ink); }
.mt-article ul, .mt-article ol { margin: 1em 0; padding-left: 1.3em; }
.mt-article li { font-size: 17px; line-height: 1.7; color: var(--ink); margin-bottom: .5em; }
.mt-article a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.mt-article blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; font-family: var(--serif); font-style: normal; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; color: var(--ink); border-left: 4px solid var(--orange); }

/* Author pattern — "Key takeaways" box (Group/HTML block, class="mt-takeaways") */
.mt-article .mt-takeaways { margin: 2em 0; padding: 22px 26px; background: #FBFAF7; border: 1px solid var(--paper-line); border-left: 3px solid var(--blue); border-radius: 4px; }
.mt-article .mt-takeaways > :first-child { margin-top: 0; }
.mt-article .mt-takeaways-label { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }

/* Author pattern — big-stat callout (<p class="mt-stat"><b>97%</b> of families…</p>) */
.mt-article .mt-stat { margin: 1.6em 0; padding-left: 20px; border-left: 4px solid var(--orange); }
.mt-article .mt-stat b, .mt-article .mt-stat strong { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 5vw, 52px); line-height: 1; color: var(--ink); margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
	.mt-readbar, .mt-totop { transition: none; }
}

/* ═══ Article prose refinements + content-upgrade block ═══ */

/* Paragraph rhythm: a clear single-line break between paragraphs, justified body.
   (Overrides the earlier .mt-article p { margin:0 }.) */
.mt-article p { margin: 0 0 1.3em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.mt-article > :last-child { margin-bottom: 0; }
/* Keep callouts / quotes left-aligned (justify only suits running body copy) */
.mt-article .mt-stat, .mt-article blockquote, .mt-article .mt-upgrade * { text-align: left; }
/* Justified text reads poorly on very narrow screens — left-align on mobile */
@media (max-width: 600px) { .mt-article p { text-align: left; } }

/* Content upgrade — relate an article to a white paper + speak-to-team.
   Author drops this in as a Custom HTML block (see CONTENT-AUTHORING.md).
   Dark blueprint panel so it stands out inside the light prose. */
.mt-article .mt-upgrade {
	margin: 2.4em 0;
	padding: clamp(22px, 3vw, 30px);
	border-radius: 6px;
	color: var(--lt);
	background:
		linear-gradient(var(--bp-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
		linear-gradient(175deg, var(--bp) 0%, var(--bp-2) 100%);
	background-size: 22px 22px, 22px 22px, 100% 100%;
}
.mt-upgrade__eyebrow { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-dim); margin-bottom: 10px; }
.mt-upgrade__title { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; color: var(--lt); margin: 0 0 8px; }
.mt-upgrade__desc { color: var(--lt-dim); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.mt-upgrade__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.mt-upgrade__btn { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 12px 20px; border-radius: 3px; text-decoration: none; border: 1.5px solid transparent; transition: background .15s ease, border-color .15s ease; }
.mt-upgrade__btn--primary { background: var(--paper); color: var(--bp); }
.mt-upgrade__btn--primary:hover { background: #fff; }
.mt-upgrade__btn--ghost { border-color: rgba(232,235,244,.4); color: var(--lt); }
.mt-upgrade__btn--ghost:hover { border-color: var(--lt); }

/* Content-upgrade panel: force light title/desc over the article's dark prose rules
   (.mt-article h3 / .mt-article p out-specify the plain .mt-upgrade__* selectors). */
.mt-article .mt-upgrade__title { color: var(--lt); margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); }
.mt-article .mt-upgrade__desc  { color: var(--lt-dim); margin: 0 0 18px; font-size: 15px; }

/* Content upgrade — FORM variant: dark header + light form region (direct email capture) */
.mt-upgrade--form { padding: 0; overflow: hidden; }
.mt-upgrade__head { padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px) clamp(18px, 2.4vw, 22px); }
.mt-upgrade__form { padding: clamp(20px, 2.6vw, 28px); background: var(--sheet); }
/* the embedded GrowthEngine form sits directly in the light region — no nested card */
.mt-upgrade__form .mt-ge-form__wrap { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.mt-upgrade__form .mt-ge-form { margin: 0; max-width: 440px; }

/* Upgrade form region — tidy: the GE privacy note was inheriting .mt-article p
   (17px, justified); restore small mono, tighten the region, let the form fill width. */
.mt-article .mt-upgrade__form .mt-ge-form__privacy {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.6;
	text-align: left;
	color: var(--ink-dim);
}
.mt-upgrade__form { padding: clamp(18px, 2.2vw, 22px) clamp(20px, 2.6vw, 26px); }
.mt-upgrade__form .mt-ge-form { max-width: none; }

/* Content-upgrade header polish: amber accent rule under the eyebrow + tighter seam */
.mt-upgrade__head .mt-upgrade__eyebrow::after {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	margin-top: 10px;
	background: var(--orange);
}
.mt-upgrade__head { padding-bottom: clamp(14px, 1.8vw, 18px); }

/* ═══════════ Podcast — The Cat's Pyjamas ═══════════ */
/* Video-less exhibit hero: give the media layer a solid dark backdrop. */
.mt-pod-hero .mt-heromedia { background: var(--bp); }
.mt-pod-hero .mt-heromedia__grid { opacity: .55; }

/* Hero waveform motif */
.mt-pod-wave { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 68px; padding: 0 24px; opacity: .5; pointer-events: none; }
.mt-pod-wave i { width: 4px; border-radius: 3px; background: linear-gradient(var(--orange), #7EA0FF); animation: mtPodWave 1.4s ease-in-out infinite; transform-origin: bottom; }
.mt-pod-wave i:nth-child(1){ height: 24%; animation-delay: 0s; }
.mt-pod-wave i:nth-child(2){ height: 60%; animation-delay: .10s; }
.mt-pod-wave i:nth-child(3){ height: 38%; animation-delay: .20s; }
.mt-pod-wave i:nth-child(4){ height: 82%; animation-delay: .30s; }
.mt-pod-wave i:nth-child(5){ height: 50%; animation-delay: .15s; }
.mt-pod-wave i:nth-child(6){ height: 92%; animation-delay: .25s; }
.mt-pod-wave i:nth-child(7){ height: 34%; animation-delay: .05s; }
.mt-pod-wave i:nth-child(8){ height: 66%; animation-delay: .35s; }
.mt-pod-wave i:nth-child(9){ height: 28%; animation-delay: .20s; }
@keyframes mtPodWave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mt-pod-wave i { animation: none; } }

/* EP badge + featured episode bits */
.mt-pod-badge { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bp); background: var(--orange); padding: 5px 12px; border-radius: 999px; font-weight: 600; }
.mt-pod-guest { margin: 10px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: var(--lt-dim); }
.mt-pod-guest span { color: #7EA0FF; }
.mt-pod-soon { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--lt-dim); }

/* Listen + follow (light section) */
.mt-pod-listen { margin-bottom: 10px; }
.mt-pod-follow { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.mt-pod-follow a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--paper-line); padding-bottom: 2px; }
.mt-pod-follow a:hover { color: var(--blue); border-color: var(--blue); }

/* Episodes list (index, dark) */
.mt-pod-eplist { margin-top: 30px; border-top: 1px solid var(--bp-line); }
.mt-pod-ep { display: grid; grid-template-columns: 92px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--bp-line); }
.mt-pod-ep__num { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; padding-top: 4px; color: var(--lt-dim); }
.mt-pod-ep.is-live .mt-pod-ep__num { color: var(--orange); }
.mt-pod-ep__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mt-pod-ep__status { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-dim); border: 1px solid var(--bp-line); border-radius: 999px; padding: 3px 9px; }
.mt-pod-ep__status.is-live { color: var(--bp); background: var(--orange); border-color: var(--orange); }
.mt-pod-ep__topic { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7EA0FF; }
.mt-pod-ep__title { margin: 8px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2vw, 24px); line-height: 1.2; color: var(--lt); }
.mt-pod-ep__guest { margin: 6px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--lt-dim); }
.mt-pod-ep__desc { margin: 10px 0 0; max-width: 64ch; color: var(--lt-dim); line-height: 1.55; font-size: 15px; }
.mt-pod-ep .mt-readlink { margin-top: 12px; color: #7EA0FF; border-color: rgba(126,160,255,.35); }
@media (max-width: 640px) {
	.mt-pod-ep { grid-template-columns: 1fr; gap: 10px; }
}