/* =========================================================================
   netex · pages/scenario.css (scenarios-a · shared by the 16 scenario pages)
   Bible §7.11: s1 Play (Paper|Ink) · s2 Decode (Paper-2) · s3 Deploy (Paper) ·
   s4 Evidence (Ink-2) · s5 Bridge (Indigo) · [s6 FAQ (Paper-2)] · s7 CTA (Ink).
   Role tokens only; raw colour only inside drawings.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- shared type --------------------------------------------------------- */
.sx-h2 { --flar: 60; --volm: 40; font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); max-width: 18ch; text-wrap: balance; }
html[lang="el"] .sx-h2 { max-width: 20ch; }
.sx-h3 { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); text-wrap: balance; }
.sx-src {
	display: inline;
	margin-left: .35em;
	font: 500 .6875rem/1.4 var(--f-mono);
	letter-spacing: .03em;
	color: var(--fg-2);
	white-space: normal;
}
a.sx-src { color: var(--link); }

/* =========================================================================
   s1 · PLAY
   ========================================================================= */
/* The next section (.ch-tl) climbs over the hero by its chamfer leg: keep the labels clear of it. */
.sx-hero { --hero-pad: clamp(20px, 2.4vw, 44px); justify-content: flex-start; padding-bottom: calc(var(--sec-y-tight) + var(--ch-v)); }
.sx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
.sx-hero__head .nx-eyebrow { margin-bottom: var(--s-3); }
.sx-h1 { display: grid; gap: var(--s-4); max-width: none; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; }
.sx-h1__hook {
	display: block;
	font-size: clamp(2.125rem, 1.15rem + 3.1vw, 4.25rem);
	font-weight: var(--w-display);
	line-height: .98;
	letter-spacing: var(--tr-display);
	color: var(--fg);
	text-wrap: balance;
	max-width: 15ch;
}
html[lang="el"] .sx-h1__hook { font-size: clamp(2rem, 1.1rem + 2.75vw, 3.875rem); line-height: 1.02; max-width: 16ch; }
.sx-h1__hook--2 { --flar: 100; --volm: 100; color: var(--cut-b); }
.sx-h1__sub {
	margin-top: 0;
	font-size: clamp(1rem, .93rem + .42vw, 1.3125rem);
	font-weight: 480;
	line-height: 1.32;
	letter-spacing: -.004em;
	color: var(--fg-2);
	max-width: 38ch;
	text-wrap: pretty;
}
.sx-hero__sub { max-width: 46ch; }
.sx-nobr { white-space: nowrap; }
.sx-hero__report[hidden] { display: none; }
.sx-hero__report { min-width: 0; }
.sx-hero__text { margin-top: var(--s-4); max-width: 52ch; color: var(--fg-2); }

/* fact chips */
.sx-facts { margin: var(--s-6) 0 0; border-top: var(--bw) solid var(--rule); }
.sx-facts__row {
	display: grid;
	grid-template-columns: minmax(0, 8.75rem) minmax(0, 1fr);
	gap: var(--s-3);
	align-items: center;
	min-height: 42px;
	padding: 5px 0;
	border-bottom: var(--bw) solid var(--rule);
}
.sx-facts dt { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sx-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 .8125rem/1.35 var(--f-mono); color: var(--fg); }
.sx-facts .nx-label { cursor: help; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 35%, transparent); white-space: normal; text-align: left; }
.sx-hero__labels { margin-top: var(--s-4); }
/* «εργαλείο ενημέρωσης, όχι φορολογική συμβουλή» is wider than a 360 px column: the chip wraps, never clips */
.sx-hero__labels .nx-label { white-space: normal; text-align: left; max-width: 100%; }
/* Chip tooltips open from the start of their row and never wider than it: a chip near the column
   edge used to push its 32ch tip off-screen (desktop: left edge; 390 px: right edge). */
.sx-facts dd, .sx-hero__labels { position: relative; }
:is(.sx-facts, .sx-hero__labels) .nx-tipwrap { position: static; }
:is(.sx-facts, .sx-hero__labels) .nx-tip { left: 0; right: auto; max-width: min(36ch, 100%); }

/* the demo shell */
.sx-demo { gap: var(--s-3); }
.sx-stage {
	position: relative;
	background: var(--ink);
	clip-path: var(--clip-sheet);
	isolation: isolate;
}
.sx-stage__poster { z-index: 0; }
.sx-stage__poster > .nx-media { position: absolute; inset: 0; width: 100%; height: 100%; }
/* no JS / engine error: the static fallback (e.g. the city table) covers the poster and its overlay (same layer,
   later in the DOM) on its own ground, so it reads */
.sx-stage__fallback { position: absolute; inset: 0; z-index: 1; display: none; overflow: auto; padding: var(--s-5); background: var(--bg); color: var(--fg); }
.sx-stage__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sx-demo.is-running .sx-stage__overlay { display: none; }
.sx-stage__mount { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sx-demo.is-running .sx-stage__mount { pointer-events: auto; }

/* launch wedge: an Ink panel whose left edge rises at 47°, bottom-right of the poster */
.sx-launch {
	--h: 128px;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: var(--z-stage-ui);
	display: grid;
	align-content: end;
	justify-items: end;
	gap: var(--s-2);
	height: var(--h);
	min-width: min(100%, 25rem);
	padding: var(--s-4) calc(var(--ch-sheet) + var(--s-3)) var(--s-5) calc(var(--h) * .9325 + var(--s-3));
	background: var(--ink);
	color: var(--paper);
	clip-path: polygon(calc(var(--h) * .9325) 0, 100% 0, 100% 100%, 0 100%);
	--fg: var(--paper); --fg-2: var(--paper-72); --bg: var(--ink); --focus: var(--cyan);
}
.sx-launch::before {
	/* the N-bar hairline along the wedge's cut edge */
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(var(--h) / .7314);
	height: 2px;
	background: var(--n-grad);
	transform-origin: 0 50%;
	transform: rotate(-47deg);
}
.sx-launch__meta { font: 500 .6875rem/1.35 var(--f-mono); letter-spacing: .05em; color: var(--paper-72); text-align: right; max-width: 34ch; }
.sx-launch__loading { display: none; font: 500 .6875rem/1.35 var(--f-mono); letter-spacing: .05em; color: var(--cyan); }
.sx-demo[data-engine-state="loading"] .sx-launch__loading { display: block; }
.sx-demo[data-engine-state="loading"] .sx-launch__loading::after { content: "…"; display: inline-block; width: 1.1em; overflow: hidden; vertical-align: bottom; animation: nx-dots 900ms steps(4, jump-none) infinite; }
.sx-demo.is-running .sx-launch,
.sx-demo.is-error .sx-launch { display: none; }

.sx-demo__bar { min-height: 44px; }
.sx-demo__hint { flex: 1 1 18ch; }
@media (hover: none) and (pointer: coarse) { .sx-demo__hint { display: none; } }
.sx-demo__texttoggle { margin-left: auto; }
.sx-demo__notes { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font: 500 .6875rem/1.45 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
.sx-demo__notes li { position: relative; padding-left: 1.4em; max-width: 72ch; }
.sx-demo__notes li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8em; height: 1px; background: currentColor; transform: rotate(-47deg); }
.sx-demo__error { display: none; gap: var(--s-3); }
.sx-demo.is-error .sx-demo__error { display: grid; justify-items: start; }
.sx-demo.is-error .sx-stage__fallback { display: block; }
.sx-demo.is-error .nx-demo__text,
html:not(.js) .nx-demo__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: var(--s-5); background: var(--bg-2); max-width: var(--measure); }
html:not(.js) .sx-launch, html:not(.js) .sx-demo__bar { display: none; }
html:not(.js) .sx-stage__fallback { display: block; }
.sx-demo__text ol, .sx-demo__text ul { margin: .6em 0 0; padding-left: 1.2em; display: grid; gap: .35em; }
.sx-demo__text p + ol, .sx-demo__text p + ul, .sx-demo__text ul + p, .sx-demo__text ol + p { margin-top: .8em; }

@media (min-width: 1024px) {
	.sx-demo--portrait { max-width: 34rem; margin-left: auto; }
	.sx-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); grid-template-rows: auto 1fr; row-gap: var(--s-5); }
	.sx-hero__head { grid-column: 1 / span 5; grid-row: 1; }
	.sx-hero__body { grid-column: 1 / span 5; grid-row: 2; }
	.sx-hero__stage { grid-column: 6 / -1; grid-row: 1 / span 2; align-self: start; padding-top: var(--s-6); }
	.sx-hero__report { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 599px) {
	/* Phones: before the engine runs, the poster keeps its whole frame and the launch row sits
	   under it (inside the same chamfered stage) instead of covering half of a 200 px image. */
	.sx-demo:not(.is-running) > .sx-stage { aspect-ratio: auto; display: flex; flex-direction: column; }
	.sx-demo:not(.is-running) .sx-stage__poster { position: relative; inset: auto; flex: none; aspect-ratio: var(--demo-ar, 16 / 9); }
	.sx-demo:not(.is-running) :is(.sx-stage__overlay, .sx-stage__fallback) { inset: 0 0 auto 0; height: auto; aspect-ratio: var(--demo-ar, 16 / 9); }
	.sx-launch {
		--h: auto;
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		min-width: 0;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 6px 12px;
		padding: 12px 14px 14px;
		background: var(--ink);
		clip-path: none;
	}
	.sx-launch::before { display: none; }
	.sx-launch__btn { min-height: 44px; padding-inline: 16px; }
	.sx-launch__meta { flex: 1 1 12ch; max-width: 24ch; text-align: right; font-size: .625rem; }
	.sx-sheet.nx-sheet--active { filter: none; }
	.sx-demo__texttoggle { margin-left: 0; }
	.sx-facts__row { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}

/* =========================================================================
   s2 · DECODE (Paper-2): the sheet + the mechanics excerpt
   ========================================================================= */
.sx-decode__grid { display: grid; gap: var(--s-7); }
.sx-sheet { padding: var(--s-6) var(--s-6) calc(var(--s-6) + var(--ch-sheet) * .5); }
.sx-sheet .nx-sheet__head { margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-4); padding: var(--s-3) var(--s-6); }
.sx-sheet .nx-decode__row dd { font-size: var(--t-body); line-height: 1.55; }
.sx-decode__range { display: block; font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--f-sans); color: var(--fg); }
.sx-cite { font-family: var(--f-mono); font-size: .6875rem; }
.sx-cite .sx-src { margin-left: 0; }
.sx-mechlist__rows { margin: var(--s-3) 0 var(--s-5); padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.sx-mechlist__row {
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr);
	grid-template-areas: "sym name" "sym line";
	gap: 2px var(--s-4);
	padding: var(--s-4) 0;
	border-bottom: var(--bw) solid var(--rule);
}
.sx-mechlist__sym { grid-area: sym; font: 600 2.125rem/1 var(--f-mono); letter-spacing: -.04em; color: var(--cut-b); }
.sx-mechlist__name { grid-area: name; font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); }
.sx-mechlist__line { grid-area: line; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }
@media (min-width: 1024px) {
	.sx-decode__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
	.sx-sheet { grid-column: 1 / span 7; }
	.sx-mechlist { grid-column: 9 / -1; padding-top: var(--s-6); }
}

/* =========================================================================
   s3 · DEPLOY (Paper): stamped work order · spec · honest range · guardrails
   ========================================================================= */
.sx-forwhom { display: grid; gap: var(--s-2); }
.sx-forwhom .nx-eyebrow { margin: 0; }
.sx-deploy__grid { display: grid; gap: var(--s-8); }
.sx-steps { margin: 0; padding: 0; list-style: none; counter-reset: sx-step; border-top: var(--bw-2) solid var(--fg); }
.sx-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--s-4);
	padding: var(--s-5) 0;
	border-bottom: var(--bw) solid var(--rule);
}
.sx-steps__no {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	font: 600 .875rem/1 var(--f-mono);
	color: var(--fg);
}
.sx-steps__no::before {
	/* a 47° stamp frame */
	content: "";
	position: absolute;
	inset: 0;
	border: var(--bw-2) solid var(--fg);
	clip-path: var(--clip-ui);
}
.sx-steps__no::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: calc(var(--ch-ui) * var(--nx-tan) - 1px);
	width: calc(var(--ch-ui) * 1.47);
	height: var(--bw-2);
	background: var(--fg);
	transform-origin: 100% 50%;
	transform: rotate(-47deg);
}
.sx-steps__text { max-width: 60ch; font-size: var(--t-body); line-height: 1.55; }
.sx-steps__item:first-child .sx-steps__text { font-weight: 500; }
.sx-spec__rows { margin: var(--s-3) 0 0; border-top: var(--bw) solid var(--rule); }
.sx-spec__row { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: var(--bw) solid var(--rule); }
.sx-spec__row dt { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sx-spec__line { padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); font: 500 .75rem/1.5 var(--f-mono); color: var(--fg); }
.sx-spec__row dd { margin: 0; font-size: var(--t-small); line-height: 1.55; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
@media (min-width: 1024px) {
	.sx-deploy__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
	.sx-steps { grid-column: 1 / span 7; }
	.sx-spec { grid-column: 9 / -1; }
}

.sx-kpi { margin-top: clamp(var(--s-8), 7vw, var(--s-10)); display: grid; gap: var(--s-5); }
.sx-kpi__head { display: grid; gap: var(--s-2); }
.sx-kpi__promise { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 44ch; }
.sx-kpi__rows { margin: 0; padding: 0; list-style: none; border-top: var(--bw-2) solid var(--fg); container-type: inline-size; }
.sx-kpi__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-2) var(--s-6);
	align-items: center;
	padding: var(--s-5) 0;
	border-bottom: var(--bw) solid var(--rule);
}
.sx-kpi__label { font: 500 .75rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); max-width: 36ch; }
.sx-kpi__value { font: 600 clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem)/1 var(--f-mono); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--fg); }
.sx-kpi__value--text { font: 500 var(--t-body)/1.45 var(--f-sans); letter-spacing: 0; max-width: 38ch; }
.sx-kpi__unit { display: inline-block; margin-left: .2em; font: 500 var(--t-body)/1.3 var(--f-sans); letter-spacing: 0; color: var(--fg-2); }
.sx-kpi__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); font: 500 .75rem/1 var(--f-mono); color: var(--fg-2); }
.sx-kpi__track { position: relative; height: 14px; border-inline: var(--bw-2) solid var(--fg); }
.sx-kpi__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--bw-2); background: var(--fg); transform: translateY(-50%); }
.sx-kpi__likely { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; color: var(--sig); background: var(--hatch); }
.sx-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.sx-kpi__legend { display: block; font: 500 .75rem/1.5 var(--f-mono); color: var(--fg-2); max-width: 100%; }
.sx-kpi__legend .sx-kpi__swatch { display: inline-block; vertical-align: -2px; margin-right: var(--s-2); }
/* sentence case: uppercasing «ΜμΕ» would read «ΜΜΕ» (the media) */
.sx-kpi__foot .nx-label { white-space: normal; text-align: left; max-width: 100%; text-transform: none; letter-spacing: .02em; }
.sx-kpi__swatch { width: 26px; height: 12px; color: var(--sig); background: var(--hatch); border: var(--bw) solid var(--fg); }
.sx-kpi__control { flex-basis: 100%; font-size: var(--t-small); color: var(--fg-2); max-width: 70ch; }
@container (min-width: 760px) {
	.sx-kpi__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.4fr); }
}

.sx-guard { margin-top: clamp(var(--s-8), 7vw, var(--s-10)); display: grid; gap: var(--s-5); }
.sx-guard__rows { margin: 0; padding: 0; list-style: none; border-top: var(--bw-2) solid var(--fg); }
.sx-guard__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-6); padding: var(--s-4) 0; border-bottom: var(--bw) solid var(--rule); max-width: 100%; }
.sx-guard__row > span:first-child { max-width: 70ch; }
.sx-guard__src { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .03em; color: var(--fg-2); }
@media (min-width: 900px) {
	.sx-guard__row { grid-template-columns: minmax(0, 1fr) 14rem; }
	.sx-guard__src { text-align: right; }
}

/* =========================================================================
   s4 · EVIDENCE (Ink-2): why it works (long read) + lineage
   ========================================================================= */
.sx-why { display: grid; gap: var(--s-6); }
.sx-why__body { display: grid; gap: 1em; font-family: var(--f-serif); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.62; max-width: var(--measure-long); }
.sx-why__body p + p { margin-top: 0; }
.sx-why__body .sx-src { color: var(--fg-2); }
/* the worked funnel (stepped bars, log-scaled; numbers stamp) */
.sx-funnel { margin: 0; display: grid; gap: var(--s-4); max-width: var(--measure-long); }
.sx-funnel__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.sx-funnel__head .nx-eyebrow { margin: 0; flex-basis: 100%; }
.sx-funnel__label { cursor: default; }
.sx-funnel__note { font: 500 .75rem/1.4 var(--f-mono); color: var(--fg-2); }
.sx-funnel__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); border-top: var(--bw) solid var(--rule); padding-top: var(--s-4); }
.sx-funnel__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.sx-funnel__bar {
	display: block;
	width: var(--w);
	height: 10px;
	color: var(--fg-2);
	background: var(--hatch);
	border: var(--bw) solid var(--fg);
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px * .9325) 100%, 0 100%);
}
.sx-funnel__step:last-child .sx-funnel__bar { color: var(--sig); border-color: var(--sig); }
.sx-funnel__n { font: 600 clamp(1.25rem, 1.05rem + .9vw, 1.75rem)/1.1 var(--f-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sx-funnel__l { font: 500 .8125rem/1.35 var(--f-mono); color: var(--fg-2); }
@media (min-width: 600px) {
	.sx-funnel__step { grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-areas: "n bar" "n l"; column-gap: var(--s-5); align-items: center; }
	.sx-funnel__n { grid-area: n; }
	.sx-funnel__bar { grid-area: bar; }
	.sx-funnel__l { grid-area: l; }
}
@media (min-width: 1024px) { .sx-funnel { grid-column: 5 / span 7; } }

.sx-why__quote { --flar: 60; --volm: 40; margin: 0; color: var(--fg); }
.sx-why__quote p { font-size: var(--t-h3); font-weight: var(--w-h2); line-height: 1.12; letter-spacing: var(--tr-h3); max-width: 22ch; }
.sx-why__quote::before { content: ""; display: block; width: 48px; height: 6px; margin-bottom: var(--s-4); background: var(--n-grad); clip-path: polygon(5.6px 0, 100% 0, calc(100% - 5.6px) 100%, 0 100%); }
@media (min-width: 1024px) {
	.sx-why { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
	.sx-why__head { grid-column: 1 / span 4; }
	.sx-why__body { grid-column: 5 / span 7; }
	.sx-why__quote { grid-column: 5 / span 7; }
}
.sx-lineage { margin-top: clamp(var(--s-8), 7vw, var(--s-10)); display: grid; gap: var(--s-5); }
.sx-lineage:first-child { margin-top: 0; }
.sx-lineage__src { font: 500 .6875rem/1.4 var(--f-mono); color: var(--fg-2); }
.sx-why + .sx-lineage { border-top: var(--bw) solid var(--rule); padding-top: var(--s-7); }
.sx-lineage__head { display: grid; gap: var(--s-3); max-width: 70ch; }
.sx-lineage__intro { font-family: var(--f-serif); font-size: var(--t-lead); line-height: var(--lh-lead); }
.sx-lineage__note { font-size: var(--t-small); color: var(--fg-2); }
.sx-lineage__table th[scope="row"] { font: var(--w-strong) var(--t-body)/1.35 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
.sx-lineage__year { font-family: var(--f-mono); font-size: .8125rem; white-space: nowrap; color: var(--fg-2); }
.sx-lineage__result > span:first-child { display: block; font-weight: 600; }
.sx-lineage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.sx-lineage__label { cursor: default; }
.sx-lineage__head .sx-h2, .sx-lineage__head .sx-h3 { margin-bottom: var(--s-2); }
@media (max-width: 767px) {
	.sx-lineage__year { white-space: normal; }
	/* stacked rows: a row without a year (e.g. our own Frame Hunt, year pending) shows no empty «Χρονιά» label */
	.sx-lineage__year:empty { display: none; }
	/* stacked rows: the label chip and the source sit under the result, not under the «Αποτέλεσμα» label;
	   a long chip («ιστορία · τα νούμερα εκκρεμούν») wraps inside the narrow column instead of being clipped */
	.sx-lineage__result > .sx-lineage__meta { grid-column: 2; margin-top: 0; min-width: 0; }
	.sx-lineage__meta .nx-label { white-space: normal; text-align: left; max-width: 100%; }
}
@media (min-width: 768px) {
	.sx-lineage__table :is(th, td) { padding-right: var(--s-6); }
	.sx-lineage__table :is(th, td):last-child { padding-right: 0; }
}

/* =========================================================================
   s5 · BRIDGE (Indigo): the drawing register
   ========================================================================= */
.sx-bridge__grid { display: grid; gap: var(--s-8); }
.sx-bridge__display { --flar: 50; --volm: 40; max-width: 16ch; }
html[lang="el"] .sx-bridge__display { max-width: 18ch; }
.sx-bridge__text { display: grid; gap: var(--s-4); align-content: start; }
.sx-bridge__text .sx-bridge__display { margin-bottom: var(--s-2); }
.sx-bridge__p { max-width: 54ch; color: var(--fg); }
.sx-bridge__price { font: 500 .8125rem/1.45 var(--f-mono); color: var(--fg-2); }
.sx-bridge__cta { display: grid; justify-items: start; gap: 0; margin-top: var(--s-3); }
.sx-bridge__secondary { font-size: var(--t-small); color: var(--fg-2); }
.sx-bridge__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin: 0; padding: 0; list-style: none; }
.sx-bridge__links .nx-btn--text { color: var(--fg); }

.sx-diagram { margin: 0; position: relative; padding: var(--s-6); border: var(--bw) solid var(--rule); align-self: start; }
.sx-diagram::before, .sx-diagram::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--fg-2); }
.sx-diagram::before { left: -1px; top: -1px; border-left-width: 1.5px; border-top-width: 1.5px; }
.sx-diagram::after { right: -1px; bottom: -1px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.sx-flow { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.sx-flow__step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-4); align-items: center; min-height: 58px; }
.sx-flow__step:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: calc(50% + 10px); height: calc(100% - 20px); width: 1.5px; background: var(--line-art); }
.sx-flow__node { width: 28px; height: 20px; border: 1.5px solid var(--line-art); clip-path: var(--clip-ui); position: relative; }
.sx-flow__node::after { content: ""; position: absolute; inset: -1px; background: var(--cyan); opacity: 0; }
.sx-flow__step:nth-child(2) .sx-flow__node::after, .sx-flow__step:nth-child(3) .sx-flow__node::after { opacity: .9; }
.sx-flow__label { font: 500 .8125rem/1.35 var(--f-mono); letter-spacing: .02em; }
.sx-flow__step.is-human .sx-flow__label { font: var(--w-strong) 1rem/1.3 var(--f-sans); }
.sx-flow__step.is-human .sx-flow__node { border-color: var(--paper); background: var(--paper); }
.sx-flow__note { margin-top: var(--s-4); font: 500 .75rem/1.45 var(--f-mono); color: var(--fg-2); }
.sx-dtable { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--line-art); }
.sx-dtable__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1.5px solid var(--line-art); font: 500 .9375rem/1.4 var(--f-mono); }
.sx-dtable__k { justify-self: start; font-size: .6875rem; font-weight: 700; color: var(--paper); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 -2px 0 var(--cyan); }
.sx-chat { display: grid; gap: var(--s-4); }
.sx-chat__msg { position: relative; max-width: 34ch; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--line-art); }
.sx-chat__msg p { font-size: var(--t-small); line-height: 1.5; }
.sx-chat__msg--ai { justify-self: end; border-color: var(--cyan); }
.sx-chat__time { display: block; margin-bottom: var(--s-1); font: 500 .6875rem/1 var(--f-mono); color: var(--fg-2); }
.sx-chat__tag { justify-self: start; }
@media (min-width: 1024px) {
	.sx-bridge__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
	.sx-bridge__text { grid-column: 1 / span 6; }
	.sx-diagram { grid-column: 8 / -1; margin-top: var(--s-7); }
}

/* =========================================================================
   s6 · FAQ (Paper-2) · s7 · CTA (Ink)
   ========================================================================= */
.sx-faq__list { margin-top: var(--s-5); }
@media (min-width: 1024px) { .sx-faq__list { margin-top: 0; } }

.sx-cta__grid { display: grid; gap: var(--s-8); }
.sx-cta__title { max-width: 18ch; }
.sx-cta__sub { margin-top: var(--s-4); max-width: 46ch; }
.sx-cta__sprint { margin-top: var(--s-5); max-width: 52ch; color: var(--fg-2); }
.sx-cta__actions .nx-micro { margin-top: var(--s-3); }
.sx-cta__prefill { margin-top: var(--s-2); font-size: var(--t-small); color: var(--fg-2); }
.sx-related .nx-eyebrow { margin-bottom: var(--s-3); }
.sx-related .nx-index__title { font-size: 1.0625rem; }
@media (min-width: 1024px) {
	.sx-cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
	.sx-cta__main { grid-column: 1 / span 7; }
	.sx-related { grid-column: 9 / -1; }
}


/* ---- page-specific poster overlays (drawn in code, over the LCP poster) ---- */
/* Freddo Index: the real QR + line printed on the plain sleeve (x 36–64 %, y 51–69 % of the photo) */
.sx-sleeve { position: absolute; left: 38.6%; top: 53.2%; width: 23.5%; display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; gap: 5%; mix-blend-mode: multiply; }
.sx-sleeve__qr { width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.sx-sleeve__line { font: 700 1.15cqw/1.15 var(--f-sans); color: #1b1b1f; letter-spacing: -.01em; text-wrap: balance; }
/* Human vs Vision AI: the game clock at its start value, as the in-game HUD shows it */
.sx-hvv-clock { position: absolute; right: 12px; top: 12px; padding: 7px 11px; background: rgb(8 9 14 / .84); color: var(--paper); font: 600 clamp(1rem, .75rem + 1.1cqw, 1.5rem)/1 var(--f-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Key in the Sand: a static search reticle on the sand (left of the umbrellas, far from the key) */
.sx-reticle { position: absolute; left: 38%; top: 46%; width: clamp(34px, 6.5cqw, 54px); transform: translate(-50%, -50%); }
.sx-reticle svg { display: block; width: 100%; height: auto; }

/* Postcard From Next Summer: the name written by a finger in the wet sand (same groove as the
   engine's canvas: dark wet floor, shadowed upper rim, lit lower rim) */
.sx-sand-name { position: absolute; left: 12%; top: 47%; width: 60%; }
.sx-sand-name__word {
	display: inline-block;
	font: italic 600 clamp(2rem, 10.5cqw, 5.5rem)/1.05 var(--f-serif);
	letter-spacing: .01em;
	color: rgb(58 36 16 / .36);
	text-shadow: -1px -1px 0 rgb(34 20 8 / .42), 1px 1.5px 0 rgb(255 228 186 / .42);
	transform: rotate(-5deg) scaleY(.82);
	transform-origin: 0 50%;
}

/* Headphones Only: the loop as one cyan trace over the smoke, the two whisper passes marked */
.sx-wave { position: absolute; left: 5%; right: 5%; top: 7%; }
.sx-wave svg { display: block; width: 100%; height: auto; overflow: visible; }
.sx-wave__axis { stroke: rgb(241 238 230 / .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sx-wave__trace { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sx-wave__mark { stroke: rgb(241 238 230 / .55); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }

/* The Heat Pays: a paper swing tag hanging into the sky of the street photo (x ≈ 41–60 %) */
.sx-heat-tag { position: absolute; left: 41.5%; top: 0; width: clamp(128px, 18%, 176px); display: grid; justify-items: center; }
.sx-heat-tag__string { width: 1.5px; height: clamp(14px, 3.4cqw, 40px); background: var(--ink); }
.sx-heat-tag__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 10px;
	row-gap: 3px;
	align-items: center;
	width: 100%;
	padding: 11px 14px 15px 11px;
	background: var(--paper);
	color: var(--ink);
	clip-path: var(--clip-sheet);
}
.sx-heat-tag__thermo { grid-row: 1 / span 4; align-self: stretch; width: 18px; height: 100%; max-height: 96px; color: var(--ink); }
.sx-heat-tag__city { font: 500 .625rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel-dark); }
.sx-heat-tag__off { justify-self: start; font: 700 clamp(1.25rem, .95rem + 1vw, 1.75rem)/1 var(--f-mono); letter-spacing: -.04em; box-shadow: inset 0 -3px 0 var(--molten); }
.sx-heat-tag__item { font: 600 .75rem/1.2 var(--f-sans); }
.sx-heat-tag__price { display: grid; font: 600 .8125rem/1.25 var(--f-mono); }
.sx-heat-tag__was { font-size: .6875rem; font-weight: 500; color: var(--steel-dark); text-decoration: line-through; }
@container (max-width: 520px) {
	.sx-heat-tag { left: 40%; width: 118px; }
	.sx-heat-tag__item { display: none; }
	.sx-heat-tag__card { padding: 8px 10px 11px 8px; column-gap: 8px; }
	.sx-heat-tag__thermo { grid-row: 1 / span 3; width: 14px; }
	.sx-heat-tag__off { font-size: 1.125rem; }
}

/* e-Invoicing: the readiness gauge at zero and the day count, as a paper slip */
.sx-einv-cover {
	position: absolute;
	left: clamp(10px, 3%, 28px);
	top: clamp(10px, 4%, 28px);
	display: grid;
	gap: 6px;
	width: clamp(150px, 34%, 250px);
	padding: 12px 14px 16px;
	background: var(--paper);
	color: var(--ink);
	clip-path: var(--clip-sheet);
	box-shadow: none;
}
.sx-einv-cover__gauge { width: 100%; height: auto; color: var(--ink); }
.sx-einv-cover__clock { font: 700 clamp(.9375rem, .8rem + .6vw, 1.25rem)/1.1 var(--f-mono); letter-spacing: -.01em; }
.sx-einv-cover__date { font: 500 .6875rem/1.35 var(--f-mono); color: var(--steel-dark); }
@media (max-width: 599px) { .sx-einv-cover__date { display: none; } .sx-einv-cover { width: 44%; padding: 8px 10px 12px; } }

/* print: the e-invoicing plan and text equivalents print cleanly */
@media print {
	.sx-launch, .sx-demo__bar, .sx-related, .sx-bridge, .sx-evidence { display: none !important; }
}

} /* end @layer pages */

@layer pages {
/* breadcrumb links reach the 24 px target size (WCAG 2.5.8) */
.sx-hero .nx-crumbs li { align-items: center; min-height: 24px; }
.sx-hero .nx-crumbs a, .sx-hero .nx-crumbs [aria-current] { display: inline-block; min-height: 24px; line-height: 24px; }
}