/* The Partner Shop, version 3. Direction: Live Diagram.
	 Dark theme only. One stylesheet, no build step. */

@property --dim {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

@property --lit {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

:root {
	--bg: #0B0E11;
	--surface-1: #11161B;
	--surface-2: #171D23;
	--surface-3: #1F262E;
	--text-1: #ECEEF1;
	--text-2: #A7AEB8;
	--text-3: #8B94A0;
	--label-dim: #7D8692;
	--accent: #3FC1CF;
	--accent-strong: #007381;
	--accent-hover: #6AD2DD;
	--accent-bright: #7FDCE6;
	--accent-tint: rgba(63, 193, 207, 0.10);
	--node-lit: #183138;
	--signal: #E8B45A;
	--signal-tint: rgba(232, 180, 90, 0.12);
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.16);
	--border-control: #5B6672;
	--grid: rgba(255, 255, 255, 0.04);

	--font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

	--dur-1: 120ms;
	--dur-2: 200ms;
	--dur-3: 360ms;
	--dur-4: 600ms;
	--dur-5: 900ms;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--gutter: 20px;
	--col-gap: 20px;
	--section-pad: 72px;
	--nav-h: 64px;
	--shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
	:root { --gutter: 32px; --col-gap: 24px; }
}

@media (min-width: 1024px) {
	:root { --gutter: 48px; --section-pad: 128px; }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: dark;
	scroll-padding-top: var(--nav-h);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text-1);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

@media (min-width: 1024px) {
	body { font-size: 17px; }
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: var(--accent-strong); color: #fff; }

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--accent);
	color: var(--bg);
	font-weight: 500;
	border-radius: 4px;
	text-decoration: none;
}

.skip-link:focus { top: 12px; }

.sprite { position: absolute; }

.container {
	width: 100%;
	max-width: calc(1200px + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* type */
.label {
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
}

.display {
	font-family: var(--font-display);
	font-weight: 350;
	font-size: 44px;
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.h2 {
	font-family: var(--font-display);
	font-weight: 380;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.h3 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.lead {
	font-size: 19px;
	line-height: 1.5;
	color: var(--text-2);
	max-width: 34em;
}

@media (min-width: 768px) {
	.display { font-size: 60px; }
	.h2 { font-size: 40px; }
}

@media (min-width: 1024px) {
	.display { font-size: 64px; }
	.h2 { font-size: 44px; }
	.h3 { font-size: 26px; }
	.lead { font-size: 21px; }
}

@media (min-width: 1280px) {
	.display { font-size: 76px; }
}

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std);
}

.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 15px; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--text-1);
	text-decoration: underline;
	text-decoration-color: var(--border-control);
	text-underline-offset: 5px;
	transition: text-decoration-color var(--dur-1) var(--ease-std);
}

.link-arrow:hover { text-decoration-color: var(--accent); }

.link-arrow__mark {
	color: var(--accent);
	transition: transform var(--dur-1) var(--ease-std);
}

.link-arrow:hover .link-arrow__mark { transform: translateX(3px); }

/* header */
.nav-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 24px;
	pointer-events: none;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: background-color var(--dur-3) var(--ease-std), border-color var(--dur-3) var(--ease-std);
}

.site-header.is-scrolled,
.site-header.is-open {
	background: rgba(11, 14, 17, 0.96);
	border-bottom-color: var(--border);
}

.site-header.is-open { background: var(--bg); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; flex: none; }

.brand__logo {
	width: auto;
	height: 32px;
	filter: brightness(0) invert(1);
}

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--text-2);
	font-size: 15px;
	text-decoration: none;
	transition: color var(--dur-1) var(--ease-std);
}

.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--text-1); }
.site-nav__list a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--accent); }

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--border-control);
	border-radius: 4px;
	color: var(--text-1);
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--dur-2) var(--ease-std);
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
	.nav-toggle__bar { forced-color-adjust: none; background: ButtonText; }
}

.site-header.is-open .nav-toggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.site-header.is-open .nav-toggle__bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile sheet. With JavaScript the sheet is closed until the button opens it.
	 Without JavaScript the links sit in the page flow under the logo. */
@media (max-width: 899px) {
	.site-nav {
		position: absolute;
		top: var(--nav-h);
		left: 0;
		right: 0;
		padding: 8px var(--gutter) 24px;
		background: var(--bg);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-2);
	}

	.js .site-nav { display: none; }
	.js .site-header.is-open .site-nav { display: block; }

	.site-nav__list li { border-bottom: 1px solid var(--border); }
	.site-nav__list a { display: flex; min-height: 52px; font-size: 17px; color: var(--text-1); }
	.site-nav__cta { margin-top: 20px; width: 100%; min-height: 48px; }

	.no-js .nav-toggle { display: none; }
	.no-js .site-header { position: absolute; }
	.no-js .site-header__inner { flex-wrap: wrap; height: auto; padding-top: 16px; }
	.no-js .site-nav { position: static; width: 100%; padding: 8px 0 16px; background: transparent; border: 0; box-shadow: none; }
	.no-js .hero, .no-js .page-hero { padding-top: 400px; }
}

@media (min-width: 900px) {
	.nav-toggle, .site-header__right { display: none; }
	.site-nav { display: flex; align-items: center; gap: 32px; }
	.site-nav__list { display: flex; gap: 28px; }
}

/* frame, grid */
.frame {
	position: relative;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background-color: var(--surface-1);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: -1px -1px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* diagrams */
.dg { width: 100%; height: auto; overflow: visible; --dg-fs: 12px; }
.dg--hero { --dg-fs: 13px; }

@media (max-width: 639px) {
	.dg--hero { --dg-fs: 21px; }
	.dg--hero text { letter-spacing: 0.03em; }
	.dg--hero .caps { display: none; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.dg--hero { --dg-fs: 16px; }
}
.dg--order { --dg-fs: 14px; }

/* A bare type selector: it also has to match inside <use> trees. */
text {
	font-family: var(--font-mono);
	font-size: var(--dg-fs, 12px);
	letter-spacing: 0.06em;
	fill: var(--lbl, var(--text-2));
}

.caps text { fill: var(--lbl, var(--text-3)); }

.rule { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.ghost { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; stroke-dasharray: 3 5; }

.ln {
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ln--layer { fill: var(--accent-tint); }

.glow {
	fill: rgba(63, 193, 207, 0.16);
	stroke: none;
	filter: drop-shadow(0 0 14px rgba(63, 193, 207, 0.55));
}

/* marks, placed with <use>; colours arrive through inherited properties */
.mk { fill: var(--mk-fill, var(--surface-1)); stroke: var(--accent); stroke-width: 1.5; }
.mk-dot, .mk-in { fill: var(--accent); stroke: none; }
.mk--sig { stroke: var(--signal); fill: rgb(calc(17 + 41 * var(--lit, 0)), calc(22 + 27 * var(--lit, 0)), calc(27 + 4 * var(--lit, 0))); }
.mk-tick { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mk-gate-bg { fill: #3A311F; stroke: var(--signal); stroke-width: 1; opacity: var(--lit, 0); }
.mk-gate { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; stroke-opacity: calc(0.62 + 0.38 * var(--lit, 0)); }
.mk-ring { fill: none; stroke: var(--accent-bright); stroke-width: 1.5; }

.ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gate { transition: --lit var(--dur-3) var(--ease-std); }

.pulse {
	fill: none;
	stroke: var(--accent-bright);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 6 200;
	stroke-dashoffset: 6;
	opacity: 0;
}

/* static figures in the stacked blocks */
.geo.is-on { --lit: 1; --mk-fill: var(--node-lit); }
/* dimmed parts: lines and marks fade by --dim; labels take --label-dim, which stays at 4.5:1 or more */
.geo.is-done { --dim: 0.42; --lbl: var(--label-dim); }
.stage__fig--4 .geo.is-done { --dim: 0.6; }
.ln, .lane > .mk, use:not(.geo):not(.ring) { opacity: var(--dim, 1); }

/* shared by every page */
.dg--cta { --dg-fs: 14px; }

.h1 {
	font-family: var(--font-display);
	font-weight: 350;
	font-size: 40px;
	line-height: 1.06;
	letter-spacing: -0.02em;
	max-width: 15em;
}

@media (min-width: 1024px) { .h1 { font-size: 64px; } }

.label--accent { color: var(--accent); }
.label--sig { color: var(--signal); }
.muted { color: var(--text-2); max-width: 34em; }
.small { font-size: 14px; line-height: 1.5; }
.quiet { color: var(--text-3); }
b { font-weight: 500; color: var(--text-1); }

.tl, .prose a, .form__note a {
	color: var(--text-1);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 4px;
}

.chip {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border: 1px solid rgba(63, 193, 207, 0.45);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	vertical-align: middle;
}

/* sections */
.section { padding: 72px 0; }
.section--alt { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--alt .frame, .section--alt .defs div { background-color: var(--bg); }
.section--bios { padding-top: 0; }
@media (min-width: 1024px) { .section { padding: 104px 0; } .section--bios { padding-top: 0; } }

.sec-head { max-width: 46em; margin-bottom: 40px; }
.sec-head .label { color: var(--accent); margin-bottom: 16px; }
.sec-head .lead { margin-top: 20px; }
.sec-more { margin-top: 32px; }
/* inline, so the arrow follows the last word when the link wraps */
.sec-more .link-arrow { display: inline-block; padding: 9px 0; }
.sec-more .link-arrow__mark { display: inline-block; margin-left: 4px; }
.link-arrow__end { white-space: nowrap; }
.scope { margin: -8px 0 32px; max-width: 40em; }
.sub-h { margin: 56px 0 20px; }
.sub-h--top { margin-top: 0; font-size: 20px; }
.list-h { margin-bottom: 8px; color: var(--text-2); }
.list-h--gap { margin-top: 40px; }
.note { margin-top: 20px; font-size: 15px; color: var(--text-3); max-width: 40em; }
.note--box { padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-2); }

.split, .grid { display: grid; gap: 20px; }
.split { gap: 40px; }
.split > *, .grid > * { min-width: 0; }
.gap-l { gap: 40px; }
.split--fig { margin-top: 40px; }

@media (min-width: 700px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.split { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
	.split--fig { grid-template-columns: 7fr 5fr; gap: 48px; }
	.split .sec-head { margin-bottom: 28px; }
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.gap-l { gap: 72px; }
}

.prose { color: var(--text-2); max-width: 38em; }
.prose > * + * { margin-top: 16px; }
.prose--wide { max-width: 44em; }
.prose--gap { margin-top: 32px; }
.prose--page .h3 { margin-top: 40px; font-size: 20px; color: var(--text-1); }
.practice { padding-left: 16px; border-left: 2px solid var(--accent); color: var(--text-1); }
.pair p:last-child { margin-top: 8px; color: var(--text-2); }
.pair .label--accent + p { color: var(--text-1); }

/* cards */
.card {
	padding: 24px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: border-color var(--dur-1) var(--ease-std), translate var(--dur-1) var(--ease-std);
}

@media (hover: hover) {
	.card:hover { border-color: var(--border-strong); translate: 0 -2px; }
}

.card--hl { border-color: rgba(63, 193, 207, 0.45); background: #14242A; }
.card--sig { border-color: rgba(232, 180, 90, 0.3); }
.card > .label { margin-bottom: 10px; }
.card__name { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.card__h { margin-top: 8px; color: var(--text-1); }
.card > p:not(.label):not(.card__h) { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }
.card__meta { color: var(--text-3) !important; }
.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card--way { display: flex; flex-direction: column; }
.card--way .ctl { margin-top: auto; }
.card--way > :nth-last-child(2) { margin-bottom: 20px; }

.ctl { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.ctl .label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--signal); }
.ctl .label::before { content: ''; width: 5px; height: 11px; border-left: 2px solid var(--signal); border-right: 2px solid var(--signal); }
.ctl--dec .label { color: var(--accent); }
.ctl--dec .label::before { width: 7px; height: 7px; border: 1.5px solid var(--accent); }
.ctl p:last-child { font-size: 15px; color: var(--text-1); }

.stepg { width: 96px; height: 16px; margin-bottom: 16px; }
.stepg__l { stroke: var(--border-control); stroke-width: 1; }
.stepg__n { fill: var(--surface-2); stroke: var(--border-control); stroke-width: 1.5; }
.stepg__n.is-on { fill: var(--accent); stroke: var(--accent); }

.decision .label { color: var(--accent); margin-bottom: 6px; }

.decision {
	margin-top: 28px;
	padding: 16px 20px;
	max-width: 40em;
	background: var(--accent-tint);
	border-left: 2px solid var(--accent);
	border-radius: 0 8px 8px 0;
}

.stat { margin-top: 32px; padding: 20px 24px; max-width: 46em; border: 1px solid var(--border-strong); border-radius: 8px; }
.stat__src { margin-top: 12px; font-size: 14px; color: var(--text-3); }
.stat__src .label { margin-right: 8px; }
.stat__src a { color: var(--text-2); text-underline-offset: 3px; }

.panel { padding: 24px; border: 1px solid rgba(232, 180, 90, 0.3); border-radius: 12px; background: var(--surface-1); }
.panel__h { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-weight: 500; }
.glyph { flex: none; width: 28px; height: 32px; --lit: 1; }
.glyph-l .glyph { width: 56px; height: 64px; }
@media (max-width: 1023px) { .glyph-l { display: none; } .sec-head:has(+ .glyph-l) { margin-bottom: 0; } }

/* lists */
.nl { counter-reset: n; }
.nl > li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; padding: 13px 0; border-top: 1px solid var(--border); color: var(--text-2); }
.nl > li::before { content: counter(n, decimal-leading-zero); padding-top: 3px; font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.nl--sig > li::before { color: var(--signal); }
.nl--l > li { font-size: 19px; color: var(--text-1); padding: 18px 0; max-width: 40em; }
@media (min-width: 700px) { .nl--cols { columns: 2; column-gap: 32px; } .nl--cols > li { break-inside: avoid; } }

.bl > li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--border); color: var(--text-2); }
.bl > li::before { content: ''; position: absolute; left: 2px; top: 21px; width: 7px; height: 7px; border: 1.5px solid var(--accent); }
.bl--wait > li::before { border-color: var(--text-3); }
.bl--sig > li::before { top: 18px; width: 5px; height: 11px; border: 0; border-left: 2px solid var(--signal); border-right: 2px solid var(--signal); }
.bl--l > li { font-size: 19px; color: var(--text-1); padding: 18px 0 18px 30px; }
.bl--l > li::before { top: 27px; }
.bl--cols { margin-top: 40px; }
@media (min-width: 900px) { .bl--cols { columns: 2; column-gap: 48px; } .bl--cols > li { break-inside: avoid; } }

/* thesis */
.thesis__p { max-width: 24em; font-family: var(--font-display); font-weight: 350; font-size: 28px; line-height: 1.25; letter-spacing: -0.015em; }
.thesis__steps { display: grid; gap: 24px; margin-top: 28px; }
.thesis__steps li { font-family: var(--font-display); font-size: 22px; line-height: 1.3; }
.thesis__steps .label { display: block; margin-bottom: 10px; color: var(--accent); }
.thesis__steps .label--sig { color: var(--signal); }

@media (min-width: 800px) { .thesis__steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
@media (min-width: 1024px) { .thesis__p { font-size: 40px; } }

/* proof strip and partners */
.proof { display: grid; gap: 32px; }
.proof__n { font-family: var(--font-display); font-weight: 350; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
.proof__c { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-strong); max-width: 20em; color: var(--text-2); font-size: 15.5px; }
.proof__body { margin-top: 40px; font-size: 19px; }
.people { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 24px; }
.person-s { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.person-s span { display: block; font-weight: 400; font-size: 14px; color: var(--text-3); }
.person-s img, .bio__img { border-radius: 8px; object-fit: cover; filter: grayscale(1); }
.person-s img { width: 64px; height: 64px; }

@media (min-width: 800px) { .proof { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .proof__n { font-size: 64px; } }

.bio { display: grid; gap: 28px; padding: 48px 0; border-bottom: 1px solid var(--border-strong); }
.bio__img { width: 160px; height: 160px; }
.bio__name { margin-top: 20px; font-family: var(--font-display); font-weight: 380; font-size: 32px; line-height: 1.1; }
.bio__side .label { margin-top: 10px; }
.bio__loc { margin-top: 6px; color: var(--text-2); font-size: 15px; }
.bio__link { margin-top: 8px; font-size: 15px; }
.bio-line { margin-top: 32px; font-size: 19px; }
.facts { margin: 32px 0 0; max-width: 44em; }
.facts div { display: grid; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.facts dt { padding-top: 3px; }
.facts dd { margin: 0; color: var(--text-2); font-size: 15.5px; }

@media (min-width: 640px) { .facts div { grid-template-columns: 160px 1fr; } }
@media (min-width: 900px) { .bio { grid-template-columns: 260px 1fr; gap: 56px; padding: 72px 0; } }

/* close band */
.cta { padding: 72px 0; background: var(--surface-1); border-top: 1px solid var(--border); }
.cta__grid { display: grid; gap: 32px; }
.cta .label { margin-bottom: 16px; }
.cta p:not(.label) { margin-top: 20px; max-width: 36em; color: var(--text-2); }
.cta .btn { margin-top: 28px; }
.cta__fig { max-width: 420px; }

@media (min-width: 1024px) {
	.cta { padding: 104px 0; }
	.cta__grid { grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
}

/* footer */
.site-footer { border-top: 1px solid var(--border); padding: 48px 0 40px; }
.site-footer__grid { display: grid; gap: 32px; }
.site-footer .brand__logo { height: 28px; }
.site-footer__line { margin-top: 16px; max-width: 26em; color: var(--text-2); font-size: 15px; }
.site-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); font-size: 15px; text-decoration: none; transition: color var(--dur-1) var(--ease-std); }
.site-footer__links a:hover, .site-footer__links a[aria-current="page"] { color: var(--text-1); }
.site-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 14px; }

@media (min-width: 800px) {
	.site-footer__grid { grid-template-columns: 1fr auto; }
	.site-footer__links { grid-template-columns: repeat(3, auto); gap: 0 48px; }
}

/* reduced motion: the final state */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Windows contrast themes with a light background: the drawings and the white logo are made for a dark page
	 and cannot be read on white, so the page keeps its own dark colours. Dark contrast themes are left to the theme. */
@media (forced-colors: active) and (prefers-color-scheme: light) {
	:root { forced-color-adjust: none; }
}

/* keyboard focus: keep the focused control clear of the fixed header and the window edge */
a, button, input, textarea { scroll-margin-block: 88px 32px; }