/* ═══════════════════════════════════════════════════════════════════════════
   7 Centre — "Evolution" skin

   The identity the site already has, rebuilt at the scale it deserves. Same
   paper, sand, ink, purple and amber; same serif display. What changes is
   scale, rhythm and imagery: headlines roughly twice the size, real alternating
   bands instead of a continuous scroll of cards, and photography that carries
   the advisory work with the product inset into the same frame.

   7 Centre is an advisory practice and a platform company. The imagery has to
   say both at once, which is what .pairfig is for.

   Opt-in via ?skin=evolution. Self-contained: it loads neither site.css nor
   theme-2026.css, and the live theme is untouched by anything here.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Serif Display'; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url('../fonts/source-serif/source-serif-4-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Serif Display'; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url('../fonts/source-serif/source-serif-4-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: 'Body Sans'; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Body Sans'; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Body Sans'; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-600.woff2') format('woff2'); }
@font-face {
	font-family: 'Label Mono'; font-weight: 500; font-display: swap;
	src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'Noto Arabic'; font-weight: 400; font-display: swap; src: url('../fonts/noto-sans-arabic/noto-sans-arabic-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Arabic'; font-weight: 700; font-display: swap; src: url('../fonts/noto-sans-arabic/noto-sans-arabic-700.woff2') format('woff2'); }

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
	/* The brand, unchanged */
	--purple:  #92278f;
	--magenta: #f2295b;
	--amber:   #f5a623;
	/* The same amber, darkened for small text on paper. The brand value is a
	   graphic colour: at 2.03:1 on a white card it is thinner than the grey it
	   would replace. This one is 4.60:1 and reads as the same hue. */
	--amber-ink: #a86608;
	--sig: linear-gradient(90deg, #92278f 0%, #f2295b 52%, #f5a623 100%);

	/* Grounds */
	--paper:   #ffffff;
	--sand:    #fcf4e8;
	--sand-2:  #f7eddc;
	--deep:    #1a1e16;
	--deep-2:  #262b21;

	/* Ink */
	--ink:     #1a1e16;
	--ink-2:   #4e4e4c;
	--ink-3:   #747775;
	--on-deep: #f6f2ea;
	--on-deep-2: #b9b6ad;

	/* Rules, warmed to sit against the sand */
	/* A fitted product figure sits on a neutral ground: this skin's sand
	   casts warm across a cool grey mockup. */
	--fig-ground: #edeff2;
	--rule:    #e6e0d4;
	--rule-2:  #d3cabb;

	/* Accent that carries text on light: the brand purple */
	--accent:  var(--purple);
	--label:   var(--ink-3);

	--f-display: 'Serif Display', Georgia, 'Times New Roman', serif;
	--f-body:    'Body Sans', 'Noto Arabic', system-ui, -apple-system, sans-serif;
	--f-mono:    'Label Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--max:     1280px;
	--gutter:  clamp(22px, 4.5vw, 64px);
	--measure: 64ch;
	--band-y:    clamp(92px, 11vh, 168px);
	--band-y-sm: clamp(60px, 7vh, 104px);
	--r:       6px;
	--rail:    236px;
	/* The width actually available to the page. 100vw until something takes a
	   slice of the viewport — the docked chat sets this on <html>. */
	--vw:      100vw;
	--head-h:  74px;
	--ease:    cubic-bezier(.22, .61, .36, 1);
}

[dir="rtl"] { --f-body: 'Noto Arabic', 'Body Sans', system-ui, sans-serif; --f-display: 'Noto Arabic', 'Serif Display', serif; }

/* ── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--head-h) + 28px); }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font-family: var(--f-body); font-size: 18px; line-height: 1.66; font-weight: 400;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.1; }
p { margin: 0; } ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.skip { position: absolute; inset-block-start: -100%; inset-inline-start: 0; background: var(--deep); color: var(--on-deep); padding: 12px 18px; z-index: 200; font-family: var(--f-mono); font-size: 12px; }
.skip:focus { inset-block-start: 0; }

/* ── Type: roughly twice the scale of the current theme ─────────────────── */

.t-hero {
	font-family: var(--f-display); font-size: clamp(3.1rem, 6.6vw, 5.6rem);
	font-weight: 600; letter-spacing: -0.026em; line-height: 1.02;
}
.t-h2 {
	font-family: var(--f-display); font-size: clamp(2.2rem, 4.4vw, 3.7rem);
	font-weight: 600; letter-spacing: -0.021em; line-height: 1.08; text-wrap: balance;
}
.t-h3 { font-family: var(--f-display); font-size: clamp(1.24rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.24; }
.t-lede { font-size: clamp(1.12rem, 1.45vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
.t-body { color: var(--ink-2); max-width: var(--measure); }
.t-body + .t-body { margin-block-start: 1em; }

.eyebrow, .mono {
	font-family: var(--f-mono); font-size: 0.688rem; font-weight: 500;
	letter-spacing: 0.15em; text-transform: uppercase; color: var(--label);
}

/* ── Bands ──────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.blk { position: relative; background: var(--paper); padding-block: var(--band-y-sm); }

/* Sand carries the softer sections; the deep ink ground carries the argument. */
.blk--tab-panels, .blk--team-grid, .blk--pricing-table, .blk--audience-grid, .blk--callout,
.blk--section-intro:has(+ .blk--tab-panels),
.blk--section-intro:has(+ .blk--team-grid),
.blk--section-intro:has(+ .blk--pricing-table),
.blk--section-intro:has(+ .blk--audience-grid),
.blk--section-intro:has(+ .blk--callout) { background: var(--sand); }

.on-deep,
.cookie,
.pagehead,
.gcta,
.blk--diagram,
.blk--gradient-cta,
.blk--diagram + .blk--icon-pillars,
.blk--lead-form.is-dark,
.blk--section-intro:has(+ .blk--diagram),
.blk--section-intro:has(+ .blk--gradient-cta),
.blk--section-intro:has(+ .blk--lead-form.is-dark) {
	--paper: #1a1e16; --sand: #262b21;
	--ink: #f6f2ea; --ink-2: #b9b6ad; --ink-3: #8f8d84;
	--rule: #343a2c; --rule-2: #434a39;
	--label: var(--amber); --accent: var(--amber);
	background: var(--deep); color: var(--on-deep);
}

/* A section header sits tight against the content it introduces — but not
   against another header. Two headers in a row are two sections, and the
   second was collapsing to zero, so its eyebrow met the top edge of its own
   band with no space at all. */
.blk--section-intro + .blk:not(.blk--section-intro) { padding-block-start: 0; }
/* A header with no paragraph is introducing the block below it, and that block
   often carries a label of its own. A full band's worth of padding under the
   heading then reads as a missing paragraph rather than as space. */
.blk--section-intro:not(:has(.sec__body)) { padding-block-end: clamp(24px, 3vh, 34px); }
.blk--diagram + .blk--icon-pillars { padding-block-start: 0; }
.blk--feature-card + .blk--feature-card { padding-block-start: 0; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.hdr { position: sticky; inset-block-start: 0; z-index: 90; background: rgb(255 255 255 / 92%); backdrop-filter: saturate(150%) blur(12px); border-block-end: 1px solid var(--rule); }
.hdr__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); min-height: var(--head-h); display: flex; align-items: center; gap: 30px; }
.hdr__brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hdr__brand img { height: 56px; width: auto; }   /* 74px bar, 9px either side */
.hdr__brand span { font-family: var(--f-display); font-weight: 600; font-size: 1.14rem; }
.hdr__nav { display: flex; align-items: center; gap: 28px; margin-inline-start: auto; }
.hdr__nav a { font-size: 0.938rem; color: var(--ink-2); position: relative; padding-block: 7px; transition: color .16s var(--ease); }
.hdr__nav a::after { content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 0; block-size: 2px; background: var(--sig); transition: inline-size .22s var(--ease); }
.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a:hover::after { inline-size: 100%; }
.hdr__tools { display: flex; align-items: center; gap: 16px; }
.hdr__cta { font-size: 0.875rem; font-weight: 500; background: var(--purple); color: #fff; padding: 11px 20px; border-radius: var(--r); transition: background .16s var(--ease); }
.hdr__cta:hover { background: #a52ea2; }
/* ── Language ───────────────────────────────────────────────────────────
   A globe rather than four codes: EN FR AR ES read as noise next to the nav,
   and the menu can then name each language in its own script. <details>
   carries the open state, so CSS only has to place the panel and drop the
   marker the browser draws on a summary by default. */
.lang { position: relative; }
.lang > summary {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 34px; block-size: 34px; border-radius: 50%;
	color: var(--ink-3); cursor: pointer; list-style: none;
	transition: color .18s var(--ease), background .18s var(--ease);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--purple); background: var(--sand); }
.lang[open] > summary { color: var(--ink); background: var(--sand-2); }
.lang > summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.lang__menu {
	position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 9px);
	min-inline-size: 170px; padding: 6px; z-index: 20;
	background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
	box-shadow: 0 14px 34px rgb(26 30 22 / 13%);
}
.lang__item {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 8px 12px; border-radius: 4px; white-space: nowrap;
	font-size: 0.92rem; color: var(--ink-2);
}
.lang__item:hover { background: var(--sand); color: var(--ink); }
.lang__item[aria-current="true"] { color: var(--purple); font-weight: 600; }
.lang__item[aria-current="true"]::after { content: '\2713'; font-size: .82em; }
.hdr__burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.hdr__burger span { display: block; inline-size: 21px; block-size: 2px; background: var(--ink); margin-block: 4px; }

/* ── Section index rail ─────────────────────────────────────────────────
   A per-page table of contents drawn from the section headers. It is fixed,
   so it floats over whichever band happens to be behind it — hence the
   rail-dark state below, set from the ground colour by the skin's script. */

.rail {
	position: fixed; inset-block-start: calc(var(--head-h) + 60px);
	inset-inline-start: max(22px, calc((var(--vw) - var(--max)) / 2 + 14px));
	inline-size: calc(var(--rail) - 44px);
	z-index: 40; display: none;
}
.rail__hd {
	font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ink-3);
	padding-block-end: 11px; border-block-end: 1px solid var(--rule);
	margin-block-end: 14px;
}
[dir="rtl"] .rail__hd { font-family: var(--f-body); font-size: 0.813rem; letter-spacing: 0; text-transform: none; }
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rail__list a {
	display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: start;
	padding: 7px 8px 7px 0; font-size: 0.813rem; line-height: 1.34; color: var(--ink-3);
	border-inline-start: 2px solid transparent; padding-inline-start: 11px;
	transition: color .18s var(--ease), border-color .18s var(--ease);
}
.rail__n { font-family: var(--f-mono); font-size: 0.66rem; color: var(--rule-2); padding-block-start: 2px; }
.rail__list a:hover { color: var(--ink-2); }
.rail__list a.is-active { color: var(--ink); border-inline-start-color: var(--amber); }
/* A section's parts, indented under it. No numbers: the eyebrows are names,
   not a sequence, and a second column of digits would read as depth the page
   does not have. The parent keeps a faint marker while one of its children is
   the section being read, so the reader can still see where they are. */
.rail__list a.is-within { color: var(--ink-2); border-inline-start-color: var(--rule-2); }
.rail__sub { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.rail__sub a {
	display: block; grid-template-columns: none;
	padding: 5px 8px 5px 0; padding-inline-start: 44px;
	font-size: 0.75rem; line-height: 1.3; color: var(--ink-3);
	border-inline-start: 2px solid transparent;
	transition: color .18s var(--ease), border-color .18s var(--ease);
}
.rail__sub a::before {
	content: ''; display: inline-block; vertical-align: middle;
	inline-size: 9px; block-size: 1px; margin-inline-start: -18px; margin-inline-end: 9px;
	background: var(--rule-2); transition: background .18s var(--ease);
}
.rail__sub a:hover { color: var(--ink-2); }
.rail__sub a.is-active { color: var(--ink); border-inline-start-color: var(--amber); }
.rail__sub a.is-active::before { background: var(--amber); }
.rail__list a.is-active .rail__n { color: var(--amber); }

/* Over a dark band the light-ground ink disappears, so the rail carries its
   own palette rather than borrowing the page's. */
.rail-dark .rail__hd { color: var(--on-deep-2); border-block-end-color: #343a2c; }
.rail-dark .rail__list a { color: var(--on-deep-2); }
.rail-dark .rail__n { color: #5f6457; }
.rail-dark .rail__list a:hover { color: var(--on-deep); }
.rail-dark .rail__list a.is-active { color: var(--on-deep); }

@media (min-width: 1240px) {
	.rail { display: block; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
	.rail-on .rail { opacity: 1; pointer-events: auto; }
	.has-rail .blk:not(.blk--hero-image) > .wrap { padding-inline-start: calc(var(--gutter) + var(--rail) - 44px); }
}

/* Something has taken a slice of the viewport (the docked chat) and left the
   page too narrow for its own breakpoints. The rail's column is the first
   thing to hand back. */
html[data-7c-narrow] .rail { display: none; }
html[data-7c-narrow] .has-rail .blk > .wrap { padding-inline-start: var(--gutter); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn { display: inline-flex; align-items: center; gap: 10px; font-size: 0.938rem; font-weight: 500; padding: 14px 24px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); }
.btn--primary { background: var(--purple); color: #fff; }
.btn--primary:hover { background: #a52ea2; }
.btn--ghost { background: transparent; border-color: var(--rule-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--purple); color: var(--purple); }
.on-deep .btn--primary, .is-dark .btn--primary, .gcta .btn--primary { background: var(--amber); color: var(--deep); }
.on-deep .btn--primary:hover, .is-dark .btn--primary:hover { background: #ffbc46; }
.on-deep .btn--ghost, .is-dark .btn--ghost { border-color: var(--rule-2); color: var(--on-deep); }
.on-deep .btn--ghost:hover, .is-dark .btn--ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn__arrow { transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* ── Section header ─────────────────────────────────────────────────────── */

.sec { max-width: 60rem; }
.sec__eyebrow {
	display: flex; align-items: center; gap: 12px; margin-block-end: 26px;
	font-family: var(--f-mono); font-size: 0.688rem; font-weight: 500;
	letter-spacing: 0.15em; text-transform: uppercase; color: var(--label);
}
.sec__idx { font-variant-numeric: tabular-nums; color: var(--rule-2); }
.on-deep .sec__idx, .blk--diagram .sec__idx { color: var(--rule-2); }
.sec__eyebrow::after { content: ''; flex: 1 1 auto; block-size: 2px; background: var(--sig); opacity: .9; max-inline-size: 92px; border-radius: 2px; }
.sec__title { margin-block-end: 22px; max-width: 18ch; }

/* Above the fold of a laptop the heading and its paragraph sit side by side.
   Stacked, a section header used 41% of the content column and left the rest
   empty for the height of a screen; the eyebrow and its rule still run the
   full width, so the band still opens on a line. Headers with no body keep a
   single column, so nothing is stretched to fill a space it does not need. */
@media (min-width: 1020px) {
	.sec:has(.sec__body) {
		display: grid; align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: 64px;
	}
	.sec:has(.sec__body) .sec__eyebrow { grid-column: 1 / -1; }
	.sec:has(.sec__body) .sec__title { grid-column: 1; margin-block-end: 0; max-width: 16ch; }
	.sec:has(.sec__body) .sec__body { grid-column: 2; }
}
.sec__body { max-width: var(--measure); }
.sec__body p + p { margin-block-start: 1em; }

/* ── Hero ───────────────────────────────────────────────────────────────
   The live theme's treatment: one full-bleed picture behind the words with a
   directional scrim — heavy where the copy sits, lighter on the far side so
   the photograph still reads. Nothing is layered over the image. */

.hero {
	display: flex; align-items: center;
	min-block-size: 24rem;
	padding-block: clamp(76px, 10vh, 128px);
	background: var(--deep);
	position: relative; overflow: hidden;
}
.hero--bg {
	background-image:
		linear-gradient(100deg,
			rgba(26, 30, 22, 0.96) 0%, rgba(26, 30, 22, 0.92) 38%,
			rgba(26, 30, 22, 0.78) 68%, rgba(26, 30, 22, 0.58) 100%),
		var(--hero-image);
	background-size: cover;
	background-position: center;
}
[dir="rtl"] .hero--bg {
	background-image:
		linear-gradient(-100deg,
			rgba(26, 30, 22, 0.96) 0%, rgba(26, 30, 22, 0.92) 38%,
			rgba(26, 30, 22, 0.78) 68%, rgba(26, 30, 22, 0.58) 100%),
		var(--hero-image);
}
.hero__inner { position: relative; z-index: 2; }
@media (min-width: 900px) {
	.hero { min-block-size: 42rem; }
	/* Every hero but the home one is the same band. They had been sized by
	   their own copy and so landed anywhere between 672px and 788px, which
	   reads as carelessness when you move between pages. They are now the
	   height About Us had, and the padding comes down to 44px so the longest
	   of them still sits inside that: the French About Us runs to 667px of
	   content, and 667 + 88 is exactly the height. Home is left alone — it
	   carries the capture form and is taller on purpose. */
	.hero:not(.hero--graphic) { min-block-size: 47.2rem; padding-block: 44px; }
}
.hero__eyebrow { margin-block-end: 18px; }
.hero__title { margin-block-end: 26px; max-width: 14ch; }
.hero__sub { font-size: clamp(1.14rem, 1.5vw, 1.34rem); line-height: 1.58; color: var(--on-deep-2); max-width: 50ch; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 38px; }
.hero__logo { block-size: 38px; width: auto; margin-block-end: 28px; }
/* The brand gradient as a measured mark beneath the hero block. */
.hero__inner::after {
	content: ''; display: block; inline-size: 5rem; block-size: 3px;
	background: var(--sig); border-radius: 2px; margin-block-start: 2.75rem;
}

/* The home hero carries the brand ribbon rather than a photograph: a graphic
   on the ground, not a second picture stacked on a first.

   The artwork is a 16:9 ribbon that already runs off its own left and right
   edges, so it needs no bleed of ours to hide a cut — it covers the band and
   is cropped by the hero, and every edge you can see is the artwork's own.

   It is supplied on black with no alpha, so it is composited with screen
   rather than converted: over a near-black ground screen leaves the black
   untouched and lets only the colour through, which is what an alpha version
   would do, at a twentieth of the file size. isolation keeps the blend inside
   the hero. */
.hero--graphic { isolation: isolate; }
.hero--graphic .hero__ribbon {
	position: absolute; inset: 0;
	inline-size: 100%; block-size: 100%; max-inline-size: none;
	object-fit: cover; object-position: center;
	mix-blend-mode: screen;
	pointer-events: none; z-index: 0;
	/* The ribbon now flows on its own, so nothing here moves it. The drift
	   and the scale headroom it needed are gone: panning a clip that already
	   has motion in it is two motions competing, and a video that bleeds off
	   its own edges has no edge to keep out of frame. */
}
/* Heavy where the words sit, almost clear on the far side — the same
   directional scrim the photographic heroes use. */
.hero--graphic::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(100deg,
		rgba(26, 30, 22, 0.97) 0%, rgba(26, 30, 22, 0.92) 34%,
		rgba(26, 30, 22, 0.38) 66%, rgba(26, 30, 22, 0.04) 100%);
}
[dir="rtl"] .hero--graphic .hero__ribbon { transform: scaleX(-1); }
[dir="rtl"] .hero--graphic::before {
	background: linear-gradient(-100deg,
		rgba(26, 30, 22, 0.97) 0%, rgba(26, 30, 22, 0.92) 34%,
		rgba(26, 30, 22, 0.38) 66%, rgba(26, 30, 22, 0.04) 100%);
}

@media (max-width: 900px) {
	/* One column: the ribbon drops back to a wash and the scrim flattens,
	   because a directional scrim needs a side for the words to sit on. */
	.hero--graphic .hero__ribbon { object-position: 62% center; }
	.hero--graphic::before {
		background: linear-gradient(rgba(26, 30, 22, 0.93), rgba(26, 30, 22, 0.9));
	}
	.hero--bg {
		background-image:
			linear-gradient(rgba(26, 30, 22, 0.94), rgba(26, 30, 22, 0.86)), var(--hero-image);
	}
}

/* A hero photograph normally fills its band: the crop takes the sides, which
   is what you want from a scene. A close crop of a face is the other case —
   the about page's portrait is 1500px wide and already framed tight, so
   filling a 1920px band upscales it 28% and leaves a head with no room above
   it. .hero--fit shortens the band to --hero-fit of the standard one and lets
   the picture fill that instead: the same photograph, drawn smaller, and the
   band still ending exactly where the picture does. A picture narrower than
   the band is pushed into the corner the copy is not in, and the one edge
   that leaves is feathered into the ground — written against the picture's
   own drawn width, so it collapses to nothing on a viewport the picture
   spans and needs no breakpoint of its own. Which photograph gets this is
   decided once, in App\Support\SkinPhotos::heroFit(). Both classes are named
   so the rule outranks the mirrored .hero--bg above it. */
.hero--fit.hero--bg {
	--fit-w: calc(var(--hero-fit) * 1500px);
	--fit-scrim: linear-gradient(100deg,
		rgba(26, 30, 22, 0.96) 0%, rgba(26, 30, 22, 0.92) 38%,
		rgba(26, 30, 22, 0.78) 68%, rgba(26, 30, 22, 0.58) 100%);
	--fit-edge: to right;
	--fit-pos: right center;
	background-image:
		var(--fit-scrim),
		linear-gradient(var(--fit-edge), rgb(26 30 22) 0%,
			rgb(26 30 22) calc(100% - var(--fit-w)),
			rgb(26 30 22 / 0) calc(100% - var(--fit-w) + 280px)),
		var(--hero-image);
	background-size: cover, 100% 100%, auto 100%;
	background-position: center, center, var(--fit-pos);
	background-repeat: no-repeat;
}
/* The one band that is not the shared height, and the reason the picture can
   fill it. The copy still fits: this hero's is the shortest of the set. */
@media (min-width: 900px) {
	.hero--fit.hero--bg { min-block-size: calc(var(--hero-fit) * 47.2rem); }
}
/* Mirrored: the copy sits on the right, so the picture takes the other
   corner and the feather comes in from the other edge. */
[dir="rtl"] .hero--fit {
	--fit-scrim: linear-gradient(-100deg,
		rgba(26, 30, 22, 0.96) 0%, rgba(26, 30, 22, 0.92) 38%,
		rgba(26, 30, 22, 0.78) 68%, rgba(26, 30, 22, 0.58) 100%);
	--fit-edge: to left;
	--fit-pos: left center;
}
/* One column, so the same flat scrim the other heroes take — and the picture
   is by then far wider than the band, so a corner it is flush with is a
   corner you are looking at: on a phone the right edge of this photograph is
   bare wall. Centred, the band lands on the same part of the picture it
   always did. Both selectors are named because the mirrored rule above would
   otherwise outrank this. */
@media (max-width: 900px) {
	.hero--fit, [dir="rtl"] .hero--fit {
		--fit-scrim: linear-gradient(rgba(26, 30, 22, 0.94), rgba(26, 30, 22, 0.86));
		--fit-pos: center center;
	}
}

.capture { margin-block-start: 40px; padding-block-start: 30px; border-block-start: 1px solid rgb(255 255 255 / 18%); max-width: 34rem; }
.capture__t { font-family: var(--f-mono); font-size: 0.688rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); margin-block-end: 15px; }
.capture__row { display: flex; flex-wrap: wrap; gap: 9px; }
.capture__row input { flex: 1 1 220px; }
.capture__note { margin-block-start: 13px; font-size: 0.813rem; color: var(--on-deep-2); }

/* Content-card figure: a single framed image, never a stack. */
.feat__fig { margin: 0; border-radius: var(--r); overflow: hidden; }
.feat__fig img { inline-size: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center; }

/* ── Pillar cards: the gradient survives as a 2px signature rule ────────── */

.pillars { display: grid; gap: 18px; grid-template-columns: 1fr; }
.pcard {
	position: relative; background: var(--paper); border: 1px solid var(--rule);
	border-radius: var(--r); padding: 32px 28px 34px; overflow: hidden;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pcard__rule { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--sig); }
.pcard:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.pcard__idx { display: block; margin-block-end: 16px; font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--label); }
.pcard h3 { margin-block-end: 12px; }
.pcard p { font-size: 0.969rem; color: var(--ink-2); line-height: 1.62; }
.on-deep .pcard, .blk--diagram + .blk--icon-pillars .pcard { background: var(--deep-2); border-color: var(--rule); }
@media (min-width: 720px) { .pillars--2, .pillars--3, .pillars--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Feature ────────────────────────────────────────────────────────────── */

.feat { display: grid; gap: clamp(38px, 5vw, 76px); align-items: center; grid-template-columns: 1fr; }
.feat__body h3 { font-size: clamp(1.85rem, 3vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1; margin-block-end: 18px; max-width: 16ch; }
.feat__body .eyebrow { display: block; margin-block-end: 15px; }
.feat__body .btn { margin-block-start: 26px; }
.feat__num { display: block; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.15em; color: var(--ink-3); margin-block-end: 14px; }
@media (min-width: 940px) {
	.feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feat--flip .feat__body { order: 2; }
	/* A device mockup is a picture of a screen: the interface inside it has to
	   stay readable, so it takes more of the row than a photograph needs. The
	   figure is second in the source and first when the card is flipped. */
	.feat:has(.feat__fig--shot) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
	.feat--flip:has(.feat__fig--shot) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
	.feat:has(.feat__fig--shot) { gap: clamp(30px, 3.4vw, 52px); }
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs__strip { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tabs__tab {
	appearance: none; cursor: pointer; text-align: start; background: var(--paper);
	border: 1px solid var(--rule); border-radius: var(--r); padding: 24px 22px 26px;
	display: flex; flex-direction: column; gap: 9px; position: relative; overflow: hidden;
	transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.tabs__tab::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--sig); transform: scaleX(0); transform-origin: inline-start; transition: transform .24s var(--ease); }
.tabs__tab[aria-selected="true"]::before { transform: scaleX(1); }
.tabs__tab:hover { border-color: var(--rule-2); transform: translateY(-2px); }
/* The index carries the section's accent at rest and the brand purple when
   the card is open, so colour distinguishes the two states rather than just
   decorating one. */
.tabs__sub { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber-ink); }
.tabs__tab[aria-selected="true"] .tabs__sub { color: var(--purple); }
.tabs__ttl { font-family: var(--f-display); font-weight: 600; font-size: 1.14rem; letter-spacing: -0.012em; line-height: 1.24; }
.tabs__note { font-size: 0.938rem; line-height: 1.5; color: var(--ink-3); }
/* Tells the reader there is a panel behind the card. It sits back until the
   card is hovered or open, so four of them do not shout at once. */
.tabs__more {
	margin-block-start: auto;
	padding-block-start: 16px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-3);
	transition: color .18s var(--ease);
}
.tabs__tab:hover .tabs__more { color: var(--purple); }
.tabs__tab[aria-selected="true"] .tabs__more { color: var(--purple); }
.tabs__more-arrow { display: inline-block; transition: transform .18s var(--ease); }
.tabs__tab:hover .tabs__more-arrow { transform: translateX(3px); }
[dir="rtl"] .tabs__more-arrow { transform: scaleX(-1); }
[dir="rtl"] .tabs__tab:hover .tabs__more-arrow { transform: scaleX(-1) translateX(3px); }
.tabs__panels { margin-block-start: 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); }
.tabs__panel { display: none; padding: 34px 30px 36px; }
.tabs__panel.is-active { display: block; }
[data-diagram]:not(.is-enhanced) .tabs__panel { display: block; }
[data-diagram]:not(.is-enhanced) .tabs__panel + .tabs__panel { border-block-start: 1px solid var(--rule); }
/* The panel belongs to the card that opened it, so its heading sits just above
   the card titles rather than above them: at 1.42rem it outweighed the very
   things it was expanding. Paragraphs get the house separation — without it
   two of them ran together as one block, which is what made the panel look
   like a different component rather than the same one continued. */
.tabs__panel h4 { font-family: var(--f-display); font-size: 1.24rem; font-weight: 600; line-height: 1.28; margin-block-end: 12px; }
.tabs__panel p { color: var(--ink-2); max-width: var(--measure); }
.tabs__panel p + p { margin-block-start: 1em; }
@media (min-width: 760px) { .tabs__strip--2, .tabs__strip--3, .tabs__strip--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .tabs__strip--3 { grid-template-columns: repeat(3, 1fr); } .tabs__strip--4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Team, audience, pricing, callout, cta ──────────────────────────────── */

.team { display: grid; gap: 20px; grid-template-columns: 1fr; }
.team__m { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px 24px 30px; }
.team__m img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); margin-block-end: 20px; }
/* A group label inside a people section, lighter than a section header
   because it is not one: no number, no rail entry. */
.grp__hd { margin-block-end: 22px; max-inline-size: var(--measure); }
.grp__hd h3 { font-family: var(--f-display); font-size: 1.24rem; font-weight: 600; letter-spacing: -0.01em; }
.grp__hd p { margin-block-start: 6px; font-size: 0.969rem; color: var(--ink-3); }
.blk--team-grid + .blk--team-grid { padding-block-start: 0; }
.team__nm { font-family: var(--f-display); font-weight: 600; font-size: 1.14rem; }
.team__rl { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); margin-block: 8px 12px; }
.team__bio { font-size: 0.938rem; color: var(--ink-2); line-height: 1.58; }
.team__li { display: inline-flex; gap: 6px; margin-block-start: 14px; font-size: 0.875rem; color: var(--purple); }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, 1fr); } }
/* The block lets an editor pick 1 to 6 columns, so every count needs a rule.
   Only 3 and 4 had one, and a grid asking for 5 silently fell back to two,
   which is how five advisors ended up as a row of three and an orphaned pair. */
@media (min-width: 1020px) {
	.team--1 { grid-template-columns: 1fr; }
	.team--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.team--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.team--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.team--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.team--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.aud { display: grid; gap: 18px; grid-template-columns: 1fr; }
.aud__c { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 32px 28px 34px; display: flex; flex-direction: column; min-block-size: 220px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.aud__c:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.aud__c h3 { margin-block-end: 13px; }
.aud__c p { font-size: 0.969rem; color: var(--ink-2); }
.aud__go { margin-block-start: auto; padding-block-start: 22px; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); }
@media (min-width: 700px) { .aud { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .aud--3 { grid-template-columns: repeat(3, 1fr); } .aud--4 { grid-template-columns: repeat(4, 1fr); } }

.price { display: grid; gap: 18px; grid-template-columns: 1fr; }
.price__t { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 32px 28px 34px; display: flex; flex-direction: column; }
.price__nm { font-family: var(--f-mono); font-size: 0.688rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); }
.price__v { font-family: var(--f-display); font-size: 2.5rem; font-weight: 600; letter-spacing: -0.024em; margin-block: 16px 4px; font-variant-numeric: tabular-nums; }
.price__p { font-family: var(--f-mono); font-size: 0.688rem; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
.price__f { list-style: none; margin-block: 26px; display: flex; flex-direction: column; gap: 11px; }
.price__f li { font-size: 0.969rem; color: var(--ink-2); padding-inline-start: 20px; position: relative; }
.price__f li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.64em; inline-size: 9px; block-size: 2px; background: var(--sig); }
.price__t .btn { margin-block-start: auto; align-self: flex-start; }
@media (min-width: 820px) { .price--2 { grid-template-columns: repeat(2, 1fr); } .price--3 { grid-template-columns: repeat(3, 1fr); } }

.callout { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 30px 32px 32px; max-width: 62rem; overflow: hidden; }
.callout::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--sig); }
.callout h3 { margin-block-end: 11px; }
.callout p { color: var(--ink-2); max-width: var(--measure); }

.gcta { position: relative; overflow: hidden; background: var(--deep-2); border-radius: var(--r); padding: clamp(38px, 5vw, 68px); display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; }
.gcta::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--sig); }
.gcta h2 { margin-block-end: 16px; max-width: 20ch; }
.gcta p { color: var(--on-deep-2); max-width: var(--measure); }
@media (min-width: 940px) { .gcta { grid-template-columns: minmax(0, 1.5fr) minmax(0, auto); } }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > span { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="url"], input[type="search"], select, textarea {
	inline-size: 100%; font: inherit; font-size: 1rem; padding: 13px 15px;
	/* --paper and --ink are remapped inside the deep bands, so one declaration
	   serves both grounds. */
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--rule-2); border-radius: var(--r);
	transition: border-color .16s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--purple); outline: none; }
.on-deep input:focus, .is-dark input:focus, .on-deep textarea:focus, .is-dark textarea:focus, .on-deep select:focus { border-color: var(--amber); }
textarea { min-block-size: 140px; resize: vertical; }
.form-status { font-family: var(--f-mono); font-size: 0.688rem; letter-spacing: 0.08em; color: var(--purple); min-block-size: 1.2em; }
.on-deep .form-status, .is-dark .form-status { color: var(--amber); }

.leadform { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; align-items: start; }
.leadform__form { display: flex; flex-direction: column; gap: 16px; max-width: 34rem; }
.leadform__note { font-size: 0.875rem; color: var(--ink-3); }
@media (min-width: 940px) { .leadform { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cform { display: flex; flex-direction: column; gap: 18px; max-width: 42rem; }
.cform__row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cform__row { grid-template-columns: repeat(2, 1fr); } }
.subscribe { display: flex; flex-wrap: wrap; gap: 9px; max-width: 32rem; }
.subscribe input { flex: 1 1 220px; }
.booking { display: grid; gap: 22px; max-width: 46rem; }
.booking__msg { font-size: 0.938rem; color: var(--ink-3); }

/* ── Stats, steps, faq, rich text ───────────────────────────────────────── */

.stats { display: grid; gap: 18px; grid-template-columns: 1fr; }
.stats__c { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 28px 26px 30px; position: relative; overflow: hidden; }
.stats__v { font-family: var(--f-display); font-size: clamp(2.3rem, 3.6vw, 3.1rem); font-weight: 600; letter-spacing: -0.024em; font-variant-numeric: tabular-nums; line-height: 1; }
.stats__l { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); margin-block-start: 14px; }
.stats__n { font-size: 0.938rem; color: var(--ink-2); margin-block-start: 9px; }
@media (min-width: 700px) { .stats--2, .stats--3, .stats--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } .stats--4 { grid-template-columns: repeat(4, 1fr); } }

.steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; }
.steps li { counter-increment: step; display: grid; gap: 5px 24px; grid-template-columns: 52px 1fr; padding-block: 26px; border-block-start: 1px solid var(--rule); }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; color: var(--purple); padding-block-start: 6px; }
.steps h3 { font-size: 1.24rem; }
.steps p { font-size: 0.969rem; color: var(--ink-2); max-width: var(--measure); }

.faq { border-block-start: 1px solid var(--rule); max-width: 62rem; }
.faq details { border-block-end: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 38px 22px 0; position: relative; font-family: var(--f-display); font-weight: 600; font-size: 1.18rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; inset-inline-end: 4px; inset-block-start: 19px; font-family: var(--f-mono); color: var(--ink-3); font-size: 1.2rem; }
.faq details[open] summary::after { content: '\2212'; color: var(--purple); }
.faq p { padding-block-end: 24px; color: var(--ink-2); max-width: var(--measure); }

.rich { max-width: var(--measure); color: var(--ink-2); }
.rich-list { list-style: none; display: flex; flex-direction: column; gap: 11px; max-width: var(--measure); }
.rich-list li { padding-inline-start: 22px; position: relative; color: var(--ink-2); }
.rich-list li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.68em; inline-size: 10px; block-size: 2px; background: var(--sig); }
.rich-list--ol { counter-reset: ri; }
.rich-list--ol li { padding-inline-start: 36px; }
.rich-list--ol li::before { counter-increment: ri; content: counter(ri, decimal-leading-zero); inline-size: auto; block-size: auto; background: none; inset-block-start: 0; font-family: var(--f-mono); font-size: 0.75rem; color: var(--purple); line-height: 1.85; }

/* ── Prose runs (the legal pages) ────────────────────────────────────────────
   A heading and the paragraphs under it are one document, not three marketing
   bands. `.blk`'s band padding put 104px between a heading and the sentence it
   introduces, and another 104px above it, so a page of short sections read as
   mostly air. Space above a heading separates one section from the last; the
   space below belongs to the heading's own paragraph and is small on purpose.
   Only privacy, terms and one draft are built from these blocks. */

.blk--heading { padding-block: clamp(2.1rem, 3.2vh, 3rem) 0.5rem; }
.blk--paragraph { padding-block: 0 0.95rem; }
.blk--list { padding-block: 0 1.15rem; }

/* The page intro already closes with a full band; a heading straight after it
   does not need to open with another one. */
.blk--section-intro:has(+ .blk--heading) { padding-bottom: clamp(0.9rem, 2vh, 1.5rem); }

/* Nothing to separate from at the top of the page. */
.blk--heading:first-child { padding-block-start: 0; }

/* ── Diagrams ───────────────────────────────────────────────────────────── */

.dgm { display: grid; gap: 38px; justify-items: center; }
/* ── Where the data comes from ───────────────────────────────────────────────
   Two ways in — the systems that already hold the data, and the people who
   hold the rest — converging on one record. The "feeds" label is a chip rather
   than a gap masked with the band colour, so the diagram keeps working
   whichever ground the block lands on. */
/* A drawn diagram needs a heading like any other section. */
.dgm__head { margin-block-end: 30px; }
.dgm__head .eyebrow {
	font-family: var(--f-mono); font-size: 0.688rem; font-weight: 500;
	letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber);
	margin-block-end: 12px;
}
.dgm__title { max-inline-size: 24ch; }
[dir="rtl"] .dgm__head .eyebrow { font-family: var(--f-body); font-size: 0.85rem; letter-spacing: 0; text-transform: none; }

/* ── Where the data comes from ───────────────────────────────────────────────
   Drawn as the applied AI schematic is drawn, because it is the same argument
   one step earlier: three cards of one size under grey labels, then a rail
   bringing them together into the record. The items inside are a list on the
   card's own rhythm — as pills they were four different widths on three
   different rows and the eye read the shapes instead of the words. */
.src { display: grid; gap: 20px; inline-size: 100%; max-inline-size: 1180px; grid-template-columns: 1fr; }
.src__col { display: flex; flex-direction: column; gap: 11px; min-inline-size: 0; }
.src__lbl { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-deep-2); }
.src__card {
	position: relative; overflow: hidden; block-size: 100%;
	border: 1px solid var(--rule); background: var(--sand); border-radius: var(--r);
	padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 7px;
}
/* The record is where the three lanes end, so it is the card that is lit. */
.src__card--out { background: #2f3529; border-color: var(--rule-2); }
.src__card--out::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--sig); }
.src__nm { font-family: var(--f-display); font-weight: 600; font-size: 1.32rem; color: var(--on-deep); line-height: 1.2; margin: 0; }
.src__sub { font-size: 0.938rem; color: var(--on-deep-2); line-height: 1.5; }
.src__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 9px;
	margin-block-start: 15px; padding-block-start: 16px; border-block-start: 1px solid var(--rule);
}
.src__list li { font-size: 0.938rem; color: var(--on-deep-2); position: relative; padding-inline-start: 18px; line-height: 1.4; }
.src__list li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 9px; block-size: 2px; background: var(--sig); }
.src__note { margin-block-start: auto; padding-block-start: 16px; font-size: 0.875rem; color: var(--on-deep-2); line-height: 1.5; }

.src__flow { display: none; }
.src__join {
	margin: 0; text-align: center;
	font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber);
}

@media (min-width: 960px) {
	.src { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; row-gap: 0; align-items: stretch;
		--col-1: calc((100% - 52px) / 6); --col-3: calc(100% - (100% - 52px) / 6); }

	.src__flow { display: block; position: relative; grid-column: 1 / -1; block-size: 34px; }
	.src__stem { position: absolute; inset-block-start: 0; block-size: 26px; inline-size: 1px; background: var(--rule); }
	.src__stem--a { inset-inline-start: var(--col-1); }
	.src__stem--b { inset-inline-start: 50%; }
	.src__stem--c { inset-inline-start: var(--col-3); }
	.src__line { position: absolute; inset-block-start: 26px; inset-inline-start: var(--col-1); inline-size: calc(100% - 2 * var(--col-1)); block-size: 1px; background: var(--rule-2); }
	/* Filled, not the open ring the schematic uses for a person: this node is
	   where three lanes meet, not where someone signs. */
	.src__node { position: absolute; inset-block-start: 22px; inset-inline-start: calc(50% - 4.5px); inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--amber); }

	.src__join { grid-column: 1 / -1; margin-block-start: 8px; }
	.src__col--out { grid-column: 1 / -1; margin-block-start: 18px; }
}

/* The caption is the diagram's conclusion, not a label under a picture, so it
   is set as a callout: a panel on the band with the amber rule the rail uses
   for the item you are on. Centred grey prose read as a footnote and got
   skipped. */
.dgm__cap {
	margin-block-start: 2.6rem; margin-inline: auto; max-inline-size: 58ch;
	padding: 20px 24px; text-align: start;
	font-size: 1.02rem; line-height: 1.6; color: var(--on-deep);
	background: rgb(255 255 255 / 4%);
	border: 1px solid rgb(255 255 255 / 12%);
	border-inline-start: 3px solid var(--amber);
	border-radius: var(--r);
}
@media (max-width: 720px) { .dgm__cap { padding: 16px 18px; } }

/* ── Applied AI schematic ────────────────────────────────────────────────────
   In, the record, out. Three cards over a rail that says which of the work is
   automatic and where a person signs, because that is the part of the picture
   an auditor asks about. HTML rather than SVG so the text reflows and
   translates, and the amber is spent on the one node that is a human decision. */
.arc { display: grid; gap: 20px; inline-size: 100%; max-inline-size: 1180px; grid-template-columns: 1fr; }
.arc__col { display: flex; flex-direction: column; gap: 11px; min-inline-size: 0; }
.arc__lbl {
	font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-deep-2);
}
.arc__card {
	position: relative; overflow: hidden; block-size: 100%;
	border: 1px solid var(--rule); background: var(--sand); border-radius: var(--r);
	padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 7px;
}
/* The record is the middle of the argument, so it is the one card that is lit:
   a lighter ground and the brand rule across its top. */
.arc__card--core { background: #2f3529; border-color: var(--rule-2); }
.arc__card--core::before {
	content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
	block-size: 2px; background: var(--sig);
}
.arc__nm {
	font-family: var(--f-display); font-weight: 600; font-size: 1.32rem;
	color: var(--on-deep); line-height: 1.2; margin: 0;
}
.arc__lede { font-size: 0.938rem; color: var(--on-deep-2); line-height: 1.5; }
.arc__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 15px;
	margin-block-start: 15px; padding-block-start: 16px; border-block-start: 1px solid var(--rule);
}
.arc__item { display: flex; flex-direction: column; gap: 3px; }
.arc__it { font-size: 0.969rem; font-weight: 500; color: var(--on-deep); line-height: 1.35; }
.arc__sub { font-size: 0.875rem; color: var(--on-deep-2); line-height: 1.5; }
.arc__note { margin-block-start: 15px; font-size: 0.875rem; color: var(--on-deep-2); line-height: 1.5; }

/* The rail, and the two things it says. Below 960px the cards are a column and
   a horizontal rail would be drawing a line through nothing, so it goes and the
   captions become blocks against a rule. */
.arc__flow { display: none; }
.arc__notes { display: flex; flex-direction: column; gap: 14px; }
.arc__cap { margin: 0; display: flex; flex-direction: column; gap: 4px; padding-inline-start: 14px; border-inline-start: 2px solid var(--rule-2); }
.arc__cap--sign { border-inline-start-color: var(--amber); }
.arc__caplbl {
	font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-deep-2);
}
.arc__cap--sign .arc__caplbl { color: var(--amber); }
.arc__captxt { font-size: 0.875rem; color: var(--on-deep-2); line-height: 1.5; }

@media (min-width: 960px) {
	.arc { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; row-gap: 0; align-items: stretch;
		--col-1: calc((100% - 52px) / 6); --col-3: calc(100% - (100% - 52px) / 6); }
	.arc__col--core { margin-block-start: -22px; }

	.arc__flow { display: block; position: relative; grid-column: 1 / -1; block-size: 52px; }
	.arc__stem { position: absolute; inset-block-start: 0; block-size: 34px; inline-size: 1px; background: var(--rule); }
	.arc__stem--a { inset-inline-start: var(--col-1); }
	.arc__stem--b { inset-inline-start: 50%; }
	.arc__stem--c { inset-inline-start: var(--col-3); }
	.arc__line { position: absolute; inset-block-start: 34px; inset-inline: 0; block-size: 1px; background: var(--rule-2); }
	.arc__node {
		position: absolute; inset-block-start: 31px; inline-size: 7px; block-size: 7px;
		border-radius: 50%; background: var(--on-deep-2);
	}
	.arc__node--a { inset-inline-start: calc(var(--col-1) - 3px); }
	.arc__node--b { inset-inline-start: calc(50% - 3px); }
	.arc__node--c { inset-inline-start: calc(var(--col-3) - 3px); }
	/* The one node that is a person, drawn open so it reads as a gate rather
	   than another step. */
	.arc__node--sign {
		inset-inline-start: calc(66% - 5px); inset-block-start: 29px;
		inline-size: 11px; block-size: 11px;
		background: var(--deep); border: 2px solid var(--amber);
	}

	.arc__notes {
		grid-column: 1 / -1; display: grid; gap: 0;
		grid-template-columns: 12% 40% 28% 20%; margin-block-start: 4px;
	}
	.arc__cap { text-align: center; padding-inline-start: 0; border-inline-start: 0; gap: 6px; }
	.arc__cap--auto { grid-column: 2; }
	.arc__cap--sign { grid-column: 3; }
}

/* ── Compact pillar rows ─────────────────────────────────────────────────────
   The same items without the card frames, gathered under their eyebrow. A grid
   of cards is mostly whitespace once a list runs long, and seven items in three
   columns orphans the last one. */
.prows { display: flex; flex-direction: column; gap: 38px; }
.prows__lbl {
	font-family: var(--f-mono); font-size: 0.688rem; font-weight: 500;
	letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber);
	margin-block-end: 12px;
}
.prows__list { margin: 0; border-block-start: 1px solid var(--rule); }
.prows__r {
	display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: 6px 44px; padding-block: 20px; border-block-end: 1px solid var(--rule);
}
.prows__r dt {
	font-family: var(--f-display); font-weight: 600; font-size: 1.16rem;
	color: var(--ink); line-height: 1.3;
}
.prows__r dd { margin: 0; color: var(--ink-2); font-size: 0.965rem; line-height: 1.62; max-width: var(--measure); }
.prows__tag {
	display: block; font-family: var(--f-mono); font-size: 0.688rem; font-weight: 500;
	letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); margin-block-end: 5px;
}
.prows__icon { inline-size: 22px; block-size: 22px; margin-block-end: 6px; }
/* Tracking and capitals are Latin devices; Arabic joins. */
[dir="rtl"] .prows__lbl, [dir="rtl"] .prows__tag {
	font-family: var(--f-body); font-size: 0.85rem; letter-spacing: 0; text-transform: none;
}
@media (max-width: 720px) {
	.prows__r { grid-template-columns: 1fr; gap: 4px; }
}

.core { inline-size: 100%; max-inline-size: 1040px; }
.core__row { display: grid; gap: 10px; grid-template-columns: 1fr; }
.core__node { position: relative; overflow: hidden; block-size: 100%; appearance: none; cursor: pointer; text-align: start; border: 1px solid var(--rule); background: var(--deep-2); border-radius: var(--r); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 9px; transition: border-color .2s var(--ease); }
.core__node::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--sig); transform: scaleX(0); transform-origin: inline-start; transition: transform .24s var(--ease); }
.core__node[aria-selected="true"]::before { transform: scaleX(1); }
.core__node:hover { border-color: var(--rule-2); }
.core__col { display: flex; flex-direction: column; gap: 11px; min-inline-size: 0; }
.core__lbl { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-deep-2); }
.core__nm { font-family: var(--f-display); font-weight: 600; font-size: 1.32rem; color: var(--on-deep); line-height: 1.2; }
.core__sub { font-size: 0.938rem; color: var(--on-deep-2); line-height: 1.5; }
.core__list { display: flex; flex-direction: column; gap: 7px; margin-block-start: 4px; }
.core__list span { font-size: 0.875rem; color: var(--on-deep-2); padding-inline-start: 18px; position: relative; }
.core__list span::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.64em; inline-size: 9px; block-size: 2px; background: var(--sig); }
/* Each node opens a paragraph beneath the row, so each node says so. */
.core__more {
	margin-block-start: auto;
	padding-block-start: 16px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--on-deep-2);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: color .18s var(--ease);
}
.core__node:hover .core__more,
.core__node[aria-selected="true"] .core__more { color: var(--amber); }
.core__more-arrow { display: inline-block; transition: transform .18s var(--ease); }
.core__node:hover .core__more-arrow { transform: translateX(3px); }
[dir="rtl"] .core__more-arrow { transform: scaleX(-1); }
[dir="rtl"] .core__node:hover .core__more-arrow { transform: scaleX(-1) translateX(3px); }
.core__link { display: flex; align-items: center; justify-content: center; position: relative; min-block-size: 36px; }
.core__link::before { content: ''; position: absolute; inset-inline: 12%; block-size: 2px; background: var(--sig); opacity: .8; }
.core__link span { position: relative; background: var(--deep); padding-inline: 11px; font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.core__panels { margin-block-start: 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--deep-2); }
.core__panel { display: none; padding: 32px 30px 34px; text-align: start; }
.core__panel.is-active { display: block; }
.core:not(.is-enhanced) .core__panel { display: block; }
.core:not(.is-enhanced) .core__panel + .core__panel { border-block-start: 1px solid var(--rule); }
.core__panel h3 { font-family: var(--f-display); font-size: 1.42rem; font-weight: 600; color: var(--on-deep); margin-block-end: 14px; }
.core__panel p { color: var(--on-deep-2); max-width: var(--measure); }
.core__panel p + p { margin-block-start: 0.95em; }
@media (min-width: 960px) {
	.core__row { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1.24fr) 88px minmax(0, 1fr); gap: 0; align-items: stretch; }
	.core__col--core { margin-block-start: -22px; }
	.core__link { padding-block-start: 26px; }
	.core__link::before { inset-inline: 8px; }
}

/* ── Chrome: footer, banners, list pages ────────────────────────────────── */


.ftr { background: var(--deep); color: var(--on-deep-2); padding-block: 72px 40px; }
.ftr__grid { display: grid; gap: 36px 32px; grid-template-columns: 1fr; padding-block-end: 44px; border-block-end: 1px solid var(--deep-2); }
@media (min-width: 560px) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
	/* The brand takes what is left; each link column is only as wide as its
	   longest link. Sizing them as equal fractions was wrong once the legal
	   column went: two columns then carried a quarter of the page each and
	   the row read as three items adrift in white space. auto tracks keep
	   them together whatever the count, so the column list can grow or
	   shrink without the proportions being retuned. */
	.ftr__grid { grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 44px 72px; }
}
.ftr__brand span { font-family: var(--f-display); font-weight: 600; font-size: 1.24rem; color: var(--on-deep); }
.ftr__brand img { height: 62px; width: auto; }
.ftr h4 { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-block-end: 15px; }
.ftr ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ftr ul a { font-size: 0.938rem; transition: color .16s var(--ease); }
.ftr ul a:hover { color: var(--on-deep); }
.ftr__base { padding-block-start: 26px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* The cookie banner is dismissed by setting the hidden attribute, and an
   author rule for display beats the browser's own [hidden] { display: none }.
   Without this the banner shows before the script has decided it should, and
   the accept button sets a flag that nothing acts on. */
[hidden] { display: none !important; }

.cookie { position: fixed; bottom: 16px; left: 16px; z-index: 120; max-inline-size: 28rem; background: var(--deep); color: var(--on-deep); border-radius: var(--r); padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.938rem; box-shadow: 0 18px 50px rgb(26 30 22 / 30%); }
.cookie p { color: var(--on-deep-2); flex: 1 1 100%; }
.cookie__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie .btn { padding: 11px 18px; font-size: 0.875rem; }
.skinbar { position: fixed; bottom: 16px; right: 92px; z-index: 130; display: inline-flex; align-items: stretch; background: var(--deep); border-radius: var(--r); overflow: hidden; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 10px 34px rgb(26 30 22 / 26%); }
.skinbar span { padding: 9px 13px; color: var(--amber); border-inline-end: 1px solid var(--deep-2); }
.skinbar a { padding: 9px 13px; color: var(--on-deep-2); }
.skinbar a:hover { color: var(--on-deep); }

.paywall { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); padding: 36px 32px; max-width: 44rem; }
.pagehead { padding-block: clamp(68px, 9vh, 116px) var(--band-y-sm); }
.pagehead h1 { max-width: 20ch; margin-block-end: 18px; }
.pagehead p { color: var(--on-deep-2); max-width: var(--measure); }
.postlist { display: grid; gap: 18px; grid-template-columns: 1fr; }
.postcard { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 30px 26px 32px; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.postcard:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.postcard h2 { font-size: 1.42rem; margin-block-end: 11px; }
.postcard time, .postcard .tags { font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.postcard p { color: var(--ink-2); margin-block: 11px; font-size: 0.969rem; }
@media (min-width: 820px) { .postlist { grid-template-columns: repeat(2, 1fr); } }
.article { max-width: 46rem; margin-inline: auto; padding-block: var(--band-y-sm); }
.docs { display: grid; gap: 44px; grid-template-columns: 1fr; padding-block: var(--band-y-sm); }
.docs__side { position: sticky; inset-block-start: calc(var(--head-h) + 24px); align-self: start; }
.docs__side h4 { font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 15px; padding-block-end: 11px; border-block-end: 1px solid var(--rule); }
.docs__side ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.docs__side a { display: block; padding: 8px 11px; font-size: 0.938rem; color: var(--ink-3); border-inline-start: 1px solid transparent; border-radius: 0 var(--r) var(--r) 0; }
.docs__side a:hover { color: var(--ink); }
.docs__side a.is-active { color: var(--ink); border-inline-start-color: var(--purple); background: var(--sand); }
@media (min-width: 940px) { .docs { grid-template-columns: 258px minmax(0, 1fr); gap: 58px; } }
.searchform { display: flex; gap: 9px; max-width: 40rem; margin-block-end: 42px; }
.searchform input { flex: 1 1 auto; }
.results { display: flex; flex-direction: column; border-block-start: 1px solid var(--rule); }
.results a { padding: 24px 0; border-block-end: 1px solid var(--rule); }
.results h2 { font-size: 1.24rem; margin-block-end: 8px; }
.results p { color: var(--ink-2); font-size: 0.969rem; }
.results .u { font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.12em; color: var(--ink-3); margin-block-start: 9px; }

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

.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .66s var(--ease), transform .66s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-d1 { transition-delay: .06s; } .js .rv-d2 { transition-delay: .12s; }
.js .rv-d3 { transition-delay: .18s; } .js .rv-d4 { transition-delay: .24s; }
.js .sec__eyebrow::after { transform: scaleX(0); transform-origin: inline-start; transition: transform .7s var(--ease) .1s; }
.js .sec__eyebrow.in::after { transform: scaleX(1); }
.js .hero .hero__title, .js .hero .hero__sub, .js .hero .hero__acts, .js .hero .capture { opacity: 0; transform: translateY(14px); }
.js .hero.lit .hero__title { animation: rise .72s var(--ease) .06s forwards; }
.js .hero.lit .hero__sub   { animation: rise .72s var(--ease) .16s forwards; }
.js .hero.lit .hero__acts  { animation: rise .72s var(--ease) .26s forwards; }
.js .hero.lit .capture     { animation: rise .72s var(--ease) .32s forwards; }
.js .hero .pairfig { opacity: 0; transform: scale(1.02); }
.js .hero.lit .pairfig { animation: settle .95s var(--ease) .2s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .rv, .js .hero .hero__title, .js .hero .hero__sub, .js .hero .hero__acts,
	.js .hero .capture, .js .hero .pairfig { opacity: 1 !important; transform: none !important; animation: none !important; }
	.js .sec__eyebrow::after { transform: scaleX(1) !important; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 940px) {
	.hdr__nav { display: none; position: absolute; inset-block-start: var(--head-h); inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-block-end: 1px solid var(--rule); padding: 8px var(--gutter) 20px; }
	.hdr.is-open .hdr__nav { display: flex; }
	.hdr__nav a { padding-block: 14px; border-block-end: 1px solid var(--rule); font-size: 1rem; }
	/* One auto margin, not two. Both the tools and the burger claimed the free
	   space, so a flex row split it between them and left the language control
	   stranded in the middle of the header. The tools push the pair right; the
	   burger follows on the row gap, which is tightened here so the two read as
	   a pair of controls rather than as two separate things. */
	.hdr__in { gap: 12px; }
	.hdr__tools { order: 2; margin-inline-start: auto; }
	.hdr__burger { display: block; order: 3; }
	.hdr__cta { display: none; }
}

/* Honeypot. Declared last so it beats the generic input sizing above — both
   set the same physical property, so source order decides. */
input.hp, .hp {
	position: absolute; width: 1px; height: 1px; min-width: 0; inline-size: 1px;
	padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* A capture of the interface is framed to fit, not cropped to fill: cutting the
   edge off a screenshot hides the very thing it is there to show. Photographs
   still crop to fill, because a photograph has no edges that matter. */
/* ── Motion clip in a card ───────────────────────────────────────────────────
   A reel where a still would be. Both elements ship: the video plays, and the
   still stands in for a reader who has asked for less motion. CSS decides
   which one exists, so there is no JavaScript in the path and no flash of the
   wrong one. */
.feat__fig--motion video { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; border-radius: 3px; }
.feat__fig--motion .feat__still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .feat__fig--motion video { display: none; }
  .feat__fig--motion .feat__still { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; border-radius: 3px; }
}

.feat__fig--shot {
	background: var(--fig-ground);
	border: 1px solid var(--rule);
	padding: 14px;
}
/* Its own proportions, at the width of the column: a forced frame would
   letterbox the mockup and shrink it inside its own padding. */
.feat__fig--shot img { inline-size: 100%; block-size: auto; aspect-ratio: auto; border-radius: 3px; }

/* ── Stacked, a card owns its paragraph ──────────────────────────────────────
   In one column the panel belongs directly under the card that was tapped, not
   under all four — otherwise the reader taps the first card and the answer
   appears a screen below, past three cards they did not choose.

   Done with order rather than by moving anything: the DOM keeps the tablist
   holding only tabs and the panels in their own container, which is what the
   roles describe. display: contents lifts both sets into one grid so the two
   can interleave. */
@media (max-width: 759px) {
	.blk--tab-panels [data-diagram] { display: grid; gap: 14px; }
	.blk--tab-panels .tabs__strip, .blk--tab-panels .tabs__panels { display: contents; }
	.blk--tab-panels .tabs__tab:nth-child(1) { order: 1; }
	.blk--tab-panels .tabs__panel:nth-child(1) { order: 2; }
	.blk--tab-panels .tabs__tab:nth-child(2) { order: 3; }
	.blk--tab-panels .tabs__panel:nth-child(2) { order: 4; }
	.blk--tab-panels .tabs__tab:nth-child(3) { order: 5; }
	.blk--tab-panels .tabs__panel:nth-child(3) { order: 6; }
	.blk--tab-panels .tabs__tab:nth-child(4) { order: 7; }
	.blk--tab-panels .tabs__panel:nth-child(4) { order: 8; }
	.blk--tab-panels .tabs__tab:nth-child(5) { order: 9; }
	.blk--tab-panels .tabs__panel:nth-child(5) { order: 10; }
	.blk--tab-panels .tabs__tab:nth-child(6) { order: 11; }
	.blk--tab-panels .tabs__panel:nth-child(6) { order: 12; }
	.blk--tab-panels .tabs__tab:nth-child(7) { order: 13; }
	.blk--tab-panels .tabs__panel:nth-child(7) { order: 14; }
	.blk--tab-panels .tabs__tab:nth-child(8) { order: 15; }
	.blk--tab-panels .tabs__panel:nth-child(8) { order: 16; }
	.blk--tab-panels .tabs__panel {
	background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
	margin-block-start: 0;
	}
}

/* ── How one obligation reaches a supply chain ────────────────────────────────
   The film, on the page. The stage keeps its own dark palette whatever band it
   sits in: it is a film, and it should look the same wherever it is embedded.
   Type on the stage is sized in --su (a hundredth of the stage width, set by
   gtm-network.js) so the words scale with the picture rather than with the page.

   The <ol> is the same five beats as prose. It is what a reader without
   JavaScript gets, and it is hidden the moment the script marks the figure live. */
.gtm { display: grid; gap: 18px; inline-size: 100%; }

.gtm__tabs { display: flex; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3);
             border-radius: 2px; justify-self: start; overflow: hidden; }
.gtm__tab { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .03em;
            padding: 8px 15px; border: 0; background: var(--paper); color: var(--ink-2);
            cursor: pointer; line-height: 1.15; white-space: nowrap; }
.gtm__tab[aria-selected="true"] { background: #F0A93B; color: #14100A; }
.gtm__tab:focus-visible { outline: 2px solid #F0A93B; outline-offset: -3px; }

.gtm__stage { display: none; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
              border-radius: 3px; background: #0D1014; }
.gtm.is-live .gtm__stage { display: block; }
.gtm.is-live .gtm__beats { display: none; }
.gtm__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }

/* the words, on the stage, where the first two beats need them */
.gtm__copy { position: absolute; inset-block-start: 8%; inset-inline-start: 5.5%;
             inline-size: 36%; pointer-events: none; }
.gtm__k { margin: 0 0 calc(var(--su, 10px) * .9); font-family: var(--f-mono, ui-monospace, monospace);
          font-size: calc(var(--su, 10px) * .95); letter-spacing: .14em; text-transform: uppercase;
          color: #727B87; }
.gtm__stmt { margin: 0 0 calc(var(--su, 10px) * 1.15); font-family: var(--f-display, Georgia, serif);
             font-weight: 300; font-size: calc(var(--su, 10px) * 3.15); line-height: 1.13;
             letter-spacing: -.012em; color: #F0EDE5; text-wrap: balance; }
.gtm__sub-copy { margin: 0; font-size: calc(var(--su, 10px) * 1.38); line-height: 1.5; color: #A7ADB6; }

.gtm__lbl { font-size: 15px; letter-spacing: 2.2px; fill: #727B87;
            font-family: var(--f-mono, ui-monospace, monospace); }
.gtm__nm  { font-size: 21px; fill: #DDE1E6; }
.gtm__nm--out { fill: #F0A93B; }
.gtm__sub { font-size: 16px; fill: #79818C; }
.gtm__ask { font-size: 21px; fill: #F0A93B; }

.gtm__hud { position: absolute; inset-block-end: 8%; inset-inline-start: 5.5%;
            display: flex; flex-direction: column; gap: calc(var(--su, 10px) * .5);
            pointer-events: none; }
.gtm__hud-k { font-family: var(--f-mono, ui-monospace, monospace); font-size: calc(var(--su, 10px) * .95);
              letter-spacing: .14em; text-transform: uppercase; color: #727B87; }
.gtm__hud-v { font-size: calc(var(--su, 10px) * 3.4); font-weight: 600; line-height: 1;
              color: #F0A93B; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gtm__note { position: absolute; inset-block-end: 8%; inset-inline-end: 4%; margin: 0;
             font-family: var(--f-mono, ui-monospace, monospace); font-size: calc(var(--su, 10px) * .92);
             letter-spacing: .16em; text-transform: uppercase; color: #5C646F; }

.gtm__beats { list-style: none; margin: 0; padding: 0; display: grid;
              grid-template-columns: repeat(5, 1fr); border-block-start: 1px solid var(--ink-3); }
.gtm__beat { padding: 16px 18px 4px; }
.gtm__beat + .gtm__beat { border-inline-start: 1px solid var(--ink-3); }
.gtm__beat-k { margin: 0 0 6px; font-family: var(--f-mono, ui-monospace, monospace);
               font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.gtm__beat-t { margin: 0 0 8px; font-size: 17px; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.gtm__beat-b { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.gtm__replay { justify-self: start; font: inherit; font-size: 13px; font-weight: 600;
               padding: 8px 16px; border: 1px solid var(--ink-3);
               background: transparent; color: var(--ink); border-radius: 2px; cursor: pointer; }
.gtm__replay:hover { border-color: var(--ink-2); }

@media (max-width: 900px) {
  .gtm__copy { inline-size: 46%; }
  .gtm__stmt { font-size: calc(var(--su, 10px) * 4); }
  .gtm__sub-copy { font-size: calc(var(--su, 10px) * 1.75); }
  .gtm__beats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .gtm__beats { grid-template-columns: 1fr; } }

/* ── Shared presentation ──────────────────────────────────────────────────────
   The layout behind /s/{token}. No nav and no footer links on purpose: the
   recipient was sent one thing, and every link out of it is a way to lose them
   or to leak the rest of the site into a private conversation. */
body.presentation { background: var(--paper); }
.pres__bar { display: flex; align-items: center; justify-content: space-between;
             gap: 20px; padding: 22px clamp(20px, 5vw, 56px);
             border-block-end: 1px solid var(--ink-3); }
.pres__logo { block-size: 26px; inline-size: auto; }
.pres__wordmark { font-family: var(--f-display, Georgia, serif); font-size: 20px; letter-spacing: -.01em; }
.pres__tag { font-family: var(--f-mono, ui-monospace, monospace); font-size: 10px;
             letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pres__foot { padding: 40px clamp(20px, 5vw, 56px) 64px; border-block-start: 1px solid var(--ink-3); }
.pres__foot p { margin: 0; font-family: var(--f-mono, ui-monospace, monospace);
                font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }