/* QWeb Agent Ready, second edition.
 *
 * Lead style:   Technical / instrument.
 * Accent style: Retrofuturism, contributing the screen motif only.
 *
 * The brief that produced this was "full width, modern", after four drafts were
 * rejected. The measurable defect in all four was structural, not chromatic:
 * every band put its content at the same width inside one shared container, so
 * the page read as a stack of identical blocks. Measured, four of seven bands
 * were the same shape; Stripe and Clerk put their content at a different width
 * in almost every band.
 *
 * So there is deliberately NO global container token here. Every band names its
 * own width, and the band list is written out in pages/home-v2.php.
 *
 * Craft reference: QWEBMASTER-OS/10-PLAYBOOKS/design/FOUNDATIONS.md, esp. 3b.
 * Audit:           design-audit.js --style=technical,retrofuture
 */

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

:root {
	color-scheme: dark;

	--void:  oklch(0.145 0.012 258);
	--s1:    oklch(0.185 0.014 258);
	--s2:    oklch(0.225 0.016 258);
	--s3:    oklch(0.280 0.018 258);
	--line:  oklch(0.295 0.018 258);
	--line-2:oklch(0.380 0.022 258);

	/* Solved against APCA on --void, not picked. */
	--txt:   oklch(0.965 0.008 258);   /* Lc 86 */
	--txt-2: oklch(0.835 0.012 258);   /* Lc 74 */
	--txt-3: oklch(0.790 0.014 258);   /* Lc 65 on the deepest ground here.
	                                      Measured, not estimated: at 0.665 it
	                                      read Lc 44 and put six pairs under
	                                      the floor, including 1,465 characters
	                                      of running label text. */

	--cyan:  oklch(0.860 0.110 197);
	--pink:  oklch(0.720 0.210 349);
	--mint:  oklch(0.860 0.150 158);
	--red:   oklch(0.790 0.150 22);
	--amber: oklch(0.865 0.140 85);

	--display: 'Archivo', 'Arial Narrow', sans-serif;
	--sans:    'Public Sans', system-ui, sans-serif;
	--mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

	/* Ratio 1.25 from 15. */
	--t-micro: 13px;
	--t-body:  15px;
	--t-lede:  19px;
	--t-h3:    23px;
	--t-h2:    clamp(28px, 3.4vw, 46px);
	--t-h1:    clamp(40px, 5.2vw, 76px);

	--s1x: 4px;  --s2x: 8px;  --s3x: 12px; --s4x: 16px;
	--s5x: 24px; --s6x: 32px; --s7x: 48px; --s8x: 64px;
	--s9x: 96px; --s10x: 128px;

	--r:  10px;
	--r2: 4px;

	--fast: .12s; --mid: .2s; --slow: .4s;
	--ease: cubic-bezier(.22, 1, .36, 1);

	/* Widths are named by role. Bands pick one; nothing picks "the container". */
	--w-text: 64ch;
	--w-1:    1180px;
	--w-2:    1500px;
	--w-3:    min(1760px, 94vw);
	--gut:    clamp(20px, 4vw, 64px);
}

:root[data-theme="light"] {
	color-scheme: light;
	--void:  oklch(0.985 0.004 258);
	--s1:    oklch(0.965 0.006 258);
	--s2:    oklch(0.935 0.008 258);
	--s3:    oklch(0.900 0.010 258);
	--line:  oklch(0.895 0.010 258);
	--line-2:oklch(0.820 0.014 258);
	--txt:   oklch(0.215 0.020 258);
	--txt-2: oklch(0.395 0.018 258);
	--txt-3: oklch(0.500 0.016 258);
	--cyan:  oklch(0.520 0.110 220);
	--pink:  oklch(0.480 0.200 349);
	--mint:  oklch(0.520 0.130 158);
	--red:   oklch(0.530 0.190 25);
	--amber: oklch(0.560 0.130 70);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--void);
	color: var(--txt);
	font-family: var(--sans);
	font-size: var(--t-body);
	line-height: 1.55;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The band system ────────────────────────────────────────────────────── */

/*
 * One grid, five named columns. A band puts a paragraph in `text`, a table in
 * `w2` and an image in `full` without three nested wrappers, and each band
 * chooses for itself. This is what replaces the single container token.
 */
.band {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gut), 1fr)
		[w3-start] minmax(0, calc((var(--w-3) - var(--w-2)) / 2))
		[w2-start] minmax(0, calc((var(--w-2) - var(--w-1)) / 2))
		[w1-start] minmax(0, calc((var(--w-1) - 64ch) / 2))
		[text-start] min(var(--w-text), 100% - var(--gut) * 2) [text-end]
		minmax(0, calc((var(--w-1) - 64ch) / 2)) [w1-end]
		minmax(0, calc((var(--w-2) - var(--w-1)) / 2)) [w2-end]
		minmax(0, calc((var(--w-3) - var(--w-2)) / 2)) [w3-end]
		minmax(var(--gut), 1fr) [full-end];
}
.band > *      { grid-column: text; min-width: 0; }
.band > .w1    { grid-column: w1; }
.band > .w2    { grid-column: w2; }
.band > .w3    { grid-column: w3; }
.band > .full  { grid-column: full; }

/* ── Type ───────────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-family: var(--display); font-variation-settings: 'wdth' 112; font-weight: 700; }
h1 { font-size: var(--t-h1); line-height: .98; letter-spacing: -.032em; }
h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.026em; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.014em; font-weight: 600; }

p { margin: 0; }
.lede  { font-size: var(--t-lede); line-height: 1.5; letter-spacing: -.008em; color: var(--txt-2); }
.small { font-size: var(--t-micro); line-height: 1.5; color: var(--txt-3); }
.mono  { font-family: var(--mono); font-size: var(--t-micro); }
.num   { font-variant-numeric: tabular-nums; }

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

.top {
	position: sticky; top: 0; z-index: 60;
	background: color-mix(in srgb, var(--void) 86%, transparent);
	backdrop-filter: blur(14px) saturate(150%);
	border-bottom: 1px solid var(--line);
}
.top-in {
	max-width: var(--w-3); margin: 0 auto; padding: 0 var(--gut);
	height: 60px; display: flex; align-items: center; gap: var(--s5x);
}
.mark { display: inline-flex; align-items: center; gap: var(--s2x); font-family: var(--display); font-variation-settings: 'wdth' 112; font-size: 18px; font-weight: 700; letter-spacing: -.024em; white-space: nowrap; }
.mark i { width: 9px; height: 9px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex: 0 0 auto; }

.top nav { display: flex; align-items: center; gap: var(--s5x); margin-left: auto; }
.top nav a { font-size: var(--t-body); color: var(--txt-2); transition: color var(--fast) var(--ease); }
.top nav a:hover { color: var(--txt); }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s2x);
	height: 40px; padding: 0 var(--s5x);
	border: 1px solid var(--line-2); border-radius: var(--r);
	background: transparent; color: var(--txt);
	font-family: var(--sans); font-size: var(--t-body); font-weight: 500; letter-spacing: -.005em;
	cursor: pointer; white-space: nowrap;
	transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { border-color: var(--txt-3); background: var(--s1); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; }

.btn-key {
	border-color: transparent; background: var(--cyan); color: oklch(0.16 0.02 240);
	font-weight: 600;
}
.btn-key:hover { border-color: transparent; background: oklch(0.90 0.11 197); }

.icon-btn { width: 38px; height: 38px; padding: 0; border-radius: var(--r); color: var(--txt-2); }

/* ── Band 1: asymmetric hero, visual bleeds off the right edge ──────────── */

.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	align-items: center;
	gap: var(--s8x);
	padding: clamp(48px, 7vw, 104px) 0 clamp(48px, 6vw, 88px) var(--gut);
	max-width: none;
	overflow: hidden;
}
.hero-copy { min-width: 0; }
/* The measure belongs on the text, never on the column: putting it on the
   column strands the copy in a ribbon and opens a hole beside the image. */
.hero h1 { max-width: 13ch; }
.hero .lede { margin-top: var(--s5x); max-width: 42ch; }
.hero-cta { margin-top: var(--s7x); display: flex; gap: var(--s3x); flex-wrap: wrap; }
.hero-meta { margin-top: var(--s5x); display: flex; gap: var(--s5x); flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); }

/* The render runs past the right edge of the viewport. That single decision is
   most of what stops the page reading as a centred column. */
.hero-art { position: relative; margin-right: calc(var(--gut) * -1 - 6vw); }
.hero-art img { width: 100%; height: clamp(320px, 40vw, 560px); object-fit: cover; border-radius: var(--r) 0 0 var(--r); }
.hero-art::after {
	content: ''; position: absolute; inset: 0; border-radius: var(--r) 0 0 var(--r);
	background: linear-gradient(90deg, var(--void) 0%, transparent 26%);
}

@media (max-width: 980px) {
	.hero { grid-template-columns: 1fr; gap: var(--s6x); padding-right: var(--gut); }
	.hero-copy { max-width: none; }
	.hero-art { margin-right: 0; order: -1; }
	.hero-art img { height: clamp(220px, 44vw, 320px); border-radius: var(--r); }
	.hero-art::after { display: none; }
}

/* ── Band 2: the instrument. Full bleed, its own ground. ────────────────── */

.rig-band {
	background: oklch(0.115 0.014 258);
	border-block: 1px solid var(--line);
	padding: var(--s7x) 0 var(--s8x);
}
:root[data-theme="light"] .rig-band { background: oklch(0.945 0.008 258); }

.rig {
	max-width: var(--w-3); margin: 0 auto; padding: 0 var(--gut);
	display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s7x);
	align-items: start;
}
@media (max-width: 1100px) { .rig { grid-template-columns: 1fr; gap: var(--s6x); } }

/* Left rail: the control and the verdict, sticky while the grid scrolls. */
.rail { position: sticky; top: 84px; }
@media (max-width: 1100px) { .rail { position: static; } }

.rail-head { display: flex; align-items: center; gap: var(--s2x); font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); margin-bottom: var(--s3x); }
.rail-head .end { margin-left: auto; }

.probe { display: flex; gap: var(--s2x); }
.field {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
	border: 1px solid var(--line-2); border-radius: var(--r); background: var(--void);
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
.field span { padding-left: var(--s3x); font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); }
.field input {
	flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
	padding: 10px var(--s3x) 10px 6px;
	font-family: var(--mono); font-size: var(--t-body); color: var(--txt);
}
.field input::placeholder { color: var(--txt-3); }
@media (max-width: 460px) { .probe { flex-wrap: wrap; } .probe .btn { width: 100%; } }

.led { width: 8px; height: 8px; border-radius: 50%; background: var(--s3); flex: 0 0 auto; transition: background var(--mid) var(--ease), box-shadow var(--mid) var(--ease); }
.is-live .led { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blip 1s var(--ease) infinite; }
.is-done .led { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.is-stop .led { background: var(--red); box-shadow: 0 0 10px var(--red); }
@keyframes blip { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* Score */
.score { margin-top: var(--s6x); display: flex; align-items: center; gap: var(--s5x); }
.gauge { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.gauge svg { transform: rotate(-90deg); display: block; }
.gauge circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.gauge .trk { stroke: var(--s2); }
.gauge .val { stroke: var(--cyan); transition: stroke-dashoffset var(--slow) var(--ease); }
.gauge b {
	position: absolute; inset: 0; display: grid; place-content: center;
	font-family: var(--display); font-variation-settings: 'wdth' 112;
	font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rank { font-family: var(--display); font-variation-settings: 'wdth' 112; font-size: var(--t-lede); font-weight: 700; letter-spacing: -.018em; line-height: 1.1; }
.rank + p { margin-top: 6px; font-size: var(--t-micro); color: var(--txt-2); }

.rungs { display: flex; gap: 3px; margin-top: var(--s5x); }
.rungs i { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--s2); transition: background var(--mid) var(--ease), box-shadow var(--mid) var(--ease); }
.rungs i.on { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.rungs-key { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); }

.cats { margin-top: var(--s5x); border-top: 1px solid var(--line); }
.cat { display: flex; align-items: center; gap: var(--s2x); padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-micro); color: var(--txt-2); }
.cat i { width: 6px; height: 6px; border-radius: 50%; background: var(--s3); flex: 0 0 auto; transition: background var(--mid) var(--ease), box-shadow var(--mid) var(--ease); }
.cat.won { color: var(--txt); }
.cat.won i { background: var(--mint); box-shadow: 0 0 7px var(--mint); }
.cat .end { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--txt-3); }
.cat.won .end { color: var(--mint); }

.rail-foot { margin-top: var(--s5x); font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); display: flex; gap: var(--s4x); flex-wrap: wrap; }
.rail-foot button { border: 0; background: none; padding: 0; font: inherit; color: var(--cyan); cursor: pointer; }

/*
 * The board. Eighteen checks visible at once, lighting up as each is probed.
 *
 * The previous edition rendered them as a vertical list of eighteen rows, which
 * is a log: you watch one line at a time and never see the shape of the result.
 * A grid shows the whole surface being tested simultaneously, which is both the
 * honest picture of what the scanner does and the reason it reads as live.
 */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: var(--s2x); }

.tile {
	position: relative; display: flex; flex-direction: column; gap: 6px;
	min-height: 96px; padding: var(--s3x) var(--s4x) var(--s4x);
	border: 1px solid var(--line); border-radius: var(--r);
	background: var(--s1); color: inherit; text-align: left;
	font: inherit; cursor: pointer;
	opacity: .45;
	transition: opacity var(--mid) var(--ease), border-color var(--mid) var(--ease),
	            background var(--mid) var(--ease), transform var(--fast) var(--ease);
}
.tile:disabled { cursor: default; }
.tile.s-live, .tile.s-pass, .tile.s-fail, .tile.s-unknown { opacity: 1; }
.tile.s-live { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 9%, var(--s1)); }
.tile.s-fail { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.tile.s-pass:hover, .tile.s-fail:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tile.on { border-color: var(--cyan); background: var(--s2); }
.tile:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.tile-top { display: flex; align-items: center; gap: var(--s2x); }
.tile-top .end { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); }
.tile.s-pass .tile-top .end { color: var(--mint); }
.tile.s-fail .tile-top .end { color: var(--red); }
.tile.s-live .tile-top .end { color: var(--cyan); }
.tile.s-pass .led { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.tile.s-fail .led { background: var(--red); box-shadow: 0 0 8px var(--red); }
.tile.s-live .led { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blip .8s var(--ease) infinite; }

.tile-name { font-size: var(--t-body); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.tile-said { font-family: var(--mono); font-size: var(--t-micro); line-height: 1.4; color: var(--txt-3); margin-top: auto;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .pro {
	font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--pink);
	border: 1px solid color-mix(in srgb, var(--pink) 45%, transparent);
	border-radius: 3px; padding: 2px 4px;
}

/* The detail panel: one at a time, under the board. */
.detail { margin-top: var(--s4x); border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); }
.detail:empty { display: none; }
.detail-top { display: flex; align-items: center; gap: var(--s3x); padding: var(--s4x) var(--s5x); border-bottom: 1px solid var(--line); }
.detail-top h3 { font-size: var(--t-lede); }
.detail-top .end { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); }
.detail-body { padding: var(--s5x); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5x); }
@media (max-width: 860px) { .detail-body { grid-template-columns: 1fr; } }
.detail-body h4 { margin: 0 0 var(--s2x); font-family: var(--mono); font-size: var(--t-micro); font-weight: 400; color: var(--txt-3); }
.detail-body p { font-size: var(--t-body); line-height: 1.6; color: var(--txt-2); }
.detail-body .fix { border-left: 2px solid var(--pink); padding-left: var(--s4x); }
.detail-body .fix b { color: var(--txt); }
.detail pre {
	margin: 0; padding: var(--s4x); max-height: 260px; overflow: auto;
	border-radius: var(--r2); background: var(--void); border: 1px solid var(--line);
	font-family: var(--mono); font-size: var(--t-micro); line-height: 1.65; color: var(--txt-3);
	white-space: pre-wrap; overflow-wrap: anywhere;
}

.msg { margin-bottom: var(--s4x); padding: var(--s3x) var(--s4x); border-radius: var(--r); border: 1px solid var(--line); background: var(--s1); font-size: var(--t-micro); color: var(--txt-2); }
.msg.bad { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); color: var(--red); }

/* ── Band 3: editorial offset. Prose, no cards. ─────────────────────────── */

.cost { padding: var(--s10x) 0; }
.cost .kicker { font-family: var(--mono); font-size: var(--t-micro); color: var(--cyan); margin-bottom: var(--s4x); }
.cost h2 { max-width: 16ch; margin-bottom: var(--s6x); }
.cost p + p { margin-top: var(--s4x); }
.cost p { font-size: var(--t-lede); line-height: 1.6; color: var(--txt-2); }
.cost .pull {
	margin: var(--s7x) 0 0; padding-left: var(--s5x);
	border-left: 2px solid var(--pink);
	font-family: var(--display); font-variation-settings: 'wdth' 112;
	font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -.016em; color: var(--txt);
}

/* ── Band 4: bento. Mixed tile sizes on one grid. ───────────────────────── */

.surface { padding: var(--s10x) 0; border-top: 1px solid var(--line); }
.surface-head { display: flex; align-items: flex-end; gap: var(--s6x); flex-wrap: wrap; margin-bottom: var(--s7x); }
.surface-head h2 { flex: 1 1 380px; max-width: 18ch; }
.surface-head p { flex: 1 1 380px; max-width: 52ch; }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3x); }
.cell {
	display: flex; flex-direction: column;
	padding: var(--s5x);
	border: 1px solid var(--line); border-radius: var(--r);
	background: var(--s1);
	grid-column: span 2;
	transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease);
}
.cell:hover { border-color: var(--line-2); background: var(--s2); }
/* The mixed sizes are the point: four equal cards is the generated default. */
.cell.big  { grid-column: span 3; }
.cell.tall { grid-column: span 3; }
.cell h3 { margin-bottom: var(--s2x); }
.cell.big h3 { font-size: 29px; letter-spacing: -.02em; }
.cell p { color: var(--txt-2); font-size: var(--t-body); }
.cell code { display: block; margin-top: auto; padding-top: var(--s4x); font-family: var(--mono); font-size: var(--t-micro); color: var(--cyan); overflow-wrap: anywhere; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cell.big, .cell.tall { grid-column: span 4; } }
@media (max-width: 640px)  { .bento { grid-template-columns: 1fr; } .cell, .cell.big, .cell.tall { grid-column: span 1; } }

/* ── Band 5: full-bleed image with an overlaid stat rule ────────────────── */

.proof { position: relative; }
.proof img { width: 100%; height: clamp(300px, 34vw, 460px); object-fit: cover; }
.proof::after {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(to top, var(--void) 2%, color-mix(in srgb, var(--void) 55%, transparent) 46%, transparent 100%),
		linear-gradient(to bottom, var(--void) 0%, transparent 22%);
}
.stat-rule {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	max-width: var(--w-3); margin: 0 auto; padding: 0 var(--gut) var(--s7x);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { padding: var(--s4x) var(--s5x); border-left: 1px solid var(--line-2); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b {
	display: block; font-family: var(--display); font-variation-settings: 'wdth' 112;
	font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -.028em;
	font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 8px; font-family: var(--mono); font-size: var(--t-micro); line-height: 1.4; color: var(--txt-2); }
@media (max-width: 700px) { .stat { border-left: 0; padding-inline: 0; } .stat-rule { padding-bottom: var(--s5x); } }

/* ── Band 6: wide matrix. A table, not two cards. ───────────────────────── */

.plans { padding: var(--s10x) 0; }
.plans h2 { max-width: 20ch; margin-bottom: var(--s3x); }
.plans .lede { max-width: 58ch; margin-bottom: var(--s7x); }

.matrix-wrap { overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.matrix caption { text-align: left; font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); padding-bottom: var(--s3x); }
.matrix th, .matrix td { text-align: left; padding: 13px var(--s4x); border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix thead th { border-bottom: 1px solid var(--line-2); }
.matrix tbody th { font-weight: 400; color: var(--txt-2); width: 52%; }
.matrix .rowlist { display: block; margin-top: 6px; font-family: var(--mono); font-size: var(--t-micro); line-height: 1.65; color: var(--txt-3); overflow-wrap: anywhere; }
.matrix td { width: 24%; }
.matrix .tier { font-family: var(--display); font-variation-settings: 'wdth' 112; font-size: var(--t-h3); font-weight: 700; letter-spacing: -.014em; }
.matrix .cost { font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); padding: 0; display: block; margin-top: 4px; }
.matrix .hot .tier { color: var(--cyan); }
.matrix .yes { color: var(--mint); }
.matrix .no  { color: var(--txt-3); }
.matrix tfoot td { border-bottom: 0; padding-top: var(--s5x); }
@media (max-width: 720px) {
	.matrix thead th:first-child { display: none; }
	.matrix tbody th { width: auto; display: block; border-bottom: 0; padding-bottom: 4px; color: var(--txt); }
	.matrix tbody td { display: inline-block; width: 50%; border-bottom: 0; padding-top: 0; }
	.matrix tbody tr { display: block; border-bottom: 1px solid var(--line); padding-block: var(--s2x); }
}

/* ── Band 7: narrow Q&A ─────────────────────────────────────────────────── */

.faq { padding: var(--s9x) 0; border-top: 1px solid var(--line); }
.faq h2 { max-width: 14ch; margin-bottom: var(--s6x); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; gap: var(--s4x); padding: var(--s4x) 0; font-size: var(--t-lede); font-weight: 600; letter-spacing: -.012em; transition: color var(--fast) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cyan); }
.faq summary::after { content: '+'; margin-left: auto; color: var(--txt-3); font-weight: 400; font-size: 22px; line-height: 1; transition: transform var(--fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 var(--s5x); color: var(--txt-2); }

/* ── Band 8: close ──────────────────────────────────────────────────────── */

.close { padding: var(--s9x) 0 var(--s10x); text-align: center; border-top: 1px solid var(--line); }
.close h2 { max-width: 18ch; margin: 0 auto; }
.close p { margin: var(--s4x) auto 0; max-width: 50ch; font-size: var(--t-lede); color: var(--txt-2); }
.close .row { margin-top: var(--s6x); display: flex; gap: var(--s3x); justify-content: center; flex-wrap: wrap; }

/* ── Foot ───────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding: var(--s6x) 0 var(--s8x); }
.foot-in { max-width: var(--w-3); margin: 0 auto; padding: 0 var(--gut); display: flex; gap: var(--s5x); flex-wrap: wrap; align-items: center; font-size: var(--t-micro); color: var(--txt-3); }
.foot-in a:hover { color: var(--txt); }
.foot-in .end { margin-left: auto; }


/* ── The conversion moment, in the rail ─────────────────────────────────── */

.verdict {
	margin-top: var(--s5x); padding: var(--s5x);
	border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
	border-radius: var(--r);
	background: color-mix(in srgb, var(--cyan) 7%, transparent);
}
.verdict.good { border-color: color-mix(in srgb, var(--mint) 35%, var(--line)); background: color-mix(in srgb, var(--mint) 7%, transparent); }
.verdict-line { font-size: var(--t-lede); line-height: 1.35; letter-spacing: -.01em; }
.verdict-line b { font-weight: 600; }
.verdict-sub { margin-top: var(--s2x); font-size: var(--t-micro); line-height: 1.5; color: var(--txt-2); }
.verdict .btn { margin-top: var(--s4x); width: 100%; }

/* ── The board, grouped ─────────────────────────────────────────────────── */

.board-head {
	display: flex; align-items: baseline; gap: var(--s3x);
	margin: var(--s5x) 0 var(--s3x);
	font-family: var(--mono); font-size: var(--t-micro); color: var(--cyan);
}
.board-head:first-child { margin-top: 0; }
.board-head .end { margin-left: auto; color: var(--txt-3); }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: var(--s2x); }
.board { display: block; }

/* ── 4. Steps ───────────────────────────────────────────────────────────── */

.steps-band { padding: var(--s9x) 0; border-top: 1px solid var(--line); }
.steps { list-style: none; margin: var(--s7x) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6x); }
.steps li { position: relative; padding-top: var(--s5x); border-top: 2px solid var(--line-2); }
.steps b {
	display: block; margin-bottom: var(--s3x);
	font-family: var(--display); font-variation-settings: 'wdth' 112;
	font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--cyan);
}
.steps h3 { margin-bottom: var(--s2x); }
.steps p { color: var(--txt-2); }
.steps-note { margin-top: var(--s6x); font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--s5x); } }

/* ── 5. Capabilities. A rail of columns, deliberately not equal cards. ──── */

.cap-band { padding: var(--s9x) 0; }
.cap-band h2 { max-width: 22ch; margin-bottom: var(--s7x); }
.caps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.cap { padding: var(--s5x) var(--s5x) var(--s6x) 0; border-right: 1px solid var(--line); }
.cap:last-child { border-right: 0; padding-right: 0; }
.cap h3 { font-size: var(--t-lede); margin-bottom: var(--s2x); }
.cap p { font-size: var(--t-micro); line-height: 1.55; color: var(--txt-3); min-height: 4.6em; }
.cap ul { list-style: none; margin: var(--s4x) 0 0; padding: 0; }
.cap li { padding: 5px 0; font-size: var(--t-micro); font-family: var(--mono); color: var(--txt-2); border-top: 1px solid var(--line); }
.cap.pro h3 { color: var(--pink); }
.tag-pro {
	margin-left: 6px; padding: 2px 5px; border-radius: 3px; vertical-align: 2px;
	border: 1px solid color-mix(in srgb, var(--pink) 45%, transparent);
	font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--pink);
}
@media (max-width: 1100px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cap { border-right: 0; border-bottom: 1px solid var(--line); padding-right: var(--s5x); }
	.cap p { min-height: 0; } }
@media (max-width: 620px) { .caps { grid-template-columns: 1fr; } .cap { padding-right: 0; } }

/* ── 6. WooCommerce ─────────────────────────────────────────────────────── */

.woo-band { padding: var(--s9x) 0; border-top: 1px solid var(--line); }
.woo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s8x); align-items: start; }
.woo h2 { max-width: 18ch; margin-bottom: var(--s4x); }
.woo .btn { margin-top: var(--s5x); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: var(--s3x) 0 var(--s3x) var(--s5x); border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--txt-2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 20px; width: 8px; height: 8px; border-radius: 2px; background: var(--mint); }
@media (max-width: 860px) { .woo { grid-template-columns: 1fr; gap: var(--s5x); } }

/* ── 7. Compatibility. A thin strip, one statement. ─────────────────────── */

.compat { padding: var(--s8x) 0; border-block: 1px solid var(--line); background: var(--s1); text-align: center; }
.compat h2 { max-width: none; margin-inline: auto; }
.compat p { margin: var(--s4x) auto 0; max-width: 62ch; color: var(--txt-2); font-size: var(--t-lede); }
.compat .callout {
	display: inline-block; margin-top: var(--s5x); padding: var(--s3x) var(--s5x);
	border: 1px solid var(--line-2); border-radius: 999px;
	font-family: var(--mono); font-size: var(--t-micro); color: var(--cyan);
}

/* ── 8. Privacy ─────────────────────────────────────────────────────────── */

.privacy { padding: var(--s9x) 0; }
.privacy h2 { max-width: 20ch; margin-bottom: var(--s4x); }
.privacy .lede { max-width: 62ch; }
.rule { list-style: none; margin: var(--s7x) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.rule li { padding: var(--s4x) var(--s4x) var(--s4x) 0; border-right: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-2); }
.rule li:nth-child(3n) { border-right: 0; }
@media (max-width: 720px) { .rule { grid-template-columns: 1fr; } .rule li { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; } }

/* ── 9. Proof: the statement rides on the same rule as the figures. ─────── */

.proof-say { grid-column: span 2; }
.proof-say h2 { font-size: var(--t-h3); max-width: 20ch; }
.proof-say p { margin-top: var(--s2x); font-size: var(--t-micro); line-height: 1.55; color: var(--txt-2); max-width: 46ch; }
@media (max-width: 860px) { .proof-say { grid-column: span 1; } }

/* ── 10. Editions ───────────────────────────────────────────────────────── */

.editions { padding: var(--s9x) 0; border-top: 1px solid var(--line); }
.editions h2 { max-width: 24ch; margin-bottom: var(--s7x); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5x); }
.ed { display: flex; flex-direction: column; padding: var(--s6x); border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); }
.ed h3 { margin-bottom: var(--s3x); }
.ed p { color: var(--txt-2); margin-bottom: var(--s6x); }
.ed .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) { .two { grid-template-columns: 1fr; } }

/* ── 11. No hype ────────────────────────────────────────────────────────── */

.hype { padding: var(--s9x) 0; }
.hype > div { border-left: 2px solid var(--pink); padding-left: var(--s6x); }
.hype h2 { max-width: 16ch; margin-bottom: var(--s5x); }
.hype p { font-size: var(--t-lede); line-height: 1.6; color: var(--txt-2); }
.hype p + p { margin-top: var(--s4x); }
.rules { list-style: none; margin: var(--s6x) 0 0; padding: 0; }
.rules li { padding: var(--s3x) 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); }
@media (max-width: 720px) { .hype > div { padding-left: var(--s4x); } }

/* ── Shared ─────────────────────────────────────────────────────────────── */

.kicker { font-family: var(--mono); font-size: var(--t-micro); color: var(--cyan); margin-bottom: var(--s4x); }
.hero .kicker { margin-bottom: var(--s5x); }


/* ── Pricing and reference pages ────────────────────────────────────────── */

.price-hero { padding: var(--s9x) 0 var(--s7x); }
.price-hero h1 { max-width: 18ch; margin-bottom: var(--s5x); }
.price-hero .lede { max-width: 66ch; }

.plans { padding: 0 0 var(--s9x); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4x); }
.plan { display: flex; flex-direction: column; padding: var(--s6x) var(--s5x); border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); }
.plan.hot { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); background: color-mix(in srgb, var(--cyan) 5%, var(--s1)); }
.plan .tier { font-family: var(--mono); font-size: var(--t-micro); color: var(--txt-3); }
.plan.hot .tier { color: var(--cyan); }
.plan .cost {
	margin-top: var(--s3x);
	font-family: var(--display); font-variation-settings: 'wdth' 112;
	font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
}
.plan .cost small { font-family: var(--sans); font-size: var(--t-micro); font-weight: 400; color: var(--txt-3); letter-spacing: 0; }
.plan .sub { margin-top: var(--s3x); font-size: var(--t-micro); line-height: 1.55; color: var(--txt-2); }
.plan ul { list-style: none; margin: var(--s5x) 0 var(--s6x); padding: 0; }
.plan li { position: relative; padding: 6px 0 6px var(--s5x); font-size: var(--t-micro); line-height: 1.5; color: var(--txt-2); }
.plan li::before { content: ''; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 2px; background: var(--mint); }
.plan li.no { color: var(--txt-3); }
.plan li.no::before { background: var(--s3); }
.plan .btn { margin-top: auto; width: 100%; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }

.refusals { margin: var(--s6x) 0 0; }
.refusals dt { font-size: var(--t-lede); font-weight: 600; letter-spacing: -.012em; margin-top: var(--s5x); }
.refusals dd { margin: var(--s2x) 0 0; color: var(--txt-2); max-width: 66ch; }

/* ── The check library ──────────────────────────────────────────────────── */

.checks-band { padding: var(--s7x) 0; border-top: 1px solid var(--line); }
.checks-band h2 { margin-bottom: var(--s5x); }
.check-list { display: grid; gap: var(--s3x); }
.check { padding: var(--s5x); border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); }
.check-head { display: flex; align-items: baseline; gap: var(--s4x); flex-wrap: wrap; }
.check-head h3 { font-size: var(--t-lede); }
.check-head code { font-family: var(--mono); font-size: var(--t-micro); color: var(--cyan); overflow-wrap: anywhere; }
.check-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5x); margin-top: var(--s4x); }
.check-body p { font-size: var(--t-micro); line-height: 1.6; color: var(--txt-2); }
.check-fix { padding-left: var(--s4x); border-left: 2px solid var(--line-2); }
.check-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2x); margin: var(--s4x) 0 0; padding: 0; }
.check-meta li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 12px; color: var(--txt-3); }
.check-meta .m-ok   { border-color: color-mix(in srgb, var(--mint) 40%, var(--line)); color: var(--mint); }
.check-meta .m-pro  { border-color: color-mix(in srgb, var(--pink) 40%, var(--line)); color: var(--pink); }
.check-meta .m-warn { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); color: var(--amber); }
.check-meta a:hover { color: var(--cyan); }
@media (max-width: 780px) { .check-body { grid-template-columns: 1fr; gap: var(--s3x); } }

/* ── Reveal ─────────────────────────────────────────────────────────────── */

.rev { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rev.in { opacity: 1; transform: none; }
.rev.d1 { transition-delay: .05s } .rev.d2 { transition-delay: .1s } .rev.d3 { transition-delay: .15s }

@media (max-width: 720px) {
	:root { --s9x: 56px; --s10x: 64px; }
	.top nav .hide-s { display: none; }
	.top nav { gap: var(--s4x); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	html { scroll-behavior: auto; }
	.rev { opacity: 1; transform: none; }
}