/* =========================================================================
   netex · pages/single.css (company group) · single.php · Insights articles (bible §7.20)
   Paper reading surface: Literata Text 19 px / 1.62 on a 68 ch measure; figures, tables, tools and
   cards may use the full body column (cols 4–12 on lg). The answer box is a Paper-2 sheet.
   The first letter of the text is cut at 47° in two tones (S3 on one glyph); pull quotes flare
   (S3b, CSS scroll-driven). Nothing else moves while reading.
   Blocks come from the imported post bodies (copy 12 / 13): nx-tldr, nx-definition, nx-formula,
   nx-glossary, nx-timeline, nx-pullquote, nx-table, nx-figure(--grid), nx-faq, nx-cta,
   nx-sources and the lf-* components of articles 4–6.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- article section + header -------------------------------------------------- */
.sg { --hero-pad: var(--s-7); padding-bottom: var(--sec-y); }
.sg-head { row-gap: var(--s-6); padding-bottom: var(--s-8); }
.sg-head__main { min-width: 0; }
.sg-head .nx-crumbs { margin-bottom: var(--s-6); }
.sg-head__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-4); min-height: 24px; }
.sg-head__cluster { margin: 0; color: var(--fg-2); text-decoration: none; }
.sg-head__cluster:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .25em; }
.sg-head__status { cursor: default; }
.sg-title { margin: 0; max-width: 22ch; font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--w-h2); text-wrap: balance; }
.sg-title__a { display: block; }
.sg-title__b { display: block; margin-top: .3em; max-width: 32ch; font-size: var(--t-h1-sub); line-height: 1.16; letter-spacing: -.005em; font-weight: 480; color: var(--fg-2); }
.sg-dek { margin: var(--s-6) 0 0; max-width: 46ch; font-family: var(--f-serif); font-style: italic; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--fg); text-wrap: pretty; }
.sg-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); margin: 0; padding-top: var(--s-5); border-top: var(--bw-2) solid var(--fg); }
.sg-meta > div { display: grid; gap: var(--s-1); align-content: start; }
.sg-meta dt { font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-meta dd { margin: 0; font: 500 .8125rem/1.4 var(--f-mono); color: var(--fg); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
	.sg-head__main { grid-column: 1 / span 10; }
	.sg-meta { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- layout: contents rail + body ---------------------------------------------------- */
.sg-layout { row-gap: var(--s-6); align-items: start; }
.sg-rail { min-width: 0; }
.sg-toc ol { margin: 0; padding: 0; list-style: none; }
.sg-toc a { display: block; padding: 6px 0 6px var(--s-3); border-left: var(--bw) solid var(--rule); color: var(--fg-2); font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .01em; text-decoration: none; }
.sg-toc a:hover { color: var(--fg); border-left-color: var(--fg); }
.sg-toc a[aria-current="true"] { color: var(--fg); border-left: 2px solid var(--fg); padding-left: calc(var(--s-3) - 1px); }
.sg-toc__title { margin: 0 0 var(--s-3); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-toc--m { border-top: var(--bw) solid var(--rule); border-bottom: var(--bw) solid var(--rule); }
.sg-toc--m > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; list-style: none; cursor: pointer; }
.sg-toc--m > summary::-webkit-details-marker { display: none; }
.sg-toc--m ol { padding-bottom: var(--s-4); }
.sg-toc--d { display: none; }
@media (min-width: 1024px) {
	.sg-rail { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.sg-toc--m { display: none; }
	.sg-toc--d { display: block; max-height: calc(100vh - var(--header-h) - var(--s-9)); overflow: auto; overscroll-behavior: contain; padding-right: var(--s-3); }
	.sg-body { grid-column: 4 / -1; }
	.sg-layout > .sg-body:only-child { grid-column: 2 / span 10; }
}

/* ---- body typography -------------------------------------------------------------------- */
.sg-body { max-width: none; min-width: 0; container-type: inline-size; }
.sg-body :where(p, ul, ol, h2, h3, h4, dl, blockquote) { max-width: var(--measure-long); }
.sg-body > * + * { margin-top: 1.15em; }
.sg-body p { margin-bottom: 0; }
.sg-body :where(strong, b) { font-weight: 600; }
.sg-body a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.sg-body a:not([class]):hover { text-decoration-thickness: 2px; }
.sg-body h2 { margin-top: 2.6em; scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.sg-body h3 { margin-top: 2em; scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.sg-body > h2, .sg-body .lf-sec { padding-top: var(--s-6); border-top: var(--bw-2) solid var(--fg); }
.sg-body .lf-sec > h2 { margin-top: 0; }
.sg-body .lf-sec { margin-top: var(--s-9); }
.sg-body .lf-sec > * + * { margin-top: 1.15em; }
.sg-body .lf-eyebrow { margin: 0 0 var(--s-3); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .lf-eyebrow + h2 { margin-top: 0; }
.sg-body ul:not([class]) { padding-left: 0; list-style: none; }
.sg-body ul:not([class]) > li { position: relative; padding-left: 1.6em; }
.sg-body ul:not([class]) > li::before { content: ""; position: absolute; left: .15em; top: .78em; width: .7em; height: 1.5px; background: var(--fg); transform: rotate(-47deg); }
.sg-body ol:not([class]) { padding-left: 1.6em; }
.sg-body ol:not([class]) > li::marker { font: 600 .82em var(--f-mono); color: var(--fg-2); }
.sg-body li + li { margin-top: .5em; }
.sg-body code { font-family: var(--f-mono); font-size: .8em; padding: .08em .32em; background: var(--bg-2); }
.sg-body q { quotes: "«" "»" "‹" "›"; }
html[lang="en"] .sg-body q { quotes: "“" "”" "‘" "’"; }

/* Inline proof labels inside sentences: a quiet mono tag, not a button. */
.sg-body .nx-label { display: inline; min-height: 0; padding: .12em .45em; margin: 0 .1em; font-size: .6875rem; line-height: 1; vertical-align: .14em; letter-spacing: .05em; cursor: default; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- the 47° first letter (S3 on one glyph) ----------------------------------------------- */
.sg-first::first-letter {
	float: left;
	margin: .06em .1em 0 -.02em;
	padding: 0;
	font-family: var(--f-sans);
	font-weight: 820;
	font-style: normal;
	font-size: 3.55em;
	line-height: .8;
	color: var(--fg);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sg-first::first-letter {
		color: transparent;
		background-image: linear-gradient(137deg, var(--fg) 0 50%, var(--cut-b) 50% 100%);
		-webkit-background-clip: text;
		background-clip: text;
	}
}
@supports (initial-letter: 3) {
	.sg-first::first-letter { float: none; initial-letter: 3; margin: 0 .12em 0 0; font-size: inherit; line-height: inherit; }
}

/* ---- answer box («Με μια ματιά»): a Paper-2 sheet ------------------------------------------- */
.sg-body .nx-tldr {
	position: relative;
	max-width: var(--measure-long);
	margin: 0 0 var(--s-7);
	padding: var(--s-5) var(--s-6) var(--s-6);
	background: var(--bg-2);
	border: var(--bw) solid var(--rule);
	clip-path: var(--clip-sheet);
	font-size: .96em;
}
.sg-body .nx-tldr h2 { margin: 0 0 var(--s-4); padding: 0; border: 0; font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .nx-tldr ul { margin: 0; padding: 0; list-style: none; counter-reset: tl; }
.sg-body .nx-tldr li { position: relative; padding: var(--s-3) 0 var(--s-3) 2.2em; border-top: var(--bw) solid var(--rule); counter-increment: tl; }
.sg-body .nx-tldr li + li { margin-top: 0; }
.sg-body .nx-tldr ul > li::before { content: counter(tl, decimal-leading-zero); position: absolute; left: 0; top: var(--s-3); width: auto; height: auto; background: none; transform: none; font: 600 .75rem/2.1 var(--f-mono); color: var(--fg-2); }
.sg-body .nx-tldr__answer { margin: 0 0 var(--s-4); font-size: 1.04em; }
.sg-body .nx-tldr__keys { display: grid; gap: 0; margin: var(--s-3) 0 0; border-top: var(--bw) solid var(--rule); }
.sg-body .nx-tldr__keys > div { display: grid; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); }
.sg-body .nx-tldr__keys dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .nx-tldr__keys dd { margin: 0; }
@container (min-width: 560px) { .sg-body .nx-tldr__keys > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); } }

/* ---- definition, formula, glossary, timeline, pull quote ------------------------------------ */
.sg-body .nx-definition { position: relative; padding: var(--s-5) 0 var(--s-5); border-top: var(--bw) solid var(--fg); border-bottom: var(--bw) solid var(--rule); }
.sg-body .nx-definition::before, .sg-body .nx-formula::before {
	content: attr(data-label);
	display: block;
	margin-bottom: var(--s-2);
	font: 500 var(--t-label)/1.3 var(--f-mono);
	font-style: normal;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg-2);
}
.sg-body .nx-definition dfn { font-style: normal; font-family: var(--f-sans); font-weight: 680; }
.sg-body .nx-formula {
	max-width: none;
	padding: var(--s-5);
	background: var(--ink);
	color: var(--paper);
	clip-path: var(--clip-ui);
	font: 500 .875rem/1.6 var(--f-mono);
}
.sg-body .nx-formula::before { color: var(--paper-72); }
.sg-body .nx-formula code { padding: 0; background: none; font-size: inherit; color: inherit; white-space: normal; }
.sg-body .nx-formula p { margin: 0; max-width: none; }
.sg-body .nx-formula p + p { margin-top: var(--s-2); padding-top: var(--s-2); border-top: var(--bw) solid var(--rule-dark); }
.sg-body .nx-glossary { display: grid; gap: 0; padding: 0; border-top: var(--bw) solid var(--rule); }
.sg-body .nx-glossary dt { padding-top: var(--s-4); font: 600 .8125rem/1.4 var(--f-mono); letter-spacing: .02em; color: var(--fg); }
.sg-body .nx-glossary dd { margin: var(--s-1) 0 0; padding-bottom: var(--s-4); border-bottom: var(--bw) solid var(--rule); }
.sg-body .nx-timeline { margin-left: 0; padding: 0; list-style: none; border-left: var(--bw-2) solid var(--fg); }
.sg-body .nx-timeline li { position: relative; padding: 0 0 var(--s-4) var(--s-6); }
.sg-body .nx-timeline li::before { content: ""; position: absolute; left: -1px; top: .75em; width: 16px; height: 1.5px; background: var(--fg); transform-origin: 0 50%; transform: rotate(-47deg); }
.sg-body .nx-timeline strong { font-family: var(--f-mono); font-size: .82em; font-weight: 600; letter-spacing: .02em; }
.sg-body .nx-pullquote { margin: 2em 0; padding: var(--s-6) 0; max-width: 22ch; border-top: var(--bw-2) solid var(--fg); border-bottom: var(--bw) solid var(--rule); font-family: var(--f-sans); font-size: var(--t-h3); font-weight: var(--w-h2); line-height: 1.12; color: var(--cut-b); }

/* ---- figures («Εικ. n —» plates) ------------------------------------------------------------ */
.sg-body figure { margin: 2.4em 0; max-width: none; }
.sg-body figure img { display: block; width: 100%; height: auto; border: var(--bw) solid var(--rule); background: var(--paper); }
.sg-body figcaption { margin-top: var(--s-3); max-width: 80ch; font: 400 .75rem/1.55 var(--f-mono); color: var(--fg-2); }
.sg-body figcaption .nx-figno { font-weight: 600; color: var(--fg); margin-right: .2em; }
.sg-body figcaption .nx-label, .sg-body figcaption a { vertical-align: baseline; }
.sg-body .nx-figure--grid { display: grid; gap: var(--s-4); }
.sg-body .nx-figure--grid figcaption { grid-column: 1 / -1; }
@container (min-width: 700px) { .sg-body .nx-figure--grid { grid-template-columns: 1fr 1fr; } }
.sg-figwrap { position: relative; display: block; }
.sg-zoom {
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	clip-path: var(--clip-ui);
	cursor: zoom-in;
}
.sg-zoom svg { width: 18px; height: 18px; }
.sg-viewer { width: min(100vw - 16px, 1400px); max-width: none; max-height: calc(100dvh - 16px); padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.sg-viewer::backdrop { background: rgb(8 9 14 / .82); }
.sg-viewer__bar { position: sticky; top: 0; left: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 8px; background: var(--paper); border-bottom: var(--bw) solid var(--rule-light); }
.sg-viewer__close { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 16px; background: var(--ink); color: var(--paper); border: 0; font: 600 .875rem/1 var(--f-sans); clip-path: var(--clip-ui); cursor: pointer; }
.sg-viewer__scroll { overflow: auto; max-height: calc(100dvh - 16px - 61px); }
.sg-viewer__scroll img { display: block; width: 1200px; max-width: none; height: auto; }
@media (min-width: 1240px) { .sg-viewer__scroll img { width: 100%; } }

/* ---- tables ------------------------------------------------------------------------------- */
.sg-body table { margin: 2em 0; font-family: var(--f-sans); font-size: .875rem; line-height: 1.45; }
.sg-body table th[scope="row"] { font: 600 .875rem/1.4 var(--f-sans); text-transform: none; letter-spacing: 0; color: var(--fg); }
.sg-body table caption .nx-label { vertical-align: baseline; }
.sg-body .lf-controls tr.is-origin th, .sg-body .lf-controls tr.is-origin td { color: var(--indigo); font-weight: 600; }
.sg-body .lf-controls a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* Under 768 px the component stacks every row; article cells hold several inline pieces (a name,
   then a line; a link beside a label), so each cell reads as column name above its content. */
@media (max-width: 767px) {
	.sg-body .nx-table :is(th, td) { display: block; padding: var(--s-1) 0 var(--s-2); }
	.sg-body .nx-table :is(th, td)[data-label]::before { display: block; margin-bottom: 2px; }
	.sg-body .nx-table tbody th[scope="row"] { padding-top: var(--s-2); font-size: 1rem; }
}

/* ---- FAQ, sources, CTA, related ---------------------------------------------------------- */
.sg-body .nx-faq { margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--bw-2) solid var(--fg); border-bottom: 0; }
.sg-body .nx-faq > h2 { margin: 0 0 var(--s-5); padding: 0; border: 0; }
.sg-body .nx-faq > .lf-eyebrow + h2 { margin-top: 0; }
.sg-body .nx-faq-item { max-width: var(--measure-long); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); }
.sg-body .nx-faq-item:last-child { border-bottom: var(--bw) solid var(--rule); }
.sg-body .nx-faq-item h3 { margin: 0 0 var(--s-2); font-size: var(--t-h4); }
.sg-body .nx-faq-item p { margin: 0; }

.sg-body aside.nx-cta {
	--bg: var(--ink); --bg-2: var(--ink-2); --fg: var(--paper); --fg-2: var(--paper-72); --fg-3: var(--steel);
	--rule: var(--rule-dark); --link: var(--cyan); --focus: var(--cyan); --sig: var(--cyan); --cut-b: var(--cyan);
	color-scheme: dark;
	position: relative;
	max-width: none;
	margin: var(--s-9) 0 0;
	padding: var(--s-7) var(--s-6);
	background: var(--bg);
	color: var(--fg);
	clip-path: var(--clip-sheet);
}
.sg-body aside.nx-cta::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 42%;
	height: 100%;
	background: repeating-linear-gradient(-47deg, transparent 0 7px, rgb(241 238 230 / .06) 7px 8px);
	pointer-events: none;
}
.sg-body .nx-cta-line { position: relative; margin: 0; max-width: 24ch; --flar: 50; --volm: 40; font-variation-settings: "FLAR" var(--flar), "VOLM" var(--volm); font-family: var(--f-sans); font-size: var(--t-h3); font-weight: var(--w-h2); line-height: 1.12; letter-spacing: var(--tr-h3); text-wrap: balance; }
.sg-body aside.nx-cta > p { position: relative; }
.sg-body aside.nx-cta > p + p { margin-top: var(--s-4); color: var(--fg-2); }
.sg-body aside.nx-cta > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); color: var(--fg); }
.sg-body aside.nx-cta .nx-link { color: var(--link); font-family: var(--f-sans); font-weight: 600; font-size: .9375rem; text-decoration: underline; text-underline-offset: .2em; }
.sg-body .nx-cta-price { font-family: var(--f-mono); font-size: .8125rem; }

.sg-body .nx-sources { margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--bw) solid var(--rule); }
.sg-body .nx-sources > h2 { margin: 0 0 var(--s-4); padding: 0; border: 0; font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .nx-sources ol { margin: 0; padding-left: 2.4em; max-width: 88ch; font: 400 .8125rem/1.55 var(--f-sans); color: var(--fg-2); }
.sg-body .nx-sources li { padding-left: .3em; overflow-wrap: anywhere; }
.sg-body .nx-sources li::marker { font: 600 .75rem var(--f-mono); color: var(--fg-2); }
.sg-body .nx-sources li:target { background: var(--bg-2); outline: var(--bw) solid var(--rule); }
.sg-body .nx-sources a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

.sg-body .lf-related { margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--bw-2) solid var(--fg); }
.sg-body .lf-related > h2 { margin: 0 0 var(--s-4); padding: 0; border: 0; }
.sg-body .lf-links { margin: 0; padding: 0; list-style: none; max-width: none; border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-links li + li { margin-top: 0; }
.sg-body .lf-links a { position: relative; display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-4) var(--s-7) var(--s-4) 0; border-top: var(--bw) solid var(--rule); color: var(--fg); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech); }
.sg-body .lf-links a::after { content: "↗"; position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); font-family: var(--f-mono); }
.sg-body .lf-links__t { font: var(--w-h3) var(--t-h4)/1.25 var(--f-sans); }
.sg-body .lf-links__n { font-size: .9375rem; color: var(--fg-2); }
@container (min-width: 640px) { .sg-body .lf-links a { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; } }
@media (hover: hover) { .sg-body .lf-links a:hover { background: var(--bg-2); padding-left: var(--s-3); } }

/* ---- articles 4–6 components --------------------------------------------------------------- */
.sg-body .lf-status { margin: 0; }
.sg-body .lf-status .nx-label { margin: 0; }
.sg-body .lf-source, .sg-body .lf-src { display: block; margin-top: var(--s-2); font: 400 .75rem/1.5 var(--f-mono); color: var(--fg-2); max-width: 80ch; }
.sg-body .lf-source a, .sg-body .lf-src a { color: var(--fg-2); text-decoration: underline; text-underline-offset: .2em; }
.sg-body .lf-honest, .sg-body .lf-bolt {
	padding: var(--s-5) var(--s-5) var(--s-5);
	border: var(--bw) dashed var(--fg-2);
	max-width: var(--measure-long);
}
.sg-body .lf-honest > :first-child, .sg-body .lf-bolt > :first-child { margin-top: 0; }
.sg-body .lf-honest h3, .sg-body .lf-bolt h3 { margin: 0 0 var(--s-2); font-size: var(--t-h4); }
.sg-body .lf-bolt { border-style: solid; border-color: var(--fg); }
.sg-body .lf-own { font-style: italic; }
.sg-body .lf-lesson { font-family: var(--f-sans); font-weight: 600; font-size: 1.0625rem; }
.sg-body .lf-method { font-size: .9375rem; color: var(--fg-2); }
.sg-body .lf-disclaimer { margin-top: var(--s-3); font: 400 .8125rem/1.5 var(--f-sans); color: var(--fg-2); max-width: var(--measure-long); }

/* Ruled step/number lists */
.sg-body :is(.lf-gears, .lf-steps, .lf-facts, .lf-check, .lf-metrics, .lf-numbered, .lf-dates) { margin: 1.6em 0 0; padding: 0; list-style: none; max-width: none; counter-reset: lf; border-bottom: var(--bw) solid var(--rule); }
.sg-body :is(.lf-gears, .lf-steps, .lf-facts, .lf-check, .lf-metrics, .lf-numbered, .lf-dates) > li { position: relative; margin: 0; padding: var(--s-4) 0 var(--s-4) 3em; border-top: var(--bw) solid var(--rule); counter-increment: lf; }
.sg-body :is(.lf-gears, .lf-steps, .lf-facts, .lf-check, .lf-metrics, .lf-numbered) > li::before { content: counter(lf, decimal-leading-zero); position: absolute; left: 0; top: var(--s-4); font: 600 .8125rem/1.9 var(--f-mono); color: var(--fg-2); }
.sg-body :is(.lf-gears, .lf-steps) > li h3 { margin: 0 0 var(--s-2); font-size: var(--t-h4); }
.sg-body :is(.lf-gears, .lf-steps, .lf-facts) > li > p { margin: 0; max-width: var(--measure-long); }
.sg-body .lf-steps--plain > li { padding-left: 3em; }
.sg-body .lf-check > li { display: grid; gap: var(--s-1); }
.sg-body .lf-metrics > li { font-family: var(--f-sans); font-size: 1rem; }
@container (min-width: 760px) {
	.sg-body .lf-gears { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
	.sg-body .lf-gears > li:nth-child(2) { border-top: var(--bw) solid var(--rule); }
	.sg-body .lf-metrics { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
}
.sg-body .lf-limits { margin: 1.2em 0 0; padding: 0; list-style: none; }
.sg-body .lf-limits > li { position: relative; padding: var(--s-3) 0 var(--s-3) 2em; border-top: var(--bw) solid var(--rule); }
.sg-body .lf-limits > li + li { margin-top: 0; }
.sg-body .lf-limits > li::before { content: ""; position: absolute; left: .1em; top: 1.35em; width: .9em; height: 1.5px; background: var(--leak); }
.sg-body .lf-limits--plain > li::before { background: var(--fg); transform: rotate(-47deg); }
.sg-body .lf-limits > li[data-token] a, .sg-body .lf-limits > li a { color: var(--link); }

/* Three verbs (article 4): stamped once */
.sg-body .lf-verbs { display: grid; gap: 0; margin: 1.6em 0 0; padding: 0; list-style: none; max-width: none; border-top: var(--bw-2) solid var(--fg); }
.sg-body .lf-verbs > li { display: grid; gap: var(--s-1); margin: 0; padding: var(--s-4) 0; border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-verbs strong { font: 820 var(--t-h3)/1 var(--f-sans); letter-spacing: .02em; text-transform: uppercase; }
.sg-body .lf-verbs > li:nth-child(2) strong { --flar: 100; --volm: 100; font-variation-settings: "FLAR" 100, "VOLM" 100; color: var(--cut-b); }
@container (min-width: 760px) {
	.sg-body .lf-verbs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
}

/* Eight cards (article 4): front / back. Without JS (or under reduced motion): both printed. */
.sg-body .lf-deck { display: grid; gap: var(--s-5); max-width: none; margin-top: 1.6em; }
@container (min-width: 720px) { .sg-body .lf-deck { grid-template-columns: 1fr 1fr; } }
.sg-body .lf-card { position: relative; display: grid; align-content: start; background: var(--paper); border: var(--bw) solid var(--rule); clip-path: var(--clip-sheet); }
.sg-body .lf-card__front, .sg-body .lf-card__back { padding: var(--s-5); font-size: .9375rem; line-height: 1.55; }
.sg-body .lf-card__front > *, .sg-body .lf-card__back > * { max-width: none; }
.sg-body .lf-card__front > * + *, .sg-body .lf-card__back > * + * { margin-top: var(--s-2); }
.sg-body .lf-card__img { display: block; width: calc(100% + 2 * var(--s-5)); max-width: none; height: auto; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4); border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-card h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--t-h4); }
.sg-body .lf-card h4 { margin: var(--s-4) 0 0; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .lf-card h4 + p { margin-top: var(--s-1); }
.sg-body .lf-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .lf-card__meta .nx-label { margin: 0; }
.sg-body .lf-card__kv { display: grid; gap: 0; margin: var(--s-3) 0 0; border-top: var(--bw) solid var(--rule); }
.sg-body .lf-card__kv > div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-card__kv dt { font: 500 .6875rem/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.sg-body .lf-card__kv dd { margin: 0; font-family: var(--f-sans); font-weight: 600; }
.sg-body .lf-card__back { border-top: var(--bw) dashed var(--fg-2); background: var(--bg-2); }
.sg-body .lf-card__back a { color: var(--link); }
.sg-body .lf-card__flip { display: none; }
.sg-body .lf-deck.is-ready .lf-card__flip { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; margin-top: var(--s-4); padding: 0 16px; border: 0; background: var(--ink); color: var(--paper); font: 600 .875rem/1 var(--f-sans); clip-path: var(--clip-ui); cursor: pointer; }
.sg-body .lf-deck.is-ready .lf-card__flip::before { content: ""; width: 8px; height: 12px; border-inline: 2.5px solid currentColor; box-sizing: border-box; }
.sg-body .lf-deck.is-ready .lf-card__flip--back { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.sg-body .lf-deck.is-ready .lf-card__flip--back::before { width: 0; height: 0; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 7px solid currentColor; }
.sg-body .lf-deck.is-ready .lf-card:not(.is-flipped) .lf-card__back { display: none; }
.sg-body .lf-deck.is-ready .lf-card.is-flipped .lf-card__front { display: none; }
.sg-body .lf-deck.is-ready .lf-card.is-flipped .lf-card__back { border-top: 0; animation: sg-wipe var(--dur-cut) var(--ease-cut) both; }
@keyframes sg-wipe { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 140% 0, 100% 100%, -40% 100%); } }
html.rm .sg-body .lf-card.is-flipped .lf-card__back { animation: none; }

/* Six/eight cases (articles 5 and 6) */
.sg-body .lf-cases { display: grid; gap: var(--s-5); max-width: none; margin-top: 1.6em; }
@container (min-width: 720px) { .sg-body .lf-cases { grid-template-columns: 1fr 1fr; } }
.sg-body .lf-case { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); background: var(--paper); border: var(--bw) solid var(--rule); clip-path: var(--clip-sheet); font-size: .9375rem; line-height: 1.55; }
.sg-body .lf-case > * { max-width: none; margin-top: 0; }
.sg-body .lf-case__media { position: relative; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; }
.sg-body .lf-case__media img { display: block; width: 100%; height: auto; border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-case__img--fixed { display: none !important; }
.sg-body .lf-case[data-state="fixed"] .lf-case__img--today { display: none !important; }
.sg-body .lf-case[data-state="fixed"] .lf-case__img--fixed { display: block !important; }
.sg-body .lf-case > .lf-case__img { display: block; width: calc(100% + 2 * var(--s-5)); max-width: none; height: auto; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-case__toggle { display: none; justify-self: start; }
.sg-body .lf-cases.is-ready .lf-case__toggle { display: inline-flex; }
.sg-body .lf-case__toggle button { min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--fg); font: 500 .75rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.sg-body .lf-case__kv { display: grid; gap: 0; margin: 0; border-top: var(--bw) solid var(--rule); }
.sg-body .lf-case__kv > div { display: grid; gap: var(--s-1); padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-case__kv dt { font: 500 .6875rem/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.sg-body .lf-case__kv dd { margin: 0; }
.sg-body .lf-case__kv ul { margin: 0; padding: 0; list-style: none; }
.sg-body .lf-case__kv li { position: relative; padding-left: 1.2em; }
.sg-body .lf-case__kv li::before { content: ""; position: absolute; left: 0; top: .78em; width: .6em; height: 1.5px; background: var(--fg); transform: rotate(-47deg); }
.sg-body .lf-case__kv q { font-family: var(--f-serif); font-style: italic; }
.sg-body .lf-case__kv small { display: block; margin-top: var(--s-1); font: 400 .75rem/1.45 var(--f-mono); color: var(--fg-2); }
.sg-body .lf-case__link a { font-family: var(--f-sans); font-weight: 600; color: var(--link); }
.sg-body .lf-filter { margin-top: 1.2em; }
.sg-body .lf-filter[hidden] { display: none; }
.sg-body .lf-case.is-hidden { display: none; }

/* Article 6: the chat, the two roles, the four scripts, the dates */
.sg-body .lf-chat { display: grid; gap: var(--s-2); max-width: 34rem; padding: var(--s-5); background: var(--ink); color: var(--paper); clip-path: var(--clip-sheet); font-family: var(--f-sans); font-size: .9375rem; }
.sg-body .lf-chat > * { margin: 0; }
.sg-body .lf-chat__label { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--paper-72); }
.sg-body .lf-chat__label + .lf-chat__msg { margin-top: 0; }
.sg-body .lf-chat__msg { justify-self: start; max-width: 92%; padding: var(--s-3) var(--s-4); background: var(--ink-3); border: var(--bw) solid var(--rule-dark); }
.sg-body .lf-chat__msg--old { text-decoration: line-through; text-decoration-color: var(--molten); text-decoration-thickness: 1.5px; color: var(--paper-72); }
.sg-body .lf-chat__msg--new { border-color: var(--cyan); }
.sg-body .lf-chat__label:nth-of-type(2) { margin-top: var(--s-3); }
.sg-body .lf-chat__ai { display: inline-block; margin-right: .4em; padding: 0 .4em; border: var(--bw) solid var(--cyan); color: var(--cyan); font: 600 .6875rem/1.6 var(--f-mono); }
.sg-body .lf-roles { display: grid; gap: var(--s-3); max-width: none; margin-top: 1.4em; }
.sg-body .lf-roles__col { padding: var(--s-5); border: var(--bw) solid var(--fg); }
.sg-body .lf-roles__col p { margin: 0; max-width: none; }
.sg-body .lf-roles__t { font: 700 var(--t-h4)/1.25 var(--f-sans) !important; margin-bottom: var(--s-2) !important; }
.sg-body .lf-roles__bridge { display: grid; place-items: center; padding: var(--s-2); font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); text-align: center; }
@container (min-width: 720px) {
	.sg-body .lf-roles { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
	.sg-body .lf-roles__bridge { position: relative; min-width: 8rem; }
	.sg-body .lf-roles__bridge::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--fg); transform: rotate(-47deg); opacity: .25; }
	.sg-body .lf-roles__bridge span { position: relative; background: var(--bg); padding: var(--s-1) var(--s-2); }
}
.sg-body .lf-scripts { display: grid; gap: var(--s-4); max-width: none; margin-top: 1.4em; }
@container (min-width: 720px) { .sg-body .lf-scripts { grid-template-columns: 1fr 1fr; } }
.sg-body .lf-script { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); background: var(--bg-2); border: var(--bw) solid var(--rule); clip-path: var(--clip-sheet); }
.sg-body .lf-script > * { margin: 0; max-width: none; }
.sg-body .lf-script__t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); font: 600 .9375rem/1.3 var(--f-sans); }
.sg-body .lf-script__body { font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.5; }
.sg-body .lf-copy { justify-self: start; display: none; min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); font: 600 .8125rem/1 var(--f-sans); clip-path: var(--clip-ui); cursor: pointer; }
.sg-body .lf-scripts.is-ready .lf-copy { display: inline-flex; align-items: center; }
.sg-body .lf-copy.is-done { background: var(--fg); color: var(--bg); }
.sg-body .lf-dates > li { display: grid; gap: var(--s-1) var(--s-4); padding-left: 0; }
@container (min-width: 640px) { .sg-body .lf-dates > li { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: baseline; } }
.sg-body .lf-mono { font-family: var(--f-mono); font-size: .8125rem; font-weight: 500; }
.sg-body .lf-when { justify-self: start; display: inline-block; padding: 0 .5em; border: var(--bw) solid var(--fg-2); font: 500 .6875rem/1.6 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.sg-body .lf-when--live { border-color: var(--sig); color: var(--sig); }
.sg-body .lf-law { font-size: .8125rem; }

/* ---- tools (insight-tool engine adds the behaviour; the sheet reads complete without it) ---- */
.sg-body .lf-tool {
	position: relative;
	max-width: none;
	margin: 2em 0;
	padding: var(--s-5) var(--s-5) var(--s-6);
	background: var(--paper);
	border: var(--bw) solid var(--fg);
	box-shadow: var(--shadow-print);
	clip-path: none;
	font-family: var(--f-sans);
	font-size: .9375rem;
	line-height: 1.5;
}
.sg-body .lf-tool > * { max-width: none; }
.sg-body .lf-tool > * + * { margin-top: var(--s-4); }
.sg-body .lf-tool__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; padding: var(--s-3) var(--s-5); background: var(--ink); color: var(--paper); font: 600 .8125rem/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.sg-body .lf-tool__head .nx-label { border-color: var(--paper-72); color: var(--paper-72); margin: 0; }
.sg-body .lf-tool__intro { color: var(--fg-2); }
.sg-body .lf-tool .lf-field { display: grid; gap: var(--s-1); }
.sg-body .lf-tool .lf-field > span { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .lf-tool input[type="text"], .sg-body .lf-tool input[type="number"] { width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-bottom: var(--bw-2) solid var(--fg); background: var(--bg-2); color: var(--fg); font: 500 1rem/1.2 var(--f-mono); border-radius: 0; }
.sg-body .lf-tool input:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
.sg-body .lf-tool small { font: 400 .75rem/1.45 var(--f-sans); color: var(--fg-2); }
.sg-body .lf-q { margin: 0; padding: var(--s-3) 0 0; border: 0; border-top: var(--bw) solid var(--rule); }
.sg-body .lf-q legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s-2); font-weight: 600; }
.sg-body .lf-opts { clear: both; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sg-body .lf-opts--col { flex-direction: column; }
.sg-body .lf-opt { position: relative; display: inline-flex; align-items: center; gap: .55em; min-height: 40px; padding: 0 14px 0 10px; border: var(--bw) solid color-mix(in srgb, var(--fg) 45%, transparent); cursor: pointer; font-size: .875rem; }
.sg-body .lf-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
.sg-body .lf-opt:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sg-body .lf-opt:has(input:checked) input { accent-color: var(--paper); }
.sg-body .lf-opt:has(input:focus-visible) { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
.sg-body .lf-opt--check { align-items: flex-start; padding-block: 10px; min-height: 44px; line-height: 1.45; }
.sg-body .lf-opt--check input { margin-top: 3px; }
.sg-body .lf-tool__grid { display: grid; gap: var(--s-5); }
@container (min-width: 720px) { .sg-body .lf-tool__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.sg-body .lf-tool__ins { display: grid; gap: var(--s-3); }
.sg-body .lf-tool__outs { display: grid; gap: 0; margin: 0; align-content: start; border-top: var(--bw-2) solid var(--fg); }
.sg-body .lf-tool__outs > div { display: grid; gap: 2px; padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); }
.sg-body .lf-tool__outs dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-body .lf-tool__outs dd { margin: 0; font: 600 1.375rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.sg-body .lf-tool__outs dd[data-out="payback"] { font: 500 .9375rem/1.4 var(--f-sans); }
.sg-body .lf-tool__result { padding: var(--s-4); background: var(--bg-2); border-left: 0; min-height: 3.2em; }
.sg-body .lf-tool__result > * { margin: 0; }
.sg-body .lf-tool__result > * + * { margin-top: var(--s-2); }
.sg-body .lf-tool__score { font: 600 1.375rem/1.2 var(--f-mono); }
.sg-body .lf-tool__score--text { font: 700 1.125rem/1.35 var(--f-sans); }
.sg-body .lf-tool__warn { padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--leak); color: var(--leak); font-size: .875rem; }
.sg-body .lf-tool__formula code { display: block; padding: var(--s-3); background: var(--bg-2); font-size: .75rem; line-height: 1.6; white-space: normal; }
.sg-body .lf-tool__note, .sg-body .lf-tool__privacy { font-size: .8125rem; color: var(--fg-2); }
.sg-body .lf-tool__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.sg-body .lf-tool__cta { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.sg-body .lf-tool__reset, .sg-body .lf-tool__go { min-height: 44px; padding: 0 16px; border: 0; font: 600 .875rem/1 var(--f-sans); clip-path: var(--clip-ui); cursor: pointer; }
.sg-body .lf-tool__reset { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.sg-body .lf-tool__go { background: var(--ink); color: var(--paper); }
.sg-body .lf-tool__nojs { color: var(--fg-2); font-size: .875rem; }
.js .sg-body .lf-tool__nojs { display: none; }
.sg-body .lf-tool__nojs ol { margin: var(--s-3) 0 0; padding-left: 1.4em; }
.sg-body .lf-tool__nojs li + li { margin-top: var(--s-2); }
.sg-body .lf-tool:not([data-engine-state="ready"]) :is(.lf-tool__reset, .lf-tool__go) { visibility: hidden; }
@media (max-width: 479px) {
	.sg-body .lf-tool { margin-inline: calc(-1 * var(--s-2)); padding-inline: var(--s-4); box-shadow: 6px 6px 0 var(--indigo); }
	.sg-body .lf-tool__head { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
}

/* ---- article footer: note + share ---------------------------------------------------------- */
.sg-foot { margin-top: var(--s-9); padding-top: var(--s-5); border-top: var(--bw) solid var(--rule); display: grid; gap: var(--s-5); }
.sg-foot__note { margin: 0; font: 400 .8125rem/1.55 var(--f-mono); color: var(--fg-2); max-width: 70ch; }
.sg-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.sg-share__label { margin: 0 var(--s-2) 0 0; font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sg-share__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 50%, transparent); font: 600 .8125rem/1 var(--f-sans); text-decoration: none; cursor: pointer; }
.sg-share__btn:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sg-share__btn[hidden] { display: none; }

/* ---- read next (Ink) ---------------------------------------------------------------------- */
.sg-next__grid { row-gap: var(--s-6); }
.sg-next__title { margin: var(--s-2) 0 0; font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--w-h2); max-width: 14ch; }
.sg-next__all { margin-top: var(--s-5); }
.sg-row .nx-index__title { font-size: var(--t-h4); }
@media (min-width: 1024px) {
	.sg-next__head { grid-column: 1 / span 4; }
	.sg-next__list { grid-column: 6 / -1; }
}

/* ---- print ------------------------------------------------------------------------------------ */
@media print {
	.sg-rail, .sg-next, .sg-share, .sg-zoom, .lf-tool__bar, .lf-card__flip { display: none !important; }
	.sg-body { grid-column: 1 / -1 !important; }
	.sg-body .lf-deck .lf-card__back { display: block !important; }
	.sg-body .lf-tool { box-shadow: none; }
	.sg-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; overflow-wrap: anywhere; }
}

/* Phones: the Molten action keeps a 44 px target but takes less of a 390 px screen, so the header
   CTA plus one primary action stay within the 5 % Molten quota (bible R2). */
@media (max-width: 479px) {
	.nx-main .nx-btn--primary { min-height: 44px; padding: .6em 16px; font-size: .875rem; }
}

.co-bit { white-space: nowrap; } /* meta strip: date · reading time · cluster, each on one line */

} /* end @layer pages */
