@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..700&family=Martian+Mono:wdth,wght@75..112.5,300..700&display=swap');

/* ==========================================================================
   cvcallahan.com — design system
   Integration engineering consultancy. Hand-written CSS, no framework.
   This file is the single definition of the token set. Ports 1:1 into
   whammerstone/static/css/styles.css.

   Sections
     01  Tokens
     02  Reset + base
     03  Type
     04  Layout primitives
     05  Rules + spec sheets
     06  Buttons
     07  Icons
     08  Tooltips
     09  Form controls
     10  Status markers
     11  Chips, tags, placeholders
     12  Panels + schematic surfaces
     13  Flow diagram
     14  Site chrome (header / footer)
     15  Page sections
     16  Motion
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {

	/* --- Reference palette (OKLCH). Never used directly by components. --- */

	--c-white:        oklch(1.000 0.000 0);      /* #ffffff */
	--c-shell-50:     oklch(0.972 0.006 25);     /* #faf4f4 */
	--c-shell-100:    oklch(0.945 0.007 25);     /* #f1ebea */
	--c-shell-200:    oklch(0.895 0.006 25);     /* #e0dbda */
	--c-shell-300:    oklch(0.800 0.008 25);     /* #c3bcbb */

	--c-graphite-900: oklch(0.200 0.014 25);     /* #1c1413 */
	--c-graphite-700: oklch(0.360 0.014 25);     /* #443a39 */
	--c-graphite-500: oklch(0.500 0.012 25);     /* #6a6160 */

	--c-signal-600:   oklch(0.505 0.185 22);     /* #b71f30 */
	--c-signal-800:   oklch(0.360 0.135 22);     /* #740c1a */
	--c-signal-050:   oklch(0.955 0.022 22);     /* #ffebe9 */
	--c-signal-300:   oklch(0.700 0.160 25);     /* #f2716a  on dark */

	--c-verdigris-600: oklch(0.460 0.095 158);   /* #1b6843 */
	--c-verdigris-050: oklch(0.955 0.022 158);   /* #e5f5eb */
	--c-verdigris-300: oklch(0.780 0.130 158);   /* #65d097  on dark */

	--c-slate-600:    oklch(0.500 0.020 255);    /* #5c646f */
	--c-slate-050:    oklch(0.958 0.007 255);    /* #eef1f6 */
	--c-slate-300:    oklch(0.620 0.020 255);    /* #7e8792  on dark */

	--c-ochre-600:    oklch(0.520 0.120 65);     /* #975800 */
	--c-ochre-050:    oklch(0.955 0.032 75);     /* #fdeed9 */
	--c-ochre-300:    oklch(0.800 0.130 75);     /* #eeb154  on dark */

	--c-azimuth-600:  oklch(0.440 0.105 240);    /* #005886 */
	--c-azimuth-050:  oklch(0.958 0.018 240);    /* #e7f3fc */
	--c-azimuth-300:  oklch(0.760 0.100 240);    /* #73baea  on dark */

	--c-panel-900:    oklch(0.215 0.015 255);    /* #151a20 */
	--c-panel-800:    oklch(0.270 0.016 255);    /* #21272e */
	--c-panel-600:    oklch(0.360 0.018 255);    /* #373e47 */
	--c-panel-100:    oklch(0.720 0.012 255);    /* #a0a5ac */
	--c-panel-050:    oklch(0.940 0.004 255);    /* #e9ebee */


	/* --- Semantic roles. Components use only these. --------------------- */

	--bg:             var(--c-white);
	--surface:        var(--c-shell-50);
	--surface-2:      var(--c-shell-100);
	--rule:           var(--c-shell-200);
	--rule-strong:    var(--c-shell-300);

	--ink:            var(--c-graphite-900);   /* 18.16:1 on --bg */
	--ink-2:          var(--c-graphite-700);   /* 10.93:1 on --bg */
	--muted:          var(--c-graphite-500);   /*  6.03:1 on --bg */

	--primary:        var(--c-signal-600);     /*  6.48:1 on --bg */
	--primary-deep:   var(--c-signal-800);     /* 11.61:1 on --bg */
	--primary-tint:   var(--c-signal-050);
	--on-primary:     var(--c-white);

	/* Second brand colour: the schematic surface. */
	--panel:          var(--c-panel-900);
	--panel-2:        var(--c-panel-800);
	--panel-rule:     var(--c-panel-600);
	--panel-ink:      var(--c-panel-050);      /* 14.69:1 on --panel */
	--panel-muted:    var(--c-panel-100);      /*  7.06:1 on --panel */

	/* Status roles — always paired with an icon and a shape, never alone. */
	--ok:             var(--c-verdigris-600);  /*  6.79:1 on --bg */
	--ok-tint:        var(--c-verdigris-050);
	--ok-on-panel:    var(--c-verdigris-300);  /*  9.23:1 on --panel */

	--pending:        var(--c-slate-600);      /*  5.99:1 on --bg */
	--pending-tint:   var(--c-slate-050);
	--pending-on-panel: var(--c-slate-300);    /*  4.81:1 on --panel */

	--warn:           var(--c-ochre-600);      /*  5.68:1 on --bg */
	--warn-tint:      var(--c-ochre-050);
	--warn-on-panel:  var(--c-ochre-300);      /*  9.22:1 on --panel */

	--info:           var(--c-azimuth-600);    /*  7.63:1 on --bg */
	--info-tint:      var(--c-azimuth-050);
	--info-on-panel:  var(--c-azimuth-300);    /*  8.27:1 on --panel */

	--halt:           var(--c-graphite-700);   /* 10.93:1 on --bg */
	--halt-on-panel:  var(--c-panel-100);


	/* --- Type ----------------------------------------------------------- */

	--font-sans: 'Archivo', 'Archivo Fallback', Helvetica, Arial, sans-serif;
	--font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--t-3xs:  0.6875rem;   /* 11px  mono micro-labels */
	--t-2xs:  0.75rem;     /* 12px  mono labels, tooltips */
	--t-xs:   0.8125rem;   /* 13px  captions, table cells */
	--t-sm:   0.9375rem;   /* 15px  UI text, buttons */
	--t-base: 1.0625rem;   /* 17px  body */
	--t-md:   1.1875rem;   /* 19px  lede */
	--t-lg:   clamp(1.375rem, 1.15rem + 0.70vw, 1.75rem);   /* 22 → 28  h3 */
	--t-xl:   clamp(1.75rem,  1.35rem + 1.50vw, 2.50rem);   /* 28 → 40  h2 */
	--t-2xl:  clamp(2.25rem,  1.65rem + 2.40vw, 3.25rem);   /* 36 → 52  section lead */
	--t-3xl:  clamp(2.75rem,  1.70rem + 4.20vw, 4.25rem);   /* 44 → 68  h1 */

	--lh-tight: 1.06;
	--lh-snug:  1.24;
	--lh-body:  1.58;

	--wdth-display: 112;   /* Archivo width axis, display sizes */
	--wdth-body:    100;

	--track-display: -0.022em;   /* floor is -0.04em; nothing tighter */
	--track-label:    0.06em;
	--measure: 68ch;


	/* --- Space (4px base) ----------------------------------------------- */

	--s-1:  0.25rem;
	--s-2:  0.5rem;
	--s-3:  0.75rem;
	--s-4:  1rem;
	--s-5:  1.5rem;
	--s-6:  2rem;
	--s-7:  3rem;
	--s-8:  4rem;
	--s-9:  6rem;
	--s-10: 8rem;

	--gutter: clamp(1.25rem, 4vw, 3.5rem);
	--section-y: clamp(3.5rem, 6vw, 6.5rem);
	--maxw: 1360px;
	--maxw-narrow: 920px;


	/* --- Radii. Controls share one radius. ------------------------------ */

	--r-control: 6px;    /* buttons AND inputs — one family */
	--r-chip:    4px;
	--r-panel:   10px;
	--r-pill:    999px;  /* non-interactive pills only */


	/* --- Elevation. One shadow, used sparingly, never with a border. ----- */

	--lift: 0 6px 18px -10px oklch(0.20 0.014 25 / 0.35);


	/* --- Motion ---------------------------------------------------------- */

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-1: 120ms;
	--dur-2: 220ms;
	--dur-3: 420ms;


	/* --- Z-index scale (semantic, never arbitrary) ----------------------- */

	--z-base:     0;
	--z-raised:   10;
	--z-sticky:   200;
	--z-backdrop: 300;
	--z-menu:     400;
	--z-tooltip:  500;
}


/* ==========================================================================
   02  RESET + BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-variation-settings: 'wdth' var(--wdth-body);
	font-size: var(--t-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.panel :focus-visible,
.schematic :focus-visible,
.band--ink :focus-visible { outline-color: var(--c-signal-300); }

::selection { background: var(--primary); color: var(--on-primary); }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
	position: absolute; top: 0; left: var(--gutter);
	transform: translateY(-120%);
	z-index: var(--z-tooltip);
	background: var(--ink); color: var(--bg);
	padding: var(--s-2) var(--s-4);
	border-radius: 0 0 var(--r-control) var(--r-control);
	font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }


/* ==========================================================================
   03  TYPE
   ========================================================================== */

h1, h2, h3, h4 {
	margin: 0;
	font-variation-settings: 'wdth' var(--wdth-display);
	font-weight: 600;
	letter-spacing: var(--track-display);
	line-height: var(--lh-tight);
	text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--t-md); line-height: var(--lh-snug); letter-spacing: -0.012em; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-deep); }

.measure { max-width: var(--measure); }
.measure-tight { max-width: 54ch; }

.lede {
	font-size: var(--t-md);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 62ch;
}

.mono {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-weight: 500;
	letter-spacing: 0;
}

/* Small mono label. Used for machine-ish metadata only — platform names,
   statuses, prices, step indices. Deliberately NOT an eyebrow above
   every heading. */
.label {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 100;
	font-size: var(--t-3xs);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
}

.eyebrow {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 100;
	font-size: var(--t-2xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	display: block;
	margin-bottom: var(--s-4);
}

.index-no {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 100;
	font-weight: 300;
	font-size: var(--t-lg);
	color: var(--rule-strong);
	line-height: 1;
	font-feature-settings: 'tnum';
}

.figure {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	font-feature-settings: 'tnum';
}
.figure--lg { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.figure--md { font-size: var(--t-md); }
.figure--accent { color: var(--primary); }


/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2rem, 3.5vw, 3.5rem); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
}

.band { background: var(--surface); }
.band--ink { background: var(--primary-deep); color: var(--bg); }
.band--ink h2, .band--ink h3 { color: var(--bg); }
.band--ink a:not(.btn):not(.btn-icon) { color: var(--bg); }


/* ==========================================================================
   05  RULES + SPEC SHEETS
   Hairlines are the structural language of this system. The grid is meant
   to be visible.
   ========================================================================== */

.hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.hr--strong { border-top-color: var(--rule-strong); }

/* A spec sheet: cells separated by shared hairlines, no card shadows. */
.spec {
	display: grid;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
}
.spec--3 { grid-template-columns: repeat(3, 1fr); }
.spec--4 { grid-template-columns: repeat(4, 1fr); }

.spec__cell {
	padding: var(--s-6) var(--s-5) var(--s-6) 0;
	border-right: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-width: 0;
}
.spec__cell:first-child { padding-left: 0; }
.spec__cell:not(:first-child) { padding-left: var(--s-5); }
.spec__cell:last-child { border-right: 0; padding-right: 0; }

/* Multi-row spec sheet: 3 columns, any number of rows. The single-row rules
   above key off :first-child/:last-child, which misaligns the left edge and
   leaves a stray right-hand rule once the cells wrap — so edges are keyed off
   the column position instead, and rows are separated by their own hairline. */
.spec--rows3 { grid-template-columns: repeat(3, 1fr); }
.spec--rows3 > .spec__cell { padding-left: var(--s-5); padding-right: var(--s-5); border-right: 1px solid var(--rule); }
.spec--rows3 > .spec__cell:nth-child(3n + 1) { padding-left: 0; }
.spec--rows3 > .spec__cell:nth-child(3n) { border-right: 0; padding-right: 0; }
.spec--rows3 > .spec__cell:nth-child(n + 4) { border-top: 1px solid var(--rule); }

@media (max-width: 900px) {
	.spec--rows3 { grid-template-columns: 1fr; }
	.spec--rows3 > .spec__cell { padding-left: 0; padding-right: 0; border-right: 0; border-top: 1px solid var(--rule); }
	.spec--rows3 > .spec__cell:first-child { border-top: 0; }
}

/* Definition rows: label left, value right, hairline between. */
.deflist { display: grid; gap: 0; }
.deflist__row {
	display: grid;
	grid-template-columns: minmax(9rem, 30%) 1fr;
	gap: var(--s-4);
	padding-block: var(--s-3);
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}
.deflist__row:first-child { border-top: 1px solid var(--rule); }
.deflist__key { font-size: var(--t-3xs); }
.deflist__val { font-size: var(--t-sm); color: var(--ink-2); }


/* ==========================================================================
   06  BUTTONS
   Buttons and inputs share --r-control. Never a 1px border plus a wide
   drop shadow on the same element.
   ========================================================================== */

.btn {
	--btn-bg: var(--ink);
	--btn-fg: var(--bg);
	--btn-bd: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	height: 44px;
	padding-inline: var(--s-5);
	border: 1px solid var(--btn-bd);
	border-radius: var(--r-control);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--dur-1) var(--ease-out),
	            border-color var(--dur-1) var(--ease-out),
	            color var(--dur-1) var(--ease-out);
}

.btn--primary { --btn-bg: var(--primary); --btn-bd: var(--primary); --btn-fg: var(--on-primary); }
.btn--primary:hover { --btn-bg: var(--primary-deep); --btn-bd: var(--primary-deep); --btn-fg: var(--on-primary); }

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--rule-strong); --btn-fg: var(--ink); }
.btn--ghost:hover { --btn-bd: var(--ink); --btn-fg: var(--ink); }

.btn--quiet { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--ink-2); padding-inline: var(--s-3); }
.btn--quiet:hover { --btn-fg: var(--primary); }

.btn--on-ink { --btn-bg: var(--bg); --btn-bd: var(--bg); --btn-fg: var(--primary-deep); }
.btn--on-ink:hover { --btn-bg: var(--surface); --btn-bd: var(--surface); }

.btn--ghost-on-ink { --btn-bg: transparent; --btn-bd: oklch(1 0 0 / 0.45); --btn-fg: var(--bg); }
.btn--ghost-on-ink:hover { --btn-bd: var(--bg); }

.btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

/* An <a> styled as a button must keep the BUTTON's foreground on hover/focus.
   The generic `a:hover` rule (specificity 0,1,1) otherwise outranks `.btn`'s own
   `color: var(--btn-fg)` (0,1,0) and repaints the label with the link colour —
   which on .btn--primary is the same --primary-deep as its hover background, so
   the label disappears entirely. Re-asserted here at 0,2,1 for every variant,
   present and future, rather than patched per variant. */
a.btn:hover, a.btn:focus, a.btn:focus-visible,
a.btn-icon:hover, a.btn-icon:focus, a.btn-icon:focus-visible { color: var(--btn-fg); }

/* Icon-only control. Square, same radius as the text buttons. */
.btn-icon {
	--btn-bg: transparent;
	--btn-bd: var(--rule);
	--btn-fg: var(--ink-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	flex: none;
	border: 1px solid var(--btn-bd);
	border-radius: var(--r-control);
	background: var(--btn-bg);
	color: var(--btn-fg);
	cursor: pointer;
	transition: background var(--dur-1) var(--ease-out),
	            border-color var(--dur-1) var(--ease-out),
	            color var(--dur-1) var(--ease-out);
}
.btn-icon:hover { --btn-bd: var(--ink); --btn-fg: var(--primary); }
.btn-icon--solid { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: var(--bg); }
.btn-icon--solid:hover { --btn-bg: var(--primary); --btn-bd: var(--primary); --btn-fg: var(--on-primary); }
.btn-icon--bare { --btn-bd: transparent; }
.btn-icon--bare:hover { --btn-bd: var(--rule-strong); }
.btn-icon--sm { width: 32px; height: 32px; }
.btn-icon--on-ink { --btn-bd: oklch(1 0 0 / 0.35); --btn-fg: var(--bg); }
.btn-icon--on-ink:hover { --btn-bd: var(--bg); --btn-fg: var(--bg); --btn-bg: oklch(1 0 0 / 0.12); }
.btn-icon[aria-disabled='true'] { opacity: 0.4; pointer-events: none; }

/* Text link with a trailing icon. Used for the copy deck's named
   secondary CTAs, which arrive with sentence labels. */
.linkcta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-strong);
	padding-bottom: 2px;
	transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.linkcta:hover { color: var(--primary); border-bottom-color: var(--primary); }
.linkcta .ico { transition: translate var(--dur-2) var(--ease-out); }
.linkcta:hover .ico { translate: 2px -2px; }
.linkcta--on-ink { color: var(--bg); border-bottom-color: oklch(1 0 0 / 0.45); }
.linkcta--on-ink:hover { color: var(--bg); border-bottom-color: var(--bg); }


/* ==========================================================================
   07  ICONS
   Geometry lives once in an inline <symbol> sprite; each instance carries
   its own <title>. See SKIN.md for the markup contract.
   ========================================================================== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
	width: 20px; height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ico--sm { width: 16px; height: 16px; stroke-width: 1.75; }
.ico--lg { width: 26px; height: 26px; stroke-width: 1.4; }


/* ==========================================================================
   08  TOOLTIPS
   Appear on hover AND on keyboard focus. .tip--pinned forces the visible
   state for documentation.
   ========================================================================== */

.tip { position: relative; display: inline-flex; }

.tip__bubble {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	translate: -50% 4px;
	z-index: var(--z-tooltip);
	padding: 5px 9px;
	border-radius: var(--r-chip);
	background: var(--ink);
	color: var(--bg);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.35;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dur-1) var(--ease-out),
	            translate var(--dur-2) var(--ease-out),
	            visibility 0s linear var(--dur-1);
}
.tip__bubble::after {
	content: '';
	position: absolute;
	top: 100%; left: 50%;
	translate: -50% 0;
	border: 4px solid transparent;
	border-top-color: var(--ink);
}
.tip:hover .tip__bubble,
.tip:focus-within .tip__bubble,
.tip--pinned .tip__bubble {
	opacity: 1;
	visibility: visible;
	translate: -50% 0;
	transition-delay: 0s;
}
.tip--below .tip__bubble { bottom: auto; top: calc(100% + 10px); }
.tip--below .tip__bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }

.tip--on-ink .tip__bubble { background: var(--bg); color: var(--ink); }
.tip--on-ink .tip__bubble::after { border-top-color: var(--bg); }


/* ==========================================================================
   09  FORM CONTROLS
   Same radius and border language as the buttons.
   ========================================================================== */

.field { display: grid; gap: var(--s-2); }

.field__label {
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.004em;
}
.field__req { color: var(--primary); font-weight: 700; }

.input, .select, .textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-control);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--t-sm);
	transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.select {
	appearance: none;
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }

.field__hint { font-size: var(--t-xs); color: var(--muted); }

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: var(--primary); background: var(--primary-tint); }

.field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--primary-deep);
}
.field__error .ico { margin-top: 1px; }

/* Input with a trailing icon-only control (search, copy). */
.input-group { display: flex; gap: var(--s-2); align-items: stretch; }
.input-group .btn-icon { height: 44px; width: 44px; }


/* ==========================================================================
   10  STATUS MARKERS
   Colour is never the only channel: every status carries an icon, a marker
   shape, and text.
   ========================================================================== */

.status {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 3px 9px 3px 7px;
	border: 1px solid;
	border-radius: var(--r-chip);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.status .ico { width: 14px; height: 14px; stroke-width: 1.9; }

.status--ok      { color: var(--ok);      background: var(--ok-tint);      border-color: color-mix(in oklab, var(--ok) 28%, transparent); }
.status--pending { color: var(--pending); background: var(--pending-tint); border-color: color-mix(in oklab, var(--pending) 28%, transparent); }
.status--warn    { color: var(--warn);    background: var(--warn-tint);    border-color: color-mix(in oklab, var(--warn) 30%, transparent); }
.status--info    { color: var(--info);    background: var(--info-tint);    border-color: color-mix(in oklab, var(--info) 28%, transparent); }
.status--halt    { color: var(--halt);    background: var(--surface-2);    border-color: var(--rule-strong); border-style: dashed; }

/* Marker shape — readable with colour removed. */
.marker {
	width: 11px; height: 11px;
	flex: none;
	border: 1.5px solid currentColor;
	display: inline-block;
}
.marker--ok      { border-radius: 50%; background: currentColor; }               /* filled disc  */
.marker--pending { border-radius: 50%; background: transparent; }                /* hollow ring  */
.marker--warn    { border-radius: 2px; background: currentColor; rotate: 45deg; }/* filled lozenge */
.marker--halt    { border-radius: 2px; background: transparent; border-style: dashed; }
.marker--info    { border-radius: 2px; background: currentColor; }

.status-line {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-2xs);
	font-weight: 500;
}
.status-line--ok      { color: var(--ok); }
.status-line--pending { color: var(--pending); }
.status-line--warn    { color: var(--warn); }
.status-line--info    { color: var(--info); }
.status-line--halt    { color: var(--halt); }

.schematic .status-line--ok      { color: var(--ok-on-panel); }
.schematic .status-line--pending { color: var(--pending-on-panel); }
.schematic .status-line--warn    { color: var(--warn-on-panel); }
.schematic .status-line--info    { color: var(--info-on-panel); }
.schematic .status-line--halt    { color: var(--halt-on-panel); }


/* ==========================================================================
   11  CHIPS, TAGS, PLACEHOLDERS
   ========================================================================== */

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 4px 10px;
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	font-weight: 500;
	white-space: nowrap;
}
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--ink); color: var(--ink); }

/* Unsourced metric. Must never read as real data. */
.chip--verify {
	border: 1px dashed var(--warn);
	border-radius: var(--r-chip);
	background: repeating-linear-gradient(
		135deg,
		var(--warn-tint) 0 6px,
		oklch(1 0 0 / 0.65) 6px 12px
	);
	color: var(--warn);
	font-weight: 600;
	text-transform: none;
	white-space: normal;
	text-align: left;
	line-height: 1.4;
	padding: 5px 10px;
}
.chip--verify .ico { width: 14px; height: 14px; flex: none; }

/* Pending sign-off. Renders as written, visually subordinate. */
.tag-confirm {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	font-weight: 500;
	color: var(--muted);
	border-bottom: 1px dotted var(--rule-strong);
	line-height: 1.2;
	white-space: nowrap;
	vertical-align: middle;
}
.band--ink .tag-confirm { color: oklch(1 0 0 / 0.72); border-bottom-color: oklch(1 0 0 / 0.4); }
.schematic .tag-confirm { color: var(--panel-muted); border-bottom-color: var(--panel-rule); }


/* ==========================================================================
   12  PANELS + SCHEMATIC SURFACES
   ========================================================================== */

.panel {
	border: 1px solid var(--rule);
	border-radius: var(--r-panel);
	background: var(--bg);
	padding: var(--s-5);
}
.panel--fill { background: var(--surface); }
.panel--flush { padding: 0; overflow: hidden; }

.panel__head {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--s-4);
}
.panel__head .label { margin-right: auto; }

/* The dark surface. Used for anything diagrammatic or machine-facing. */
.schematic {
	position: relative;
	border-radius: var(--r-panel);
	background:
		radial-gradient(circle at 1px 1px, oklch(1 0 0 / 0.07) 1px, transparent 0) 0 0 / 22px 22px,
		linear-gradient(180deg, var(--panel-2), var(--panel));
	color: var(--panel-ink);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	overflow: hidden;
}
.schematic .label { color: var(--panel-muted); }
.schematic h2, .schematic h3, .schematic h4 { color: var(--panel-ink); }
.schematic .panel__head { border-bottom-color: var(--panel-rule); }
.schematic .chip { background: oklch(1 0 0 / 0.06); border-color: var(--panel-rule); color: var(--panel-ink); }

.schematic__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	padding-top: var(--s-4);
	margin-top: var(--s-4);
	border-top: 1px solid var(--panel-rule);
}


/* ==========================================================================
   13  FLOW DIAGRAM
   Source → middleware → destination, with retry, dead-letter and
   reconciliation as real states.
   ========================================================================== */

.flow { width: 100%; height: auto; }
.flow--stack { display: none; }

.flow-node { fill: var(--panel-2); stroke: var(--panel-rule); stroke-width: 1; }
.flow-node--live { stroke: var(--c-signal-300); }
.flow-node--ok { stroke: var(--ok-on-panel); }
.flow-node--warn { stroke: var(--warn-on-panel); }
.flow-node--halt { stroke: var(--panel-rule); stroke-dasharray: 4 3; }

.flow-title {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 11px;
	font-weight: 600;
	fill: var(--panel-ink);
	letter-spacing: 0.02em;
}
.flow-sub {
	font-family: var(--font-sans);
	font-size: 11px;
	fill: var(--panel-muted);
}
.flow-tag {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.06em;
}
.flow-tag--live { fill: var(--c-signal-300); }
.flow-tag--ok { fill: var(--ok-on-panel); }
.flow-tag--warn { fill: var(--warn-on-panel); }
.flow-tag--info { fill: var(--info-on-panel); }
.flow-tag--halt { fill: var(--halt-on-panel); }

.flow-edge { fill: none; stroke: var(--panel-rule); stroke-width: 1.5; }
.flow-edge--live { stroke: var(--c-signal-300); }
.flow-edge--warn { stroke: var(--warn-on-panel); stroke-dasharray: 5 4; }
.flow-edge--info { stroke: var(--info-on-panel); stroke-dasharray: 3 5; }
.flow-edge--halt { stroke: var(--panel-rule); stroke-dasharray: 4 5; }
.flow-edge--tangle { stroke: var(--panel-rule); stroke-width: 1; stroke-opacity: 0.9; }
.flow-edge--live-dim { stroke: var(--c-signal-300); stroke-opacity: 0.42; }

.flow-divider { stroke: var(--panel-rule); stroke-width: 1; stroke-dasharray: 2 5; }

.flow-head { fill: var(--panel-rule); }
.flow-head--live { fill: var(--c-signal-300); }
.flow-head--warn { fill: var(--warn-on-panel); }
.flow-head--info { fill: var(--info-on-panel); }

.flow-node--plain { fill: var(--panel-2); stroke: var(--panel-rule); }
.flow-node--hub { fill: var(--panel-2); stroke: var(--c-signal-300); stroke-width: 1.5; }
.flow-row { fill: oklch(1 0 0 / 0.045); stroke: var(--panel-rule); stroke-width: 1; }
.flow-rowtitle {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 10px;
	font-weight: 600;
	fill: var(--panel-ink);
	letter-spacing: 0.03em;
}
.flow-edgelabel {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 10px;
	font-weight: 500;
	fill: var(--panel-muted);
	letter-spacing: 0.04em;
}

/* The travelling signal. Static unless motion is welcome. */
.flow-pulse {
	stroke: var(--c-signal-300);
	stroke-width: 3;
	stroke-linecap: round;
	fill: none;
	stroke-dasharray: 8 92;
	stroke-dashoffset: 55;
}
.flow-icon { fill: none; stroke: var(--panel-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-icon--muted { stroke: var(--panel-muted); }
.flow-icon--live { stroke: var(--c-signal-300); }
.flow-icon--ok { stroke: var(--ok-on-panel); }
.flow-icon--warn { stroke: var(--warn-on-panel); }
.flow-icon--info { stroke: var(--info-on-panel); }
.flow-icon--halt { stroke: var(--halt-on-panel); }

/* Stacked (small-screen) version of the flow diagram — plain HTML, no SVG. */
.fstack__node {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	padding: var(--s-4);
	border: 1px solid var(--panel-rule);
	border-radius: var(--r-chip);
	background: var(--panel-2);
}
.fstack__node .ico { color: var(--panel-muted); }
.fstack__node--live { border-color: var(--c-signal-300); }
.fstack__node--live > .ico { color: var(--c-signal-300); }
.fstack__node--ok { border-color: var(--ok-on-panel); }
.fstack__node--ok > .ico { color: var(--ok-on-panel); }
.fstack__node--halt { border-style: dashed; }
.fstack__title {
	display: block;
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--panel-ink);
}
.fstack__sub { display: block; font-size: var(--t-xs); color: var(--panel-muted); margin-top: 3px; line-height: 1.45; }
.fstack__rows { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 6px; }
.fstack__rows li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 6px 8px;
	border: 1px solid var(--panel-rule);
	border-radius: 4px;
	background: oklch(1 0 0 / 0.045);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--panel-ink);
}
.fstack__rows .ico { color: var(--panel-muted); }
.fstack__rows .is-warn { color: var(--warn-on-panel); }
.fstack__rows .is-warn .ico { color: var(--warn-on-panel); }
.fstack__rows .is-info { color: var(--info-on-panel); }
.fstack__rows .is-info .ico { color: var(--info-on-panel); }

.fstack__link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) 0 var(--s-2) 22px;
	position: relative;
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--panel-muted);
	min-height: 34px;
}
.fstack__link::before {
	content: '';
	position: absolute;
	left: 22px; top: 0; bottom: 0;
	border-left: 2px solid var(--panel-rule);
}
.fstack__link span { padding-left: var(--s-3); }
.fstack__link--live::before { border-left-color: var(--c-signal-300); }
.fstack__link--live span { color: var(--c-signal-300); }
.fstack__link--halt::before { border-left-style: dashed; }
.fstack__branch { margin-left: var(--s-5); padding-left: var(--s-4); border-left: 1px dashed var(--panel-rule); }


/* ==========================================================================
   14  SITE CHROME
   ========================================================================== */

.site-head {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: oklch(1 0 0 / 0.92);
	backdrop-filter: saturate(1.6) blur(8px);
	border-bottom: 1px solid var(--rule);
}
.site-head__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	min-height: 72px;
}

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.brand__mark {
	width: 36px; height: 36px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--r-chip);
	background: var(--ink);
	color: var(--bg);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 75;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.02em;
	transition: background var(--dur-2) var(--ease-out);
}
.brand:hover .brand__mark { background: var(--primary); }
.brand__text { display: block; }
/* The wordmark is a domain, so it is set in mono like every other machine-facing
   string in this system — including the two addresses either side of it. Bold
   sans on a lowercase domain reads as an emboldened body word and the dot all
   but vanishes. The TLD drops to --muted so the name carries and the suffix
   recedes; the string stays literal and selectable. See NOTES.md §9. */
.brand__name {
	display: block;
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.brand__tld { color: var(--muted); font-weight: 400; }
.brand__sub {
	display: block;
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.3;
}

.nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav__link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding-inline: var(--s-3);
	border-radius: var(--r-control);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
	transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.nav__link:hover { color: var(--ink); background: var(--surface-2); }
.nav__link[aria-current='page'] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }

.head-actions { display: flex; align-items: center; gap: var(--s-2); }
.nav-toggle-wrap { display: none; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded='true'] .ico-open { display: none; }
.nav-toggle[aria-expanded='true'] .ico-close { display: block; }

/* Mobile disclosure panel */
.nav-drawer {
	display: none;
	border-top: 1px solid var(--rule);
	background: var(--bg);
	padding: var(--s-3) 0 var(--s-5);
}
.nav-drawer[data-open='true'] { display: block; }
.nav-drawer .nav__link {
	display: flex;
	height: 48px;
	border-radius: 0;
	border-bottom: 1px solid var(--rule);
	font-size: var(--t-md);
	padding-inline: 0;
}

.site-foot { border-top: 1px solid var(--ink); background: var(--surface); }
.foot-grid {
	display: grid;
	grid-template-columns: minmax(16rem, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: var(--s-6) var(--s-5);
	padding-block: var(--s-7);
}
.foot-col__title {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 100;
	font-size: var(--t-3xs);
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: var(--s-3);
}
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.foot-list a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 6px; }
.foot-list a:hover { color: var(--primary); text-decoration: underline; }
.foot-ext { width: 13px; height: 13px; color: var(--muted); }

.foot-brand .brand { margin-bottom: var(--s-4); }
.foot-blurb { font-size: var(--t-sm); color: var(--ink-2); max-width: 40ch; }
.foot-contact { margin-top: var(--s-4); gap: var(--s-2); }
.foot-copy {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	color: var(--muted);
}

.foot-legal {
	border-top: 1px solid var(--rule);
	padding-block: var(--s-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
	align-items: baseline;
	justify-content: space-between;
}
.foot-legal p { font-size: var(--t-xs); color: var(--muted); max-width: 62ch; }


/* ==========================================================================
   15  PAGE SECTIONS
   ========================================================================== */

.section__title {
	font-size: var(--t-xl);
	margin-bottom: var(--s-6);
	max-width: 22ch;
}

/* --- Hero --- */
.hero { padding-block: clamp(3rem, 5.5vw, 5.5rem) clamp(2.5rem, 4vw, 4rem); }
.hero__figure { margin: 0; display: grid; gap: var(--s-4); }
.hero__figcap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.hero__figfoot {
	font-size: var(--t-xs);
	color: var(--panel-muted);
	padding-top: var(--s-3);
	border-top: 1px solid var(--panel-rule);
}
.hero__micro strong { font-weight: 600; }
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.hero h1 { margin-bottom: var(--s-5); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.hero__micro {
	margin-top: var(--s-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-3);
	font-size: var(--t-xs);
	color: var(--muted);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
}

/* --- Proof strip --- */
.proof { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--surface); }
.proof__inner { display: grid; gap: var(--s-4); padding-block: var(--s-5); }
.proof__marks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
	align-items: center;
}
.proof__mark {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-2xs);
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
}
.proof__mark .marker { width: 8px; height: 8px; color: var(--ok); }
.proof__lead { font-size: var(--t-sm); font-weight: 500; font-variation-settings: 'wdth' 100; letter-spacing: 0; color: var(--ink-2); }
.proof__verify { max-width: 74ch; }

/* --- Problems --- */
.problem {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 22ch) minmax(0, 1fr);
	gap: var(--s-5);
	padding-block: var(--s-6);
	border-top: 1px solid var(--rule);
	align-items: start;
}
.problem:last-of-type { border-bottom: 1px solid var(--rule); }
.problem__body { color: var(--ink-2); font-size: var(--t-sm); max-width: 62ch; }

/* --- Tiers --- */
.tier { gap: var(--s-4); }
.tier__icon {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-control);
	color: var(--primary);
}
.tier__body { color: var(--ink-2); font-size: var(--t-sm); flex: 1 1 auto; }
.tier__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-2);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
}
.tier__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; }
.tier__priceunit { font-size: var(--t-xs); color: var(--muted); }

/* --- Steps --- */
.step { display: flex; flex-direction: column; gap: var(--s-3); }
.step__body { color: var(--ink-2); font-size: var(--t-sm); }

/* --- Signature engagement --- */
.sig {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.sig__cta { margin-top: var(--s-6); }
.diagram { margin: 0; }

/* --- Checklist --- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding-block: var(--s-3);
	border-bottom: 1px solid var(--panel-rule);
	font-size: var(--t-sm);
	color: var(--panel-ink);
}
.checklist li:first-child { border-top: 1px solid var(--panel-rule); }
.checklist .ico { color: var(--ok-on-panel); margin-top: 2px; }

.checklist.checklist--light li { border-color: var(--rule); color: var(--ink); }
.checklist.checklist--light li:first-child { border-top-color: var(--rule); }
.checklist.checklist--light .ico { color: var(--ok); }

/* --- Price gate --- */
.pricegate {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.pricegate__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.pricegate__fig { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-2); align-content: start; }
.pricegate__fig + .pricegate__fig { border-left: 1px solid var(--rule); padding-left: var(--s-5); }
.pricegate__note { font-size: var(--t-xs); color: var(--muted); }
.figure__unit { font-size: 0.55em; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* --- Closing --- */
.closing__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.closing__body { font-size: var(--t-md); line-height: 1.5; margin-top: var(--s-4); max-width: 46ch; color: oklch(1 0 0 / 0.88); }
.closing__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
@media (max-width: 900px) {
	.closing__grid { grid-template-columns: minmax(0, 1fr); }
	.sig { grid-template-columns: minmax(0, 1fr); }
}


/* --- Inline code --- */
.code {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: 0.85em;
	background: var(--surface-2);
	border-radius: 3px;
	padding: 1px 5px;
	color: var(--ink);
}
.code-block {
	margin: 0;
	padding: var(--s-4);
	border-radius: var(--r-chip);
	background: var(--panel);
	color: var(--panel-ink);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	line-height: 1.7;
	overflow-x: auto;
}
.code-block code { font: inherit; }

.table-scroll { overflow-x: auto; margin-bottom: var(--s-6); }


/* --- Interior page header --- */
.page-head {
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem) clamp(2rem, 3vw, 3rem);
	border-bottom: 1px solid var(--rule);
}
.page-head__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: end;
}
.page-head h1 { margin-bottom: var(--s-5); }

.tierjump { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.tierjump__item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: var(--ink);
}
.tierjump__item .ico { color: var(--primary); }
.tierjump__item:hover { color: var(--primary); }
.tierjump__item span span { display: block; }
.tierjump__price {
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--ink);
}
.tierjump__item:hover .tierjump__price { color: var(--primary); }

/* --- Service block --- */
.svc__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.svc__aside { display: grid; gap: var(--s-4); align-content: start; }
.svc__aside h2 { font-size: var(--t-lg); }
.svc__cta { justify-self: start; }
.svc__body h3 { font-size: var(--t-md); font-variation-settings: 'wdth' 100; margin-bottom: var(--s-3); }
.svc__body p { font-size: var(--t-sm); color: var(--ink-2); }
.svc__deliverable { margin-top: var(--s-5); }

.checklist--out .ico { color: var(--muted) !important; }
.checklist--out li { color: var(--ink-2); }

.offer { display: grid; border-top: 1px solid var(--ink); }
.offer__row { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.offer__row h4 { font-size: var(--t-sm); font-variation-settings: 'wdth' 100; letter-spacing: 0; }

/* --- FAQ disclosure --- */
.faq { border-top: 1px solid var(--ink); }
.faq__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--rule);
}
.faq__q { font-size: var(--t-md); font-variation-settings: 'wdth' 100; letter-spacing: -0.01em; }
.faq__a { grid-column: 1 / -1; padding-top: var(--s-3); }
.faq__a p { font-size: var(--t-sm); color: var(--ink-2); max-width: 68ch; }
.faq__toggle .ico { transition: rotate var(--dur-2) var(--ease-out); }
.faq__toggle[aria-expanded='true'] { border-color: var(--ink); color: var(--primary); }
.faq__toggle[aria-expanded='true'] .ico { rotate: 180deg; }

.tip--left .tip__bubble { left: auto; right: 0; translate: 0 4px; }
.tip--left .tip__bubble::after { left: auto; right: 12px; translate: 0 0; }
.tip--left:hover .tip__bubble,
.tip--left:focus-within .tip__bubble,
.tip--left.tip--pinned .tip__bubble { translate: 0 0; }

@media (max-width: 900px) {
	.page-head__grid, .svc__grid { grid-template-columns: minmax(0, 1fr); }
}


/* --- Connector wall (platforms) --- */
.legendbox { display: grid; gap: var(--s-3); border-top: 1px solid var(--ink); padding-top: var(--s-4); }
.legendbox__rows { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.legendbox__note { font-size: var(--t-xs); color: var(--muted); }

.wallbar {
	position: sticky;
	top: 71px;
	z-index: var(--z-raised);
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
.wallbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-5);
	padding-block: var(--s-3);
}
.wallbar__search { flex: 0 1 340px; }
.wallbar__filters { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 auto; min-width: 0; }
.filterrow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filterrow[hidden] { display: none; }
.wallbar__count { margin-left: auto; display: flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; }

.fchip {
	appearance: none;
	border: 1px solid var(--rule-strong);
	background: var(--bg);
	color: var(--ink-2);
	border-radius: var(--r-control);
	padding: 5px 11px;
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.fchip:hover { border-color: var(--ink); color: var(--ink); }
.fchip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.wallgroup { margin-bottom: var(--s-7); }
.wallgroup[hidden] { display: none; }
.wallgroup__title {
	font-size: var(--t-sm);
	font-variation-settings: 'wdth' 100;
	font-weight: 700;
	letter-spacing: 0;
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--ink);
	margin-bottom: 0;
}
.wallgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.pcard {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: var(--ink);
	min-width: 0;
	transition: background var(--dur-1) var(--ease-out);
}
.pcard[hidden] { display: none; }
.pcard:hover { background: var(--surface); }
.pcard__mark {
	width: 38px; height: 38px;
	flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-chip);
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 75;
	font-size: var(--t-2xs);
	font-weight: 600;
	color: var(--ink-2);
	background: var(--bg);
}
.pcard__body { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.pcard__name { font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.pcard__go { color: var(--muted); flex: none; }
.pcard:hover .pcard__go { color: var(--primary); }

.wall-empty[hidden] { display: none; }
.wall-empty {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-6);
	border: 1px dashed var(--rule-strong);
	border-radius: var(--r-panel);
	color: var(--ink-2);
	font-size: var(--t-sm);
}
.wall-confirm { max-width: 90ch; margin-top: var(--s-5); }

@media (max-width: 900px) {
	.wallbar { position: static; }
	.wallbar__inner { gap: var(--s-3); }
	.wallbar__search { flex: 1 1 100%; }
	.wallbar__filters { align-items: flex-start; }
	.wallbar__count { margin-left: 0; }
	.wallgrid { grid-template-columns: minmax(0, 1fr); }
}


/* --- Mockup / copy annotations (review artefacts, not site chrome) --- */
.mocknote, .copyslot {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--gutter);
	background: var(--surface-2);
	border-bottom: 1px solid var(--rule-strong);
	font-size: var(--t-xs);
	color: var(--ink-2);
	flex-wrap: wrap;
}
.mocknote .ico, .copyslot .ico { color: var(--muted); flex: none; margin-top: 1px; }
.mocknote__switch { display: flex; gap: var(--s-2); margin-left: auto; }
.copyslot {
	border: 1px dashed var(--rule-strong);
	border-radius: var(--r-chip);
	background: var(--surface);
	padding: var(--s-3) var(--s-4);
	max-width: 68ch;
}

/* --- Breadcrumbs --- */
.crumbs { border-bottom: 1px solid var(--rule); }
.crumbs ol {
	list-style: none; margin: 0; padding: var(--s-3) 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
	font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs); color: var(--muted);
}
.crumbs li + li::before { content: '/'; margin-right: var(--s-2); color: var(--rule-strong); }
.crumbs a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs [aria-current='page'] { color: var(--ink); }

/* --- Platform detail --- */
.plat-id { margin-bottom: var(--s-4); }
.plat-id__mark { margin-left: 0; width: 44px; height: 44px; font-size: var(--t-xs); }
.svc__note { font-size: var(--t-sm); color: var(--muted); }

.buildlist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.buildlist li {
	display: flex; align-items: center; gap: var(--s-3);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--rule);
	font-size: var(--t-sm);
	font-weight: 500;
}
.buildlist .ico { color: var(--primary); }

.faillist { list-style: none; margin: 0; padding: 0; display: grid; }
.faillist li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--panel-rule);
	font-size: var(--t-sm);
	color: var(--panel-ink);
}
.faillist li:first-child { border-top: 1px solid var(--panel-rule); }
.faillist > li > .ico:first-child { color: var(--panel-muted); }
.code--ink { background: oklch(1 0 0 / 0.1); color: var(--panel-ink); }
.schematic .status--warn { background: color-mix(in oklab, var(--warn-on-panel) 14%, transparent); color: var(--warn-on-panel); border-color: color-mix(in oklab, var(--warn-on-panel) 40%, transparent); }
.schematic .status--info { background: color-mix(in oklab, var(--info-on-panel) 14%, transparent); color: var(--info-on-panel); border-color: color-mix(in oklab, var(--info-on-panel) 40%, transparent); }
.schematic .status--halt { background: oklch(1 0 0 / 0.05); color: var(--panel-ink); border-color: var(--panel-rule); }

/* --- Inquire --- */
.inq {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.inq__aside { display: grid; gap: var(--s-4); }
.inq__aside p { font-size: var(--t-sm); color: var(--ink-2); }

.formgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5);
}
.field--wide { grid-column: 1 / -1; }
.formgrid__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.flash {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-4);
	border: 1px solid;
	border-radius: var(--r-chip);
	font-size: var(--t-sm);
	margin-bottom: var(--s-6);
}
.flash--error { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-deep); font-weight: 500; }
.flash--error .ico { color: var(--primary); flex: none; }
.flash--ok { border-color: color-mix(in oklab, var(--ok) 45%, transparent); background: var(--ok-tint); color: var(--ok); font-weight: 500; }
.flash--ok .ico { color: var(--ok); flex: none; }

.successbox { border-top: 1px solid var(--ink); padding-top: var(--s-5); }
.successbox h2 { font-size: var(--t-lg); margin-bottom: var(--s-4); }
.steplist { list-style: none; margin: 0; padding: 0; display: grid; }
.steplist li {
	display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: var(--s-4); align-items: baseline;
	padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
}
.steplist p { font-size: var(--t-sm); color: var(--ink-2); }
.successbox__foot { margin-top: var(--s-5); gap: var(--s-2); }

/* --- Work --- */
.workwarn { align-items: flex-start; }
.cases {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	column-gap: clamp(1.5rem, 3vw, 3rem);
	border-top: 1px solid var(--ink);
}
.case {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-5) 0;
	border-bottom: 1px solid var(--rule);
	min-width: 0;
}
.case__head { display: grid; gap: var(--s-2); }
.case__head h3 { font-size: var(--t-md); font-variation-settings: 'wdth' 100; letter-spacing: -0.01em; }
.case__problem { font-size: var(--t-sm); color: var(--ink-2); }
.case__metrics { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.case__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.case__stack { gap: var(--s-2); }
.seq {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: stretch;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
}
.seq__step {
	display: flex; align-items: center;
	padding: var(--s-4) var(--s-5) var(--s-4) 0;
	font-family: var(--font-mono);
	font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-2xs);
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
}
.seq__step + .seq__step { padding-left: var(--s-5); border-left: 1px solid var(--rule); }
.seq__step::before {
	content: counter(list-item);
	margin-right: var(--s-3);
	font-size: var(--t-3xs);
	font-weight: 600;
	color: var(--rule-strong);
}
.seq__step--last::before { color: var(--primary); }
.seq__step--last { color: var(--primary); font-weight: 600; }
.seq__note { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-4); }
@media (max-width: 640px) {
	.seq { flex-direction: column; }
	.seq__step + .seq__step { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* --- 404 --- */
.err { padding-block: clamp(3rem, 6vw, 6rem); }
.err__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.err__code { display: block; margin-bottom: var(--s-4); color: var(--primary); }
.err__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.err__art { margin: 0; display: grid; gap: var(--s-4); }
.errlink { text-decoration: none; color: var(--ink); position: relative; }
.errlink:hover { background: var(--surface); }
.errlink:hover h3 { color: var(--primary); }
.errlink__go { position: absolute; top: var(--s-6); right: var(--s-4); color: var(--muted); }
.errlink:hover .errlink__go { color: var(--primary); }

@media (max-width: 1000px) {
	.inq { grid-template-columns: minmax(0, 1fr); }
	.cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.err__grid { grid-template-columns: minmax(0, 1fr); }
	.errlink__go { top: var(--s-5); right: 0; }
}
@media (max-width: 640px) {
	.formgrid { grid-template-columns: minmax(0, 1fr); }
	.mocknote__switch { margin-left: 0; }
	.err__ctas .btn, .err__ctas .linkcta { width: 100%; justify-content: center; }
}


/* --- Foundations page specifics --- */
.doc-intro { padding-block: clamp(2.5rem, 4vw, 4rem) var(--s-7); }
.doc-intro h1 { margin: var(--s-3) 0 var(--s-5); }
.doc-intro__meta { margin-top: var(--s-5); }

.doc-sub {
	font-size: var(--t-md);
	font-variation-settings: 'wdth' 100;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: var(--s-6) 0 var(--s-4);
}
.doc-sub:first-of-type { margin-top: 0; }

.doc-note { font-size: var(--t-xs); color: var(--muted); max-width: 72ch; margin-bottom: var(--s-4); }

.doc-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.chip--added {
	border-color: color-mix(in oklab, var(--warn) 45%, transparent);
	background: var(--warn-tint);
	color: var(--warn);
	font-weight: 600;
}

.docs-nav {
	position: sticky; top: 72px;
	z-index: var(--z-raised);
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
}
.docs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.docs-nav a {
	display: inline-flex; align-items: center; height: 40px; padding-inline: var(--s-3);
	font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--muted); text-decoration: none; border-radius: var(--r-control);
}
.docs-nav a:hover { color: var(--ink); background: var(--surface-2); }

.doc-section { padding-block: var(--section-y); border-top: 1px solid var(--rule); }
.doc-head {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: var(--s-3) var(--s-6);
	align-items: baseline;
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--rule);
}
.doc-head h2 { font-size: var(--t-lg); }
.doc-head p { font-size: var(--t-sm); color: var(--ink-2); max-width: 70ch; }
@media (max-width: 700px) { .doc-head { grid-template-columns: minmax(0, 1fr); } }

.swatch-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.swatch-table th {
	text-align: left;
	font-family: var(--font-mono); font-variation-settings: 'wdth' 100;
	font-size: var(--t-3xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
	color: var(--muted); padding: var(--s-2) var(--s-3) var(--s-2) 0;
	border-bottom: 1px solid var(--ink);
	white-space: nowrap;
}
.swatch-table td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.swatch-table td:last-child, .swatch-table th:last-child { padding-right: 0; }
.swatch-table .mono-cell { font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5; font-size: var(--t-3xs); white-space: nowrap; }
.swatch {
	width: 56px; height: 34px;
	border-radius: var(--r-chip);
	border: 1px solid oklch(0.20 0.014 25 / 0.16);
	flex: none;
}
.ratio {
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs); font-weight: 600; white-space: nowrap;
}
.ratio--pass { color: var(--ok); }
.ratio--na { color: var(--muted); font-weight: 400; }

.type-row {
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) minmax(10rem, 16rem);
	gap: var(--s-5);
	align-items: baseline;
	padding-block: var(--s-4);
	border-bottom: 1px solid var(--rule);
}
.type-row:first-child { border-top: 1px solid var(--rule); }
.type-row__meta { font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5; font-size: var(--t-3xs); color: var(--muted); }
.type-row__spec { font-size: var(--t-xs); color: var(--muted); }

.space-row { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-4); align-items: center; padding-block: 7px; }
.space-bar { height: 14px; background: var(--primary-tint); border-left: 2px solid var(--primary); }

.legend-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.legend-table th {
	text-align: left;
	font-family: var(--font-mono); font-variation-settings: 'wdth' 100;
	font-size: var(--t-3xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
	color: var(--muted); padding: var(--s-2) var(--s-4) var(--s-2) 0;
	border-bottom: 1px solid var(--ink);
}
.legend-table td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.legend-table tr:hover td { background: var(--surface); }
.legend-table .a11y-name {
	font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5;
	font-size: var(--t-3xs); color: var(--ink);
}
.legend-table .tooltip-name { font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5; font-size: var(--t-3xs); color: var(--muted); }
.legend-added td { background: var(--warn-tint); }
.legend-added:hover td { background: var(--warn-tint); }

.specimen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	align-items: flex-end;
	padding: var(--s-6) var(--s-5);
	border: 1px solid var(--rule);
	border-radius: var(--r-panel);
	background: var(--surface);
}
.specimen--ink { background: var(--panel); border-color: var(--panel-rule); }
.specimen__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.specimen__cap { font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5; font-size: var(--t-3xs); color: var(--muted); }
.specimen--ink .specimen__cap { color: var(--panel-muted); }

/* Forced focus-ring demonstration (documentation only). */
.focus-demo { outline: 2px solid var(--primary); outline-offset: 2px; }


/* ==========================================================================
   16  MOTION
   Entrance animation only when motion is welcome. Content is visible by
   default so nothing depends on a transition firing.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.reveal {
		animation: reveal var(--dur-3) var(--ease-out) both;
		animation-delay: calc(var(--i, 0) * 70ms);
	}
	@keyframes reveal {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: none; }
	}

	.flow-pulse {
		animation: pulse 3.2s linear infinite;
		animation-delay: var(--d, 0s);
	}
	@keyframes pulse {
		from { stroke-dashoffset: 100; }
		to   { stroke-dashoffset: 0; }
	}

	.flow-node--live { animation: nodebeat 3.4s var(--ease-out) infinite; }
	@keyframes nodebeat {
		0%, 70%, 100% { stroke-opacity: 1; }
		20%           { stroke-opacity: 0.45; }
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	/* Static equivalent for the flow diagram: the signal is drawn part-way
	   along each live edge instead of travelling along it. */
	.flow-pulse { stroke-dashoffset: 55; }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
	.foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: minmax(0, 1fr); }
	.pricegate { grid-template-columns: minmax(0, 1fr); }
	.spec--3, .spec--4 { grid-template-columns: minmax(0, 1fr); }
	.spec__cell {
		border-right: 0;
		border-bottom: 1px solid var(--rule);
		padding: var(--s-5) 0;
	}
	.spec__cell:not(:first-child) { padding-left: 0; }
	.spec__cell:last-child { border-bottom: 0; }
	.problem { grid-template-columns: 3rem minmax(0, 1fr); }
	.problem__body { grid-column: 2; }
	.type-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
	.flow--wide { display: none; }
	.flow--stack { display: block; }

	.nav { display: none; }
	.nav-toggle-wrap { display: inline-flex; }
	.site-head__inner { gap: var(--s-3); }
	.brand__sub { display: none; }
	.head-actions { margin-left: auto; }
}

@media (min-width: 901px) {
	.nav-drawer { display: none !important; }
}

@media (max-width: 640px) {
	.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__ctas { gap: var(--s-3); }
	.hero__ctas .btn, .hero__ctas .linkcta { width: 100%; justify-content: center; }
	.head-mail { display: none; }
	.pricegate__figures { grid-template-columns: 1fr; }
	.pricegate__fig + .pricegate__fig { border-left: 0; padding-left: 0; }
	.legend-table thead { display: none; }
	.legend-table tr { display: grid; grid-template-columns: 44px 1fr; gap: 0 var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
	.legend-table td { border: 0; padding: 2px 0; }
	.legend-table td:first-child { grid-row: 1 / span 4; }
	.swatch-table .hide-sm { display: none; }
	.foot-legal { flex-direction: column; }
}


/* ==========================================================================
   14  THE INDEX
   The site is a list. Everything here exists to make a list read as an
   instrument: columns that actually align, counts that are live, rows that
   are individually addressable. No component here persuades.
   ========================================================================== */

.idx { padding-block: clamp(3rem, 6vw, 6rem); }
.idx--band { background: var(--surface); border-block: 1px solid var(--rule); }
.idx__grid { display: grid; gap: var(--s-6); }

.idx__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-5);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--ink);
}
.idx__head--sub { margin-top: var(--s-6); border-bottom-color: var(--rule-strong); }

.idx__title {
	font-size: var(--t-lg);
	font-variation-settings: 'wdth' 112;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.idx__title--sub { font-size: var(--t-md); letter-spacing: 0.04em; color: var(--ink-2); }

.idx__count {
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	color: var(--muted);
	display: inline-flex;
	align-items: baseline;
	gap: var(--s-2);
	white-space: nowrap;
}
.idx__count .figure { font-size: var(--t-sm); color: var(--ink); }

/* --- Numbered discipline list --- */
.idx__list { list-style: none; margin: 0; padding: 0; }
.idx__row {
	display: grid;
	grid-template-columns: 3.5rem 1.75rem minmax(14rem, 22rem) minmax(0, 1fr) 2rem;
	align-items: baseline;
	gap: var(--s-4);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--rule);
}
.idx__list--plain .idx__row { grid-template-columns: 3.5rem 1.75rem minmax(0, 1fr) auto; }
.idx__no {
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.idx__mark { color: var(--primary); line-height: 1; }
.idx__mark .ico { width: 1.05rem; height: 1.05rem; }
.idx__name { font-weight: 600; font-size: var(--t-md); font-variation-settings: 'wdth' 100; }
.idx__name--plain { font-weight: 400; font-size: var(--t-sm); }
.idx__domain { font-size: var(--t-sm); color: var(--ink-2); }

/* Every row is addressable; the link only appears when the row is engaged. */
.idx__anchor { opacity: 0; color: var(--muted); transition: opacity var(--dur-1) var(--ease-out); justify-self: end; }
.idx__row:hover .idx__anchor,
.idx__anchor:focus-visible { opacity: 1; }
.idx__row.is-linked { background: var(--primary-tint); }
.idx__row.is-linked .idx__no { color: var(--primary); }

/* --- Controls --- */
.idx__controls { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); align-items: center; }

/* --- Platform table --- */
.idx__table { display: grid; gap: 0; }
.idx__group {
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
	gap: var(--s-5);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--rule);
	align-items: start;
}
.idx__group[hidden] { display: none; }
.idx__groupname { color: var(--muted); padding-top: 2px; }
/* A row is a name and nothing else — the status column was removed on
   2026-08-13, so the rows flow as a multi-column inventory rather than one
   platform per line. */
.idx__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 2px var(--s-5);
}
.idx__prow { padding: 3px 0; min-width: 0; }
.idx__prow[hidden] { display: none; }
.idx__plink { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.idx__plink:hover { color: var(--primary); border-bottom-color: var(--primary); }
.idx__status { font-size: var(--t-xs); }

/* --- Work manifest --- */
.idx__work { list-style: none; margin: 0; padding: 0; }
.idx__wrow {
	display: grid;
	grid-template-columns: 4rem minmax(12rem, 20rem) minmax(8rem, 14rem) minmax(8rem, 12rem) minmax(0, 1fr);
	gap: var(--s-4);
	align-items: baseline;
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--rule);
}
.idx__year { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.idx__sector, .idx__kind { font-size: var(--t-xs); color: var(--ink-2); }
.idx__stack { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.idx__tech { font-family: var(--font-mono); font-size: var(--t-2xs, 0.68rem); color: var(--muted); }
.idx__tech + .idx__tech::before { content: '·'; margin-right: 8px; color: var(--rule-strong); }

.idx__note { margin-top: var(--s-3); }

/* --- Masthead / colophon --- */
.masthead { border-bottom: 1px solid var(--ink); background: var(--bg); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); }
.masthead__mail {
	display: inline-flex; align-items: center; gap: var(--s-2);
	font-family: var(--font-mono); font-size: var(--t-xs);
	color: var(--ink); text-decoration: none;
	border-bottom: 1px solid var(--rule-strong);
}
.masthead__mail:hover { color: var(--primary); border-bottom-color: var(--primary); }

.colophon { border-top: 1px solid var(--ink); padding-block: var(--s-6); }
.colophon__inner { display: grid; gap: var(--s-3); }
.colophon__contact { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.colophon__mail { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.colophon__mail:hover { color: var(--primary); border-bottom-color: var(--primary); }
.colophon__legal, .colophon__copy { font-size: var(--t-xs); color: var(--muted); max-width: 68ch; }

.crumbline { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); }
.crumbline a { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); text-decoration: none; }
.crumbline a:hover { color: var(--primary); }
.crumbline__sep { color: var(--rule-strong); }

@media (max-width: 900px) {
	.idx__row { grid-template-columns: 2.5rem 1.5rem minmax(0, 1fr); }
	.idx__domain { grid-column: 3; }
	.idx__anchor { display: none; }
	.idx__group { grid-template-columns: 1fr; gap: var(--s-2); }
	.idx__rows { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
	.idx__wrow { grid-template-columns: 3.5rem minmax(0, 1fr); }
	.idx__sector, .idx__kind, .idx__stack { grid-column: 2; }
	.masthead__inner { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}


/* ==========================================================================
   15  THE INTRO
   The cover sheet of a spec: one statement and a hairline key/value block.
   Not a hero — no display size, no ornament, no control, no image. The
   statement is the page's h1 but is set two steps below the display scale
   and at the body width axis, so it reads as printed matter rather than as
   a headline. Everything else here reuses .deflist.
   ========================================================================== */

.idx--intro { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--s-6) var(--s-8);
	align-items: start;
}

.intro__statement {
	font-size: var(--t-lg);
	font-variation-settings: 'wdth' 100;
	font-weight: 500;
	line-height: 1.34;
	letter-spacing: -0.014em;
	color: var(--ink);
	max-width: 34ch;
	text-wrap: pretty;
}

/* The spec block opens on the same weight of rule as a section head. */
.intro__spec .deflist__row:first-child { border-top-color: var(--ink); }
.intro__sep { color: var(--muted); }

.intro__mail {
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-strong);
}
.intro__mail:hover { color: var(--primary); border-bottom-color: var(--primary); }

@media (max-width: 900px) {
	.intro__grid { grid-template-columns: 1fr; gap: var(--s-5); }
	.intro__statement { max-width: 42ch; }
}