/* ==========================================================================
   Tekspace Research lead-gen: leadgen.css
   Styles for the lead-gen download block, the /lab/<domain>/compare,
   /framework and /breakdown pages, and the comparison request.
   A NEW file, not one of the site's two shared sheets: the in-article block is
   inserted into the Lab articles, which must not need edits to style.css.

   DESIGN (direction A, Finn 5 Oct 2026)
   - Surface: the block and each page's lead sit on the Lab's dark inset panel
     (the article's .section-outer: black, 30px inset above 576px, 30px
     radius). A light modifier swaps four custom properties, nothing else.
   - Actions: a FILE is an outline pill with a download glyph and the file
     facts beside it. A REQUEST (the form, the next step) is a solid pill.
     Bookings stay the article's own black rounded buttons, never used here.
   - Lists and facts sit under hairline top rules, as on the article's
     unboxed reg-cards and ruled chart footnotes. No grey boxes.

   Reads the site tokens (tokens.css :root) for every colour, type size, space,
   radius and duration. No hex values. Mobile first, min-width queries only.
   Order below follows the order things appear: shared parts, the block, the
   page lead, /compare, /framework, /breakdown, then the page close.

   SPECIFICITY NOTE. Inside an article, `.lab-frozen-article h3` (0,1,1) and
   friends size bare headings for the article. The block's text classes are
   therefore written `.leadgen-block .x` (0,2,0), which outranks them without
   !important.

   SEAM NOTE. In the article the block's panel rises one radius under the
   Threat Context panel's rounded bottom and takes the same inset, so the two
   read as one black surface. That matches `.lab-frozen-article .section-outer`
   in style.css (30px radius, 0 30px margin, margin 0 at 576px and below).
   tests/render/leadgen-pages.spec.ts fails if either side changes alone.

   FRAME NOTE. The pages use the article's horizontal frame too: every section
   is flush on a phone (576px and below), so a dark panel runs edge to edge
   and text sits on the container's own gutter, then 30px in from 577px. The
   panel and the white sections share one inset, so text inside and outside a
   panel starts on the same line at every width.
   ========================================================================== */

/* ---------- SHARED: SURFACE ---------- */
.leadgen-panel {
	--lg-fg: var(--fg-on-dark);
	--lg-muted: var(--fg-muted-on-dark);
	--lg-rule: var(--rule-on-dark-strong);
	--lg-rim: var(--rule-on-dark);
	padding-block: var(--space-50);
	border-radius: var(--radius-xl);
	background: var(--black);
	color: var(--lg-fg);
}
.leadgen-panel--light {
	--lg-fg: var(--fg);
	--lg-muted: var(--fg-muted);
	--lg-rule: var(--rule-on-light-strong);
	--lg-rim: var(--rule-on-light);
	background: var(--bg);
}

/* ---------- SHARED: THE PAGE FRAME (see FRAME NOTE) ---------- */
/* The article zeroes its own section padding, so this applies to the pages. */
.leadgen-lead,
.leadgen-request,
.leadgen-block,
.leadgen-capabilities,
.leadgen-method-band,
.leadgen-close {
	padding-inline: 0;
}
@media (min-width: 577px) {
	.leadgen-lead,
	.leadgen-request,
	.leadgen-block,
	.leadgen-capabilities,
	.leadgen-method-band,
	.leadgen-close {
		padding-inline: var(--space-30);
	}
}

/* ---------- SHARED: TEXT ---------- */
.leadgen-eyebrow,
.leadgen-block .leadgen-eyebrow {
	margin: 0 0 var(--space-10);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--w-black);
	letter-spacing: 0.04em;
	line-height: var(--leading-tight);
	text-transform: uppercase;
	color: var(--lg-muted, var(--fg-muted));
}
.leadgen-readout,
.leadgen-block .leadgen-readout {
	margin: 0;
	font-family: var(--font-body-wide);
	font-size: var(--fs-xs);
	line-height: var(--leading-base);
	color: var(--lg-muted, var(--fg-muted));
}
.leadgen-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.leadgen-panel .text-link,
.leadgen-panel .text-link:hover,
.leadgen-panel .text-link:focus-visible,
.leadgen-close .text-link,
.leadgen-close .text-link:hover,
.leadgen-close .text-link:focus-visible {
	color: var(--lg-fg);
}
.leadgen-panel .text-link:hover,
.leadgen-close .text-link:hover {
	text-decoration-thickness: 2px;
}

/* ---------- SHARED: RULED LISTS ---------- */
.leadgen-rules,
.leadgen-capability-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.leadgen-rules__item,
.leadgen-capability {
	padding-block: var(--space-20);
	border-top: 1px solid var(--lg-rule, var(--rule-on-light));
}
.leadgen-rules__title,
.leadgen-capability__name {
	margin: 0 0 var(--space-10);
	font-weight: var(--w-bold);
	line-height: 1.25;
}
.leadgen-rules__text,
.leadgen-capability__plain {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--leading-base);
	color: var(--lg-muted, var(--fg-muted));
}

/* ---------- SHARED: ACTIONS ---------- */
/* File: outline pill with a download glyph. Also the article module's
   secondary action, "Assess with us". Full width on a phone, so the longest
   label fits a 320px screen. */
.leadgen-download,
.leadgen-assess {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	width: 100%;
	min-height: 50px;
	padding: 0 var(--space-20);
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	color: var(--lg-fg, var(--fg));
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--w-semibold);
	line-height: var(--leading-tight);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.leadgen-download:hover,
.leadgen-download:focus-visible,
.leadgen-assess:hover,
.leadgen-assess:focus-visible {
	background: var(--white);
	color: var(--black);
}
.leadgen-panel--light .leadgen-download:hover,
.leadgen-panel--light .leadgen-download:focus-visible {
	background: var(--fg);
	color: var(--white);
}
@media (min-width: 577px) {
	.leadgen-download,
	.leadgen-assess {
		width: auto;
		padding: 0 var(--space-30);
	}
}
.leadgen-download__icon {
	flex: 0 0 auto;
	transition: transform var(--dur-base) var(--ease-out);
}
.leadgen-download:hover .leadgen-download__icon,
.leadgen-download:focus-visible .leadgen-download__icon,
.leadgen-guide:hover .leadgen-download__icon,
.leadgen-guide:focus-visible .leadgen-download__icon {
	transform: translateY(2px);
}
/* Request, the page close's one ask, and the article module's guide: solid
   pill. White on the dark surfaces, black on light. */
.leadgen-submit,
.leadgen-cta,
.leadgen-guide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	min-height: 50px;
	padding: 0 var(--space-30);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--accent-fg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--w-semibold);
	line-height: var(--leading-tight);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.leadgen-panel .leadgen-submit,
.leadgen-close .leadgen-cta,
.leadgen-panel .leadgen-guide {
	background: var(--white);
	color: var(--black);
}
.leadgen-guide {
	width: 100%;
	padding: 0 var(--space-20);
}
@media (min-width: 577px) {
	.leadgen-guide {
		width: auto;
		padding: 0 var(--space-30);
	}
}
.leadgen-submit:hover,
.leadgen-cta:hover,
.leadgen-guide:hover,
.leadgen-panel .leadgen-submit:hover,
.leadgen-close .leadgen-cta:hover,
.leadgen-panel .leadgen-guide:hover {
	background: var(--accent-interactive);
	color: var(--accent-interactive-fg);
}
.leadgen-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}
.leadgen-download:focus-visible,
.leadgen-assess:focus-visible,
.leadgen-guide:focus-visible,
.leadgen-submit:focus-visible,
.leadgen-cta:focus-visible,
.leadgen-form__input:focus-visible {
	outline: 2px solid var(--accent-interactive);
	outline-offset: 2px;
}

/* ---------- DOWNLOAD BLOCK: THE DOCUMENT ---------- */
/* Cover, eyebrow, title, text, action. On a phone the cover is a thumbnail
   beside the eyebrow and title; from 768px it takes a column of its own. */
.leadgen-block .leadgen-panel {
	padding-block: var(--space-50) var(--space-100);
}
.leadgen-doc {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr);
	grid-template-areas:
		'cover eyebrow'
		'cover title'
		'text text'
		'action action';
	grid-template-rows: auto 1fr auto auto;
	column-gap: var(--space-20);
	padding-top: var(--space-50);
	border-top: 1px solid var(--lg-rule);
}
.leadgen-doc__cover {
	grid-area: cover;
	align-self: start;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 1px var(--lg-rim), var(--shadow-glass);
}
.leadgen-doc > .leadgen-eyebrow {
	grid-area: eyebrow;
	align-self: end;
}
.leadgen-block .leadgen-doc__title {
	grid-area: title;
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.5em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.05;
	color: var(--lg-fg);
}
.leadgen-block .leadgen-doc__text {
	grid-area: text;
	max-width: 32em;
	margin: var(--space-30) 0 0;
	font-size: var(--fs-body);
	line-height: var(--leading-base);
	color: var(--lg-muted);
}
.leadgen-doc__action {
	grid-area: action;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10) var(--space-20);
	margin-top: var(--space-30);
}
@media (min-width: 768px) {
	.leadgen-block .leadgen-panel {
		padding-block: var(--space-50) var(--space-150);
	}
	.leadgen-doc {
		grid-template-columns: 13em minmax(0, 1fr);
		grid-template-areas:
			'cover eyebrow'
			'cover title'
			'cover text'
			'cover action';
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--space-50);
	}
	.leadgen-doc > .leadgen-eyebrow {
		align-self: start;
		margin-top: var(--space-10);
	}
	.leadgen-block .leadgen-doc__title {
		font-size: 2.2em;
	}
	.leadgen-block .leadgen-doc__text {
		margin-top: var(--space-20);
	}
}

/* ---------- ARTICLE MODULE: ONE CLOSE, TWO STEPS ---------- */
/* The Threat Context close (Finn, 6 Oct 2026): a question, an analysis list,
   then two numbered steps, the guide and "Assess with us". The list reads as
   a step in the analysis, not a stat bar: hairline rules, no boxes, numbers
   in the body face at full strength, labels muted. */
.leadgen-module {
	padding-top: var(--space-50);
	border-top: 1px solid var(--lg-rule);
}
.leadgen-block .leadgen-module__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.6em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.05;
	color: var(--lg-fg);
}
.leadgen-block .leadgen-module__deck {
	margin: var(--space-10) 0 0;
	font-size: var(--fs-subhead);
	line-height: var(--leading-base);
	color: var(--lg-muted);
}

/* The analysis list: capabilities scored, then the breakdown's findings.
   The platform and feature counts were dropped so the module does not
   spoil Product Landscape (Finn, 6 Oct 2026). */
.leadgen-analysis {
	margin-top: var(--space-30);
}
.leadgen-findings__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.leadgen-findings__item {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	column-gap: var(--space-20);
	align-items: baseline;
	padding-block: var(--space-10);
	border-top: 1px solid var(--lg-rim);
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--lg-muted);
}
.leadgen-findings__item:last-child {
	border-bottom: 1px solid var(--lg-rim);
}
.leadgen-findings__count {
	font-family: var(--font-body);
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	white-space: nowrap;
	color: var(--lg-fg);
}
/* The breakdown's one emphasis (the widest gap): weight and full-strength
   text, not a new colour. */
.leadgen-findings__item--emphasis {
	color: var(--lg-fg);
	font-weight: var(--w-semibold);
}
.leadgen-findings__item--emphasis .leadgen-findings__count {
	font-weight: var(--w-black);
}

/* The two steps. */
.leadgen-steps {
	display: grid;
	gap: var(--space-30) var(--space-50);
	margin: var(--space-50) 0 0;
	padding: 0;
	list-style: none;
}
.leadgen-step {
	padding-top: var(--space-20);
	border-top: 1px solid var(--lg-rule);
}
.leadgen-step__num {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--w-black);
	letter-spacing: 0.04em;
	line-height: var(--leading-tight);
	color: var(--lg-muted);
}
.leadgen-block .leadgen-step__title {
	margin: var(--space-10) 0 0;
	font-family: var(--font-body);
	font-size: 1.25em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.15;
	color: var(--lg-fg);
}
.leadgen-block .leadgen-step__text {
	margin: var(--space-10) 0 0;
	font-size: var(--fs-sm);
	line-height: var(--leading-base);
	color: var(--lg-muted);
}
.leadgen-step__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10) var(--space-20);
	padding-top: var(--space-20);
}
@media (min-width: 768px) {
	.leadgen-block .leadgen-module__title {
		font-size: 2.2em;
	}
	/* Side by side, the two steps share their rows, so the titles, the
	   text and the two buttons line up across them. */
	.leadgen-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(4, auto);
		row-gap: 0;
	}
	.leadgen-step {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		align-content: start;
	}
	.leadgen-step__action {
		align-self: start;
	}
}

/* In the article the block is the last beat of Threat Context: its panel
   rises one radius under the section's rounded bottom and takes the
   article panel's inset (see SEAM NOTE). */
.leadgen-block--article .leadgen-panel {
	position: relative;
	margin-top: calc(-1 * var(--radius-xl));
	padding-top: var(--radius-xl);
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
@media (min-width: 577px) {
	.leadgen-block--article .leadgen-panel {
		margin-inline: var(--space-30);
	}
}

/* /compare: the breakdown on the light surface, compact and secondary. */
.leadgen-block--page .leadgen-panel {
	padding-block: var(--space-50) var(--space-30);
}
@media (min-width: 768px) {
	.leadgen-block--page .leadgen-panel {
		padding-block: var(--space-100) var(--space-30);
	}
	.leadgen-block--page .leadgen-doc {
		grid-template-columns: 8em minmax(0, 1fr);
	}
	.leadgen-block--page .leadgen-doc__title {
		font-size: 1.6em;
	}
}

/* /framework: the breakdown closes the page on the dark panel, which is the
   frame here, so the in-article top rule goes. */
/* The page close follows both card variants, so each leaves white space
   above the close's dark band. */
.leadgen-block--page,
.leadgen-block--framework {
	padding-bottom: var(--space-50);
}
@media (min-width: 768px) {
	.leadgen-block--page,
	.leadgen-block--framework {
		padding-bottom: var(--space-100);
	}
}
.leadgen-block--framework .leadgen-doc {
	padding-top: 0;
	border-top: 0;
}
@media (min-width: 768px) {
	.leadgen-block--framework .leadgen-panel {
		padding-block: var(--space-100);
	}
}

/* ---------- PAGE LEAD (compare, framework, breakdown) ---------- */
/* The lead panel sits a step below the site header, not against it. */
.leadgen-lead {
	padding-top: var(--space-20);
}
.leadgen-head__title {
	margin: 0 0 var(--space-20);
	font-family: var(--font-body);
	font-size: 2.4em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1;
	color: var(--lg-fg, var(--fg));
}
.leadgen-head__text {
	max-width: 32em;
	margin: 0 0 var(--space-30);
	color: var(--lg-muted, var(--fg-muted));
}
@media (min-width: 768px) {
	.leadgen-lead {
		padding-top: var(--space-30);
	}
	.leadgen-lead .leadgen-panel {
		padding-block: var(--space-100);
	}
	.leadgen-head__title {
		font-size: 3.5em;
	}
}
@media (min-width: 1200px) {
	.leadgen-head__title {
		font-size: 4.5em;
	}
}

/* ---------- /COMPARE: THE REQUEST (staging, preview and dev builds only) ---------- */
.leadgen-request {
	padding-top: var(--space-20);
}
.leadgen-request .leadgen-panel {
	padding-block: var(--space-50);
}
.leadgen-request__side {
	margin-top: var(--space-50);
}
.leadgen-request__side .leadgen-readout {
	padding-top: var(--space-20);
	border-top: 1px solid var(--lg-rule);
}
.leadgen-form__label {
	display: block;
	margin-bottom: var(--space-10);
	font-weight: var(--w-semibold);
}
.leadgen-form__row {
	display: grid;
	gap: var(--space-10);
}
.leadgen-form__input {
	width: 100%;
	min-height: 50px;
	padding: 0 var(--space-20);
	border: 1px solid var(--white);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--fg);
	font-family: var(--font-body-wide);
	font-size: var(--fs-body);
}
.leadgen-form__input[aria-invalid='true'] {
	border: 2px solid var(--fg);
	box-shadow: 0 0 0 2px var(--white);
}
.leadgen-form__hint,
.leadgen-form__stub {
	margin: var(--space-10) 0 0;
	font-size: var(--fs-xs);
	color: var(--lg-muted, var(--fg-muted));
}
.leadgen-form__error {
	margin: var(--space-10) 0 0;
	font-size: var(--fs-sm);
	font-weight: var(--w-bold);
}
.leadgen-form__error[hidden],
.leadgen-form__success[hidden] {
	display: none;
}
.leadgen-form__stub {
	margin-top: var(--space-20);
}
.leadgen-form__success {
	max-width: 32em;
	padding-block: var(--space-20);
	border-block: 1px solid var(--lg-rule);
}
.leadgen-form__success-text {
	margin: 0 0 var(--space-10);
	font-size: var(--fs-subhead);
	font-weight: var(--w-semibold);
}
@media (min-width: 768px) {
	.leadgen-request {
		padding-top: var(--space-30);
	}
	.leadgen-request .leadgen-panel {
		padding-block: var(--space-100);
	}
	.leadgen-form {
		max-width: 32em;
	}
}
/* The field and the button share a row only where the lead column leaves
   the field room for the whole placeholder. Below that the button sits
   under the field. */
@media (min-width: 1200px) {
	.leadgen-form__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}
@media (min-width: 992px) {
	.leadgen-request__side {
		margin-top: 0;
	}
}

/* ---------- TWO-COLUMN PANELS (/compare request, /breakdown handover) ---------- */
/* Where a panel's lead column and side column sit side by side, the side
   column holds a real gutter (the grid's own 24px plus 50px), so the form,
   its button and the cover never run up against the other column. The lead
   column keeps its full width, so the field still fits its placeholder. */
@media (min-width: 992px) {
	.leadgen-request__side,
	.leadgen-handover__side,
	.leadgen-close__side {
		padding-inline-start: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + var(--space-50));
	}
}

/* ---------- /FRAMEWORK: FACTS ---------- */
.leadgen-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-30);
	margin: var(--space-50) 0 0;
}
.leadgen-facts__item {
	padding-top: var(--space-20);
	border-top: 1px solid var(--lg-rule);
}
.leadgen-facts__item dt {
	font-size: var(--fs-xs);
	font-weight: var(--w-black);
	letter-spacing: 0.04em;
	line-height: var(--leading-tight);
	text-transform: uppercase;
	color: var(--lg-muted);
}
.leadgen-facts__item dd {
	margin: var(--space-10) 0 0;
	font-family: var(--font-body);
	font-size: 2.4em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
}
.leadgen-facts__item .leadgen-facts__note {
	font-family: var(--font-body-wide);
	font-size: var(--fs-xs);
	font-weight: var(--w-medium);
	letter-spacing: 0;
	line-height: var(--leading-base);
	color: var(--lg-muted);
}
@media (min-width: 768px) {
	.leadgen-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-50);
	}
	.leadgen-facts__item dd {
		font-size: 3em;
	}
}

/* ---------- /FRAMEWORK: CAPABILITY SET ---------- */
.leadgen-capabilities {
	padding-block: var(--space-100) var(--space-50);
}
.leadgen-section__title {
	margin: 0 0 var(--space-20);
	font-family: var(--font-body);
	font-size: 2em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.05;
}
.leadgen-prose {
	max-width: 36em;
	margin: 0 0 var(--space-20);
	color: var(--fg-muted);
}
.leadgen-tier {
	margin-top: var(--space-50);
	padding-top: var(--space-30);
	border-top: 2px solid var(--fg);
}
.leadgen-tier__title {
	margin: 0 0 var(--space-10);
	font-family: var(--font-body);
	font-size: 1.5em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.1;
}
.leadgen-tier__meta {
	margin: 0 0 var(--space-20);
	font-size: var(--fs-sm);
	color: var(--fg-muted);
}
.leadgen-capability-list {
	display: grid;
	column-gap: var(--space-50);
}
@media (min-width: 992px) {
	.leadgen-capabilities {
		padding-block: var(--space-150) var(--space-50);
	}
	.leadgen-section__title {
		font-size: 3em;
	}
	.leadgen-tier__head {
		position: sticky;
		top: var(--space-100);
	}
	.leadgen-capability-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- /FRAMEWORK: METHOD (shared component) ---------- */
.leadgen-method-band {
	padding-block: var(--space-50) var(--space-100);
}
.leadgen-method {
	padding-top: var(--space-30);
	border-top: 2px solid var(--fg);
}
.leadgen-method .leadgen-section__title {
	font-size: 1.5em;
}
.leadgen-section__subtitle {
	margin: var(--space-30) 0 var(--space-10);
	font-family: var(--font-body);
	font-size: 1.15em;
	font-weight: var(--w-bold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.2;
}
.leadgen-list {
	max-width: 36em;
	margin: 0 0 var(--space-20);
	padding-left: 1.25em;
	color: var(--fg-muted);
}
.leadgen-list li {
	margin-bottom: var(--space-10);
}
.leadgen-table__scroll {
	margin: var(--space-20) 0;
	overflow-x: auto;
}
.leadgen-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	text-align: left;
}
.leadgen-table th,
.leadgen-table td {
	padding: var(--space-20) var(--space-10);
	border-bottom: 1px solid var(--rule-on-light-strong);
	vertical-align: top;
}
.leadgen-table thead th {
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fg-muted);
}
.leadgen-formula {
	max-width: 40em;
	margin: var(--space-20) 0;
	padding: var(--space-20) 0;
	overflow-x: auto;
	border-top: 1px solid var(--rule-on-light-strong);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: var(--leading-base);
}
@media (min-width: 992px) {
	.leadgen-method {
		display: grid;
		grid-template-columns: 4fr 8fr;
		column-gap: var(--space-50);
	}
	.leadgen-method > * {
		grid-column: 2;
	}
	.leadgen-method > .leadgen-section__title {
		grid-column: 1;
		grid-row: 1 / span 20;
		align-self: start;
		position: sticky;
		top: var(--space-100);
	}
	.leadgen-method > .leadgen-section__subtitle:first-of-type {
		margin-top: 0;
	}
}

/* ---------- /BREAKDOWN: HANDOVER ---------- */
.leadgen-handover__status {
	max-width: 32em;
	margin: 0 0 var(--space-30);
	padding-block: var(--space-20);
	border-block: 1px solid var(--lg-rule);
	font-size: var(--fs-subhead);
	font-weight: var(--w-semibold);
	line-height: 1.4;
}
.leadgen-handover__cover {
	display: block;
	width: 60%;
	max-width: 22em;
	height: auto;
	margin-top: var(--space-50);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 1px var(--lg-rim), var(--shadow-glass);
}
@media (min-width: 992px) {
	.leadgen-handover__cover {
		width: 100%;
		margin-top: 0;
	}
}

/* ---------- PAGE CLOSE (compare, framework, breakdown) ---------- */
/* The Lab's dark close with one ask (the page-end pattern on draft PR #23):
   full bleed on the dark panel surface, directly above the footer, text on
   the pages' frame. The one ask is a solid pill to the domain's solutions
   page; the research and the framework are quiet ruled links beside it. */
.leadgen-close {
	--lg-fg: var(--fg-on-dark);
	--lg-muted: var(--fg-muted-on-dark);
	--lg-rule: var(--rule-on-dark-strong);
	padding-block: var(--space-100);
	background: var(--bg-panel-dark);
	color: var(--lg-fg);
}
.leadgen-close__title {
	margin: 0 0 var(--space-20);
	font-family: var(--font-body);
	font-size: 2em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.05;
	color: var(--lg-fg);
}
.leadgen-close__text {
	max-width: 32em;
	margin: 0 0 var(--space-30);
	color: var(--lg-muted);
}
.leadgen-close__side {
	margin-top: var(--space-50);
}
.leadgen-close__links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.leadgen-close__link {
	padding-block: var(--space-20);
	border-top: 1px solid var(--lg-rule);
}
.leadgen-close__link:last-child {
	border-bottom: 1px solid var(--lg-rule);
}
@media (min-width: 768px) {
	.leadgen-close {
		padding-block: var(--space-150);
	}
	.leadgen-close__title {
		font-size: 3em;
	}
}
@media (min-width: 992px) {
	.leadgen-close__side {
		align-self: end;
		margin-top: 0;
	}
}

/* ---------- THE ARTICLE MODULE ON THE ARTICLE TYPE SCALE ---------- */
/* Finn, 6 Oct 2026: the module closes Threat Context, so it takes the lab
   articles' one-scroll type scale (charts.css, .lab-type-scale) rather than
   sizes of its own. Eyebrow as the chart eyebrows (20px), title as Heading
   (60px; 40px below 992px), deck as Lead (20px; 19px), step titles as Title
   (30px; 24px), step copy as Body (17px/1.6), step numbers as Micro (14px).
   Last in the file so it wins over the module's base and 768px rules. */
.leadgen-block--article .leadgen-eyebrow {
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 1em;
	letter-spacing: normal;
	line-height: 1;
}
.leadgen-block--article .leadgen-module__title {
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 2em;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1;
}
.leadgen-block--article .leadgen-module__deck {
	font-size: 0.95em;
	line-height: 1.6;
}
.leadgen-block--article .leadgen-step__title {
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}
.leadgen-block--article .leadgen-step__text {
	font-size: 0.85em;
	line-height: 1.6;
}
.leadgen-block--article .leadgen-step__num {
	font-size: 0.7em;
}
@media (min-width: 992px) {
	.leadgen-block--article .leadgen-module__title {
		font-size: 3em;
	}
	.leadgen-block--article .leadgen-module__deck {
		font-size: 1em;
	}
	.leadgen-block--article .leadgen-step__title {
		font-size: 1.5em;
	}
}