/* =========================================================================
   netex · pages/capability.css · the four Industrial AI capability pages (bible §7.4)
   Field rhythm: s1 Ink · s2 Paper · s3 Paper-2 · s4 Ink · s5 Paper · s6 Paper-2 · s7 Ink-2 ·
   s8 Ink (signature) · s9 Paper · s10 Paper-2 · s11 Indigo.
   Role tokens only (raw hex appears only inside SVG drawing colours).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- a section between two fields: cut at both rising corners ------------ */
.cap-ch-both {
	clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch-v)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch-v));
	margin-top: calc(-1 * var(--ch-v));
	padding-top: calc(var(--sec-y) + var(--ch-v));
	padding-bottom: calc(var(--sec-y) + var(--ch-v) * .5);
}

/* ---- units keep their case inside uppercase mono labels (kWh, mm/s, never KWH) ---- */
.cap-unit { text-transform: none; letter-spacing: .01em; }

/* ---- shared section head ------------------------------------------------- */
.cap-sechead { row-gap: var(--s-5); margin-bottom: clamp(var(--s-7), 5vw, var(--s-9)); }
.cap-sechead__lead { max-width: var(--measure-lead); }
@media (min-width: 1024px) {
	.cap-sechead__title { grid-column: 1 / span 7; }
	.cap-sechead__lead { grid-column: 8 / -1; align-self: end; }
}

/* =========================================================================
   DRAWING REGISTER (inline SVG): 1.5px strokes, square caps, live mono text
   ========================================================================= */
.cap-draw { display: block; width: 100%; height: auto; overflow: visible; }
.cap-draw :is(path, rect, circle, ellipse, line, polyline) { vector-effect: non-scaling-stroke; }
.cap-draw .ln { fill: none; stroke: var(--line-art); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.cap-draw .ln--thin { stroke-width: 1; opacity: .45; }
.cap-draw .ln--strong { stroke-width: 2.4; }
.cap-draw .ln--paper { fill: var(--bg); }
.cap-draw .ln--sheet { fill: var(--paper); stroke: var(--line-art); }
.cap-draw .ln--sig { stroke: var(--sig); }
.cap-draw .ln--leak { stroke: var(--leak); stroke-width: 2; }
.cap-draw .ln--leakfaint { stroke: var(--leak); opacity: .45; }
.cap-draw .ln--dash { stroke-dasharray: 6 6; }
.cap-draw .ln--mark { stroke: var(--fg); stroke-width: 2; }
.cap-draw .ln--gap { stroke: var(--bg); stroke-width: 6; }
.cap-draw .fill-mark { fill: var(--fg); }
.cap-draw .dot { fill: var(--line-art); stroke: none; }
.cap-draw .lead { fill: none; stroke: var(--line-art); stroke-width: 1; opacity: .75; }
.cap-draw text { font-family: var(--f-mono); fill: var(--fg); letter-spacing: .01em; }
.cap-draw .t { font-size: 22px; font-weight: 500; }
.cap-draw .t-s { font-size: 17px; font-weight: 500; }
.cap-draw .t-b { font-size: 22px; font-weight: 650; }
.cap-draw .t-s.t-b { font-size: 17px; }
.cap-draw .t-dim { fill: var(--fg-2); }
.cap-draw .t-leak { fill: var(--leak); font-weight: 600; }
.cap-draw .t-sig { fill: var(--sig); font-weight: 600; }
.cap-draw .t-voice, .cap-draw .t-hand { font-family: var(--f-serif); font-style: italic; font-size: 24px; font-weight: 400; letter-spacing: 0; }
.cap-draw .t-stamp { font-size: 66px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; fill: none; stroke: var(--leak); stroke-width: 1.2; opacity: .5; }
.cap-draw .t-stamp2 { font-size: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--leak); }
.cap-draw .tt { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.cap-draw .tt--sig { fill: var(--sig); }
.cap-draw .tt--leak { fill: var(--leak); }
.cap-draw .tt--grey { fill: var(--fg-2); }
.cap-draw .tab { stroke: none; }
.cap-draw .tab--sig { fill: var(--sig); }
.cap-draw .tab--leak { fill: var(--leak); }
.cap-draw .tab--grey { fill: var(--fg-2); }
.cap-draw .tab + .tt { fill: var(--bg); }
.cap-draw .box { fill: none; stroke-width: 1.5; }
.cap-draw .box--sig { stroke: var(--sig); }
.cap-draw .box--leak { stroke: var(--leak); stroke-width: 2; }
.cap-draw .box--grey { stroke: var(--fg-2); stroke-dasharray: 5 4; }
.cap-draw .boxc { fill: none; stroke-width: 3.2; stroke-linecap: square; }
.cap-draw .boxc--sig { stroke: var(--sig); }
.cap-draw .boxc--leak { stroke: var(--leak); }
.cap-draw .boxc--grey { stroke: var(--fg-2); }
.cap-draw .hatch { stroke: none; }
.cap-draw .hatchline { stroke: var(--line-art); stroke-width: 1; opacity: .55; }
.cap-draw .hatchline--leak { stroke: var(--leak); stroke-width: 1.4; opacity: 1; }
.cap-draw .puck { fill: var(--bg); stroke: var(--line-art); stroke-width: 1.5; }
.cap-draw .puck__core { fill: var(--sig); stroke: none; }
.cap-draw .band { fill: color-mix(in srgb, var(--fg) 9%, transparent); stroke: none; }
.cap-draw .spark { fill: none; stroke: var(--line-art); stroke-width: 1.5; stroke-linejoin: round; }
.cap-draw .spark--sig { stroke: var(--sig); stroke-width: 2.2; }
.cap-draw .scan { fill: none; stroke: var(--sig); stroke-width: 2; }
.cap-draw .scan--paper { stroke: var(--cyan-deep); stroke-width: 2; opacity: .9; }
.cap-draw .col { fill: color-mix(in srgb, var(--line-art) 22%, transparent); stroke: none; }
.cap-draw .col--flex { fill: var(--sig); opacity: .75; }
.cap-draw .col--leak { fill: var(--leak); opacity: 1; }
.cap-draw .note { fill: var(--paper-2); stroke: var(--line-art); stroke-width: 1; }
.cap-draw .tape { fill: var(--paper-3); stroke: none; opacity: .85; }
.cap-draw .stamp { fill: none; stroke: var(--leak); stroke-width: 2; }
.cap-draw .stamp--indigo { stroke: var(--indigo); }
.cap-draw .tick { fill: none; stroke: var(--line-art); stroke-width: 2; stroke-linecap: square; }
.cap-draw .ink { fill: none; stroke: var(--line-art); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.cap-draw .glare { fill: none; stroke: var(--paper); stroke-width: 7; stroke-linecap: round; opacity: .8; }
.cap-draw .glare--thin { stroke-width: 2; opacity: .55; }
.cap-draw .strike { stroke: var(--leak); stroke-width: 2; }
.cap-draw .trace { fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linejoin: round; }
.cap-draw .grid { stroke: var(--rule); stroke-width: 1; }
.cap-draw .grid--day { stroke-dasharray: 2 5; }
.cap-draw .axis { stroke: var(--fg-2); stroke-width: 1; fill: none; }
.cap-draw .mark { stroke: var(--fg-2); stroke-width: 1.2; stroke-dasharray: 3 4; }
.cap-draw .mark--leak { stroke: var(--leak); stroke-dasharray: none; stroke-width: 1.5; }
.cap-draw .mark--sig { stroke: var(--sig); stroke-dasharray: none; stroke-width: 1.5; }
/* Two-state figures (s7): .h-on shows when the honest switch is on. */
.cap-draw .h-on { display: none; }
.is-on .cap-draw .h-on { display: inline; }
.is-on .cap-draw .h-off { display: none; }

/* =========================================================================
   s1 · HERO (Ink)
   ========================================================================= */
.cap-hero { min-height: 0; justify-content: flex-start; padding-bottom: calc(var(--ch-v) + var(--s-6)); }
.cap-hero__grid { display: grid; gap: var(--s-7) var(--gutter); align-items: start; }
.cap-hero__text { min-width: 0; }
.cap-voice { margin: 0 0 var(--s-5); max-width: 40rem; }
.cap-voice__note {
	position: relative;
	margin: 0;
	padding: var(--s-6) var(--s-5) var(--s-4);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-serif);
	font-style: italic;
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.05rem);
	line-height: 1.2;
	letter-spacing: -.01em;
	transform: rotate(-1.6deg);
	transform-origin: 20% 50%;
}
.cap-voice__note p + p { margin-top: .35em; }
.cap-voice__note::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 12px;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	background: var(--paper-2);
}
.cap-voice--two { display: grid; gap: var(--s-4); max-width: 40rem; }
.cap-voice--two .cap-voice__note { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem); }
.cap-voice--two .cap-voice__note + .cap-voice__note { transform: rotate(1.4deg); margin-left: clamp(16px, 6vw, 72px); }
.cap-voice__tag {
	margin-top: var(--s-4);
	font: 500 var(--t-label)/1.3 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg-2);
}
html.rm .cap-voice__note { transform: none; }
.cap-hero__h1 {
	font-size: var(--t-h1-sub);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.012em;
	max-width: 24ch;
	color: var(--fg);
}
.cap-hero__sub { margin-top: var(--s-4); }
.cap-hero__sub2 { margin-top: var(--s-5); font: italic 400 var(--t-body)/1.5 var(--f-serif); color: var(--fg-2); max-width: var(--measure-lead); }
.cap-hero__actions { margin-top: var(--s-5); }

.cap-hero__side { display: grid; gap: var(--s-6); min-width: 0; }
.cap-hero__media { position: relative; margin-right: calc(-1 * var(--margin)); }
.cap-hero__media .nx-media { clip-path: polygon(calc(var(--ch) * .6) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--ch) * .6 * var(--nx-tan))); }
/* The label rides the band but never leaves the frame: clamped centre, wraps on narrow screens. */
.cap-hero__media .nx-band__label {
	top: 38%;
	left: clamp(24%, calc(var(--band-x, 40%) + var(--run) * .55 + var(--band-w, 14%) * .5), 76%);
	max-width: 46%;
	white-space: normal;
	text-align: center;
}
.cap-hero__media .nx-band { transition: clip-path var(--dur-mech) var(--ease-mech); }
/* The band's label reads as a machine log line, units as written: «Φορτίο βάσης χωρίς παραγωγή (kW)». */
.cap-hero__media .nx-band__label { text-transform: none; letter-spacing: .02em; font-size: .75rem; }

/* the stat */
.cap-stat { margin: 0; display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.cap-stat__label { font: 500 var(--t-label)/1.35 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); max-width: 46ch; }
.cap-stat__pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.cap-stat__pair { display: grid; gap: 4px; align-content: start; }
.cap-stat__who { font: 500 .8125rem/1.3 var(--f-sans); color: var(--fg-2); }
/* A pair split out of one sentence («Τη χρειάζεται το 69% · τη χρησιμοποιεί το 3–4%») reads as two labels: both start upper-case. */
.cap-stat__who::first-letter { text-transform: uppercase; }
.cap-stat__val { font: 600 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem)/1 var(--f-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--fg); justify-self: start; }
.cap-stat__pair.is-gr .cap-stat__val { color: var(--sig); }
.cap-stat__bar { display: block; height: 3px; width: calc(var(--v, 0) * 100%); min-width: 3px; background: var(--fg-2); }
.cap-stat__pair.is-gr .cap-stat__bar { background: var(--sig); }
.cap-stat__row + .cap-stat__row { margin-top: var(--s-3); }
.cap-stat__meta { font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); }
.cap-stat__note { font: 400 .8125rem/1.45 var(--f-sans); color: var(--fg-2); max-width: 52ch; }

/* the hero instrument strip */
.cap-strip { margin-top: clamp(var(--s-7), 5vw, var(--s-9)); }
.cap-strip__fig { margin: 0; }
.cap-strip__svg { min-width: 0; }
.cap-strip__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); }
.cap-strip__counts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; }
.cap-strip__counts div { display: flex; align-items: baseline; gap: var(--s-2); }
.cap-strip__counts dt { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.cap-strip__counts dd { margin: 0; font: 600 1.25rem/1 var(--f-mono); color: var(--fg); }
.cap-strip__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.cap-strip__legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
@media (max-width: 767px) {
	/* On phones the strip scrolls inside its own frame rather than shrinking text to dust. */
	.cap-strip__fig { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
	.cap-strip__svg { width: 860px; max-width: none; }
	.cap-strip__cap { position: sticky; left: 0; width: calc(100vw - 2 * var(--margin)); }
	.cap-strip__fig:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
	/* The slip-cut's B half reflows differently at phone widths (its font axes widen the glyphs),
	   so on phones the s2 headline stays whole: A half only, unclipped. */
	.cap-problem .cut__b, .cap-problem .cut__flash { display: none; }
	.cap-problem .cut__a { clip-path: none !important; }
	/* Molten budget on a phone screen (≤5% at 360 px): the sticky header CTA already spends it, so
	   the hero action is drawn as the ring (secondary) button there. Desktop keeps the Molten primary. */
	.cap-hero__actions .nx-btn--primary { --btn-fill: transparent; --btn-fg: var(--fg); }
	.cap-hero__actions .nx-btn--primary::before { background: var(--fg); clip-path: var(--clip-ui-ring); }
	/* Same for the "what you just saw" card: its label wraps to two full-width lines on a phone. */
	.cap-moment .nx-decode__cta .nx-btn--primary { --btn-fill: transparent; --btn-fg: var(--ink); }
	.cap-moment .nx-decode__cta .nx-btn--primary::before { background: var(--ink); clip-path: var(--clip-ui-ring); }
	.cap-moment .nx-decode__cta .nx-btn--primary::after { display: none; }
	/* The band label wraps to two lines at most on a phone-width photo. */
	.cap-hero__media .nx-band__label { left: clamp(35%, calc(var(--band-x, 40%) + var(--run) * .55 + var(--band-w, 14%) * .5), 65%); max-width: 68%; }
}

@media (min-width: 1024px) {
	.cap-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.cap-hero__text { grid-column: 1 / span 6; padding-top: var(--s-4); }
	.cap-hero__side { grid-column: 7 / -1; }
	.cap-hero__media { margin-right: calc(-1 * max(var(--margin), (100vw - var(--max)) / 2)); }
}

/* =========================================================================
   s2 · THE INVISIBLE PROBLEM (Paper)
   ========================================================================= */
.cap-problem__grid { row-gap: var(--s-7); }
.cap-problem__body { display: grid; align-content: start; gap: var(--s-4); max-width: var(--measure); font-size: var(--t-body); }
.cap-problem__body p + p { margin: 0; }
.cap-problem__fig { margin: 0; position: relative; }
.cap-problem__fig .cap-fig { max-height: 640px; margin-inline: auto; }
.cap-problem__note {
	position: relative;
	align-self: start;
	padding: var(--s-6) var(--s-5) var(--s-5);
	background: var(--paper-2);
	color: var(--ink);
	border: var(--bw) solid var(--rule-light);
	transform: rotate(1.4deg);
	box-shadow: 6px 6px 0 var(--paper-3);
	max-width: 30rem;
}
html.rm .cap-problem__note { transform: none; }
.cap-problem__note::before { content: ""; position: absolute; left: 50%; top: 12px; width: 10px; height: 10px; margin-left: -5px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.cap-problem__note-title { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-dark); margin-bottom: var(--s-3); }
.cap-problem__note ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.cap-problem__note li { position: relative; padding-left: 1.4em; font: italic 400 1.125rem/1.4 var(--f-serif); }
.cap-problem__note li::before { content: ""; position: absolute; left: 0; top: .62em; width: .8em; height: 1.5px; background: var(--molten-deep); transform: rotate(-47deg); }
@media (min-width: 1024px) {
	.cap-problem__head { grid-column: 1 / span 8; }
	.cap-problem__body { grid-column: 2 / span 5; grid-row: 2 / span 2; }
	.cap-problem__fig { grid-column: 8 / -1; grid-row: 2; }
	.cap-problem__note { grid-column: 7 / span 4; grid-row: 3; margin-top: calc(-1 * var(--s-9)); z-index: 1; }
}

/* =========================================================================
   s3 · FLOOR: three panels stepping up the 47° diagonal (Paper-2)
   ========================================================================= */
.cap-steps { display: grid; gap: var(--s-8) var(--gutter); margin: 0; padding: 0; list-style: none; position: relative; }
.cap-step { position: relative; display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.cap-step__panel { padding: var(--s-4); background: var(--paper); border: var(--bw) solid var(--rule); clip-path: var(--clip-sheet); }
.cap-step__kicker { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.cap-step__n { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border: 1.5px solid var(--fg); color: var(--fg); font-weight: 600; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%); }
.cap-step__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.2; max-width: 22ch; }
.cap-step__body { color: var(--fg); max-width: 46ch; }
.cap-step__tag { margin-top: var(--s-1); }
.cap-step__tag .nx-tag { white-space: normal; text-align: left; }
.cap-alert { display: grid; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-3) var(--s-4); border-left: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.cap-alert__text { font: italic 400 1.0625rem/1.45 var(--f-serif); }
.cap-floor__notes { margin-top: var(--s-8); row-gap: var(--s-4); }
.cap-floor__hw, .cap-floor__voice { max-width: 64ch; color: var(--fg-2); }
.cap-floor__voice { font: italic 400 var(--t-lead)/1.45 var(--f-serif); color: var(--fg); }
.cap-floor__hw .nx-mono-label { display: inline; margin-right: .6em; color: var(--fg); }
@media (min-width: 1024px) {
	.cap-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
	/* Rising left→right: each panel sits higher than the one before (47°: rise ≈ 1.07 × run). */
	.cap-step--1 { margin-top: clamp(120px, 11vw, 210px); }
	.cap-step--2 { margin-top: clamp(60px, 5.5vw, 105px); }
	.cap-floor__hw { grid-column: 1 / span 7; }
	.cap-floor__voice { grid-column: 1 / span 7; }
}

/* =========================================================================
   s4 · MEASURE (Ink): KPI rows, formulas in mono
   ========================================================================= */
.cap-kpis { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.cap-kpi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "head value" "formula formula" "note note";
	gap: var(--s-3) var(--s-5);
	padding: var(--s-5) 0;
	border-top: var(--bw) solid var(--rule);
}
.cap-kpi__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.cap-kpi__name { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; }
.cap-kpi__tags { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.cap-kpi__formula { grid-area: formula; display: grid; gap: var(--s-1); }
.cap-kpi__flabel { font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3); }
.cap-kpi__expr { font: 500 .9375rem/1.55 var(--f-mono); color: var(--sig); }
.cap-op { color: var(--fg); padding-inline: .15em; }
.cap-kpi__note { grid-area: note; color: var(--fg-2); max-width: 60ch; font-size: var(--t-small); }
.cap-kpi__value { grid-area: value; align-self: start; }
.cap-kpi__dash { min-width: 3.4ch; min-height: 44px; padding: 0 var(--s-2); font: 600 var(--t-readout)/1 var(--f-mono); color: var(--fg-2); border-bottom: 1.5px dashed var(--rule); cursor: help; }
.cap-kpi__dash:focus-visible { outline-offset: 2px; }
@container (min-width: 900px) {
	.cap-kpi { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; grid-template-areas: "head formula value" "note formula value"; align-items: start; column-gap: var(--s-7); }
}
.cap-marks { margin-top: var(--s-8); }
.cap-marks__title { font-size: var(--t-h3); margin-bottom: var(--s-4); max-width: 22ch; }
.cap-marks__note { margin-top: var(--s-4); max-width: 60ch; font: italic 400 var(--t-lead)/1.45 var(--f-serif); color: var(--fg); }
/* s4 · one documentary loop as a plate, with crop marks (bible §4.1 plate captions). */
.cap-sechead__side { display: grid; gap: var(--s-5); max-width: none; }
.cap-sechead__side .nx-lead { max-width: var(--measure-lead); }
.cap-loop { position: relative; margin: 0; padding: 12px; }
.cap-loop::before, .cap-loop::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--rule); border-style: solid; pointer-events: none; }
.cap-loop::before { left: 0; top: 0; border-width: 1px 0 0 1px; }
.cap-loop::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.cap-loop__video { clip-path: polygon(calc(var(--ch) * .35) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--ch) * .35 * var(--nx-tan))); }
.cap-loop__cap { margin-top: var(--s-3); font: 500 var(--t-micro)/1.5 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); max-width: 60ch; }
.cap-benefit { margin-top: var(--s-8); padding: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.cap-benefit__formula { font: 500 clamp(1rem, .9rem + .5vw, 1.375rem)/1.5 var(--f-mono); color: var(--fg); max-width: 70ch; padding-left: var(--s-4); box-shadow: inset 2px 0 0 var(--sig); }
.cap-benefit__formula--s { font-size: .9375rem; color: var(--fg-2); box-shadow: inset 2px 0 0 var(--rule); }
.cap-benefit__notes { display: grid; gap: var(--s-3); max-width: 64ch; color: var(--fg-2); }
.cap-benefit__notes p + p { margin: 0; }

/* =========================================================================
   s5 · PILOT CHARTER (Paper): an engineering title block
   ========================================================================= */
.cap-pilot__grid { row-gap: var(--s-7); align-items: start; }
.cap-pilot__exit { margin-top: var(--s-5); max-width: 40ch; font: italic 400 var(--t-lead)/1.45 var(--f-serif); }
.cap-pilot__photos { margin-top: var(--s-5); max-width: 44ch; }
.cap-charter { container-type: inline-size; }
.cap-charter__title { margin-bottom: var(--s-4); }
.cap-charter__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.cap-cell { margin: 0; padding: var(--s-3) var(--s-4) var(--s-4); border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); min-width: 0; }
.cap-cell dt { font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-dark); margin-bottom: var(--s-2); }
.cap-cell dd { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.cap-cell__big { font: 600 1.75rem/1.1 var(--f-mono) !important; letter-spacing: -.02em; }
.cap-cell__line { display: block; }
.cap-cell__line + .cap-cell__line { margin-top: var(--s-2); }
.cap-phases { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.cap-phases li { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; }
.cap-phases__when { font: 600 .8125rem/1.3 var(--f-mono); color: var(--indigo); }
.cap-fn-mark a { font: 600 .75rem var(--f-mono); color: var(--cyan-deep); text-decoration: none; padding: 0 .2em; }
.cap-charter__sign { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.cap-charter__line { display: block; width: min(220px, 50vw); height: 1.5px; background: var(--ink); margin-bottom: var(--s-2); }
.cap-charter__names { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; padding: 0; list-style: none; font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-dark); }
.cap-charter__names .cap-charter__line { width: 160px; }
.cap-charter__stamp .nx-stamp { border-color: var(--indigo); color: var(--indigo); white-space: normal; max-width: 22ch; line-height: 1.25; }
.cap-charter__fn { margin-top: var(--s-5); padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); font-size: var(--t-small); color: var(--steel-dark); max-width: 70ch; }
@container (min-width: 620px) {
	.cap-charter__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cap-cell--scope { grid-column: span 4; }
	.cap-cell--dur { grid-column: span 2; }
	.cap-cell--phases { grid-column: span 6; }
	.cap-cell--phases .cap-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
	.cap-cell--target { grid-column: span 3; }
	.cap-cell--cost { grid-column: span 3; }
}
@media (min-width: 1024px) {
	.cap-pilot__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.cap-charter { grid-column: 6 / -1; }
}

/* =========================================================================
   s6 · EVIDENCE (Paper-2)
   ========================================================================= */
.cap-ev { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.cap-ev__item { display: grid; gap: var(--s-3) var(--s-6); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); }
.cap-ev__fig { font: 600 clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem)/1.05 var(--f-mono); letter-spacing: -.03em; color: var(--fg); }
.cap-ev__fig--stack .cap-ev__part { display: block; }
.cap-ev__body { display: grid; gap: var(--s-2); max-width: 62ch; }
.cap-ev__limit { font: italic 400 1rem/1.45 var(--f-serif); color: var(--fg-2); }
.cap-ev__src { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cap-ev__item--play { background: var(--paper); box-shadow: 0 0 0 1px var(--rule); padding-inline: var(--s-5); margin-bottom: var(--s-2); }
.cap-ev__item--play .cap-ev__fig { font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); letter-spacing: 0; }
@container (min-width: 720px) {
	.cap-ev__item { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; }
}
.cap-ev__foot { margin-top: var(--s-7); row-gap: var(--s-5); align-items: start; }
.cap-caseslot { padding: var(--s-5); border: 1.5px dashed var(--fg-3); display: grid; gap: var(--s-2); }
.cap-caseslot__text { max-width: 52ch; }
.cap-vendor-note { font: italic 400 var(--t-body)/1.5 var(--f-serif); color: var(--fg-2); max-width: 52ch; }
.cap-vendor-note.is-loud { font-size: var(--t-lead); color: var(--fg); }
@media (min-width: 1024px) {
	.cap-caseslot { grid-column: 1 / span 6; }
	.cap-vendor-note { grid-column: 8 / -1; }
}

/* =========================================================================
   s7 · HONEST LIMITS (Ink-2)
   ========================================================================= */
.cap-limits__grid { row-gap: var(--s-8); align-items: start; }
.cap-honest { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule); }
.cap-honest__switch { justify-self: start; }
.cap-honest__fig { padding: var(--s-2) 0; }
.cap-honest__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.cap-honest__time { font: 600 .875rem/1.3 var(--f-mono); color: var(--leak); }
.cap-honest__rows { margin: 0; display: grid; gap: var(--s-4); }
.cap-honest__rows dt { font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s-1); }
.cap-honest__rows dd { margin: 0; }
.cap-honest__flag { font: 500 1rem/1.5 var(--f-mono); color: var(--fg); }
.cap-honest__mock { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cap-mockbtn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1.5px solid var(--fg-2); font: 500 .8125rem/1 var(--f-sans); color: var(--fg-2); clip-path: var(--clip-ui); }
.cap-mockbtn.is-pressed { background: var(--fg); border-color: var(--fg); color: var(--bg); }
/* JS: the card waits behind the switch; without JS it is simply shown. */
.js .cap-honest:not(.is-on) .cap-honest__card { display: none; }
.cap-honest.is-on .cap-honest__card { animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards; }
/* Switched on, the mistake is re-read: the Molten frame and its corner ticks give way to the cyan one. */
.cap-honest.is-on .cap-honest__svg :is(.box--leak, .boxc--leak) { display: none; }
.cap-cards { display: grid; gap: var(--s-4); }
.cap-card { padding: var(--s-4); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.cap-card__q { font: italic 400 1.125rem/1.4 var(--f-serif); margin-bottom: var(--s-3); }
.cap-card__a { font-size: var(--t-small); line-height: 1.5; }
.cap-card__a--s { color: var(--fg-2); margin-top: var(--s-2); }
.cap-limits__lists { display: grid; gap: var(--s-7); }
.cap-limits__title { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.cap-list { margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.cap-list li { position: relative; padding: var(--s-3) 0 var(--s-3) 1.6em; border-bottom: var(--bw) solid var(--rule); max-width: 62ch; }
.cap-list li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: .85em; height: 1.5px; background: var(--fg-2); transform: rotate(-47deg); }
/* "Won't": a dash struck through by the same 47° stroke (R1: one angle; no Molten, nothing leaks here). */
.cap-list--wont li::before { background: var(--fg); }
.cap-list--wont li::after { content: ""; position: absolute; left: -.05em; top: 1.35em; width: .95em; height: 1.5px; background: var(--fg-3); }
.cap-list--controls { border-top: 0; }
.cap-list--controls li { padding-left: 1.6em; color: var(--fg); font-weight: 500; }
.cap-list--controls li::before { background: var(--sig); }
@media (min-width: 1024px) {
	.cap-honest { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
	.cap-limits__lists { grid-column: 8 / -1; }
	.cap-limits--planning-copilot .cap-honest { position: static; }
}

/* =========================================================================
   s8 · THE MOMENT (Ink): demo shell, text equivalent, decode
   ========================================================================= */
.cap-moment__display { margin-top: var(--s-3); font: var(--w-h3) var(--t-h3)/1.15 var(--f-sans); color: var(--fg-2); max-width: 26ch; }
.cap-moment__chips { margin-top: var(--s-4); }
.cap-moment__disclaimer { margin-top: var(--s-3); font-size: var(--t-small); color: var(--fg-2); max-width: 52ch; }
.cap-demo { gap: var(--s-4); }
.cap-demo__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.cap-demo__keys { font: 500 .75rem/1.5 var(--f-mono); color: var(--fg-2); max-width: 90ch; }
.cap-demo__keyhelp { color: var(--fg); }
.cap-moment__skip { font: 500 .75rem/1.4 var(--f-mono); color: var(--link); }
.cap-demo__startrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.cap-demo__loading { display: none; font: 500 .75rem var(--f-mono); color: var(--fg-2); }
.cap-demo[data-engine-state="loading"] .cap-demo__loading { display: inline; }
.cap-demo[data-engine-state="ready"] .cap-demo__startrow, .cap-demo[data-engine-state="error"] .cap-demo__startrow { display: none; }
/* The start on the poster: a solid paper button in the poster's empty corner (night hours on the load
   curve, the free belt before the camera). Phones keep it right under the poster. */
.lc-chartwrap, .qc-beltwrap { position: relative; display: grid; gap: var(--s-4); }
.cap-demo__startrow.is-overlay .cap-demo__start { --btn-fg: var(--bg); }
.cap-demo__startrow.is-overlay .cap-demo__start::after { background: var(--fg); }
@media (hover: hover) { .cap-demo__startrow.is-overlay .cap-demo__start:hover::after { background: var(--paper-2); } }
@media (min-width: 768px) {
	.cap-demo__startrow.is-overlay { position: absolute; z-index: 2; padding: var(--s-3); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
	.lc-chartwrap .cap-demo__startrow.is-overlay { left: 9%; top: 11%; }
	.qc-beltwrap .cap-demo__startrow.is-overlay { left: var(--s-5); top: var(--s-5); }
}
.cap-moment__textwrap { margin-top: var(--s-5); }
.cap-moment__text.is-visible { margin-top: var(--s-3); max-width: 72ch; }
.cap-decode { margin-top: var(--s-7); }
@media (min-width: 1024px) { .cap-decode { max-width: 64rem; margin-left: auto; } }

/* =========================================================================
   s9 · SIX TRADES (Paper): list + plate viewer; stacked on phones / without JS
   ========================================================================= */
.cap-sectors__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-6); color: var(--fg-2); font-size: var(--t-small); max-width: 70ch; }
.cap-bench { display: grid; gap: var(--s-6) var(--gutter); }
.cap-bench__panels { display: grid; gap: var(--s-9); }
.cap-sc { display: grid; gap: var(--s-4); }
.cap-sc__sector { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.cap-sc__title { font-size: var(--t-h3); max-width: 24ch; margin-top: var(--s-2); }
.cap-sc__plate { position: relative; margin: 0; padding: var(--s-4); background: var(--paper); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
.cap-sc__chip { position: absolute; right: var(--s-3); top: var(--s-3); padding: 2px 6px; border: var(--bw) solid var(--fg-3); background: var(--paper); font: 500 .625rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.cap-sc__rows { margin: 0; display: grid; gap: 0; border-top: var(--bw) solid var(--rule); }
.cap-sc__rows > div { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); }
.cap-sc__rows dt { font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.cap-sc__rows dd { margin: 0; max-width: 70ch; }
.cap-sc__measure { font: 500 .875rem/1.55 var(--f-mono); color: var(--sig); }
.cap-sc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.cap-sc__ctanote { font-size: .8125rem; color: var(--fg-2); max-width: 44ch; }
.cap-sc__added { flex-basis: 100%; font: 500 .75rem/1.4 var(--f-mono); color: var(--sig); }
.cap-sc__added:empty { display: none; }
@media (min-width: 640px) { .cap-sc__rows > div { grid-template-columns: 12rem minmax(0, 1fr); } }
/* The scan line passes each plate once as it enters the viewport (phones; reduced motion: none). */
.cap-sc__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--cyan-deep) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); opacity: 0; pointer-events: none; transform: translateX(-100%); }
.cap-sc__plate.is-scanned::after { animation: cap-scan 900ms var(--ease-cut) 1 both; }
@keyframes cap-scan { 0% { opacity: .9; transform: translateX(-70%); } 100% { opacity: 0; transform: translateX(70%); } }
html.rm .cap-sc__plate::after { display: none; }

@media (min-width: 1024px) {
	.cap-bench.is-tabs { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
	.cap-bench.is-tabs .cap-bench__list { display: grid; grid-column: 1 / span 4; border-bottom: var(--bw) solid var(--rule); position: sticky; top: calc(var(--header-h) + var(--s-5)); }
	.cap-bench.is-tabs .cap-bench__panels { grid-column: 5 / -1; display: block; }
	.cap-bench.is-tabs .cap-sc { display: none; }
	.cap-bench.is-tabs .cap-sc.is-active { display: grid; }
	.cap-bench.is-tabs .cap-sc.is-active.is-wipe { animation: cap-viewer var(--dur-cut) var(--ease-cut) both; }
	.cap-bench.is-tabs .cap-sc__head { display: none; }
	html.rm .cap-bench.is-tabs .cap-sc.is-active { animation: none; }
}
@keyframes cap-viewer { from { clip-path: polygon(0 0, 0 0, -100% 100%, -100% 100%); } to { clip-path: polygon(0 0, 200% 0, 100% 100%, -100% 100%); } }
.cap-bench__tab {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "sector arrow" "title arrow";
	gap: 2px var(--s-3);
	width: 100%;
	min-height: 72px;
	padding: var(--s-3) var(--s-3) var(--s-3) 0;
	border-top: var(--bw) solid var(--rule);
	text-align: left;
	color: var(--fg);
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.cap-bench__sector { grid-area: sector; font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.cap-bench__title { grid-area: title; font: var(--w-h3) 1.0625rem/1.3 var(--f-sans); }
.cap-bench__arrow { grid-area: arrow; align-self: center; width: 18px; height: 18px; opacity: 0; transition: opacity var(--dur-ui) var(--ease-mech), transform var(--dur-ui) var(--ease-mech); }
.cap-bench__tab[aria-selected="true"] { background: var(--fg); color: var(--bg); padding-left: var(--s-3); }
.cap-bench__tab[aria-selected="true"] .cap-bench__sector { color: var(--paper-72); }
.cap-bench__tab[aria-selected="true"] .cap-bench__arrow { opacity: 1; }
.cap-bench__tab:focus-visible { outline-offset: -3px; }
@media (hover: hover) {
	.cap-bench__tab:not([aria-selected="true"]):hover { background: var(--bg-2); padding-left: var(--s-3); }
	.cap-bench__tab:hover .cap-bench__arrow { opacity: 1; transform: translateX(3px); }
}

/* =========================================================================
   s10 · FAQ (Paper-2) · s11 · CLOSE (Indigo)
   ========================================================================= */
.cap-faq__title { margin-bottom: var(--s-5); max-width: none; } /* topic-specific FAQ titles (GEO): a label line, not a 20ch display */
@media (min-width: 1024px) {
	.cap-faq__head { grid-column: 1 / span 3; }
	.cap-faq__list { grid-column: 5 / -1; }
}
.cap-close__grid { row-gap: var(--s-8); align-items: end; }
.cap-close__terms { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); font: 500 var(--t-micro)/1.5 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.cap-close__safety { margin-top: var(--s-5); font: italic 400 1.0625rem/1.45 var(--f-serif); max-width: 46ch; }
.cap-close__carry { margin-top: var(--s-3); font-size: var(--t-small); color: var(--fg-2); max-width: 52ch; }
.cap-close__carry b { color: var(--fg); font-weight: var(--w-strong); }
.cap-close__asklink { color: var(--fg); font-weight: var(--w-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (hover: hover) { .cap-close__asklink:hover { text-decoration-thickness: 2px; } }
.cap-close__asklink:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: var(--focus-offset); }
.cap-related .nx-index__row { min-height: 0; padding-block: var(--s-3); }
.cap-related .nx-index__title { font-size: 1.0625rem; }
.cap-related__hub .nx-index__title { font-weight: var(--w-strong); }
.cap-related .nx-index__meta--mono { text-transform: none; letter-spacing: .02em; }
@media (min-width: 1024px) {
	.cap-close__main { grid-column: 1 / span 7; }
	.cap-close__related { grid-column: 9 / -1; }
}

/* ---- s9 plate fills (drawing register on Paper) ---------------------------- */
.cap-draw .win-p { fill: var(--molten); opacity: .1; stroke: none; }
.cap-draw .blk { stroke: none; }
.cap-draw .blk--ink { fill: var(--ink); opacity: .82; }
.cap-draw .blk--leak { fill: var(--molten); }
.cap-draw .blk--sig { fill: var(--sig); }
.cap-draw .blk--paper { fill: var(--paper-3); }
.cap-draw .blk--w { fill: var(--paper); stroke: var(--line-art); stroke-width: 1; }
.cap-draw .blk--rusk { fill: #c08a52; }
.cap-draw .blk--rusk2 { fill: #e2c495; }
.cap-draw .blk--rusk3 { fill: #8a5228; }
.cap-draw .tiny { font-size: 13px; font-weight: 500; fill: var(--fg-2); }
.cap-plate { background: var(--paper); }
.cap-sc__pan { display: none; }
@media (max-width: 767px) {
	.cap-sc__plate { overflow-x: auto; overscroll-behavior-x: contain; padding: var(--s-2); }
	.cap-sc__plate .cap-plate { width: 640px; max-width: none; }
	/* The plate scrolls sideways on a phone: its label rides above the drawing instead of over it. */
	.cap-sc__plate { display: flex; flex-direction: column; align-items: flex-start; }
	.cap-sc__chip { order: -1; position: sticky; left: 0; right: auto; top: auto; margin-bottom: var(--s-2); }
	.cap-sc__plate:focus-visible, .qc-belt:focus-visible { outline: 2px solid var(--focus, var(--cyan)); outline-offset: 2px; }
	.cap-sc__pan { display: flex; align-items: center; gap: var(--s-2); margin-top: calc(-1 * var(--s-2)); font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
	.cap-sc__panicon { flex: none; width: 24px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
}

} /* end @layer pages */