/* ─────────────────────────────────────────────────────────────────
 * argusONE theme — main stylesheet
 *
 * Aesthetic: editorial/dossier. Warm paper background, ink-deep type,
 * oxblood accent. Variable serifs (Instrument Serif display, Source Serif 4 body),
 * monospace for IDs, dates, and dossier metadata.
 *
 * No gradients. No glassmorphism. No drop shadows except very subtle
 * paper-shadow. The design speaks through typography and rules.
 * ────────────────────────────────────────────────────────────────*/

:root {
	/* Palette — Punchbowl/Information register: near-white, deep navy, bordo accent */
	--paper:       #fcfcfa;
	--paper-tint:  #f4f3ee;
	--paper-deep:  #e8e6dd;
	--ink:         #16223a;
	--ink-soft:    #34405a;
	--ink-mute:    #7a8094;
	--rule:        #d8d5cc;
	--rule-soft:   #eceae3;
	--accent:      #7a1f2e;
	--accent-hot:  #96243a;

	/* Type families */
	--serif-display: 'Instrument Serif', 'EB Garamond', 'Times New Roman', serif;
	--serif-body:    'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	--mono:          'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

	/* Fluid scale */
	--fs-mono:    0.78rem;
	--fs-small:   0.92rem;
	--fs-body:    1.06rem;
	--fs-lead:    1.22rem;
	--fs-h3:      clamp(1.18rem, 1rem + 0.6vw, 1.45rem);
	--fs-h2:      clamp(1.85rem, 1.4rem + 1.8vw, 3rem);
	--fs-hero:    clamp(2.6rem, 1.5rem + 5.5vw, 6.4rem);
	--fs-pull:    clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);

	/* Rhythm */
	--lh-tight:   1.05;
	--lh-display: 1.08;
	--lh-body:    1.55;
	--lh-prose:   1.62;

	/* Layout */
	--wrap-max:   1180px;
	--gutter:     clamp(1.25rem, 4vw, 3rem);
	--section-y:  clamp(4rem, 4rem + 4vw, 7.5rem);
}

/* ─────────────────────────────────────────────────────────── reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif-body);
	font-size: var(--fs-body);
	font-optical-sizing: auto;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Subtle paper grain — pure CSS, no images */
	background-image:
		radial-gradient(circle at 22% 18%, rgba(110, 96, 60, 0.04) 0, transparent 40%),
		radial-gradient(circle at 78% 82%, rgba(20, 24, 31, 0.03) 0, transparent 50%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

::selection { background: var(--ink); color: var(--paper); }

/* Skip link */
.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--ink); color: var(--paper); padding: .5rem 1rem;
	font-family: var(--mono); font-size: var(--fs-mono);
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; }

/* ─────────────────────────────────────────────────────────── wrap */

.wrap {
	width: 100%;
	max-width: var(--wrap-max);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

/* ─────────────────────────────────────────────────────────── header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}
.header-wrap {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
	padding-block: 1.1rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--ink);
	line-height: 1;
}
.brand:hover { color: var(--ink); }
.brand-mark {
	display: inline-flex;
	color: var(--accent);
	height: 1.15rem;
	width: 1.15rem;
}
.brand-mark svg {
	height: 100%;
	width: 100%;
	display: block;
}
.brand:hover .brand-mark { color: var(--accent-hot); }
.brand-name {
	font-family: var(--serif-display);
	font-weight: 500;
	letter-spacing: 0.02em;
	font-size: 1.55rem;
	color: var(--ink);
	line-height: 1;
}

.primary-nav-list {
	display: flex;
	gap: 2.2rem;
	list-style: none;
	margin: 0; padding: 0;
	justify-content: center;
}
.primary-nav-list a {
	font-family: var(--serif-display);
	font-size: .95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--ink);
	padding-block: .25rem;
	border-bottom: 1px solid transparent;
}
.primary-nav-list a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.login-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1rem;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s, transform .2s;
}
.login-btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
	transform: translateY(-1px);
}
.login-btn svg { transition: transform .2s; }
.login-btn:hover svg { transform: translateX(2px); }

@media (max-width: 760px) {
	.header-wrap { grid-template-columns: auto 1fr; gap: 1rem; }
	.primary-nav { display: none; }
}

/* ─────────────────────────────────────────────────────────── hero */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(4rem, 3rem + 6vw, 8rem);
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
	isolation: isolate;
}

/* Full-width northern-hemisphere globe behind hero content */
.hero-globe-bg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.hero-globe-bg canvas {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: block;
	/* Fallback: if d3 / topojson fail to load (e.g. blocked by browser
	 * shields), the canvas remains undrawn. Without a background it can
	 * render as a broken-image-like placeholder in some browsers. We tint
	 * it to paper so the failure is invisible — content still reads. */
	background: var(--paper);
}
/* Subtle vignette so text reads cleanly against the globe */
.hero-globe-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, var(--paper) 0%, rgba(240, 233, 218, 0.35) 28%, rgba(240, 233, 218, 0) 60%),
		linear-gradient(180deg, rgba(240, 233, 218, 0) 60%, var(--paper) 100%);
	pointer-events: none;
}

.hero-wrap {
	position: relative;
	z-index: 1;
}

.hero-content {
	max-width: 70rem;
	margin-top: clamp(3rem, 2rem + 5vw, 6rem);
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.hero-eyebrow {
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1.6rem;
	position: relative;
	padding-left: 2.4rem;
}
.hero-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.8rem;
	height: 1px;
	background: var(--accent);
}

.hero-lede-single {
	font-family: var(--serif-body);
	font-size: var(--fs-lead);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	max-width: 42ch;
	margin: clamp(1.6rem, 1rem + 1.5vw, 2.4rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: flex-start;
}

.dossier-strip {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: clamp(2rem, 2rem + 2vw, 3.2rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rule-soft);
}
.strip-mono {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.1em;
	color: var(--ink-mute);
	white-space: nowrap;
}
.strip-rule {
	height: 1px;
	background: var(--rule);
	flex: 1 1 1rem;
	min-width: .5rem;
}
@media (max-width: 540px) {
	.dossier-strip { flex-wrap: wrap; gap: .5rem 1rem; }
	.strip-rule { display: none; }
}

.hero-title {
	font-family: var(--serif-display);
	font-weight: 350;
	font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.6rem);
	line-height: 1.06;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--ink);
}
.hero-title .hero-brand {
	font-family: var(--serif-display);
	font-style: italic;
	font-weight: 400;
	color: var(--accent);
	letter-spacing: -0.04em;
}
.hero-title .hero-emphasis {
	font-style: italic;
	color: var(--accent);
	font-weight: 400;
}

/* ─────────────────────────────────────── highlighted keyword (intelligence) */

.kw {
	color: var(--accent);
	font-style: italic;
}

/* ─────────────────────────────────────────────────────────── buttons */

.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .85rem 1.4rem;
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: all .2s ease;
	cursor: pointer;
}
.btn-primary {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.btn-primary:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
	transform: translateY(-1px);
}
.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.btn-ghost:hover {
	background: var(--ink);
	color: var(--paper);
}

/* ─────────────────────────────────────────────────────────── sections */

.section {
	padding-block: var(--section-y);
	border-bottom: 1px solid var(--rule-soft);
	position: relative;
}
.section:last-of-type { border-bottom: none; }

.section-wrap {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(2rem, 2rem + 2vw, 4rem);
	align-items: start;
}
@media (max-width: 820px) {
	.section-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
}

.section-side {
	position: sticky;
	top: 90px;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	align-items: flex-start;
}
@media (max-width: 820px) {
	.section-side { position: static; flex-direction: row; align-items: baseline; gap: 1rem; }
}

.section-num {
	font-family: var(--serif-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(2.5rem, 1.5rem + 2vw, 3.6rem);
	color: var(--accent);
	line-height: 1;
}

.section-eyebrow {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.section-eyebrow.center {
	display: block;
	text-align: center;
	margin-bottom: 1.5rem;
}

.section-title {
	font-family: var(--serif-display);
	font-weight: 350;
	font-size: var(--fs-h2);
	line-height: var(--lh-display);
	letter-spacing: -0.02em;
	margin: 0 0 1.6rem 0;
	max-width: 22ch;
	color: var(--ink);
}

/* ─────────────────────────────────────────────────────────── prose */

.prose p {
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	margin: 0 0 1.1em 0;
	max-width: 62ch;
	font-feature-settings: "onum" on, "liga" on;
}
.prose p.lead {
	font-size: var(--fs-lead);
	color: var(--ink);
	max-width: 56ch;
}
.prose p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────── clients */

.client-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	margin-top: 2rem;
	border: 1px solid var(--rule);
}
@media (max-width: 920px) { .client-grid { grid-template-columns: 1fr; } }

.client-card {
	background: var(--paper);
	padding: clamp(1.4rem, 1rem + 1vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 260px;
	transition: background .25s;
	position: relative;
}
.client-card:hover { background: var(--paper-tint); }

.card-tag {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.1em;
	color: var(--accent);
	display: inline-block;
	width: 1.6rem; height: 1.6rem;
	border: 1px solid var(--accent);
	text-align: center;
	line-height: 1.55rem;
}

.card-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: 1.2;
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.card-body {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

/* ─────────────────────────────────────────────────────────── steps */

.steps {
	list-style: none;
	margin: 2rem 0 0 0;
	padding: 0;
	counter-reset: step;
	display: flex;
	flex-direction: column;
}

.step {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 2rem;
	padding: 2rem 0;
	border-top: 1px solid var(--rule-soft);
	align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--rule-soft); }

@media (max-width: 600px) {
	.step { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; }
}

.step-num {
	font-family: var(--mono);
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--accent);
	padding-top: .35rem;
	border-top: 2px solid var(--accent);
	display: inline-block;
	width: max-content;
}

.step-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	margin: 0 0 .55rem 0;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.step-text p {
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	margin: 0;
	max-width: 58ch;
}

/* ─────────────────────────────────────────────────── pull / quote */

.section-pull {
	background: var(--paper-tint);
	color: var(--ink);
	padding-block: clamp(4rem, 3rem + 4vw, 7rem);
	border-block: 1px solid var(--rule);
}
.section-pull .section-eyebrow { color: var(--ink-mute); }

.pull-wrap {
	max-width: 780px;
	text-align: center;
}

.pull-quote {
	margin: 0 0 2rem 0;
	font-family: var(--serif-display);
	font-weight: 300;
	font-size: var(--fs-pull);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--ink);
	position: relative;
}
.pull-quote p { margin: 0; }
.pull-quote em {
	color: var(--accent); /* manuscript-ochre, only here for emphasis */
	font-style: italic;
}
.pull-quote::before,
.pull-quote::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--ink);
	opacity: .35;
	margin: 1.6rem auto;
}

.pull-sub {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 56ch;
	margin: 0 auto;
}

/* ─────────────────────────────────────────────────── contact ────── */

.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 2rem;
}

/* ─────────────────────────────────────────────────────────── footer */

.site-footer {
	background: var(--paper);
	border-top: 1px solid var(--rule);
	padding-top: clamp(3rem, 2rem + 3vw, 5rem);
	margin-top: 0;
}

.footer-wrap {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: clamp(2rem, 2rem + 2vw, 3.5rem);
}
@media (max-width: 820px) {
	.footer-wrap { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 540px) {
	.footer-wrap { grid-template-columns: 1fr; }
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.footer-mark {
	font-family: var(--serif-display);
	font-weight: 500;
	letter-spacing: 0.18em;
	font-size: 1.05rem;
	color: var(--ink);
	margin-bottom: .25rem;
}
.footer-tag {
	font-family: var(--serif-body);
	font-style: italic;
	font-size: var(--fs-small);
	color: var(--ink-mute);
	margin: 0;
	max-width: 28ch;
}

.footer-label {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: .15rem;
}

.footer-link {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
	width: max-content;
	max-width: 100%;
	padding-bottom: 1px;
	transition: color .2s, border-color .2s;
}
.footer-link:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.footer-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.footer-strip {
	border-top: 1px solid var(--rule);
	padding-block: 1.1rem;
	background: var(--paper-tint);
}
.footer-strip-wrap {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.footer-strip span {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.08em;
	color: var(--ink-mute);
}
.footer-legal-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.65rem;
	align-items: center;
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--rule-soft);
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.06em;
}
.footer-legal-link {
	color: var(--ink-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color .2s, border-color .2s;
}
.footer-legal-link:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.footer-legal-sep {
	color: var(--rule);
	user-select: none;
}

/* ── Legal pages: template-content notice + prose meta + tables ──── */

.legal-notice {
	margin: 0 0 2rem;
	padding: 0.9rem 1.1rem;
	background: var(--paper-tint);
	border-left: 3px solid var(--accent);
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-soft);
}
.legal-notice strong {
	color: var(--accent);
	font-weight: 600;
}
.legal-meta {
	margin-top: 2.5rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: var(--fs-mono);
	color: var(--ink-mute);
	letter-spacing: 0.04em;
}
.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4rem 0;
	font-family: var(--serif-body);
	font-size: var(--fs-small);
}
.prose table th,
.prose table td {
	text-align: left;
	padding: 0.65rem 0.85rem;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}
.prose table th {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-mute);
	border-bottom: 1px solid var(--ink-soft);
}
.prose table code {
	font-family: var(--mono);
	font-size: 0.86em;
	background: var(--paper-tint);
	padding: 0.08em 0.35em;
	border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────── motion */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity .9s ease, transform .9s ease;
	}
	.reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Safety net: if JS doesn't run at all (blocked, error, slow connection),
 * the .reveal class is never added, so the rule above never applies and
 * content stays visible. The animation is purely additive — opt-in via JS. */
.no-js .reveal,
html:not(.js) .reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ─────────────────────────────────────────────────────────── focus */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.login-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════
 * v2 ADDITIONS — Henry widget, 5-layer grid, 6-audience grid,
 * examples list, benefits grid, centered headings
 * ═══════════════════════════════════════════════════════════════════*/

/* ─── centered titles for the demo section ───────────────────────── */

.section-title.center,
.section-title.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.henry-intro {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 2rem + 2vw, 3.5rem) auto;
	text-align: center;
}

.henry-sub {
	font-family: var(--serif-body);
	font-size: var(--fs-lead);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	max-width: 56ch;
	margin: 1rem auto 0 auto;
	font-style: italic;
}

.prose-lead {
	max-width: 60ch;
	margin-bottom: 2rem;
}

/* ─── HENRY DEMO WIDGET ──────────────────────────────────────────── */

.section-henry {
	background:
		linear-gradient(0deg, var(--paper) 0%, var(--paper-tint) 100%);
	padding-block: clamp(4rem, 3rem + 4vw, 6.5rem);
	border-bottom: 1px solid var(--rule);
}

.henry-widget {
	max-width: 880px;
	margin: 0 auto;
	background: var(--paper);
	border: 1px solid var(--ink);
	box-shadow: 0 1px 0 var(--rule), 0 24px 60px -32px rgba(20, 24, 31, 0.18);
	position: relative;
}

/* Subtle "stamped" mark in the corner */
.henry-widget::before {
	content: "AUTH. PUBL. № 001";
	position: absolute;
	top: -10px; right: 1.5rem;
	background: var(--paper-tint);
	color: var(--accent);
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	padding: 2px 8px;
	border: 1px solid var(--accent);
	transform: rotate(0.5deg);
}

.widget-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--rule);
	background: var(--paper-tint);
}

.widget-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.widget-status {
	width: 8px; height: 8px;
	background: #2c7a4e;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(44, 122, 78, 0.35);
	animation: widgetPulse 2.4s infinite;
}
@keyframes widgetPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(44, 122, 78, 0.35); }
	50%      { box-shadow: 0 0 0 6px rgba(44, 122, 78, 0); }
}
.widget-label,
.widget-meta {
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	text-transform: uppercase;
}

.widget-form {
	padding: 1.4rem 1.5rem 1rem 1.5rem;
}
.widget-q-label {
	display: block;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 0.4rem;
}
.widget-input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--ink);
	font-family: var(--serif-display);
	font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.4rem);
	font-weight: 350;
	font-style: italic;
	color: var(--ink);
	padding: 0.5rem 0;
	resize: none;
	line-height: 1.45;
}
.widget-input:focus {
	outline: none;
	border-bottom-color: var(--accent);
}
.widget-input::placeholder {
	color: var(--ink-mute);
	opacity: 0.6;
}

.widget-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}
.widget-hint {
	font-family: var(--serif-body);
	font-size: 0.85rem;
	color: var(--ink-mute);
	font-style: italic;
}
.widget-hint kbd {
	font-family: var(--mono);
	font-size: 0.72rem;
	background: var(--paper-tint);
	border: 1px solid var(--rule);
	padding: 1px 6px;
	border-radius: 2px;
	margin-inline: 1px;
}
.widget-submit {
	padding-block: 0.65rem;
}

/* ─── widget response ────────────────────────────────────────────── */

.widget-response {
	border-top: 1px solid var(--rule-soft);
	padding: 1.5rem;
	background:
		repeating-linear-gradient(
			to bottom,
			var(--paper) 0,
			var(--paper) 27px,
			var(--paper-tint) 27px,
			var(--paper-tint) 28px
		);
}

.response-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--rule-soft);
}
.response-id, .response-time {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	text-transform: uppercase;
}

.layer {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1.2rem;
	padding: 0.85rem 0;
	border-bottom: 1px dashed var(--rule-soft);
}
.layer:last-of-type { border-bottom: none; padding-bottom: 0.4rem; }

@media (max-width: 700px) {
	.layer { grid-template-columns: 1fr; gap: 0.35rem; padding: 0.9rem 0; }
}

.layer-name {
	font-family: var(--serif-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1rem;
	color: var(--accent);
	letter-spacing: 0.01em;
	white-space: nowrap;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.lock-tag {
	font-family: var(--mono);
	font-style: normal;
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	background: var(--ink);
	color: var(--paper);
	padding: 1px 5px;
	border-radius: 1px;
}

.layer-body p {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--ink-soft);
	font-feature-settings: "onum" on;
}

.layer-locked .layer-name { color: var(--ink-mute); }
.layer-locked .layer-body {
	background: var(--paper-deep);
	padding: 0.7rem 0.9rem;
	border-left: 2px solid var(--accent);
}
.layer-locked .locked-msg {
	font-style: italic;
	color: var(--ink-soft);
}
.layer-locked .locked-msg a {
	font-style: normal;
	color: var(--accent);
	font-weight: 500;
	text-decoration-color: var(--accent);
	margin-left: 0.3rem;
}

.response-sources {
	margin-top: 1rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--rule-soft);
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: baseline;
}
.sources-label {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
.sources-list {
	font-family: var(--serif-body);
	font-size: 0.85rem;
	color: var(--ink-soft);
	font-style: italic;
}

.widget-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1.25rem;
	border-top: 1px solid var(--rule);
	background: var(--ink);
	color: var(--paper);
	gap: 1rem;
	flex-wrap: wrap;
}
.widget-foot span,
.widget-foot a {
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.widget-foot a {
	color: #d9a05c;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.widget-foot a:hover { color: var(--paper); }

/* ─── 5-LAYER GRID ───────────────────────────────────────────────── */

.layers-grid {
	list-style: none;
	margin: 2rem 0 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
@media (max-width: 920px) { .layers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .layers-grid { grid-template-columns: 1fr; } }

.layer-card {
	background: var(--paper);
	padding: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-height: 240px;
	position: relative;
	transition: background 0.25s;
}
.layer-card:hover { background: var(--paper-tint); }

.layer-card-self {
	background: var(--paper-tint);
	border-left: 2px solid var(--accent);
}
.layer-card-self:hover { background: var(--paper-deep); }

.layer-roman {
	font-family: var(--serif-display);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--accent);
	font-weight: 350;
	margin-bottom: 0.4rem;
	line-height: 1;
}

.layer-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.self-tag {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	background: var(--ink);
	color: var(--paper);
	padding: 2px 6px;
}

.layer-card p {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

/* ─── AUDIENCE GRID (6 cards) ────────────────────────────────────── */

.audience-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	margin-top: 2rem;
	border: 1px solid var(--rule);
}
@media (max-width: 920px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .audience-grid { grid-template-columns: 1fr; } }

.audience {
	background: var(--paper);
	padding: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-height: 220px;
	transition: background 0.25s;
}
.audience:hover { background: var(--paper-tint); }

.audience-tag {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.1em;
	color: var(--accent);
	width: 1.6rem; height: 1.6rem;
	border: 1px solid var(--accent);
	text-align: center;
	line-height: 1.55rem;
}
.audience h3 {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--ink);
}
.audience p {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

/* ─── EXAMPLES LIST ──────────────────────────────────────────────── */

.example-list {
	list-style: none;
	margin: 2rem 0 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2.5rem;
}
@media (max-width: 760px) { .example-list { grid-template-columns: 1fr; gap: 1.5rem; } }

.example {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-top: 1rem;
	border-top: 2px solid var(--accent);
}

.example-tag {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.example p {
	font-family: var(--serif-display);
	font-style: italic;
	font-size: 1.18rem;
	line-height: 1.4;
	color: var(--ink);
	margin: 0;
	font-weight: 350;
	letter-spacing: -0.005em;
}

/* ─── BENEFITS GRID (subscription) ───────────────────────────────── */

.benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 2rem;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
@media (max-width: 920px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .benefits { grid-template-columns: 1fr; } }

.benefit {
	padding: 1.6rem 1.4rem;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-height: 200px;
}

.benefit-num {
	font-family: var(--mono);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: var(--accent);
	border-top: 2px solid var(--accent);
	padding-top: 0.35rem;
	width: max-content;
}
.benefit h3 {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: 1.15rem;
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.benefit p {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0;
}

/* ─── hero tag (small italic line) ───────────────────────────────── */

.hero-tag {
	margin-top: 1rem !important;
	font-family: var(--serif-display) !important;
	font-style: italic;
	font-size: 1rem !important;
	color: var(--accent);
	max-width: none !important;
	border-top: 1px solid var(--rule);
	padding-top: 1rem;
}
.hero-lede strong {
	font-weight: 500;
	color: var(--ink);
	font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────
 *  v2 — additional components: layers, audience, demo, deliverables, FAQ
 * ────────────────────────────────────────────────────────────────*/

.hero-lede 
.hero-axis {
	font-family: var(--serif-body);
	font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.06rem);
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 1.1em;
	max-width: 38em;
}

.hero-sub {
	font-family: var(--serif-display);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--accent);
	margin-top: .8rem;
	max-width: 38ch;
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────── 5 LAYERS ── */

.layers {
	list-style: none;
	margin: 2.5rem 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule-soft);
}

.layer {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 2rem;
	padding: 2rem 0;
	border-bottom: 1px solid var(--rule-soft);
	align-items: start;
	position: relative;
}
@media (max-width: 700px) {
	.layer { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; }
}

.layer-meta {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	align-items: flex-start;
}
@media (max-width: 700px) {
	.layer-meta { flex-direction: row; align-items: baseline; gap: .9rem; }
}

.layer-num {
	font-family: var(--mono);
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--accent);
	padding-top: .3rem;
	border-top: 2px solid var(--accent);
	width: max-content;
}

.layer-tag {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
	padding: .25rem .5rem;
	border: 1px solid var(--rule);
	width: max-content;
	background: var(--paper-tint);
}
.layer-tag-private {
	border-color: var(--accent);
	color: var(--accent);
	background: transparent;
}

.layer-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	margin: 0 0 .5rem 0;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.layer-text p {
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	margin: 0;
	max-width: 60ch;
}

/* ─────────────────────────────────────────────────── AUDIENCE ─── */

.audience-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-top: 2rem;
	border: 1px solid var(--rule);
	background: var(--rule);
	gap: 1px;
}
@media (max-width: 820px) { .audience-cols { grid-template-columns: 1fr; } }

.audience-col {
	background: var(--paper);
	padding: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.audience-head {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.audience-letter {
	font-family: var(--serif-display);
	font-style: italic;
	font-weight: 400;
	font-size: 2.2rem;
	color: var(--accent);
	line-height: 1;
	width: 2.4rem;
	text-align: center;
}
.audience-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.audience-desc {
	font-family: var(--serif-body);
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	margin: 0;
}

.audience-questions {
	margin-top: .5rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rule-soft);
}
.qbox-label {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: .8rem;
}
.qbox {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.qbox li {
	font-family: var(--serif-body);
	font-style: italic;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--ink);
	padding-left: 1rem;
	position: relative;
}
.qbox li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-style: normal;
}

.audience-foot {
	margin-top: 2rem;
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.7;
	color: var(--ink-soft);
	padding: 1.2rem 1.5rem;
	background: var(--paper-tint);
	border-left: 3px solid var(--accent);
}
.audience-foot em {
	font-style: italic;
	color: var(--ink);
	font-weight: 500;
}

/* ─────────────────────────────────────────────────────── DEMO ── */

.section-demo .section-body { max-width: none; }

.kissinger-demo {
	margin-top: 2rem;
}

.kdemo-frame {
	border: 1px solid var(--ink);
	background: var(--paper-tint);
	padding: 0;
}

.kdemo-strip {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .7rem 1rem;
	background: var(--ink);
	color: var(--paper);
	border-bottom: 1px solid var(--ink);
}
.kdemo-led {
	width: 8px; height: 8px;
	background: #d9a05c;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(217, 160, 92, 0.18);
	animation: kdemo-blink 2s ease-in-out infinite;
}
@keyframes kdemo-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}
.kdemo-strip-label,
.kdemo-strip-meta {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
	color: var(--paper);
	white-space: nowrap;
}
.kdemo-strip-meta { color: var(--paper-deep); margin-left: auto; }
.kdemo-strip-rule {
	flex: 1 1 1rem;
	height: 1px;
	background: rgba(240, 233, 218, 0.18);
	min-width: .5rem;
}
@media (max-width: 540px) {
	.kdemo-strip-meta { display: none; }
}

.kdemo-form {
	padding: 1.5rem;
}
.kdemo-form textarea {
	width: 100%;
	border: 1px solid var(--rule);
	background: var(--paper);
	padding: 1rem;
	font-family: var(--serif-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--ink);
	resize: vertical;
	min-height: 90px;
	transition: border-color .2s;
}
.kdemo-form textarea::placeholder {
	color: var(--ink-mute);
	font-style: italic;
}
.kdemo-form textarea:focus {
	outline: none;
	border-color: var(--ink);
}

.kdemo-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.kdemo-quota {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.08em;
}
.kdemo-quota-label {
	color: var(--ink-mute);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.kdemo-quota-num {
	color: var(--accent);
	font-size: 1rem;
	font-weight: 500;
}
.kdemo-quota.exhausted .kdemo-quota-num { color: var(--ink-mute); }

.kdemo-submit:disabled {
	opacity: .55;
	cursor: not-allowed;
}
.kdemo-submit.is-loading .kdemo-submit-text::after {
	content: "...";
	display: inline-block;
	margin-left: 4px;
	animation: kdemo-dots 1.4s steps(4, end) infinite;
}
@keyframes kdemo-dots {
	0%, 20% { content: "."; }
	40% { content: ".."; }
	60%, 100% { content: "..."; }
}

.kdemo-status {
	padding: 0 1.5rem;
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.08em;
	color: var(--accent);
	min-height: 0;
}
.kdemo-status:not(:empty) {
	padding-block: .8rem;
	border-top: 1px dashed var(--rule);
}
.kdemo-status.is-error { color: var(--accent); font-weight: 500; }

.kdemo-output {
	padding: 0 1.5rem 1.5rem;
	font-family: var(--serif-body);
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--ink);
	word-wrap: break-word;
}
.kdemo-output:not(:empty) {
	border-top: 1px solid var(--rule);
	padding-top: 1.5rem;
	margin-top: .5rem;
}
.kdemo-output p { margin: 0 0 1em; }
.kdemo-output p:last-child { margin-bottom: 0; }
.kdemo-output hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 1.4em 0;
}
.kdemo-output strong { font-weight: 600; }
.kdemo-output em { font-style: italic; }

.kdemo-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin-top: 1.2rem;
}
.kdemo-suggestions-label {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-right: .25rem;
}
.kdemo-chip {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	font-style: italic;
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--ink);
	padding: .35rem .8rem;
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}
.kdemo-chip:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--paper);
}

/* ─────────────────────────────────────────────── DELIVERABLES ── */

.deliverables {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	margin-top: 2rem;
}
@media (max-width: 920px) { .deliverables { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .deliverables { grid-template-columns: 1fr; } }

.deliv {
	background: var(--paper);
	padding: clamp(1.4rem, 1rem + 1vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .8rem;
	transition: background .25s;
}
.deliv:hover { background: var(--paper-tint); }

.deliv-num {
	font-family: var(--serif-display);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--accent);
	line-height: 1;
}
.deliv-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: 1.2rem;
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.deliv p {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

/* ─────────────────────────────────────────────────────────── FAQ ── */

.faq {
	margin: 2rem 0 0 0;
	display: flex;
	flex-direction: column;
}

.faq-item {
	padding: 1.6rem 0;
	border-top: 1px solid var(--rule-soft);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule-soft); }

.faq-item dt {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	color: var(--ink);
	margin-bottom: .5rem;
	letter-spacing: -0.01em;
}
.faq-item dd {
	margin: 0;
	font-family: var(--serif-body);
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	max-width: 64ch;
}

/* ════════════════════════════════════════════════════════════════════
 * v3 — AIpolitik wordmark with manuscript-correction treatment
 * "real" struck through, "AI" italic oxblood overwriting it,
 * "politik" continues on the baseline. Reads as "AIpolitik."
 * ═══════════════════════════════════════════════════════════════════*/

.aipolitik {
	display: inline-block;
	position: relative;
	font-style: normal;
	white-space: nowrap;
	font-feature-settings: "liga" on;
}

.ap-edit {
	position: relative;
	display: inline-block;
}

.ap-strike {
	text-decoration: line-through;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 0.045em;
	text-decoration-skip-ink: none;
	color: rgba(20, 24, 31, 0.45);
	font-style: normal;
	font-weight: inherit;
}

.ap-overwrite {
	position: absolute;
	left: 50%;
	bottom: 78%;          /* sits just above the struck word */
	transform: translateX(-50%);
	font-style: italic;
	font-weight: 400;
	font-size: 0.42em;    /* manuscript correction is smaller than the base */
	letter-spacing: 0.01em;
	color: var(--accent);
	font-family: var(--serif-display);
	white-space: nowrap;
	line-height: 1;
}

/* Tiny caret ^ between AI and real, to mimic editor's insertion mark */
.ap-overwrite::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: -0.45em;
	width: 0;
	height: 0;
	border-left: 0.18em solid transparent;
	border-right: 0.18em solid transparent;
	border-top: 0.22em solid var(--accent);
	transform: translateX(-50%);
	opacity: 0.85;
}

.ap-tail {
	font-style: inherit;
	font-weight: inherit;
}

/* Inverted version for use on dark backgrounds (footer signature) */
.aipolitik--inverse .ap-strike {
	color: rgba(240, 233, 218, 0.45);
	text-decoration-color: #d9a05c;
}
.aipolitik--inverse .ap-overwrite { color: #d9a05c; }
.aipolitik--inverse .ap-overwrite::after { border-top-color: #d9a05c; }

/* Hero-sized treatment — used inside .hero-title */
.hero-title .aipolitik {
	letter-spacing: -0.025em;
}

/* ─── hero tagline (italic Calcutta/Cotroceni line below AIpolitik) ── */

.hero-tagline {
	margin: 0.5rem 0 0 0;
	font-family: var(--serif-display);
	font-style: italic;
	font-weight: 350;
	font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.45rem);
	color: var(--ink-mute);
	letter-spacing: -0.005em;
	line-height: 1.3;
	max-width: 36ch;
	padding-left: 0.05em;
}
.hero-tagline em {
	font-style: italic;
	color: var(--accent);
}

/* When the hero h1 contains AIpolitik, reduce the line-height since the
   editing treatment needs vertical breathing room above the strikethrough. */
.hero-title:has(.aipolitik) {
	line-height: 1.15;
	padding-top: 0.4em;     /* room for AI overwrite above */
}

/* ─────────────────────────────────────────── LAYER DETAIL (social inset) */

.layer-detail {
	margin-top: 2.5rem;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.6rem);
	background: var(--paper-tint);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	position: relative;
}

.layer-detail-strip {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed var(--rule);
}
.layer-detail-tag {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	color: var(--accent);
	text-transform: uppercase;
}
.layer-detail-meta {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	text-transform: uppercase;
}
.layer-detail-rule {
	flex: 1 1 1rem;
	height: 1px;
	background: var(--rule);
	min-width: .5rem;
}

.layer-detail-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 1rem 0;
	max-width: 32ch;
}

.layer-detail-lede {
	font-family: var(--serif-body);
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--ink-soft);
	margin: 0 0 1.8rem 0;
	max-width: 64ch;
}

.layer-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.2rem;
	margin-top: 1.5rem;
}
@media (max-width: 700px) {
	.layer-detail-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

.ldg-label {
	font-family: var(--mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: .8rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--rule-soft);
}

.ldg-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.ldg-list li {
	font-family: var(--serif-body);
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--ink);
	padding-left: 1rem;
	position: relative;
}
.ldg-list li::before {
	content: "·";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	top: 0;
}

.layer-detail-foot {
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px dashed var(--rule);
	font-family: var(--serif-body);
	font-style: italic;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 64ch;
}





/* ─────────────────────────────────────────────────────────────────
 *  v6 — CADRANUL MAESTRU
 *  A unified instrument: world map (azimuthal-equidistant centered
 *  on București) with the analog watch hands sharing the same center.
 *  The 5 analytical layers are inscribed on the rim arcs.
 * ────────────────────────────────────────────────────────────────*/

/* Hero grid (text left, dial right). Same proportions on desktop. */
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
	margin-top: clamp(1.5rem, 1rem + 1vw, 2.2rem);
}
@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero-text { min-width: 0; }

/* ─── Chronoscope wrapper ────────────────────────────────────────── */
.chrono {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	min-width: 0;
}

.chrono-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	max-width: 540px;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.chrono-eyebrow-rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
}
.chrono-eyebrow-text { white-space: nowrap; }

.chrono-stage {
	position: relative;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 1 / 1;
}
.chrono-map,
.chrono-face {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.chrono-face { pointer-events: none; }
.chrono-map  { z-index: 1; }
.chrono-face { z-index: 2; }

/* ─── Outer guides ───────────────────────────────────────────────── */
.chrono-face .ring-outer {
	fill: none;
	stroke: var(--rule);
	stroke-width: 0.6;
}

/* The 5 layer inscriptions on the outermost rim. */
.chrono-face .layer-arc {
	font-family: var(--mono);
	font-size: 8.6px;
	fill: var(--ink);
	letter-spacing: 0.30em;
}

/* 24-hour GMT bezel ring */
.chrono-face .ring-bezel {
	fill: none;
	stroke: var(--ink-soft);
	stroke-width: 0.5;
}
.chrono-face .bz-tick-major { stroke: var(--ink); stroke-width: 0.85; }
.chrono-face .bz-tick-minor { stroke: var(--ink-mute); stroke-width: 0.5; }
.chrono-face .bezel-24h-num {
	font-family: var(--mono);
	font-size: 9.4px;
	fill: var(--ink);
	letter-spacing: 0.05em;
	dominant-baseline: middle;
}

/* 12-hour Roman face inner ring */
.chrono-face .ring-12h {
	fill: none;
	stroke: var(--ink-soft);
	stroke-width: 0.4;
}
.chrono-face .h12-tick-major { stroke: var(--ink); stroke-width: 1.0; }
.chrono-face .h12-tick-minor { stroke: var(--ink-mute); stroke-width: 0.4; }
.chrono-face .ring-12-num {
	font-family: var(--serif-display);
	font-size: 14px;
	fill: var(--ink);
	font-style: italic;
	dominant-baseline: middle;
}

/* Map frame */
.chrono-face .map-frame {
	fill: none;
	stroke: var(--ink);
	stroke-width: 0.6;
}

/* 5 layer pips on the inner rim seams */
.chrono-face .pip-dot {
	fill: var(--accent);
	stroke: var(--paper);
	stroke-width: 0.8;
}

/* Capital labels on the map */
.chrono-face .cap-dot {
	fill: var(--accent);
}
.chrono-face .cap-label {
	font-family: var(--mono);
	font-size: 5.8px;
	fill: var(--ink);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Brand inscription */
.chrono-face .chrono-brand-text {
	font-family: var(--mono);
	font-size: 6.4px;
	fill: var(--ink-mute);
	letter-spacing: 0.42em;
}

/* ─── Watch hands ────────────────────────────────────────────────── */
.chrono-face .hand-hour {
	stroke: var(--ink);
	stroke-width: 4;
	stroke-linecap: round;
}
.chrono-face .hand-min {
	stroke: var(--ink);
	stroke-width: 2;
	stroke-linecap: round;
}
.chrono-face .hand-sec {
	stroke: var(--ink-soft);
	stroke-width: 0.8;
	stroke-linecap: round;
	opacity: 0.7;
}

/* GMT hand — oxblood arrow, longest */
.chrono-face .gmt-shaft { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.chrono-face .gmt-tail  { stroke: var(--accent); stroke-width: 1.6; opacity: 0.5; stroke-linecap: round; }
.chrono-face .gmt-arrow { fill:   var(--accent); }

/* Hub at center (București) */
.chrono-face .hub-outer { fill: var(--ink); }
.chrono-face .hub-inner { fill: var(--paper); }

/* Tiny crosshairs around the hub */
.chrono-face .buc-cross {
	stroke: var(--ink);
	stroke-width: 0.8;
}

/* Legend below the dial */
.chrono-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.4rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
	max-width: 540px;
}
.chrono-legend .lg em {
	font-style: normal;
	font-weight: 600;
	color: var(--ink);
	margin-right: 0.4rem;
}
.chrono-legend .lg:nth-child(2) em { color: var(--accent); }
.chrono-legend .lg:nth-child(3) em { color: #d9a05c; font-style: normal; }

/* Mobile fallback — keep it readable */
@media (max-width: 720px) {
	.chrono-stage { max-width: 360px; }
	.chrono-eyebrow { font-size: 0.55rem; letter-spacing: 0.18em; }
	.chrono-legend { font-size: 0.55rem; gap: 0.4rem 1rem; }
}

/* ─────────────────────────────────────────────────────────────────
 *  v5 — Dark instrument hero (D3 globe + analog clock overlay)
 *  Re-applied after intermediate state was lost.
 * ────────────────────────────────────────────────────────────────*/

.hero-dark {
	position: relative;
	background: radial-gradient(ellipse at 65% 50%, #0c1623 0%, #060c14 60%, #03070d 100%);
	color: var(--paper);
	padding-block: 0;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid #1a2638;
}
.hero-dark .hero-wrap {
	position: relative;
	z-index: 2;
	padding-top: 1.5rem;
	padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
	min-height: clamp(560px, 80vh, 840px);
}

.hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-vignette {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(3,7,13,0.85) 0%, rgba(3,7,13,0.6) 30%, rgba(3,7,13,0.25) 55%, rgba(3,7,13,0) 75%),
		radial-gradient(ellipse at 30% 50%, rgba(3,7,13,0.4) 0%, rgba(3,7,13,0) 60%);
	pointer-events: none;
}
.hero-stars { display: none; }

.hero-dark .dossier-strip-on-dark .strip-mono {
	color: rgba(240, 233, 218, 0.6);
}
.hero-dark .dossier-strip-on-dark .strip-rule {
	background: linear-gradient(90deg, rgba(240,233,218,0) 0%, rgba(240,233,218,0.18) 50%, rgba(240,233,218,0) 100%);
}
.hero-dark .dossier-strip-on-dark { border-bottom-color: rgba(240,233,218,0.18); }

.hero-dark .hero-title { color: var(--paper); }
.hero-dark .hero-title em { color: #d9a05c; font-style: italic; }
.hero-dark .hero-lede p { color: rgba(240, 233, 218, 0.78); }
.hero-dark .hero-sub { color: #d9a05c; }

.btn-on-dark.btn-primary {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
.btn-on-dark.btn-primary:hover {
	background: #d9a05c;
	border-color: #d9a05c;
	color: var(--ink);
}
.btn-on-dark.btn-ghost {
	background: transparent;
	color: var(--paper);
	border-color: rgba(240, 233, 218, 0.45);
}
.btn-on-dark.btn-ghost:hover {
	border-color: #d9a05c;
	color: #d9a05c;
}

.hero-dark .hero-rule {
	background: linear-gradient(90deg, rgba(240,233,218,0) 0%, rgba(217,160,92,0.45) 50%, rgba(240,233,218,0) 100%);
}

.hero-grid-dark {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
	margin-top: clamp(1.5rem, 1rem + 1vw, 2.2rem);
	position: relative;
}
@media (max-width: 960px) { .hero-grid-dark { grid-template-columns: 1fr; } }

.hero-instrument {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: clamp(320px, 50vh, 520px);
	pointer-events: none;
}
.hero-instrument-corners .corner {
	position: absolute;
	width: 16px; height: 16px;
	border: 1px solid rgba(217, 160, 92, 0.55);
}
.hero-instrument-corners .corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.hero-instrument-corners .corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.hero-instrument-corners .corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.hero-instrument-corners .corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.hero-instrument-coords {
	position: absolute;
	top: -22px; left: 0;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	color: rgba(217, 160, 92, 0.72);
	text-transform: uppercase;
}

.hero-clock-overlay {
	position: absolute;
	right: clamp(-1rem, -2vw, 0rem);
	bottom: clamp(0.5rem, 2vw, 2rem);
	width: clamp(140px, 18vw, 200px);
	z-index: 3;
	pointer-events: none;
}
@media (max-width: 960px) {
	.hero-clock-overlay {
		right: 50%;
		transform: translateX(50%);
		bottom: 1rem;
	}
}

/* Analog clock SVG ↓ — dark-mode palette since it sits over the dark instrument */
.hero-clock-overlay .hero-clock {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: visible;
	filter: drop-shadow(0 6px 24px rgba(3, 6, 13, 0.65));
}
.hero-clock-overlay .hero-clock .kc-outer {
	fill: #0a1018; stroke: rgba(217, 160, 92, 0.5); stroke-width: 0.5;
}
.hero-clock-overlay .hero-clock .kc-face {
	fill: #0d1622; stroke: rgba(240, 233, 218, 0.18); stroke-width: 0.5;
}
.hero-clock-overlay .hero-clock .kc-bezel-tick { stroke: rgba(217, 160, 92, 0.55); stroke-width: 0.45; }
.hero-clock-overlay .hero-clock .kc-bezel-num  {
	font-family: var(--mono);
	font-size: 6.2px;
	fill: rgba(217, 160, 92, 0.85);
	letter-spacing: 0.04em;
	dominant-baseline: middle;
}
.hero-clock-overlay .hero-clock .kc-tick-min   { stroke: rgba(240, 233, 218, 0.35); stroke-width: 0.35; }
.hero-clock-overlay .hero-clock .kc-tick-hour  { stroke: rgba(240, 233, 218, 0.85); stroke-width: 1.0; }
.hero-clock-overlay .hero-clock .kc-hour-num   {
	font-family: var(--serif-display);
	font-size: 9px;
	fill: rgba(240, 233, 218, 0.95);
	font-style: italic;
	dominant-baseline: middle;
}
.hero-clock-overlay .hero-clock .kc-brand {
	font-family: var(--mono); font-size: 4.6px;
	fill: rgba(217, 160, 92, 0.8); letter-spacing: 0.3em;
	dominant-baseline: middle;
}
.hero-clock-overlay .hero-clock .kc-sub {
	font-family: var(--mono); font-size: 3.6px;
	fill: rgba(240, 233, 218, 0.45); letter-spacing: 0.32em;
	dominant-baseline: middle;
}
.hero-clock-overlay .hero-clock .kc-hour-hand  { stroke: rgba(240, 233, 218, 0.95); stroke-width: 3.4; stroke-linecap: round; }
.hero-clock-overlay .hero-clock .kc-min-hand   { stroke: rgba(240, 233, 218, 0.95); stroke-width: 1.6; stroke-linecap: round; }
.hero-clock-overlay .hero-clock .kc-sec-hand   { stroke: rgba(217, 160, 92, 0.65); stroke-width: 0.6; stroke-linecap: round; opacity: 0.85; }
.hero-clock-overlay .hero-clock .kc-gmt-shaft  { stroke: var(--accent); stroke-width: 1.0; }
.hero-clock-overlay .hero-clock .kc-gmt-tail   { stroke: var(--accent); stroke-width: 1.0; opacity: .55; }
.hero-clock-overlay .hero-clock .kc-gmt-arrow  { fill:   var(--accent); stroke: none; }
.hero-clock-overlay .hero-clock .kc-hub-outer  { fill: rgba(240, 233, 218, 0.92); }
.hero-clock-overlay .hero-clock .kc-hub-inner  { fill: #0a1018; }

/* Mobile rules for the dark hero */
@media (max-width: 720px) {
	.hero-dark .hero-wrap { min-height: auto; padding-bottom: 4rem; }
	.hero-grid-dark { gap: 1.2rem; }
	.hero-instrument { display: none; }
	.hero-clock-overlay {
		position: relative;
		right: auto; bottom: auto; transform: none;
		width: 160px;
		margin: 1rem auto 0 auto;
	}
	.hero-dark .hero-vignette {
		background: linear-gradient(180deg, rgba(3,7,13,0.85) 0%, rgba(3,7,13,0.45) 35%, rgba(3,7,13,0.6) 70%, rgba(3,7,13,0.95) 100%);
	}
	.hero-dark .hero-meta { display: flex; flex-direction: column; gap: 1.2rem; }
	.hero-dark .hero-cta { gap: .6rem; }
}

/* ───────────────────────────────────────────────────────── Section: Applied (Coșoveni) */
.section-applied { background: var(--paper); padding-block: 6rem; }

.kd-dossier {
	margin-top: 3rem;
	border: 1px solid var(--rule);
	background: rgba(255,255,255,0.45);
}

.kd-strip {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.5rem;
	border-bottom: 1px solid var(--rule);
	background: var(--paper-tint);
}

.kd-strip-mono {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	text-transform: uppercase;
	white-space: nowrap;
}

.kd-strip-rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
	min-width: 1rem;
}

.kd-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 2rem;
	padding: 1.6rem 1.5rem;
	border-bottom: 1px solid var(--rule-soft);
}

.kd-row:last-of-type { border-bottom: none; }

.kd-meta {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-top: 0.2rem;
}

.kd-num {
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.15em;
	color: var(--accent);
	font-weight: 500;
}

.kd-tag {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	text-transform: uppercase;
}

.kd-tag-private {
	color: var(--accent);
	opacity: 0.78;
}

.kd-text h3 {
	font-family: var(--serif-display);
	font-size: 1.08rem;
	font-weight: 500;
	margin: 0 0 0.5rem 0;
	color: var(--ink);
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.kd-text p {
	font-family: var(--serif-body);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
}

.kd-row-private .kd-text p {
	color: var(--ink-mute);
	font-style: italic;
}

.kd-foot {
	padding: 1.1rem 1.5rem;
	background: var(--paper-tint);
	border-top: 1px solid var(--rule);
	font-family: var(--serif-body);
	font-style: italic;
	font-size: 0.96rem;
	color: var(--ink-soft);
}

@media (max-width: 720px) {
	.kd-row { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.4rem 1.1rem; }
	.kd-meta { flex-direction: row; gap: 0.8rem; align-items: baseline; padding-top: 0; }
	.kd-strip { flex-wrap: wrap; gap: 0.6rem; padding: 0.75rem 1.1rem; }
	.kd-strip-rule { display: none; }
	.kd-foot { padding: 1rem 1.1rem; }
}

/* ─────────────────────────────────────────── soft-gate modal */

.soft-gate {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.soft-gate.is-open {
	display: flex;
}
.soft-gate-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 24, 31, 0.62);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: softGateFade .25s ease-out;
}
.soft-gate-dialog {
	position: relative;
	max-width: 32rem;
	width: 100%;
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow:
		0 1px 0 rgba(110, 20, 20, 0.08),
		0 24px 60px -12px rgba(20, 24, 31, 0.45),
		0 8px 20px -4px rgba(20, 24, 31, 0.18);
	padding: clamp(1.6rem, 1.2rem + 2vw, 2.4rem) clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
	animation: softGateRise .28s cubic-bezier(.2,.8,.2,1);
}
.soft-gate-dialog::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--accent);
}
.soft-gate-close {
	position: absolute;
	top: .9rem;
	right: .9rem;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--ink-mute);
	cursor: pointer;
	border-radius: 2px;
	transition: color .15s, background .15s;
}
.soft-gate-close:hover {
	color: var(--ink);
	background: rgba(20, 24, 31, 0.06);
}
.soft-gate-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 1.2rem;
}
.soft-gate-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(110, 20, 20, 0.45);
	animation: softGatePulse 1.6s infinite;
}
.soft-gate-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 .9rem;
}
.soft-gate-title em {
	font-style: italic;
	color: var(--accent);
}
.soft-gate-body {
	font-family: var(--serif-body);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--ink-soft, rgba(20, 24, 31, 0.78));
	margin: 0 0 1.6rem;
}
.soft-gate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
}
.soft-gate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .7rem 1.1rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s, color .18s, border-color .18s;
}
.soft-gate-btn-ghost {
	color: var(--ink-mute);
	border-color: var(--rule);
	background: transparent;
}
.soft-gate-btn-ghost:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.soft-gate-btn-primary {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
}
.soft-gate-btn-primary:hover {
	background: var(--accent);
	border-color: var(--accent);
}

@keyframes softGateFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes softGateRise {
	from { opacity: 0; transform: translateY(8px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes softGatePulse {
	0%   { box-shadow: 0 0 0 0 rgba(110, 20, 20, 0.45); }
	70%  { box-shadow: 0 0 0 8px rgba(110, 20, 20, 0); }
	100% { box-shadow: 0 0 0 0 rgba(110, 20, 20, 0); }
}

/* Lock body scroll while modal is open */
body.soft-gate-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.soft-gate-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.soft-gate-actions .soft-gate-btn {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  DEMO PAGE — briefing dossier (Florin Birta example)
 *  Used by demo.html and page-demo.php
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── demo hero ─── */
.demo-hero {
	position: relative;
	padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(2.5rem, 2rem + 3vw, 4rem);
	border-bottom: 1px solid var(--rule);
	background:
		linear-gradient(180deg, rgba(110, 20, 20, 0.025) 0%, rgba(110, 20, 20, 0) 60%),
		var(--paper);
}

.demo-strip {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rule);
}
.demo-strip-mono {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	white-space: nowrap;
}
.demo-strip-tag {
	color: var(--accent);
	position: relative;
	padding-left: 1.1rem;
}
.demo-strip-tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	transform: translateY(-50%);
	box-shadow: 0 0 0 0 rgba(110, 20, 20, 0.45);
	animation: softGatePulse 1.6s infinite;
}
.demo-strip-rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
	min-width: 1.5rem;
}

.demo-eyebrow {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1.4rem;
	display: inline-flex;
	align-items: center;
	gap: .8rem;
}
.demo-eyebrow-dash {
	width: 1.8rem;
	height: 1px;
	background: var(--accent);
	display: inline-block;
}

.demo-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 1.4rem;
	max-width: 56rem;
}
.demo-title em {
	font-style: italic;
	color: var(--accent);
	font-weight: 400;
}

.demo-lede {
	font-family: var(--serif-body);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.18rem);
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 50rem;
	margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3rem);
}

.demo-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
.demo-meta-cell {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1rem 1.2rem;
	background: var(--paper);
}
.demo-meta-label {
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.demo-meta-value {
	font-family: var(--serif-display);
	font-size: 1.1rem;
	color: var(--ink);
	line-height: 1.2;
}

/* ─── section variants for demo ─── */
.section-demo {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.section-demo.section-alt {
	background: rgba(110, 20, 20, 0.025);
	border-block: 1px solid var(--rule);
}

/* dl-style list (used in instituțional + sondaje) */
.demo-list {
	margin: 1.6rem 0;
	padding: 0;
}
.demo-list-item {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1.2rem;
	padding: 1rem 0;
	border-top: 1px solid var(--rule);
}
.demo-list-item:last-child {
	border-bottom: 1px solid var(--rule);
}
.demo-list-item dt {
	font-family: var(--serif-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--accent);
	line-height: 1.3;
}
.demo-list-item dd {
	margin: 0;
	font-family: var(--serif-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}
@media (max-width: 720px) {
	.demo-list-item {
		grid-template-columns: 1fr;
		gap: .4rem;
	}
}

/* callout (the "→ implication of layer" line) */
.prose .callout {
	margin-top: 1.6rem;
	padding: 1.2rem 1.4rem;
	background: var(--paper);
	border-left: 3px solid var(--accent);
	font-family: var(--serif-body);
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--ink);
	font-style: italic;
}

/* ─── scenarios (Layer V) ─── */
.demo-scenario {
	position: relative;
	padding: 1.4rem 1.4rem 1.4rem 4.4rem;
	margin-bottom: 1.4rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	transition: border-color .2s, transform .2s;
}
.demo-scenario:hover {
	border-color: var(--accent);
	transform: translateY(-1px);
}
.demo-scenario-head {
	position: absolute;
	left: 1.4rem;
	top: 1.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	width: 2.4rem;
}
.demo-scenario-letter {
	font-family: var(--serif-display);
	font-size: 2rem;
	font-style: italic;
	color: var(--accent);
	line-height: 1;
	letter-spacing: -0.04em;
}
.demo-scenario-prob {
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	white-space: nowrap;
	transform: rotate(-90deg) translateX(2.3rem);
	transform-origin: left top;
}
.demo-scenario-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 .6rem;
}
.demo-scenario p {
	margin: 0;
	font-family: var(--serif-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

@media (max-width: 640px) {
	.demo-scenario {
		padding: 1.2rem;
	}
	.demo-scenario-head {
		position: static;
		flex-direction: row;
		width: auto;
		margin-bottom: .8rem;
	}
	.demo-scenario-prob {
		transform: none;
		position: static;
	}
}

.demo-monitor {
	margin-top: 2.2rem;
	padding: 1.6rem;
	border: 1px dashed var(--rule);
	background: rgba(110, 20, 20, 0.03);
}
.demo-monitor h4 {
	font-family: var(--mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}
.demo-monitor ol {
	margin: 0;
	padding-left: 1.4rem;
	font-family: var(--serif-body);
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--ink);
}
.demo-monitor li + li { margin-top: .55rem; }

/* ─── synthesis section reuse pull-quote but with subtle differences ─── */
.section-synthesis {
	padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
	background: var(--ink);
	color: var(--paper);
}
.section-synthesis .section-eyebrow,
.section-synthesis .section-eyebrow.center {
	color: rgba(240, 233, 218, 0.75);
}
.section-synthesis .pull-quote {
	color: var(--paper);
}
.section-synthesis .pull-quote p {
	color: var(--paper);
}
.section-synthesis .pull-quote em {
	color: #f4a8a8;
}
.section-synthesis .pull-sub {
	color: rgba(240, 233, 218, 0.68);
}

/* ─── comparison ─── */
.section-comparison {
	padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
	border-block: 1px solid var(--rule);
}
.comparison-head {
	max-width: 50rem;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.comparison-title {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: .8rem 0 0;
}
.comparison-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.2rem;
}
.comparison-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.6rem;
	border: 1px solid var(--rule);
	background: var(--paper);
	transition: transform .2s, border-color .2s;
}
.comparison-card-primary {
	border-color: var(--accent);
	background: linear-gradient(180deg, rgba(110, 20, 20, 0.03) 0%, var(--paper) 100%);
}
.comparison-card-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--accent);
}
.comparison-card-label {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.comparison-card-primary .comparison-card-label {
	color: var(--accent);
}
.comparison-card-body {
	flex: 1;
}
.comparison-card-body p {
	font-family: var(--serif-body);
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
}
.comparison-card-tag {
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
	padding-top: .8rem;
	border-top: 1px solid var(--rule);
}
.comparison-card-primary .comparison-card-tag {
	color: var(--accent);
}

/* ─── sources + final CTA ─── */
.section-sources {
	padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
}
.sources-head {
	max-width: 50rem;
	margin-bottom: 2rem;
}
.sources-note {
	font-family: var(--serif-body);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: .8rem 0 0;
}
.sources-list {
	list-style: none;
	margin: 0 0 clamp(3rem, 2rem + 3vw, 4.5rem);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: .55rem 1.5rem;
	border-top: 1px solid var(--rule);
	padding-top: 1.5rem;
}
.sources-list li {
	font-family: var(--serif-body);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ink-soft);
}
.src-mono {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--accent);
	margin-right: .5rem;
	letter-spacing: 0.06em;
}

.demo-cta-block {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	background: var(--ink);
	color: var(--paper);
}
.demo-cta-text h3 {
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
	line-height: 1.2;
	color: var(--paper);
	margin: 0 0 .6rem;
}
.demo-cta-text p {
	font-family: var(--serif-body);
	font-size: 0.98rem;
	line-height: 1.55;
	color: rgba(240, 233, 218, 0.72);
	margin: 0;
	max-width: 38rem;
}
.demo-cta-actions {
	display: flex;
	gap: .7rem;
	flex-wrap: wrap;
}
.demo-cta-block .btn-primary {
	background: var(--accent);
	color: var(--paper);
	border-color: var(--accent);
}
.demo-cta-block .btn-ghost {
	color: rgba(240, 233, 218, 0.85);
	border-color: rgba(240, 233, 218, 0.3);
	background: transparent;
}
.demo-cta-block .btn-ghost:hover {
	color: var(--paper);
	border-color: var(--paper);
}

@media (max-width: 720px) {
	.demo-cta-block {
		grid-template-columns: 1fr;
	}
}