/* Affido landing. Brand: pixel dusk. Colours sampled from the wordmark and
   the castle art. Pixel Dusk layout rules: flat colour, 4px notches, dither
   seams, one pixel unit, stepped motion. */

:root {
	/* pixel unit */
	--c: 8px;

	/* brand field, sampled from the logo and the keep */
	--field: #200412;
	--night: #160610;
	--night-2: #12060B;
	--plum: #2A0A18;
	--plum-2: #3A1020;
	--dusk: #22102E;
	--dusk-2: #2E1A44;

	/* type */
	--cream: #FBF2E8;
	--cream-2: #E9D8CE;
	--muted: #BFA69E;
	--dim: #A98D93;

	/* lines */
	--line: #40202A;
	--line-soft: #2C1119;
	--ink: #0E0409;

	/* accent, sampled from the beacons */
	--amber: #FF6F30;
	--amber-hi: #FFA66E;
	--amber-deep: #B4431A;

	/* paper */
	--paper: #FBF2E8;
	--paper-ink: #1A1215;
	--paper-muted: #5C5255;
	--paper-line: #D9CBC3;

	/* status */
	--ok: #0B6B3A;
	--ok-hi: #6FD9A0;
	--ok-t: #DDEFE3;
	--bad: #9E141B;
	--bad-t: #FBE1DE;

	/* families */
	--sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--pixel: "Jersey 10", "Geist Mono", ui-monospace, monospace;

	/* the 4px corner notch */
	--notch4: polygon(
		4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
		100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
		4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px
	);

	/* a tiny star tile for the dusk sky */
	--stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23FBF2E8'%3E%3Crect x='12' y='18' width='2' height='2' opacity='.55'/%3E%3Crect x='42' y='7' width='2' height='2' opacity='.35'/%3E%3Crect x='79' y='31' width='2' height='2' opacity='.5'/%3E%3Crect x='116' y='12' width='2' height='2' opacity='.4'/%3E%3Crect x='144' y='44' width='2' height='2' opacity='.3'/%3E%3Crect x='24' y='63' width='2' height='2' opacity='.4'/%3E%3Crect x='62' y='82' width='2' height='2' opacity='.3'/%3E%3Crect x='97' y='70' width='2' height='2' opacity='.45'/%3E%3Crect x='132' y='96' width='2' height='2' opacity='.3'/%3E%3Crect x='8' y='112' width='2' height='2' opacity='.35'/%3E%3Crect x='53' y='130' width='2' height='2' opacity='.3'/%3E%3Crect x='88' y='118' width='2' height='2' opacity='.4'/%3E%3Crect x='124' y='142' width='2' height='2' opacity='.25'/%3E%3Crect x='151' y='124' width='2' height='2' opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
	margin: 0;
	background: var(--night);
	color: var(--cream);
	font: 400 16px/1.65 var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.wrap { max-width: 1184px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber-hi); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
::selection { background: var(--amber); color: var(--field); }
img { max-width: 100%; }
svg.px { display: block; shape-rendering: crispEdges; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 600; letter-spacing: -0.04em; }
h1 { font-size: clamp(52px, 6.2vw, 84px); line-height: 0.96; margin: 0 0 22px; }
h2 { font-size: clamp(32px, 4vw, 42px); line-height: 1.05; margin: 0; }
.mono, code {
	font-family: var(--mono);
	font-size: 0.9em;
	color: var(--cream);
	background: var(--plum);
	border: 1px solid var(--line);
	padding: 1px 4px;
	white-space: nowrap;
}
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 99;
	background: var(--amber); color: var(--field);
	padding: 10px 14px; font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; }

/* ---- dusk block: sky, header, alert, hero ---- */
.dusk { position: relative; overflow: hidden; }
.sky { position: absolute; inset: 0; z-index: 0; background: var(--field); }
.sky .stars {
	position: absolute; inset: 0 0 18% 0;
	background-image: var(--stars);
	background-size: 160px 160px;
	opacity: 0.55;
}
.sky .b1, .sky .b2, .sky .b3, .sky .b4, .sky .b5 { position: absolute; left: 0; right: 0; }
.sky .b1 { top: 0;    height: 16%; background: var(--field); }
.sky .b2 { top: 16%;  height: 18%; background: #180712; }
.sky .b3 { top: 34%;  height: 20%; background: #1D0814; }
.sky .b4 { top: 54%;  height: 22%; background: #250A17; }
.sky .b5 { top: 76%;  height: 24%; background: #2C0C1B; }
.sky .d1, .sky .d2, .sky .d3, .sky .d4 {
	position: absolute; left: 0; right: 0; height: 8px;
	background-size: 8px 8px;
}
.sky .d1 { top: calc(16% - 4px); background-image: repeating-conic-gradient(var(--field) 0 25%, #180712 0 50%); }
.sky .d2 { top: calc(34% - 4px); background-image: repeating-conic-gradient(#180712 0 25%, #1D0814 0 50%); }
.sky .d3 { top: calc(54% - 4px); background-image: repeating-conic-gradient(#1D0814 0 25%, #250A17 0 50%); }
.sky .d4 { top: calc(76% - 4px); background-image: repeating-conic-gradient(#250A17 0 25%, #2C0C1B 0 50%); }

/* ---- header ---- */
.site-head { position: relative; z-index: 3; background: var(--field); }
.head-row {
	display: flex; align-items: center; gap: 28px;
	min-height: 92px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { display: block; height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav a {
	font-size: 14px; color: var(--cream-2);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--cream); border-bottom-color: var(--amber); }
.head-row > .btn { margin-left: 4px; }

/* ---- alert tape ---- */
.alert { position: relative; height: 44px; background: var(--night-2); overflow: hidden; z-index: 2; }
.alert .tape { position: absolute; inset: 0 auto 0 0; height: 44px; }
.alert .wrap { display: flex; align-items: center; height: 44px; position: relative; z-index: 1; }
.plate {
	display: flex; align-items: center; gap: 14px; height: 32px;
	margin: 0; padding: 0 14px 0 6px;
	background: var(--night-2); color: var(--cream);
	clip-path: var(--notch4);
}
.plate .crit {
	background: var(--amber); color: var(--field);
	padding: 0 8px 2px; height: 24px;
	font: 400 24px/1 var(--pixel);
	letter-spacing: 0.04em;
}
.plate .id { font: 500 12px/1 var(--mono); color: var(--cream-2); }
.plate .id::before { content: "/"; color: var(--amber); margin-right: 10px; }

/* ---- hero ---- */
.hero { position: relative; padding: 44px 0 0; z-index: 1; }
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	column-gap: 56px;
	align-items: center;
	padding-bottom: calc(6 * var(--c));
	position: relative; z-index: 1;
}
.hero-copy { max-width: 700px; }
.eyebrow {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 20px;
	font: 500 11px/1.2 var(--mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--amber);
}
.eyebrow .blip {
	width: 8px; height: 8px; background: var(--amber);
	box-shadow: 0 0 0 3px rgba(255, 111, 48, 0.16);
	flex: none;
}
h1 .accent { color: var(--amber); }
.lead {
	max-width: 58ch;
	margin: 0 0 16px;
	font-size: 18px; line-height: 1.62;
	color: var(--cream-2);
}
.lead + .lead { margin-top: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cmdline {
	display: inline-flex; align-items: center; gap: 14px;
	max-width: 100%;
	margin-top: 26px; padding: 9px 10px 9px 15px;
	background: var(--night-2);
	border: 1px solid var(--line);
	clip-path: var(--notch4);
}
.cmdline code {
	font: 500 13px/1.4 var(--mono);
	color: var(--cream);
	background: none; border: 0; padding: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}
.cmdline .pfx { color: var(--amber); }
.meta {
	margin: 16px 0 0;
	font: 500 11px/1.5 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dim);
}

/* buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 46px; padding: 0 18px;
	border: 2px solid transparent; border-radius: 0;
	font: 600 14px/1 var(--sans);
	white-space: nowrap;
}
.btn-sm { height: 36px; padding: 0 12px; font-size: 12px; }
.btn-primary {
	background: var(--amber); color: var(--field); border-color: var(--field);
	box-shadow: inset 0 -4px 0 var(--amber-deep), inset 0 2px 0 var(--amber-hi);
}
.btn-primary:hover { background: #FF8149; color: var(--field); }
.btn-primary:active { box-shadow: inset 0 -2px 0 var(--amber-deep); transform: translateY(2px); }
.btn-ghost {
	background: transparent; color: var(--cream);
	border-color: var(--line);
	box-shadow: inset 0 -4px 0 var(--night-2);
}
.btn-ghost:hover { background: var(--plum); border-color: var(--amber); color: var(--cream); }
.btn-ghost:active { box-shadow: inset 0 -2px 0 var(--night-2); transform: translateY(2px); }

/* framed keep */
.art { margin: 0; width: 100%; max-width: 424px; justify-self: end; }
.frame { background: var(--ink); clip-path: var(--notch4); padding: 4px; }
.frame-amber { background: var(--amber); clip-path: var(--notch4); padding: 4px; }
.frame-in { background: var(--field); clip-path: var(--notch4); }
.art .frame { filter: drop-shadow(8px 8px 0 #060205); }
.art img {
	display: block; width: 100%; height: auto;
	image-rendering: pixelated;
}
.art figcaption {
	display: flex; justify-content: space-between; gap: 16px;
	margin-top: 12px;
	font: 500 10px/1.4 var(--mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}
.art figcaption span:first-child { color: var(--amber); }

/* play overlay on the keep: a black & white record-player symbol */
.art-play {
	display: block; position: relative; width: 100%;
	margin: 0; padding: 0; border: 0; background: none;
	cursor: pointer; font: inherit; color: inherit;
}
.art-play:hover img { filter: brightness(0.82); }
.play-badge {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	pointer-events: none;
}
.vinyl {
	display: block; width: clamp(56px, 17%, 76px); height: auto;
	filter: drop-shadow(3px 3px 0 rgba(6, 2, 5, 0.7));
}
.vinyl .disc { transform-origin: 50% 50%; }
.play-dur {
	position: absolute; right: 10px; bottom: 10px;
	font: 500 10px/1 var(--mono); letter-spacing: 0.1em;
	color: #FFFFFF; background: #0B0509;
	border: 1px solid #FFFFFF;
	padding: 4px 6px;
	clip-path: var(--notch4);
}
@media (prefers-reduced-motion: no-preference) {
	.art-play:hover .vinyl .disc,
	.art-play:focus-visible .vinyl .disc { animation: spin 1.8s steps(18) infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* the ember seam between the hero and the stats */
.seam {
	position: relative; z-index: 1;
	height: calc(4 * var(--c));
	border-top: 2px solid var(--amber-deep);
	background-image: repeating-conic-gradient(#2C0C1B 0 25%, var(--field) 0 50%);
	background-size: var(--c) var(--c);
}

/* ---- stats ---- */
.stats { background: var(--field); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
	display: flex; flex-direction: column; gap: 2px;
	padding: 26px 24px;
	border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-n { font: 400 50px/1 var(--pixel); color: var(--amber); letter-spacing: 0.03em; }
.stat-l { font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---- sections ---- */
.secs { padding: 8px 0 0; }
.sec {
	display: grid; grid-template-columns: 240px minmax(0, 1fr);
	column-gap: 56px;
	padding: 64px 0;
	border-top: 1px solid var(--line-soft);
}
.sec:first-child { border-top: 0; }
.sec-label { align-self: start; }
.idx {
	display: block;
	font: 400 20px/1 var(--pixel);
	letter-spacing: 0.08em;
	color: var(--amber);
	margin-bottom: 8px;
}
.sec h2 { color: var(--cream); }
.sec-body { max-width: 720px; font-size: 17px; color: var(--cream-2); }
.sec-body p { margin: 0 0 20px; }
.sec-body p:last-child { margin-bottom: 0; }
.sec-body h3 { margin: 0 0 4px; font: 600 17px/1.35 var(--sans); color: var(--cream); letter-spacing: -0.01em; }
.sec-body strong { color: var(--cream); font-weight: 600; }

/* numbered rules */
.rules { list-style: none; margin: 24px 0 0; padding: 0; }
.rules li {
	display: grid; grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--line-soft);
}
.rules li:last-child { border-bottom: 1px solid var(--line-soft); }
.rules .rule-n {
	font: 500 11px/1.2 var(--mono);
	color: var(--amber);
	padding-top: 4px;
	letter-spacing: 0.06em;
}
.rules p { margin: 0; font-size: 15.5px; color: var(--muted); }

/* receipts */
.receipt-grid {
	display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: 24px; align-items: start; margin-top: 28px;
}
.receipt {
	background: var(--paper); color: var(--paper-ink);
	padding: 20px 22px;
	clip-path: var(--notch4);
	filter: drop-shadow(6px 6px 0 #060205);
}
.receipt-reject { margin-top: 44px; }
.receipt-head {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--paper-ink);
}
.ticket-title {
	font: 500 10px/1.2 var(--mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--paper-muted);
}
.ticket {
	font: 600 10px/1 var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 8px;
}
.t-ok { background: var(--ok-t); color: var(--ok); }
.t-bad { background: var(--bad-t); color: var(--bad); }
.receipt dl {
	display: grid; grid-template-columns: 92px minmax(0, 1fr);
	gap: 9px 14px;
	margin: 14px 0 0;
}
.receipt dt {
	font: 500 10px/1.3 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paper-muted);
	padding-top: 2px;
}
.receipt dd {
	margin: 0;
	font: 500 13px/1.5 var(--mono);
	color: var(--paper-ink);
	overflow-wrap: anywhere;
}
.receipt dd.quote { font: 400 15px/1.5 var(--sans); color: #2A2024; }
.receipt dd.hash { letter-spacing: 0.01em; }
.receipt .fine {
	margin: 14px 0 0; padding-top: 10px;
	border-top: 1px dashed var(--paper-line);
	font: 12px/1.45 var(--sans);
	color: var(--paper-muted);
}
.receipt .mono {
	background: #EFE3DA; border-color: var(--paper-line); color: #2A2024;
}

/* exploded sandbox, in the receipts section */
.sbx {
	margin: 30px 0 0;
	border: 1px solid var(--line);
	background: var(--night-2);
	clip-path: var(--notch4);
}
.sbx-head {
	display: flex; align-items: center; gap: 14px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--line);
}
.sbx-title {
	display: flex; align-items: center; gap: 9px; margin: 0;
	font: 600 12px/1.2 var(--mono); letter-spacing: 0.04em;
	color: var(--cream); white-space: nowrap;
}
.sbx-title .sep { color: var(--amber); }
.sbx-state {
	display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto;
	font: 500 10px/1 var(--mono); letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--muted);
}
.sbx-led { flex: none; width: 8px; height: 8px; background: var(--cream-2); }
.sbx[data-state="tracing"] .sbx-led { background: var(--amber); }
.sbx[data-state="recorded"] .sbx-led { background: var(--ok-hi); }
.sbx-btn {
	flex: none; cursor: pointer;
	font: 600 10px/1 var(--mono); letter-spacing: 0.06em;
	color: var(--cream); background: var(--plum);
	border: 1px solid var(--line);
	padding: 7px 9px;
	clip-path: var(--notch4);
}
.sbx-btn:hover { color: var(--amber-hi); border-color: var(--amber); background: var(--plum-2); }
.sbx-btn:disabled { color: var(--dim); border-color: var(--line-soft); cursor: default; }
.sbx-stage {
	position: relative;
	background-color: var(--field);
	background-image: var(--stars);
	background-size: 160px 160px;
}
.sbx-svg { display: block; width: 100%; height: auto; }
.sbx-scan {
	position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(5, 2, 4, 0.18) 0 1px, transparent 1px 3px);
}

/* the scene: offset and fade are linear in --ex, written once per frame */
.sbx-part {
	transform: translate(
		calc(var(--ex, 0) * var(--dx, 0px)),
		calc(var(--ex, 0) * var(--dy, 0px))
	);
	opacity: calc(1 - var(--ex, 0) * var(--fade, 0));
}
.sbx-part.is-hit { filter: brightness(1.4) saturate(1.15); }
.sbx-annos { opacity: clamp(0, calc((var(--ex, 0) - 0.45) * 3), 1); }
.sbx-grid { fill: none; stroke: rgba(251, 242, 232, 0.06); stroke-width: 1; }
.sbx-lead { fill: none; stroke: rgba(251, 242, 232, 0.26); stroke-width: 1; stroke-dasharray: 2 3; }
.sbx-bullet { fill: var(--amber); }
.sbx-k { fill: var(--muted); font: 500 9.5px var(--mono); letter-spacing: 0.14em; }
.sbx-v { fill: var(--cream); font: 500 11.5px var(--mono); letter-spacing: 0.02em; }
.sbx-v.dim { fill: var(--dim); }
.sbx-tag { fill: var(--cream); font: 500 8.5px var(--mono); letter-spacing: 0.08em; }
.sbx-foot { fill: var(--muted); font: 500 9.5px var(--mono); letter-spacing: 0.16em; }
.sbx-flow { fill: var(--amber); stroke: var(--amber); stroke-width: 1.2; }
.sbx-packet { pointer-events: none; }
.sbx-packet-dot { fill: var(--amber-hi); stroke: #0E0409; stroke-width: 2; }
.sbx-packet-halo { fill: rgba(255, 111, 48, 0.22); stroke: rgba(14, 4, 9, 0.55); stroke-width: 1; }

.sbx-facts {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0; padding: 0; list-style: none;
	border-top: 1px solid var(--line);
	background: var(--night-2);
}
.sbx-facts li {
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px 12px;
	border-left: 1px solid var(--line-soft);
}
.sbx-facts li:first-child { border-left: 0; }
.sbx-facts .k { font: 500 9px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sbx-facts .v { font: 400 26px/1.1 var(--pixel); letter-spacing: 0.04em; color: var(--cream); }
.sbx-facts .v-amber { color: var(--amber); }
.sbx-facts .v-bad { color: #FF8F86; }
.sbx-legend { display: none; }
@media (max-width: 719px) {
	.sbx-annos, .sbx-foot, .sbx-tag { display: none; }
	.sbx-legend {
		display: grid; gap: 8px; margin: 0; padding: 12px;
		list-style: none; border-top: 1px solid var(--line);
		font: 12px/1.5 var(--sans); color: var(--muted);
	}
	.sbx-legend span { color: var(--cream); font-family: var(--mono); font-size: 11px; }
	.sbx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbx-facts li:nth-child(odd) { border-left: 0; }
	.sbx-facts li:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
	.sbx-head { gap: 10px; }
	.sbx-title { font-size: 11px; }
	.sbx-suffix { display: none; }
	.sbx-state { margin-left: auto; }
	.sbx-btn { padding: 6px 7px; font-size: 9px; }
}

/* the trace replay lights the two receipts */
.receipt.is-live { animation: sbx-stamp 0.8s steps(2) 1; }
@keyframes sbx-stamp {
	0%, 100% { box-shadow: inset 0 0 0 0 var(--amber); }
	50% { box-shadow: inset 0 0 0 5px var(--amber); }
}
.receipt.is-flag .t-bad { animation: sbx-flag 0.45s steps(2) 2; }
@keyframes sbx-flag { 50% { background: var(--bad); color: var(--paper); } }

/* durability */
.code {
	margin: 20px 0 24px;
	padding: 14px 16px;
	background: var(--night-2);
	border: 1px solid var(--line);
	clip-path: var(--notch4);
	overflow-x: auto;
	font: 13px/1.7 var(--mono);
	color: var(--cream-2);
}
.code code { font: inherit; color: inherit; background: none; border: 0; padding: 0; white-space: pre; }
.states { list-style: none; margin: 0; padding: 0; }
.states li {
	display: grid; grid-template-columns: 150px minmax(0, 1fr);
	column-gap: 20px;
	padding: 13px 0;
	border-top: 1px solid var(--line-soft);
	font-size: 15.5px; color: var(--cream-2);
}
.states li:last-child { border-bottom: 1px solid var(--line-soft); }
.state-k {
	font: 500 11px/1.4 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--amber);
	padding-top: 3px;
}
.sec-body .note {
	margin: 12px 0 0;
	font-size: 13px; line-height: 1.5;
	color: var(--muted);
}
.callout {
	margin: 24px 0 0; padding: 14px 16px;
	background: var(--plum);
	border-left: 4px solid var(--amber);
	font-size: 15px; color: var(--cream-2);
}

/* flow */
.flow { display: flex; align-items: stretch; gap: 10px; margin: 24px 0 8px; }
.flow-box {
	flex: 1 1 0; min-width: 0;
	padding: 12px 14px;
	background: var(--night-2);
	border: 1px solid var(--line);
	clip-path: var(--notch4);
}
.flow-k {
	display: block; margin-bottom: 4px;
	font: 500 10px/1.3 var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--amber);
}
.flow-v { display: block; font: 400 13px/1.4 var(--sans); color: var(--cream-2); }
.flow-arrow {
	align-self: center; flex: none;
	font: 500 13px/1 var(--mono);
	color: var(--amber);
}

/* tables */
.table-wrap { overflow-x: auto; margin: 20px 0 0; }
table.rel {
	width: 100%; min-width: 560px;
	border-collapse: collapse;
	border-top: 2px solid var(--amber);
}
table.rel th {
	padding: 10px 14px 10px 0;
	text-align: left;
	font: 500 10px/1.4 var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
}
table.rel td {
	padding: 13px 14px 13px 0;
	border-bottom: 1px solid var(--line-soft);
	font: 400 14.5px/1.5 var(--sans);
	color: var(--cream-2);
	vertical-align: top;
}
table.rel td.m {
	font: 500 13px/1.5 var(--mono);
	color: var(--cream);
	white-space: nowrap;
}
table.rel td.yes { color: var(--amber); font-family: var(--mono); font-size: 12px; }
table.rel td.no { color: var(--dim); font-family: var(--mono); font-size: 12px; }
table.rel tbody tr:last-child td { border-bottom: 0; }
table.rel .mono { background: none; border: 0; padding: 0; font-size: 0.92em; }

/* quickstart card */
.scan {
	margin: 24px 0 8px;
	max-width: 760px;
	filter: drop-shadow(8px 8px 0 #060205);
}
.bar {
	display: flex; align-items: center; gap: 10px;
	height: 48px; margin: 0; padding: 0 18px;
	background: var(--field); color: var(--cream);
	font: 600 14px/1 var(--sans);
}
.cur { width: 8px; height: 16px; background: var(--amber); flex: none; }
.panel { padding: 20px 22px 22px; background: var(--paper); }
.cmds { display: grid; gap: 18px; }
.cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.cmd code {
	font: 500 13px/1.5 var(--mono);
	color: var(--paper-ink);
	background: none; border: 0; padding: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}
.cmd .pfx { color: var(--paper-muted); }
.cmd .cap { grid-column: 1 / -1; margin: 0; font: 12px/1.4 var(--sans); color: var(--paper-muted); }
.cp {
	height: 32px; padding: 0 10px;
	border: 2px solid var(--paper-ink); border-radius: 0;
	background: var(--paper); color: var(--paper-ink);
	font: 600 11px/1 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.cp-sm { height: 28px; padding: 0 8px; font-size: 10px; border-color: var(--line); background: var(--field); color: var(--cream-2); }
.cp:hover { background: #F1E7DF; }
.cp-sm:hover { background: var(--plum); color: var(--cream); }
.cp:active { background: #E6D9CF; }
.panel .cp:focus-visible { outline-color: var(--paper-ink); }
.cp[aria-copied="true"] { background: var(--ok-t); color: var(--ok); border-color: var(--ok); }
.limit { margin: 16px 0 0; font: 12px/1.4 var(--sans); color: var(--paper-muted); }

/* name band */
.name-band {
	background: var(--paper); color: var(--paper-ink);
	padding: 72px 0;
}
.eyebrow-ink { color: var(--paper-muted); }
.eyebrow-ink::before {
	content: ""; width: 8px; height: 8px; background: var(--amber-deep);
}
.name-band h2 {
	max-width: 800px; margin: 0 0 18px;
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1.08; letter-spacing: -0.045em;
	color: var(--paper-ink);
}
.name-band em { font-style: normal; color: var(--amber-deep); }
.name-band h2 em {
	text-decoration: underline;
	text-decoration-color: var(--amber);
	text-decoration-thickness: 4px;
	text-underline-offset: 6px;
}
.name-band p {
	max-width: 680px; margin: 0;
	font-size: 17px; line-height: 1.65;
	color: var(--paper-muted);
}
.name-band a { color: var(--amber-deep); }

/* closing */
.closing { background: var(--night); padding: 72px 0; border-top: 1px solid var(--line-soft); }
.closing-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px; align-items: end;
}
.closing h2 { margin-bottom: 10px; }
.closing p { max-width: 560px; margin: 0; font-size: 17px; color: var(--muted); }
.closing-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* footer */
footer { background: var(--field); color: var(--cream-2); padding-bottom: 26px; }
.meadow {
	height: 32px;
	background-image: repeating-conic-gradient(var(--night) 0 25%, var(--field) 0 50%);
	background-size: 8px 8px;
}
footer .wrap {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.brand-foot img { height: 30px; }
.f-right {
	margin: 0 0 0 auto;
	font: 500 11px/1.4 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.f-meta { flex-basis: 100%; margin: 4px 0 0; font: 11px/1.4 var(--mono); color: var(--dim); }

/* ---- video modal: the AI lab viewer ---- */
.vmodal {
	width: min(1080px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 0; border: 0; background: transparent;
	color: var(--cream);
}
.vmodal::backdrop {
	background-color: rgba(9, 3, 7, 0.9);
	background-image:
		repeating-linear-gradient(0deg, rgba(251, 242, 232, 0.05) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(251, 242, 232, 0.05) 0 1px, transparent 1px 44px);
}
.vmodal-shell { filter: drop-shadow(10px 10px 0 rgba(6, 2, 5, 0.7)); }
.vmodal-in { background: var(--field); clip-path: var(--notch4); }
.vmodal-head {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	min-width: 0;
}
.vmodal-title {
	display: flex; align-items: center; gap: 10px; margin: 0;
	min-width: 0;
	font: 600 13px/1.2 var(--mono); letter-spacing: 0.04em;
	color: var(--cream); white-space: nowrap;
}
.vmodal-title .vt-name, .vmodal-title .sep { flex: none; }
.vmodal-title .vt-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vmodal-title .sep { color: var(--amber); }
.vmodal-meta {
	margin: 0 auto 0 0;
	font: 500 10px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--muted); white-space: nowrap;
}
.rec { width: 8px; height: 8px; flex: none; background: var(--amber); }
.vmodal-close {
	flex: none; cursor: pointer;
	font: 600 12px/1 var(--mono); letter-spacing: 0.06em;
	color: var(--cream); background: var(--plum);
	border: 1px solid var(--line);
	padding: 7px 10px;
	clip-path: var(--notch4);
}
.vmodal-close:hover { color: var(--amber-hi); border-color: var(--amber); background: var(--plum-2); }
.vmodal-close:active { transform: translateY(1px); }
.vmodal-stage { position: relative; background: var(--ink); }
.vmodal-video {
	display: block; width: 100%; height: auto;
	max-height: calc(100dvh - 170px);
	background: var(--ink);
}
.vscan {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(5, 2, 4, 0.26) 0 1px, transparent 1px 3px);
}
.vscan::after {
	content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 3px;
	background: rgba(255, 111, 48, 0.22);
}
.hud {
	position: absolute; width: 16px; height: 16px;
	border: 2px solid var(--amber);
	pointer-events: none;
}
.hud.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.hud.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.hud.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.hud.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.vmodal-foot {
	display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
	padding: 9px 12px;
	border-top: 1px solid var(--line);
	font: 500 10px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--muted);
}
.vmodal-foot .t-cur { color: var(--amber-hi); }
.vmodal-foot .lock { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--cream-2); }
.rec-lock { background: var(--cream-2); }
@media (max-width: 719px) {
	.vmodal-meta { display: none; }
	.vmodal-foot .foot-src { display: none; }
	.vmodal-foot .lock { margin-left: 0; }
	.vmodal-title { font-size: 11px; gap: 8px; }
	.vmodal { width: calc(100vw - 20px); }
}

/* ---- motion ---- */
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: no-preference) {
	.blip, .cur { animation: blink 1.6s step-end infinite; }
	.vmodal-head .rec, .sbx-title .rec { animation: blink 1.1s step-end infinite; }
	.vscan::after { animation: vscan 6s linear infinite; }
	.vmodal[open] .vmodal-shell { animation: vm-in 0.22s steps(4) both; }
}
@keyframes vscan { from { top: -4px; } to { top: 100%; } }
@keyframes vm-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) {
	.blip, .cur, .vmodal-head .rec, .sbx-title .rec { opacity: 1; }
}

/* ---- breakpoints ---- */
@media (max-width: 1179px) {
	.hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
	.art { justify-self: center; max-width: 424px; }
	.sec { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; }
	.states li { grid-template-columns: 130px minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.nav { display: none; }
	.head-row { justify-content: space-between; }
	.head-row > .btn { margin-left: 0; }
	.sec { display: block; padding: 48px 0; }
	.sec-label { margin-bottom: 20px; }
	.sec h2 { font-size: 34px; }
	.receipt-grid { grid-template-columns: minmax(0, 1fr); }
	.receipt-reject { margin-top: 0; }
	.flow { flex-wrap: wrap; }
	.flow-box { flex: 1 1 180px; }
	.flow-arrow { display: none; }
}
@media (max-width: 767px) {
	.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat { border-left: 1px solid var(--line); }
	.stat:nth-child(odd) { border-left: 0; }
	.stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
	.stat:nth-child(2n) { padding-left: 24px; }
	.closing-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
	table.rel { min-width: 0; }
	table.rel thead { display: none; }
	table.rel tbody, table.rel tr, table.rel td { display: block; width: 100%; }
	table.rel tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
	table.rel tr:last-child { border-bottom: 0; }
	table.rel td { border: 0; padding: 2px 0; }
	table.rel td.m { white-space: normal; overflow-wrap: anywhere; }
	table.rel td:nth-child(3) { margin-top: 4px; }
	table.rel td:nth-child(3)::before {
		content: "opens storage: ";
		font: 500 10px/1.4 var(--mono);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.states li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
	.state-k { padding-top: 0; }
	.flow { display: grid; grid-template-columns: minmax(0, 1fr); }
	.flow-arrow { display: none; }
	.name-band { padding: 56px 0; }
	.closing { padding: 56px 0; }
	.f-right { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 599px) {
	:root { --c: 4px; }
	.wrap { padding: 0 16px; }
	.head-row { min-height: 76px; }
	.brand img { height: 34px; }
	h1 { font-size: 48px; }
	.lead { font-size: 17px; }
	.hero { padding-top: 28px; }
	.cmdline { display: flex; align-items: flex-start; }
	.cmdline code { font-size: 11.5px; }
	.plate { gap: 10px; overflow: hidden; }
	.plate .id:nth-last-child(-n + 3) { display: none; }
	.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat { padding: 20px 14px; }
	.stat:nth-child(odd) { padding-left: 0; }
	.stat-n { font-size: 40px; }
	.receipt { padding: 16px; }
	.receipt dl { grid-template-columns: 80px minmax(0, 1fr); }
	.rules li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
	.panel { padding: 16px; }
	.bar { padding: 0 14px; }
	.closing-cta .btn, .cta-row .btn { flex: 1 1 auto; }
	.f-meta { margin-top: 0; }
}
@media (max-width: 400px) {
	h1 { font-size: 44px; }
}
@media (max-width: 359px) {
	.plate .id { display: none; }
}