/*
 * Home page product mocks (Joe 8-11-26: HTML/CSS sanctioned outside the
 * widget guidelines for these sections). Static end-frame recreations of the
 * prototype's TraceCanvasMock, ScrollStackStages visuals, BoundList sheets,
 * and ValuePropsStack cells. All colors ride the e-global cadastral vars so
 * dark mode switches automatically; the green is the prototype's mock-only
 * precision token (--tw-green), never used outside product mocks.
 */

:root {
	--bl-hm-green: #2f8f4e;
}

html[data-bl-theme="dark"] {
	--bl-hm-green: #4ade80;
}

@media (prefers-color-scheme: dark) {
	html:not([data-bl-theme="light"]) {
		--bl-hm-green: #4ade80;
	}
}

.bl-hm-mono {
	font-family: input-mono, ui-monospace, monospace;
}

/* ------------------------------------------------ S2: Trace canvas ---- */
/*
 * NOT element-qualified: home renders the canvas as an <a> to /trace/, while the
 * Trace page renders the SAME markup ANNOTATED as a <div> (a link inside a link
 * is invalid, and the hotspot cards carry their own links). An `a.bl-hm-canvas`
 * selector gave the annotated div no layout at all, which collapsed the stage
 * area and let the 950-unit plot SVG render at its intrinsic size — 950px wide
 * inside a 390px viewport.
 */
.bl-hm-canvas {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 70vh;
	min-height: 520px;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	box-shadow: 0 1px 0 var(--e-global-color-cadastral-line);
	color: var(--e-global-color-cadastral-ink);
	text-decoration: none;
	font-family: indivisible, sans-serif;
}

.bl-hm-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	flex: 0 0 44px;
	padding: 0 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-size: 12px;
}

.bl-hm-bar-l,
.bl-hm-bar-r {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.bl-hm-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 2px;
	background: var(--e-global-color-cadastral-red);
	color: #fff;
	font-size: 12px;
	flex: 0 0 24px;
}

.bl-hm-word {
	font-weight: 500;
	font-size: 15px;
}

.bl-hm-word em {
	font-style: normal;
	color: var(--e-global-color-cadastral-red);
}

.bl-hm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	font-size: 11px;
	white-space: nowrap;
}

.bl-hm-chip-red {
	color: var(--e-global-color-cadastral-red);
	border-color: var(--e-global-color-cadastral-red);
}

.bl-hm-badge {
	padding: 2px 8px;
	border-radius: 2px;
	background: var(--e-global-color-cadastral-red);
	color: #fff;
	font-size: 11px;
	white-space: nowrap;
}

.bl-hm-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--e-global-color-cadastral-red);
	color: #fff;
	font-size: 9px;
	font-style: normal;
}

.bl-hm-proj {
	font-weight: 500;
	font-size: 13px;
}

.bl-hm-saved {
	font-size: 11px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-canvas-body {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.bl-hm-editor {
	display: flex;
	flex-direction: column;
	width: 30%;
	min-width: 0;
	border-right: 1px solid var(--e-global-color-cadastral-line);
}

.bl-hm-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-size: 12px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-tabs .on {
	padding: 2px 8px;
	border-radius: 2px;
	background: var(--e-global-color-cadastral-hover);
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-tabs .push {
	margin-left: auto;
}

.bl-hm-code {
	margin: 0;
	padding: 12px;
	flex: 1 1 auto;
	overflow: hidden;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 12px;
	line-height: 1.9;
	background: transparent;
	border: 0;
	color: #3a8f5a;
	white-space: pre;
}

.bl-hm-code .ln {
	display: inline-block;
	width: 14px;
	margin-right: 8px;
	text-align: right;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-code .kw {
	color: #9b5cf6;
}

.bl-hm-code .rd {
	color: var(--e-global-color-cadastral-red);
}

.bl-hm-doc {
	margin: 12px;
	padding: 6px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	font-size: 11px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-stagearea {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	background: var(--e-global-color-cadastral-bg);
}

.bl-hm-stagearea svg.bl-hm-plot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bl-hm-tools {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 8px;
	padding: 4px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-size: 12px;
	color: var(--e-global-color-cadastral-graphite);
	z-index: 1;
}

.bl-hm-tools .on {
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-north {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 9px;
	color: var(--e-global-color-cadastral-graphite);
	text-align: center;
	z-index: 1;
}

.bl-hm-scalebar {
	position: absolute;
	bottom: 12px;
	left: 12px;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
	border-bottom: 2px solid var(--e-global-color-cadastral-graphite);
	padding: 0 10px 2px;
	z-index: 1;
}

.bl-hm-side {
	width: 22%;
	min-width: 220px;
	border-left: 1px solid var(--e-global-color-cadastral-line);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bl-hm-side-tract {
	padding: 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
}

.bl-hm-tract-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.bl-hm-tract-name {
	font-weight: 500;
	font-size: 15px;
}

.bl-hm-green-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border: 1px solid color-mix(in srgb, var(--bl-hm-green) 40%, transparent);
	border-radius: 2px;
	background: color-mix(in srgb, var(--bl-hm-green) 12%, transparent);
	color: var(--bl-hm-green);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 11px;
	white-space: nowrap;
}

.bl-hm-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	font-size: 12px;
}

.bl-hm-stat .lbl {
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-stat .val {
	font-family: input-mono, ui-monospace, monospace;
}

.bl-hm-stat .sub {
	display: block;
	text-align: right;
	color: var(--e-global-color-cadastral-graphite);
	font-size: 11px;
}

.bl-hm-pob-box {
	margin-top: 10px;
	padding: 6px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 11px;
}

.bl-hm-note {
	margin-top: 10px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-calls {
	padding: 12px;
	overflow: hidden;
}

.bl-hm-calls-h {
	font-family: input-mono, ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e-global-color-cadastral-graphite);
	margin-bottom: 8px;
}

.bl-hm-call {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 12px;
}

.bl-hm-call .n {
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-call .pen {
	margin-left: auto;
	color: var(--e-global-color-cadastral-red);
	font-size: 10px;
}

.bl-hm-mobilecard {
	display: none;
	position: absolute;
	top: 56px;
	right: 12px;
	width: 160px;
	padding: 10px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-panel) 95%, transparent);
	z-index: 1;
	font-size: 11px;
}

@media (max-width: 1199px) {
	.bl-hm-editor {
		display: none;
	}
}

@media (max-width: 767px) {
	.bl-hm-canvas {
		height: 64vh;
		min-height: 440px;
	}

	.bl-hm-bar-r,
	.bl-hm-side {
		display: none;
	}

	.bl-hm-mobilecard {
		display: block;
	}
}

@media (max-width: 560px) {
	.bl-hm-word {
		display: none;
	}
}

/* --------------------------------------- S3: stage visuals (static) ---- */
.bl-hm-frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	aspect-ratio: 4 / 3;
	width: 100%;
	color: var(--e-global-color-cadastral-ink);
	font-family: indivisible, sans-serif;
}

.bl-hm-frame > svg.bl-hm-plot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 8px;
}

.bl-hm-frame-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px;
}

.bl-hm-frame-grid > * {
	min-width: 0;
	min-height: 0;
}

.bl-hm-vcenter {
	align-self: center;
}

@media (max-width: 560px) {
	.bl-hm-frame {
		aspect-ratio: auto;
		min-height: 340px;
	}

	.bl-hm-frame-grid {
		grid-template-columns: 1fr;
	}
}

.bl-hm-deed {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	padding: 20px;
	font-family: Georgia, "Times New Roman", serif;
}

.bl-hm-deed::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, #000 0, #000 1px, transparent 1px, transparent 3px);
	opacity: 0.045;
}

.bl-hm-deed-head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-family: input-mono, ui-monospace, monospace;
}

.bl-hm-deed-head .a {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-deed-head .b {
	font-size: 11px;
}

.bl-hm-deed-meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 10px 0;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 8px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-deed-meta b {
	display: block;
	font-weight: 400;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-deed-title {
	text-align: center;
	margin: 10px 0 2px;
	font-size: 12px;
	letter-spacing: 0.12em;
}

.bl-hm-deed-sub {
	text-align: center;
	font-size: 10px;
	margin-bottom: 8px;
}

.bl-hm-deed-body {
	font-size: 11px;
	line-height: 1.85;
}

.bl-hm-deed-body b {
	font-family: input-mono, ui-monospace, monospace;
	font-weight: 400;
	font-size: 10px;
	background: var(--e-global-color-cadastral-hover);
	padding: 0 4px;
	border-radius: 2px;
	white-space: nowrap;
}

.bl-hm-chiplist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 11px;
}

.bl-hm-chiplist .row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bl-hm-chiplist .row .n {
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-chiplist .row .c {
	padding: 4px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	white-space: nowrap;
}

.bl-hm-checks {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 12px;
	z-index: 1;
}

.bl-hm-checks .c {
	padding: 4px 10px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	white-space: nowrap;
}

.bl-hm-checks .c.green {
	border-color: color-mix(in srgb, var(--bl-hm-green) 40%, transparent);
	color: var(--bl-hm-green);
}

.bl-hm-files {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bl-hm-files .f {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 12px;
}

.bl-hm-files .f i {
	font-style: normal;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-table {
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	overflow: hidden;
	margin-top: 8px;
}

.bl-hm-table .h {
	padding: 6px 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-table .r {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 12px;
	font-size: 11px;
}

.bl-hm-table .r .lbl {
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-table .r .val {
	font-family: input-mono, ui-monospace, monospace;
}

/* ----------------------------------------- S4: bound-list visuals ---- */
.bl-hm-sheetvis {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	aspect-ratio: 16 / 10;
	width: 100%;
	background: var(--e-global-color-cadastral-bg);
	color: var(--e-global-color-cadastral-ink);
	font-family: indivisible, sans-serif;
}

.bl-hm-sheetvis > svg.bl-hm-plot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 16px;
}

.bl-hm-tractcard {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 12px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-panel) 95%, transparent);
	font-size: 11px;
	z-index: 1;
	min-width: 150px;
}

.bl-hm-tractcard .t {
	font-weight: 500;
	margin-bottom: 6px;
}

.bl-hm-codes {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--e-global-color-cadastral-panel);
	overflow: hidden;
}

.bl-hm-codeblock {
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	overflow: hidden;
	flex: 1 1 0;
	min-height: 0;
}

.bl-hm-codeblock .t {
	padding: 6px 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-codeblock pre {
	margin: 0;
	padding: 12px;
	border: 0;
	background: transparent;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 11px;
	line-height: 1.7;
	color: var(--e-global-color-cadastral-ink);
	white-space: pre;
	overflow: hidden;
}

.bl-hm-codeblock pre .rd {
	color: var(--e-global-color-cadastral-red);
}

.bl-hm-codeblock pre .gr {
	color: var(--bl-hm-green);
}

.bl-hm-wall {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background: var(--e-global-color-cadastral-panel);
}

.bl-hm-wall-grid {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	gap: 4px;
}

.bl-hm-out {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	font-family: input-mono, ui-monospace, monospace;
	overflow: hidden;
}

.bl-hm-out .id {
	font-size: 7px;
}

.bl-hm-out .fm {
	font-size: 6px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-out .ck {
	font-size: 7px;
	color: var(--bl-hm-green);
}

.bl-hm-manifest {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	padding: 6px 12px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
}

.bl-hm-manifest .flag {
	color: var(--e-global-color-cadastral-red);
}

.bl-hm-manifest .lbl {
	color: var(--e-global-color-cadastral-graphite);
}

/* ------------------------------------------ S5: value-prop visuals ---- */
.bl-hm-vp {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: var(--e-global-color-cadastral-panel);
	color: var(--e-global-color-cadastral-ink);
	font-family: indivisible, sans-serif;
}

/* DIRECT child only: the full-bleed scene SVG. A descendant selector here also
   caught the inline icons inside the cards and stretched one to fill the cell. */
.bl-hm-vp > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bl-hm-vp-counter {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	font-family: input-mono, ui-monospace, monospace;
}

.bl-hm-vp-counter .v {
	font-size: 20px;
}

.bl-hm-vp-counter .l {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-vp-flex {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
}

.bl-hm-minicard {
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	padding: 10px;
	font-size: 11px;
	min-width: 0;
}

.bl-hm-minicard .k {
	font-family: input-mono, ui-monospace, monospace;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--e-global-color-cadastral-graphite);
	margin-bottom: 6px;
}

.bl-hm-minicard .r {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
}

.bl-hm-minicard .r .val {
	font-family: input-mono, ui-monospace, monospace;
}

.bl-hm-minicard .green {
	color: var(--bl-hm-green);
}

.bl-hm-fmt-chips {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
}

.bl-hm-fmt-chips span {
	padding: 2px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	text-align: center;
}

.bl-hm-dest {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 11px;
}

.bl-hm-dest span {
	padding: 6px 10px;
	border: 1px solid var(--e-global-color-cadastral-red);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	text-align: center;
	white-space: nowrap;
}

.bl-hm-lanes {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
}

.bl-hm-lanes .rails {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.bl-hm-lane .t {
	font-family: input-mono, ui-monospace, monospace;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-lane .rail {
	position: relative;
	height: 2px;
	margin-top: 8px;
	background: var(--e-global-color-cadastral-line);
}

.bl-hm-lane .dot {
	position: absolute;
	right: 0;
	top: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e-global-color-cadastral-red);
}

.bl-hm-lane .who {
	margin-top: 6px;
	text-align: right;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 9px;
}

.bl-hm-devices {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 16px;
}

.bl-hm-device {
	position: relative;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	overflow: hidden;
}

.bl-hm-device.d1 {
	flex: 1 1 auto;
	height: 82%;
}

.bl-hm-device.d2 {
	flex: 0 0 30%;
	height: 64%;
}

.bl-hm-device.d3 {
	flex: 0 0 22%;
	height: 52%;
}

.bl-hm-device .saved {
	position: absolute;
	top: 4px;
	right: 6px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 8px;
	color: var(--e-global-color-cadastral-graphite);
	z-index: 1;
}

.bl-hm-device .ver {
	position: absolute;
	bottom: 4px;
	left: 6px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 8px;
	color: var(--e-global-color-cadastral-graphite);
	z-index: 1;
}

.bl-hm-device .prec {
	position: absolute;
	bottom: 4px;
	right: 6px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 8px;
	color: var(--bl-hm-green);
	z-index: 1;
}

.bl-hm-toast {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 4px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-size: 10px;
	z-index: 2;
}

/* Value-prop cells: hairline internal dividers, arrow slide on hover. */
.bl-hm-vp-cell .bl-hm-arrow {
	transition: transform 0.15s ease, color 0.15s ease;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-vp-cell:hover .bl-hm-arrow {
	transform: translateX(4px);
	color: var(--e-global-color-cadastral-ink);
}

/* Stat strip ticks (prototype's survey-tick top edge). */
.bl-hm-ticks {
	background-image: repeating-linear-gradient(90deg, var(--e-global-color-cadastral-line) 0 1px, transparent 1px 40px);
	background-size: 100% 8px;
	background-repeat: no-repeat;
}

/* =====================================================================
   MOTION LAYER (bl-motion.js + bl-home.js)
   The prototype's home choreography. Everything here is authored so the
   STATIC state is already the composed end frame: if JS never runs, or
   reduced motion is set, the page still reads correctly. JS only adds the
   inline styles that play the beats.
   ===================================================================== */

/* Inline icons inherit their run's color and never stretch a flex row. */
.bl-hm-i {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: -0.12em;
}

.bl-hm-hide-sm,
.bl-hm-hide-md,
.bl-hm-hide-lg {
	display: inline-flex;
}

@media (max-width: 1499px) { .bl-hm-hide-lg { display: none; } }
@media (max-width: 1399px) { .bl-hm-hide-md { display: none; } }
@media (max-width: 1099px) { .bl-hm-hide-sm { display: none; } }

/* ---------------------------------------- scroll-lock cue (shared) ---- */
/* Shown centre-bottom while a pinned section is being scrubbed. */
.bl-hm-cue {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.bl-hm-cue.on {
	opacity: 1;
}

.bl-hm-cue em {
	font-style: normal;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-cue .d {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 50%;
	background: color-mix(in srgb, var(--e-global-color-cadastral-panel) 80%, transparent);
	color: var(--e-global-color-cadastral-ink);
	backdrop-filter: blur(4px);
	animation: bl-hm-cue-bob 1.5s ease-in-out infinite;
}

.bl-hm-cue .d .bl-hm-i {
	transform: rotate(90deg);
}

@keyframes bl-hm-cue-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

@media (max-width: 1199px) {
	.bl-hm-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bl-hm-cue { display: none; }
}

/* ---------------- annotated canvas (Trace §2): focus dimming ---------- */
/*
 * While an annotation is open the called-out region stays lit and the others
 * drop to 40%, matching the prototype's per-region dim(). Regions: the editor
 * panel, the canvas (icon rail + stage area), and the Tract A side panel.
 */
.bl-tr-annot .bl-hm-editor,
.bl-tr-annot .bl-hm-stagearea,
.bl-tr-annot .bl-hm-rail,
.bl-tr-annot .bl-hm-side {
	transition: opacity 220ms ease;
}

.bl-tr-annot[data-bl-focus] .bl-hm-editor,
.bl-tr-annot[data-bl-focus] .bl-hm-stagearea,
.bl-tr-annot[data-bl-focus] .bl-hm-rail,
.bl-tr-annot[data-bl-focus] .bl-hm-side {
	opacity: 0.4;
}

.bl-tr-annot[data-bl-focus="editor"] .bl-hm-editor,
.bl-tr-annot[data-bl-focus="canvas"] .bl-hm-stagearea,
.bl-tr-annot[data-bl-focus="canvas"] .bl-hm-rail,
.bl-tr-annot[data-bl-focus="tract"] .bl-hm-side {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bl-tr-annot .bl-hm-editor,
	.bl-tr-annot .bl-hm-stagearea,
	.bl-tr-annot .bl-hm-rail,
	.bl-tr-annot .bl-hm-side {
		transition: none;
	}
}

/* The numbered index inside a marker's tick label. */
.bl-tr-hs-t .bl-hm-mono i {
	font-style: normal;
	margin-right: 4px;
	opacity: 0.75;
}

/* ================================================== S2 canvas motion == */
/*
 * The mockup is a link to /trace/, but it must NOT react to hover (Joe,
 * 8-12-26). Left alone it did: a theme `a:hover` rule repaints the anchor's
 * colour to #333366, every descendant inherits it, and the `transition: all`
 * that lands on the anchor animated that sweep across the whole workspace.
 * Pin the colour and kill the transition on all states.
 */
a.bl-hm-canvas,
a.bl-hm-canvas:hover,
a.bl-hm-canvas:focus,
a.bl-hm-canvas:active,
a.bl-hm-canvas:visited {
	color: var(--e-global-color-cadastral-ink);
	text-decoration: none;
	transition: none;
	box-shadow: 0 1px 0 var(--e-global-color-cadastral-line);
}

/* Descendants keep their own tokens and never animate on hover either. */
a.bl-hm-canvas * {
	transition: none;
}

.bl-hm-stage {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.bl-hm-bar2 {
	position: relative;
}

.bl-hm-back {
	color: var(--e-global-color-cadastral-graphite);
	font-size: 13px;
}

.bl-hm-proj {
	font-size: 13px;
}

/* Toolbar runs: icon + label, label hides before the icon does. */
.bl-hm-tb,
.bl-hm-import {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	font-size: 12px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-tb em,
.bl-hm-import em {
	font-style: normal;
}

.bl-hm-import {
	color: var(--e-global-color-cadastral-red);
}

/* Icon rail down the left edge of the workspace. */
.bl-hm-rail {
	flex: 0 0 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-right: 1px solid var(--e-global-color-cadastral-line);
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-rail .g {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Editor: rows so each shorthand line can be clipped in independently. */
.bl-hm-editor {
	flex: 0 0 30%;
}

/* The icon rail is desktop/tablet only (prototype hides it below 768), where it
   would otherwise eat 44px of an already narrow canvas. */
@media (max-width: 767px) {
	.bl-hm-rail { display: none; }
}

/* Tract A must never wrap against the precision badge beside it. */
.bl-hm-tract-name {
	white-space: nowrap;
}

/* The document chip is positioned against the code pane. */
.bl-hm-code {
	position: relative;
	white-space: normal;
}

.bl-hm-tabs .rd {
	color: var(--e-global-color-cadastral-red);
}

.bl-hm-erow {
	display: flex;
	gap: 10px;
	white-space: pre;
}

.bl-hm-erow .ln {
	flex: 0 0 12px;
	text-align: right;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-eline {
	white-space: pre;
}

.bl-hm-eline.gr { color: #3a8f5a; }
.bl-hm-eline.rd { color: var(--e-global-color-cadastral-red); }

/* The document chip flies into the editor, then clears. */
.bl-hm-docchip {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
	font-size: 11px;
	color: var(--e-global-color-cadastral-ink);
	/* Composed end frame is "already cleared": the chip is a beat, not state. */
	opacity: 0;
}

/* Export menu, opened on the export beat. */
.bl-hm-export-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 12px;
	z-index: 20;
	width: 210px;
	padding: 4px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
	opacity: 0;
	pointer-events: none;
}

.bl-hm-export-menu .r {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	border-radius: 2px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 11px;
	color: var(--e-global-color-cadastral-ink);
}

/* Zoom controls, scale bar, north arrow. */
.bl-hm-zoom {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-north {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	border: 0;
}

.bl-hm-north em {
	font-style: normal;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 9px;
}

.bl-hm-scalebar {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	padding: 0;
}

.bl-hm-scalebar i {
	display: block;
	width: 60px;
	height: 6px;
	border: 1px solid color-mix(in srgb, var(--e-global-color-cadastral-ink) 70%, transparent);
	border-top: 0;
}

.bl-hm-scalebar em {
	font-style: normal;
	font-size: 10px;
}

/* Call rows: row 3 carries the edit-beat swap. */
.bl-hm-call {
	position: relative;
}

.bl-hm-call .c {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.bl-hm-call .pen {
	order: -1;
	margin-left: 0;
	display: inline-flex;
}

.bl-hm-row3-hl {
	position: absolute;
	inset: -1px -4px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-red) 10%, transparent);
	opacity: 0;
	pointer-events: none;
}

.bl-hm-row3-edited {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	opacity: 0;
}

.bl-hm-remainder .lbl {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--e-global-color-cadastral-graphite);
}

/* The Tract A overlay in the S4 Trace sheet must not blanket the plot on narrow
   screens (at 390 it was covering most of the traverse). */
@media (max-width: 560px) {
	.bl-hm-tractcard {
		top: 8px;
		left: 8px;
		min-width: 0;
		padding: 8px;
		font-size: 10px;
	}

	.bl-hm-tractcard .bl-hm-stat {
		margin-top: 4px;
		font-size: 10px;
	}
}

/* ==================================================== S3 pinned stage == */
/* Below 1200 (and under reduced motion) the static rows are what render. */
.bl-hm-s3-desk { display: none; }

@media (min-width: 1200px) {
	.bl-hm-s3-desk { display: block; }
	.bl-hm-s3-fallback { display: none !important; }
	/* The pin owns its own vertical space; the section padding is for the
	   fallback branch only. */
	.e-con.bl-hm-s3-sec > .e-con-inner,
	.e-con.bl-hm-s3-sec {
		padding-top: 0;
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-hm-s3-desk { display: none !important; }
	.bl-hm-s3-fallback { display: block !important; }
}

/* Travel container: 100vh of stage plus the distance the timeline scrubs over.
   Home pins for 3600px, Platform for 4200 (its §2 runs deeper), set inline. */
.bl-hm-s3 {
	position: relative;
	height: calc(100vh + var(--bl-pin-len, 3600px));
}

.bl-hm-s3-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
}

.bl-hm-s3-inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	align-items: center;
	gap: 48px;
	width: 100%;
	/* Header clearance so the copy column never sits under the sticky bar. */
	padding-top: 40px;
}

.bl-hm-s3-copy h2 {
	margin: 0;
	font-family: indivisible, sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-st-rail {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.bl-hm-st-item {
	position: relative;
	padding-left: 16px;
	margin-top: 24px;
}

.bl-hm-st-item:first-child { margin-top: 0; }

.bl-hm-st-item .bar {
	position: absolute;
	left: 0;
	top: 4px;
	width: 2px;
	height: calc(100% - 4px);
	border-radius: 2px;
	background: transparent;
	transition: background-color 0.3s ease;
}

.bl-hm-st-item .k {
	font-family: indivisible, sans-serif;
	font-size: 22px;
	line-height: 1.3;
	color: var(--e-global-color-cadastral-ink);
	opacity: 0.4;
	transition: opacity 0.3s ease;
}

.bl-hm-st-item p {
	margin: 4px 0 0;
	max-width: 380px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--e-global-color-cadastral-graphite);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bl-hm-st-item.on .bar { background: var(--e-global-color-cadastral-red); }
.bl-hm-st-item.on .k { opacity: 1; }
.bl-hm-st-item.on p { opacity: 1; }

/* Detail rail (Platform §2): header-only mono chips beside the active stage. */
.bl-hm-st-chips-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.bl-hm-st-item.on .bl-hm-st-chips-rail { opacity: 1; }

.bl-hm-st-chips-rail span {
	padding: 1px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
}

/* In the static (below-1200) rows the rail is simply always visible. */
.bl-hm-stage-row .bl-hm-st-chips-rail { opacity: 1; }

/* The API-response card bridging app and API; lands last in Deliver. */
.bl-hm-st-json {
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 42%;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
}

.bl-hm-st-json .h {
	padding: 4px 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-st-json pre,
.bl-hm-st-json-static pre {
	margin: 0;
	padding: 8px;
	border: 0;
	background: transparent;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-ink);
	white-space: pre;
}

.bl-hm-st-json .gr,
.bl-hm-st-json-static .gr { color: var(--bl-hm-green); }

/* On-page anchor beside a sheet's page link (Platform §3). */
.bl-hm-sheet-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 16px;
}

/* Doubled to stay ahead of the doubled .bl-hm-sheet-link rule further down,
   which now carries margin-top at 0-2-0 and would otherwise win on order. */
.bl-hm-sheet-links .bl-hm-sheet-link.bl-hm-sheet-link { margin-top: 0; }

/*
 * DOUBLED CLASS, TWICE OVER (8-14-26). These two rules were authored correctly
 * to the prototype and were losing BOTH halves of themselves to 0-1-1 rules:
 *
 *   underline  <- `.elementor a{text-decoration:none}` in Elementor's
 *                 frontend.min.css. The links rendered with NO underline at all,
 *                 and since the `text-decoration` shorthand also resets
 *                 text-decoration-color to currentColor, the resting decoration
 *                 colour became ink rather than line — which made the :hover
 *                 rule below a no-op, i.e. the hover looked "missing" when the
 *                 real fault was the resting state.
 *   hover colour <- `a:hover{color:inherit}` in bl-theme.css, the rule that
 *                 neutralises the parent reset's navy. At 0-1-1 it necessarily
 *                 outranks a single class, so .bl-hm-s3-more was picking up
 *                 Elementor's legacy #7A7A7A text global on hover.
 *
 * Doubling to 0-2-0 clears both. This is the same remedy bl-prose.css already
 * uses against `.elementor a` — see the note there; these bl-home link classes
 * were simply never given it.
 */
.bl-hm-sheet-anchor.bl-hm-sheet-anchor {
	font-size: 14px;
	color: var(--e-global-color-cadastral-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--e-global-color-cadastral-line);
	text-underline-offset: 4px;
}

.bl-hm-sheet-anchor.bl-hm-sheet-anchor:hover {
	color: var(--e-global-color-cadastral-ink);
	text-decoration-color: var(--e-global-color-cadastral-ink);
}

.bl-hm-s3-more.bl-hm-s3-more {
	display: inline-block;
	margin-top: 32px;
	font-size: 14px;
	color: var(--e-global-color-cadastral-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--e-global-color-cadastral-line);
	text-underline-offset: 4px;
}

.bl-hm-s3-more.bl-hm-s3-more:hover {
	color: var(--e-global-color-cadastral-ink);
	text-decoration-color: var(--e-global-color-cadastral-ink);
}

/* The stage: every layer is absolutely stacked so beats can cross-fade. */
.bl-hm-st-stage {
	position: relative;
	height: 62vh;
	min-height: 440px;
	font-family: indivisible, sans-serif;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-st-deed {
	position: absolute;
	inset: 0;
}

.bl-hm-st-deed .bl-hm-deed {
	height: 100%;
	aspect-ratio: auto;
}

/* Vertically centred by flex, not translateY(-50%): JS animates x/scale on this
   wrapper during the Plot band, and the engine writes transform wholesale. */
.bl-hm-st-chips {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 46%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 6px;
}

.bl-hm-st-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 11px;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-st-chip i {
	font-style: normal;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-st-plotwrap {
	position: absolute;
	inset: 0;
}

.bl-hm-st-plotwrap svg.bl-hm-plot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bl-hm-st-course-edit { opacity: 0; }

/* The POB marker pops with a scale. An SVG <g> scales about the SVG origin by
   default, which would fling the marker across the plot — box it to its own
   fill so the pop happens in place. */
.bl-hm-tw-pob,
.bl-hm-st-pob {
	transform-box: fill-box;
	transform-origin: center;
}

.bl-hm-st-checks {
	position: absolute;
	right: 0;
	top: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.bl-hm-st-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 12px;
	white-space: nowrap;
}

.bl-hm-st-check.green {
	border-color: color-mix(in srgb, var(--bl-hm-green) 40%, transparent);
	background: color-mix(in srgb, var(--bl-hm-green) 12%, transparent);
	color: var(--bl-hm-green);
}

.bl-hm-st-files {
	position: absolute;
	right: 0;
	top: 8px;
	width: 46%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bl-hm-st-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 12px;
}

/* Filenames truncate rather than wrapping (prototype uses `truncate`); the
   longest, spring-dale-traverse.geojson, otherwise breaks onto two lines and
   makes that card taller than the rest of the fan. */
.bl-hm-st-file > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bl-hm-st-file i {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-st-table {
	position: absolute;
	right: 0;
	bottom: 8px;
	width: 46%;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
}

.bl-hm-st-table .h {
	padding: 6px 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-st-table .r {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 12px;
	font-size: 11px;
}

.bl-hm-st-table .lbl { color: var(--e-global-color-cadastral-graphite); }
.bl-hm-st-table .val { font-family: input-mono, ui-monospace, monospace; }

/* The red phrases inside the deed that lift off as chips. */
.bl-hm-st-call {
	border-radius: 2px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-ink) 6%, transparent);
	padding: 0 2px;
}

/* ============================================ focus-stack pin (shared) ==
   Trace §5 "Why operators switch" — the page's only pin. Four claim bands
   scrub past one crossfading visual panel. Same primitives as the S3 pin, so
   any future focus-stack section can reuse these classes.
   ======================================================================= */
.bl-fs-desk { display: none; }

@media (min-width: 1200px) {
	.bl-fs-desk { display: block; }
	.bl-fs-fallback { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.bl-fs-desk { display: none !important; }
	.bl-fs-fallback { display: block !important; }
}

.bl-fs {
	position: relative;
	height: calc(100vh + var(--bl-pin-len, 2200px));
}

.bl-fs-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
}

.bl-fs-inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	align-items: center;
	gap: 48px;
	width: 100%;
	padding-top: 40px;
}

.bl-fs-copy h2 {
	margin: 0;
	font-family: indivisible, sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: var(--e-global-color-cadastral-ink);
}

.bl-fs-rail {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.bl-fs-item {
	position: relative;
	padding-left: 16px;
	margin-top: 24px;
}

.bl-fs-item:first-child { margin-top: 0; }

.bl-fs-item .bar {
	position: absolute;
	left: 0;
	top: 4px;
	width: 2px;
	height: calc(100% - 4px);
	border-radius: 2px;
	background: transparent;
	transition: background-color 0.3s ease;
}

.bl-fs-item .k {
	font-family: indivisible, sans-serif;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.3;
	color: var(--e-global-color-cadastral-ink);
	opacity: 0.4;
	transition: opacity 0.3s ease;
}

/* Body collapses via grid-template-rows so the rail's rhythm stays even. */
.bl-fs-item .p {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.bl-fs-item .p > div { overflow: hidden; }

.bl-fs-item .p p {
	margin: 8px 0 0;
	max-width: 420px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-fs-item.on .bar { background: var(--e-global-color-cadastral-red); }
.bl-fs-item.on .k { opacity: 1; }

.bl-fs-item.on .p {
	grid-template-rows: 1fr;
	opacity: 1;
}

.bl-fs-stage {
	position: relative;
	height: 62vh;
	min-height: 440px;
}

.bl-fs-vis {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.bl-fs-vis.on {
	opacity: 1;
	pointer-events: auto;
}

/*
 * Band visuals size to their content and CENTRE, up to the stage height, rather
 * than stretching to fill it. The claims differ a lot in how much they show — the
 * projects list is three rows — and stretching left that band as a mostly empty
 * 62vh box.
 */
.bl-fs-vis > .bl-hm-frame {
	width: 100%;
	height: auto;
	max-height: 100%;
	aspect-ratio: auto;
}

/* =================================================== S4 docking sheets = */
.bl-hm-s4-acc { display: block; }
.bl-hm-s4-pin { display: none; }

@media (min-width: 1200px) {
	.bl-hm-s4-pin { display: block; }
	.bl-hm-s4-acc { display: none; }
	.e-con.bl-hm-s4-sec > .e-con-inner,
	.e-con.bl-hm-s4-sec {
		padding-top: 0;
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-hm-s4-pin { display: none !important; }
	.bl-hm-s4-acc { display: block !important; }
}

.bl-hm-s4-pin {
	position: relative;
	height: calc(100vh + var(--bl-s4-pin-len, 1800px));
}

.bl-hm-s4-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
}

.bl-hm-s4-inner {
	width: 100%;
	padding-top: 40px;
}

.bl-hm-s4-inner > h2,
.bl-hm-s4-acc > h2 {
	margin: 0 0 24px;
	font-family: indivisible, sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-s4-stage {
	position: relative;
	height: 70vh;
	min-height: 500px;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
}

.bl-hm-sheet {
	position: absolute;
	inset: 0;
	border-top: 1px solid var(--e-global-color-cadastral-line);
	background: var(--e-global-color-cadastral-panel);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	font-family: indivisible, sans-serif;
	color: var(--e-global-color-cadastral-ink);
}

/* Alternating grounds so a docked stack still reads as separate sheets. */
.bl-hm-sheet:nth-child(2) { background: var(--e-global-color-cadastral-bg); }

/*
 * The header bars are raw <button>s, and the kit styles every button (survey-red
 * ground, 2px radius, white-space:nowrap, letter-spacing). Doubled class to beat
 * the kit's 0-1-1 button rules — without this the bars shrink to fit, paint a red
 * border, and wrap their CTA onto a second line.
 */
.bl-hm-sheet-head.bl-hm-sheet-head,
.bl-hm-acc-head.bl-hm-acc-head {
	display: flex;
	align-items: center;
	width: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	cursor: pointer;
	font-family: indivisible, sans-serif;
	font-weight: 500;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-sheet-head.bl-hm-sheet-head:hover,
.bl-hm-sheet-head.bl-hm-sheet-head:focus,
.bl-hm-acc-head.bl-hm-acc-head:hover,
.bl-hm-acc-head.bl-hm-acc-head:focus {
	background: transparent;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-sheet-head.bl-hm-sheet-head {
	justify-content: space-between;
	gap: 16px;
	height: var(--bl-hm-headh, 48px);
	padding: 0 20px;
}

.bl-hm-sheet-head .l {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}

.bl-hm-sheet-head .nm {
	flex: 0 0 auto;
	font-weight: 500;
	font-size: 16px;
}

.bl-hm-sheet-head .bd {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--e-global-color-cadastral-graphite);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bl-hm-sheet.on .bl-hm-sheet-head .bd { opacity: 1; }

@media (max-width: 1320px) {
	.bl-hm-sheet-head .bd { display: none; }
}

.bl-hm-sheet-cta {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--e-global-color-cadastral-ink);
	text-decoration: underline;
	text-decoration-color: var(--e-global-color-cadastral-line);
	text-underline-offset: 4px;
}

.bl-hm-sheet-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 32px;
	height: calc(100% - var(--bl-hm-headh, 48px));
	padding: 24px;
	border-top: 1px solid var(--e-global-color-cadastral-line);
}

.bl-hm-sheet-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.bl-hm-sheet-copy h3 {
	margin: 0;
	font-family: indivisible, sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-sheet-copy p {
	margin: 12px 0 0;
	max-width: 360px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--e-global-color-cadastral-graphite);
}

/*
 * The offering's page link stays RED through hover (prototype
 * OfferingsTriptych.tsx: text-[var(--primary)] underline decoration-transparent
 * hover:decoration-[var(--primary)]). The underline is always present and only
 * its colour changes, so the text never reflows on hover the way a
 * none -> underline switch makes it.
 *
 * Doubled to 0-2-0: at a single class this lost its hover colour to
 * bl-theme.css's `a:hover{color:inherit}` (0-1-1) and turned ink in light mode
 * and near-white in dark, which read as the link going dead rather than
 * responding.
 */
.bl-hm-sheet-link.bl-hm-sheet-link {
	align-self: flex-start;
	margin-top: 16px;
	font-size: 14px;
	color: var(--e-global-color-cadastral-red);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
}

.bl-hm-sheet-link.bl-hm-sheet-link:hover {
	color: var(--e-global-color-cadastral-red);
	text-decoration-color: var(--e-global-color-cadastral-red);
}

.bl-hm-sheet-vis {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
}

/* Inside a sheet the visual fills its cell instead of holding 16/10. */
.bl-hm-sheet-vis > .bl-hm-sheetvis,
.bl-hm-acc-vis > .bl-hm-sheetvis {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
}

/* The two API code specimens centre in their pane rather than stretching to
   fill it (the prototype stacks them at natural height, gap 12). */
.bl-hm-codes {
	justify-content: center;
}

.bl-hm-sheet-vis .bl-hm-codeblock,
.bl-hm-acc-vis .bl-hm-codeblock {
	flex: 0 0 auto;
}

.bl-hm-acc-vis {
	position: relative;
	aspect-ratio: 16 / 10;
	width: 100%;
	margin-top: 16px;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
}

/* --- accordion (below 1200) */
.bl-hm-acc {
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	font-family: indivisible, sans-serif;
	color: var(--e-global-color-cadastral-ink);
}

.bl-hm-acc-item {
	border-top: 1px solid var(--e-global-color-cadastral-line);
	background: var(--e-global-color-cadastral-panel);
}

.bl-hm-acc-item:first-child { border-top: 0; }
.bl-hm-acc-item:nth-child(2) { background: var(--e-global-color-cadastral-bg); }

.bl-hm-acc-head.bl-hm-acc-head {
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	font-size: 16px;
}

.bl-hm-acc-head .chev {
	flex: 0 0 auto;
	display: inline-flex;
	transition: transform 0.2s ease;
}

.bl-hm-acc-head .chev .bl-hm-i { transform: rotate(90deg); }
.bl-hm-acc-item.on .bl-hm-acc-head .chev { transform: rotate(180deg); }

.bl-hm-acc-panel {
	display: none;
	padding: 0 20px 24px;
}

.bl-hm-acc-item.on .bl-hm-acc-panel { display: block; }

.bl-hm-acc-panel p {
	margin: 0;
	max-width: 420px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-acc-panel .bl-hm-sheet-link {
	display: inline-block;
	margin-top: 12px;
}

/* --- BPS backlog wall: scan converts to output as the front passes */
.bl-hm-cell { position: relative; }

.bl-hm-tile {
	position: absolute;
	inset: 0;
}

.bl-hm-scan {
	position: absolute;
	inset: 0;
	overflow: hidden;
	padding: 4px 6px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	/* End frame: everything is already standardized output. */
	opacity: 0;
}

.bl-hm-scan .hd {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 4px;
}

.bl-hm-scan .hd .b {
	display: block;
	width: 33%;
	height: 8px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-graphite) 25%, transparent);
}

.bl-hm-scan .hd .sq {
	display: block;
	width: 12px;
	height: 12px;
	border: 1px solid color-mix(in srgb, var(--e-global-color-cadastral-graphite) 40%, transparent);
}

.bl-hm-scan .ls {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bl-hm-scan .ls i {
	display: block;
	height: 2px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-graphite) 25%, transparent);
}

.bl-hm-out {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 1px;
	padding: 4px 6px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	font-family: input-mono, ui-monospace, monospace;
	overflow: hidden;
}

.bl-hm-out .tp {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.bl-hm-out .ck { color: var(--bl-hm-green); display: inline-flex; }

.bl-hm-out .id {
	font-size: 7px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bl-hm-out .fm { display: flex; gap: 2px; }

.bl-hm-out .fm i {
	font-style: normal;
	padding: 0 2px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 1px;
	font-size: 6px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-graphite);
}

/* The front is bounded by the tile grid, not the whole wall, so it does not
   run down through the manifest footer (grid must be positioned for that). */
.bl-hm-wall-grid {
	position: relative;
}

.bl-hm-front {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	width: 2px;
	background: var(--e-global-color-cadastral-red);
	opacity: 0;
	pointer-events: none;
}

.bl-hm-manifest .fmts { display: flex; gap: 4px; }

.bl-hm-manifest .fmts i {
	font-style: normal;
	padding: 0 4px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 1px;
}

/* =============================================== S5 value-prop motion == */
/* The cell body is the visual; the label bar is grounded at the bottom. */
.e-con.bl-hm-vp-cell {
	overflow: hidden;
	text-decoration: none;
}

.bl-hm-vp-cell > .elementor-widget-html {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	flex-direction: column;
}

.bl-hm-vp-cell > .elementor-widget-html > .elementor-widget-container {
	display: flex;
	flex: 1 1 auto;
	min-height: 180px;
	flex-direction: column;
}

/* Scale cell: the scene scales about Spring Dale, in view-box units. */
.bl-hm-vp-scale .vp-scene {
	transform-box: view-box;
	transform-origin: 200px 150px;
}

.bl-hm-vp-counter {
	display: flex;
	align-items: baseline;
	gap: 8px;
	top: auto;
	bottom: 12px;
	left: 16px;
}

.bl-hm-vp-counter .v { font-size: 20px; }

/* Format cell: chips travel right into the destinations. */
.bl-hm-fmt-chips span {
	align-self: flex-start;
	white-space: nowrap;
}

/* Lane cell: each actor crosses a bordered rail. */
.bl-hm-lane .rail {
	position: relative;
	height: 28px;
	margin-top: 4px;
	overflow: hidden;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
}

/*
 * The actor's name TRAILS the dot (row-reverse) rather than leading it. In the
 * prototype the label sits ahead of the dot, so at the travel end (left 92%) the
 * rail's overflow clips it to "M." / "svc" — and that clipped state is what the
 * cell idles on. Trailing keeps the name readable at rest with identical motion.
 */
.bl-hm-lane .vp-dot {
	position: absolute;
	top: 50%;
	left: 92%;
	/* Shift the box fully left of its anchor so the DOT lands exactly on the
	   travel position and the name trails behind it. Safe to use a transform
	   here: JS animates leftPct on this element, never its transform. */
	transform: translateY(-50%) translateX(-100%);
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.bl-hm-lane .vp-dot i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e-global-color-cadastral-red);
}

.bl-hm-lane .vp-dot em {
	font-style: normal;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 9px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-teamcard { flex: 0 0 38%; }

.bl-hm-teamcard .k {
	display: flex;
	align-items: center;
	gap: 5px;
	text-transform: none;
	letter-spacing: 0;
	font-family: indivisible, sans-serif;
	font-size: 11px;
	color: var(--e-global-color-cadastral-ink);
}

/* Device cell: the plot is handed across devices, then a release lands. */
.bl-hm-devices { align-items: center; }

.bl-hm-device {
	display: flex;
	flex-direction: column;
	align-self: center;
	height: auto;
}

.bl-hm-device.d1 { flex: 1 1 auto; }
.bl-hm-device.d2 { flex: 0 0 30%; }
.bl-hm-device.d3 { flex: 0 0 22%; }

.bl-hm-device .tb,
.bl-hm-device .bb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px 6px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 8px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-hm-device .tb { border-bottom: 1px solid var(--e-global-color-cadastral-line); }
.bl-hm-device .bb { border-top: 1px solid var(--e-global-color-cadastral-line); }

.bl-hm-device .tb .dots { display: flex; gap: 3px; }

.bl-hm-device .tb .dots b {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--e-global-color-cadastral-line);
}

.bl-hm-device .tb em,
.bl-hm-device .bb em { font-style: normal; }

.bl-hm-device .scr {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
}

.bl-hm-device .scr svg.vp-plot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 5px;
}

.bl-hm-device .prec {
	position: absolute;
	bottom: 3px;
	left: 4px;
	font-style: normal;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 8px;
	color: var(--bl-hm-green);
	z-index: 1;
}

/*
 * Centred with inset, NOT translate(-50%,-50%): JS animates `scale` on this
 * element and the engine writes `transform` wholesale, so a layout transform
 * here would be overwritten and the ring would jump to the top-left. Anything
 * bl-home.js animates must therefore be positioned without transforms.
 * inset:0 also keeps the ring inside the cell at 390px (the prototype's 120%
 * box is wider than the viewport there); the gradient fades by 65% regardless.
 */
.vp-pulse-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--e-global-color-cadastral-red) 22%, transparent) 0%, transparent 65%);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

.bl-hm-vp-dev .vp-toast { z-index: 2; }

/* ============================================== S6 industry tile motion */
/* Survey-red pen stroke unwinds around the card on hover. */
.bl-hm-tile-draw {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.bl-hm-tile-draw rect {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.55s ease;
}

/*
 * SCOPE THE HOVER TO THE TILE (8-14-26).
 *
 * This used to carry a second, unscoped selector — `.e-con:hover
 * .bl-hm-tile-draw rect` — as a fallback. `.e-con:hover` matches ANY Elementor
 * container in the ancestor chain, so the grid's own container qualified and
 * hovering one tile drew all twelve pen strokes at once. Hovering the empty
 * gutter between tiles did it too, since the cursor is still inside the section
 * container. Measured before the fix with qa/diag-tile-bleed.js: 12 of 12
 * strokes and 12 of 12 arrows lit from a single tile, and 12 of 12 from the
 * gutter.
 *
 * The tile is a container with html_tag=a and no bl- class of its own, so it is
 * addressed as "the clickable card holding a draw SVG": a.e-con is the tile and
 * nothing else, since no ancestor container is an anchor.
 *
 * The selector kept here deliberately does NOT spell out the widget chain. The
 * original attempt did — `.e-con > .elementor-widget > .elementor-widget-container
 * > .bl-hm-tile-draw` — and it matched nothing, because Elementor 4.x no longer
 * emits .elementor-widget-container: the real chain is
 * `a.e-con > div.elementor-widget-html > svg.bl-hm-tile-draw`. That dead selector
 * is why the unscoped fallback existed and why removing the fallback alone killed
 * the hover outright. Verified against the live DOM with qa/diag-tile-dom.js;
 * :has() with a descendant match now survives that wrapper appearing or not.
 */
a.e-con:has(.bl-hm-tile-draw):hover .bl-hm-tile-draw rect {
	stroke-dashoffset: 0;
}

/* The draw widget must not take part in the column flow. The second selector
   named .elementor-widget-container, which Elementor 4.x does not emit, so it
   was dead and only the SVG itself was being positioned; :has() on a descendant
   matches the real chain (.elementor-widget-html > svg) either way. */
.bl-hm-tile-draw,
.elementor-widget-html:has(.bl-hm-tile-draw) {
	position: absolute;
	inset: 0;
	margin: 0;
}

.bl-hm-tile-label { position: relative; z-index: 1; }

.bl-hm-tile-label .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.bl-hm-tile-arrow {
	flex: 0 0 auto;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	color: var(--e-global-color-cadastral-ink);
}

/* The arrow lives in the label widget, a SIBLING of the draw widget, so it rides
   the same tile scope rather than any chain through the draw itself. */
a.e-con:has(.bl-hm-tile-draw):hover .bl-hm-tile-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* ----------------------------- Platform page (bl-pl-*) ---------------- */
.bl-pl-plate {
	position: relative;
	padding: 12px 32px;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 13px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--e-global-color-cadastral-graphite);
	scroll-margin-top: 96px;
}

.bl-pl-plate::before,
.bl-pl-plate::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border: 0 solid var(--e-global-color-cadastral-graphite);
	opacity: 0.5;
}

.bl-pl-plate::before {
	top: 0;
	left: 0;
	border-top-width: 1px;
	border-left-width: 1px;
}

.bl-pl-plate::after {
	bottom: 0;
	right: 0;
	border-bottom-width: 1px;
	border-right-width: 1px;
}

/* img-qualified: .bl-pl-capture img (0-1-1) would beat a bare class. */
img.bl-mode-dark,
.bl-mode-dark {
	display: none;
}

html[data-bl-theme="dark"] img.bl-mode-light,
html[data-bl-theme="dark"] .bl-mode-light {
	display: none;
}

html[data-bl-theme="dark"] img.bl-mode-dark,
html[data-bl-theme="dark"] .bl-mode-dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	html:not([data-bl-theme="light"]) img.bl-mode-light,
	html:not([data-bl-theme="light"]) .bl-mode-light {
		display: none;
	}

	html:not([data-bl-theme="light"]) img.bl-mode-dark,
	html:not([data-bl-theme="light"]) .bl-mode-dark {
		display: block;
	}
}

.bl-pl-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.bl-pl-rail span {
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
	border: 1px solid var(--e-global-color-cadastral-line);
	background: var(--e-global-color-cadastral-panel);
	border-radius: 2px;
	padding: 2px 8px;
}

.bl-pl-jsoncard {
	position: absolute;
	bottom: 8px;
	left: 12px;
	width: 42%;
	min-width: 190px;
	z-index: 1;
}

.bl-pl-json {
	margin: 0;
	padding: 8px;
	border: 0;
	background: transparent;
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-ink);
	white-space: pre;
	overflow: hidden;
}

.bl-pl-json .gr {
	color: var(--bl-hm-green);
}

.bl-pl-showcase {
	display: grid;
	grid-template-columns: 0.9fr 1.6fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 980px) {
	.bl-pl-showcase {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.bl-pl-sc-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 16px 0;
	cursor: pointer;
	font-family: indivisible, sans-serif;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
}

.bl-pl-sc-item .t {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 500;
	color: var(--e-global-color-cadastral-graphite);
	opacity: 0.7;
	transition: color 0.3s, opacity 0.3s;
}

.bl-pl-sc-item .t .tag {
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	padding: 2px 6px;
	font-weight: 400;
}

.bl-pl-sc-item.on .t {
	color: var(--e-global-color-cadastral-ink);
	opacity: 1;
}

.bl-pl-sc-item .b {
	display: none;
	margin-top: 6px;
	max-width: 360px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-pl-sc-item.on .b {
	display: block;
}

.bl-pl-sc-item .bar {
	display: block;
	position: relative;
	height: 2px;
	margin-top: 16px;
	background: var(--e-global-color-cadastral-line);
	overflow: hidden;
}

.bl-pl-sc-item .bar i {
	position: absolute;
	inset: 0;
	background: var(--e-global-color-cadastral-red);
	transform: scaleX(0);
	transform-origin: left;
}

.bl-pl-sc-item.on .bar i {
	animation: bl-pl-progress 5000ms linear forwards;
}

@keyframes bl-pl-progress {
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-pl-sc-item.on .bar i {
		animation: none;
		transform: scaleX(1);
	}
}

.bl-pl-sc-right {
	min-width: 0;
}

.bl-pl-sc-cap {
	display: none;
}

.bl-pl-sc-cap.on {
	display: block;
}

.bl-pl-capture {
	margin: 0;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	overflow: hidden;
	background: var(--e-global-color-cadastral-panel);
}

.bl-pl-capture img {
	display: block;
	width: 100%;
	height: auto;
}

.bl-pl-api-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
}

.bl-pl-api-tabs button {
	font-family: indivisible, sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: transparent;
	color: var(--e-global-color-cadastral-graphite);
	cursor: pointer;
}

.bl-pl-api-tabs button.on {
	color: var(--e-global-color-cadastral-ink);
	border-color: var(--e-global-color-cadastral-ink);
}

.bl-pl-api-pane {
	display: none;
	flex-direction: column;
	gap: 12px;
}

.bl-pl-api-pane.on {
	display: flex;
}

.bl-pl-api-pane .bl-hm-codeblock {
	flex: none;
}

.bl-pl-caprows .r {
	padding: 12px 0;
	border-top: 1px solid var(--e-global-color-cadastral-line);
	font-family: indivisible, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--e-global-color-cadastral-ink);
}

.bl-pl-caprows .r:last-child {
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
}

.bl-pl-tl {
	position: relative;
}

.bl-pl-tl .spine {
	position: absolute;
	top: 0;
	bottom: 64px;
	left: 50%;
	width: 1px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-line) 70%, transparent);
}

.bl-pl-tl .spine i {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--e-global-color-cadastral-red);
	transition: height 0.2s linear;
}

.bl-pl-tl ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.bl-pl-tl .row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	opacity: 0.25;
	transform: translateY(10px);
	transition: opacity 0.5s, transform 0.5s;
}

.bl-pl-tl .row.lit {
	opacity: 1;
	transform: none;
}

.bl-pl-tl .row.alt .copy {
	order: 2;
}

.bl-pl-tl .row.alt .art {
	order: 1;
}

.bl-pl-tl .station {
	position: absolute;
	left: 50%;
	top: 4px;
	transform: translateX(-50%);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--e-global-color-cadastral-line);
	background: var(--e-global-color-cadastral-bg);
	font-family: input-mono, ui-monospace, monospace;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
	z-index: 1;
}

.bl-pl-tl .row.lit .station {
	border-color: var(--e-global-color-cadastral-red);
	color: var(--e-global-color-cadastral-red);
}

.bl-pl-tl .copy h3 {
	margin: 0;
	font-family: indivisible, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--e-global-color-cadastral-ink);
}

.bl-pl-tl .copy p {
	margin: 8px 0 0;
	max-width: 380px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-pl-tl .art {
	max-width: 340px;
	justify-self: center;
	width: 100%;
}

.bl-pl-proc {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	padding: 12px;
}

.bl-pl-proc span {
	aspect-ratio: 3 / 4;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
}

.bl-pl-proc span.f {
	background: var(--e-global-color-cadastral-panel);
}

.bl-pl-proc span.e {
	background: var(--e-global-color-cadastral-bg);
}

.bl-pl-proc span svg {
	width: 100%;
	height: auto;
}

.bl-pl-proc .front {
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 54%;
	width: 1px;
	background: var(--e-global-color-cadastral-red);
}

.bl-pl-tl .foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	justify-content: center;
}

.bl-pl-check {
	color: var(--bl-hm-green);
	font-size: 14px;
}

.bl-pl-tl .foot .note {
	font-size: 12px;
	color: var(--e-global-color-cadastral-graphite);
}

@media (max-width: 899px) {
	.bl-pl-tl .spine {
		left: 12px;
	}

	.bl-pl-tl .row,
	.bl-pl-tl .row.alt .copy,
	.bl-pl-tl .row.alt .art {
		display: block;
		order: initial;
		padding-left: 48px;
	}

	.bl-pl-tl .row .art {
		margin-top: 16px;
		max-width: 320px;
		justify-self: start;
	}

	.bl-pl-tl .station {
		left: 12px;
		transform: translateX(-50%);
	}
}

.bl-pl-vframe {
	position: relative;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	overflow: hidden;
	background: var(--e-global-color-cadastral-panel);
}

.bl-pl-vframe .bl-hm-vp {
	position: absolute;
	inset: 0;
}

.bl-pl-showcase > * {
	min-width: 0;
}

.bl-pl-sc-item {
	box-sizing: border-box;
}

/* Kit button rules (.elementor-kit-N button, 0-1-1) beat one class: pin the
   showcase items and api tabs at 0-2-0. */
.bl-pl-showcase .bl-pl-sc-item {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 16px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 0;
	color: inherit;
}

.bl-pl-api .bl-pl-api-tabs button {
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	width: auto;
}

.bl-pl-api .bl-pl-api-tabs button.on {
	border-color: var(--e-global-color-cadastral-ink);
}

.bl-hm-table.bl-pl-jsoncard {
	max-width: calc(100% - 24px);
	overflow: hidden;
}

.bl-pl-jsoncard pre.bl-pl-json {
	max-width: 100%;
	overflow: hidden;
	white-space: pre;
}

/* The prototype RootLayout wraps the site in overflow-x-clip; mirror it. */
html,
body {
	overflow-x: clip;
}

/* ------------------------------- Trace page (bl-tr-*) ----------------- */
.bl-tr-annot {
	cursor: default;
}

.bl-tr-hotspots {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.bl-tr-hs {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

.bl-tr-hs-t {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 6px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	color: var(--e-global-color-cadastral-graphite);
	font-size: 10px;
	cursor: pointer;
}

.bl-tr-hs.open .bl-tr-hs-t {
	color: var(--e-global-color-cadastral-red);
	border-color: var(--e-global-color-cadastral-red);
}

.bl-tr-hs-card {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	width: 248px;
	padding: 12px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	font-family: indivisible, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: var(--e-global-color-cadastral-ink);
	z-index: 4;
}

.bl-tr-hs.open .bl-tr-hs-card {
	display: block;
}

.bl-tr-hs-card.card-l {
	left: 0;
}

.bl-tr-hs-card.card-c {
	left: 50%;
	transform: translateX(-50%);
}

.bl-tr-hs-card.card-r {
	right: 0;
}

.bl-tr-hs-card a {
	display: inline-block;
	margin-top: 4px;
	color: var(--e-global-color-cadastral-red);
	text-decoration: none;
}

@media (max-width: 1199px) {
	.bl-tr-hs-t span {
		display: none;
	}
}

/* workflow */
.bl-tr-wf {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 1199px) {
	.bl-tr-wf {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.bl-tr-wf-list {
	border-top: 1px solid var(--e-global-color-cadastral-line);
}

.bl-tr-wf .bl-tr-wf-item {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 0;
	padding: 20px 0;
	cursor: pointer;
	font-family: indivisible, sans-serif;
	color: inherit;
	box-sizing: border-box;
}

.bl-tr-wf-item .t {
	display: block;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--e-global-color-cadastral-ink);
	opacity: 0.45;
	transition: opacity 0.3s;
}

.bl-tr-wf-item.on .t {
	opacity: 1;
}

.bl-tr-wf-item .b {
	display: none;
	margin-top: 8px;
	max-width: 440px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-tr-wf-item.on .b {
	display: block;
}

.bl-tr-wf-item .bar {
	display: none;
	position: relative;
	height: 2px;
	margin-top: 16px;
	background: var(--e-global-color-cadastral-line);
	overflow: hidden;
}

.bl-tr-wf-item.on .bar {
	display: block;
}

.bl-tr-wf-item.on .bar i {
	position: absolute;
	inset: 0;
	background: var(--e-global-color-cadastral-red);
	transform: scaleX(0);
	transform-origin: left;
	animation: bl-pl-progress 5000ms linear forwards;
}

@media (prefers-reduced-motion: reduce) {
	.bl-tr-wf-item.on .bar i {
		animation: none;
		transform: scaleX(1);
	}
}

.bl-tr-wf-panel {
	position: relative;
	height: 58vh;
	min-height: 440px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	overflow: hidden;
	font-family: indivisible, sans-serif;
}

@media (max-width: 1199px) {
	.bl-tr-wf-panel {
		height: 52vh;
		min-height: 360px;
	}
}

.bl-tr-wf-state {
	position: absolute;
	inset: 0;
	display: none;
}

.bl-tr-wf-state.on {
	display: block;
}

.bl-tr-wf-state .g2 {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 16px;
}

@media (max-width: 560px) {
	.bl-tr-wf-state .g2 {
		grid-template-columns: 1fr;
	}
}

.bl-tr-wf-state .g2 > * {
	min-width: 0;
	min-height: 0;
}

.bl-tr-wf-state .center {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bl-tr-wf-state .miniplot {
	position: relative;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	min-height: 140px;
}

.bl-tr-deed-sm {
	overflow: hidden;
}

.bl-hm-chiplist .k {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
	margin-bottom: 4px;
}

.bl-hm-chiplist .row.edit .c {
	border-color: var(--e-global-color-cadastral-red);
	background: color-mix(in srgb, var(--e-global-color-cadastral-red) 8%, var(--e-global-color-cadastral-panel));
}

.bl-hm-chiplist .row .c em {
	font-style: normal;
	font-size: 9px;
	color: var(--e-global-color-cadastral-red);
}

.bl-tr-checkcard {
	max-width: 340px;
	width: 100%;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	padding: 20px;
}

.bl-tr-export {
	max-width: 340px;
	width: 100%;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	padding: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.bl-tr-export .hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.bl-tr-export .hd .t {
	font-size: 15px;
	font-weight: 500;
}

.bl-tr-export .hd .s {
	font-size: 11px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-tr-export .ft {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--bl-hm-green);
}

.bl-tr-export .ft .bl-hm-mono {
	color: var(--bl-hm-green);
}

/* feature tiles */
.bl-tr-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

@media (max-width: 980px) {
	.bl-tr-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.bl-tr-tiles {
		grid-template-columns: 1fr;
	}
}

.bl-tr-tile {
	display: flex;
	flex-direction: column;
	min-height: 220px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	padding: 16px;
	overflow: hidden;
	text-decoration: none;
	color: var(--e-global-color-cadastral-ink);
	font-family: indivisible, sans-serif;
	transition: border-color 0.2s;
}

.bl-tr-tile:hover {
	border-color: var(--e-global-color-cadastral-ink);
	color: var(--e-global-color-cadastral-ink);
}

.bl-tr-tile .top {
	display: flex;
	justify-content: flex-end;
	min-height: 20px;
}

.bl-tr-tile .tag {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bl-hm-green);
	border: 1px solid color-mix(in srgb, var(--bl-hm-green) 40%, transparent);
	border-radius: 2px;
	padding: 2px 6px;
}

.bl-tr-tile .t {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.bl-tr-tile .b {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-tr-tile .mb {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: center;
	min-height: 36px;
}

.bl-tr-tile .mb > * {
	width: 100%;
}

.bl-tr-tile .mb .beat {
	display: inline-block;
	width: auto;
	font-size: 11px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	padding: 4px 8px;
}

.bl-tr-tile .mb .beat.green {
	color: var(--bl-hm-green);
	border-color: color-mix(in srgb, var(--bl-hm-green) 40%, transparent);
}

.bl-tr-tile .mb .kv {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 11px;
}

.bl-tr-tile .mb .kv i {
	font-style: normal;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-tr-tile .mb .kv b {
	font-weight: 400;
}

.bl-tr-tile .mb .badges {
	display: flex;
	gap: 4px;
}

.bl-tr-tile .mb .badges b {
	font-weight: 400;
	font-size: 9px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	padding: 2px 5px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-tr-tile .mb .layers {
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.bl-tr-tile .mb .layers i {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--e-global-color-cadastral-ink);
}

.bl-tr-tile .mb .layers i.r {
	background: var(--e-global-color-cadastral-red);
	opacity: 0.6;
}

.bl-tr-tile .mb svg {
	max-height: 36px;
}

/* why-switch visuals */
.bl-tr-me,
.bl-tr-rf,
.bl-tr-plat,
.bl-tr-math {
	position: absolute;
	inset: 0;
	padding: 16px;
	font-family: indivisible, sans-serif;
	font-size: 12px;
	color: var(--e-global-color-cadastral-ink);
}

.bl-tr-me .k,
.bl-tr-rf .k,
.bl-tr-plat .k {
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
	margin-bottom: 10px;
}

.bl-tr-me .g2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	height: calc(100% - 28px);
}

.bl-tr-me .field {
	border: 1px solid var(--e-global-color-cadastral-red);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	padding: 6px 8px;
	font-size: 12px;
}

.bl-tr-me .chip {
	margin-top: 10px;
	display: inline-block;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	padding: 4px 8px;
	font-size: 11px;
}

.bl-tr-me .miniplot {
	position: relative;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
}

.bl-tr-rf {
	display: flex;
	gap: 8px;
}

.bl-tr-rf .p {
	flex: 1;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	font-size: 10px;
	overflow: hidden;
}

.bl-tr-rf .p span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bl-tr-rf .p.deed i {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--e-global-color-cadastral-line);
	opacity: 0.6;
}

.bl-tr-rf .green {
	color: var(--bl-hm-green);
}

.bl-tr-plat .r {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	padding: 8px 10px;
	margin-top: 8px;
	font-size: 11px;
}

.bl-tr-plat .r span {
	color: var(--e-global-color-cadastral-graphite);
}

.bl-tr-math {
	max-width: 320px;
	margin: 0 auto;
	position: relative;
	inset: auto;
	padding: 24px 16px;
}

/* shorthand mock */
.bl-tr-sh {
	height: 240px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-bg);
	padding: 16px;
	display: flex;
	flex-direction: column;
	font-family: indivisible, sans-serif;
}

@media (max-width: 860px) {
	.bl-tr-sh {
		height: 200px;
	}
}

.bl-tr-sh .k {
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
	margin-bottom: 10px;
}

.bl-tr-sh .field {
	border: 1px solid var(--e-global-color-cadastral-red);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	padding: 8px 10px;
	font-size: 13px;
}

.bl-tr-sh .chips {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}

.bl-tr-sh .chips span {
	width: fit-content;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	padding: 4px 8px;
	font-size: 12px;
}

.bl-tr-sh .chips span.red {
	border-color: var(--e-global-color-cadastral-red);
}

.bl-tr-wf .bl-tr-wf-item,
.bl-pl-showcase .bl-pl-sc-item {
	white-space: normal;
}

/* --------------------------- API + BPS pages (bl-api-/bl-bps-) -------- */
.bl-api-frame {
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-bg);
	overflow: hidden;
	min-height: 140px;
	display: flex;
	flex-direction: column;
}

.bl-api-frame .t {
	padding: 4px 10px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-api-frame pre {
	margin: 0;
	padding: 12px;
	border: 0;
	background: transparent;
	font-size: 11px;
	line-height: 1.7;
	color: var(--e-global-color-cadastral-ink);
	white-space: pre;
	overflow: hidden;
}

.bl-api-frame .rd {
	color: var(--e-global-color-cadastral-red);
}

.bl-api-frame .mut {
	color: var(--e-global-color-cadastral-graphite);
}

.bl-api-frame .gr {
	color: var(--bl-hm-green);
}

.bl-api-frame .dv {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
}

.bl-api-frame .dv .bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bl-api-frame .dv .bars i {
	display: block;
	height: 8px;
	border-radius: 1px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-graphite) 25%, transparent);
}

/* specimen */
.bl-api-wrap {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 980px) {
	.bl-api-wrap {
		grid-template-columns: 1fr;
	}
}

.bl-api-cards {
	display: flex;
	flex-direction: column;
	gap: 28vh;
	padding: 10vh 0 40vh;
}

@media (max-width: 980px) {
	.bl-api-cards {
		gap: 16px;
		padding: 0;
		order: 2;
	}
}

.bl-api-card {
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	padding: 24px;
	opacity: 0.5;
	transition: opacity 0.3s;
	font-family: indivisible, sans-serif;
}

.bl-api-card.on {
	opacity: 1;
}

.bl-api-card .k {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-red);
}

.bl-api-card h3 {
	margin: 8px 0 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--e-global-color-cadastral-ink);
}

.bl-api-card p {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-api-sticky {
	position: sticky;
	top: 128px;
	min-width: 0;
}

@media (max-width: 980px) {
	.bl-api-sticky {
		position: static;
		order: 1;
	}
}

.bl-api-spec {
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	overflow: hidden;
	font-family: indivisible, sans-serif;
}

.bl-api-spec .bar {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 12px;
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-api-spec .g2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
	.bl-api-spec .g2 {
		grid-template-columns: 1fr;
	}
}

.bl-api-spec .payload {
	border-right: 1px solid var(--e-global-color-cadastral-line);
	min-width: 0;
}

@media (max-width: 560px) {
	.bl-api-spec .payload {
		border-right: 0;
		border-bottom: 1px solid var(--e-global-color-cadastral-line);
	}
}

.bl-api-json {
	margin: 0;
	padding: 16px;
	border: 0;
	background: transparent;
	font-size: 11px;
	line-height: 1.75;
	color: var(--e-global-color-cadastral-ink);
	white-space: pre;
	overflow: hidden;
}

.bl-api-json .mut {
	color: var(--e-global-color-cadastral-graphite);
}

.bl-api-json .hl {
	border-radius: 2px;
	transition: background 0.3s;
}

.bl-api-spec[data-state="0"] .hl0,
.bl-api-spec[data-state="1"] .hl1,
.bl-api-spec[data-state="2"] .hl2,
.bl-api-spec[data-state="3"] .hl3,
.bl-api-spec[data-state="4"] .hl4 {
	background: color-mix(in srgb, var(--e-global-color-cadastral-red) 14%, transparent);
}

.bl-api-spec .drawing {
	position: relative;
	background: var(--e-global-color-cadastral-bg);
	min-height: 320px;
}

.bl-api-plot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 12px;
}

.bl-api-spec .ov {
	display: none;
}

.bl-api-spec[data-state="0"] .ov0,
.bl-api-spec[data-state="1"] .ov1,
.bl-api-spec[data-state="2"] .ov2,
.bl-api-spec[data-state="4"] .ov4 {
	display: block;
}

.bl-api-spec[data-state="0"] .feat {
	stroke: var(--e-global-color-cadastral-red);
	stroke-width: 4;
}

.bl-api-spec .badges {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: none;
	gap: 4px;
}

.bl-api-spec[data-state="3"] .badges {
	display: flex;
}

.bl-api-spec .badges b {
	font-weight: 400;
	font-size: 10px;
	text-transform: uppercase;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	padding: 2px 6px;
}

/* bps wall */
.bl-bps-wall {
	height: 62vh;
	min-height: 440px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 3px;
	background: var(--e-global-color-cadastral-panel);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
}

.bl-bps-wall .bl-hm-wall-grid {
	flex: 1 1 auto;
	min-height: 0;
}

/* BUGFIX 2026-08-12 (found while building /bps/how-it-works/, but the defect was
   already live on /bps/): `.bl-hm-out` is defined TWICE in this file at equal
   specificity (0-1-0). The later definition is the HOME page's scan tile, which
   is `position: absolute; inset: 0` because it sits inside an absolute
   `.bl-hm-tile` within a relative `.bl-hm-cell`. Source order made that rule win
   everywhere, so the BPS backlog wall's 36 tiles — which are DIRECT grid
   children, not wrapped in a cell/tile pair — all collapsed on top of each other
   and filled the grid. Only the last tile in DOM order was visible, which is why
   the wall read as one empty box showing `tract-2856` (the final id in the
   array).

   The two contexts are distinguishable by structure: home is
   `.bl-hm-wall-grid > .bl-hm-cell > .bl-hm-tile > .bl-hm-out`, the wall is
   `.bl-hm-wall-grid > .bl-hm-out`. The direct-child selector below therefore
   reaches ONLY the wall (and at 0-2-0 it outranks the absolute rule regardless
   of source order), restoring the grid-tile presentation from the first
   definition without touching the home animation. */
.bl-hm-wall-grid > .bl-hm-out {
	position: static;
	inset: auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--e-global-color-cadastral-bg);
}

/* ------------------------- Features hub + pages (bl-ft-*) ------------- */
.bl-ft-hub {
	display: grid;
	grid-template-columns: 220px 1fr;
	column-gap: 48px;
	font-family: indivisible, sans-serif;
}

@media (max-width: 1099px) {
	.bl-ft-hub {
		grid-template-columns: 1fr;
	}
}

.bl-ft-rail {
	position: sticky;
	top: 132px;
	align-self: start;
	padding: 64px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-left: 1px solid var(--e-global-color-cadastral-line);
	padding-left: 16px;
}

@media (max-width: 1099px) {
	.bl-ft-rail {
		display: none;
	}
}

.bl-ft-rail a {
	display: flex;
	gap: 10px;
	align-items: baseline;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.35;
	color: var(--e-global-color-cadastral-ink);
	opacity: 0.5;
	transition: opacity 0.2s;
}

.bl-ft-rail a .n {
	font-size: 11px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-ft-rail a.on {
	opacity: 1;
}

.bl-ft-rail a.on .n {
	color: var(--e-global-color-cadastral-red);
}

.bl-ft-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	padding: 64px 0;
	border-top: 1px solid var(--e-global-color-cadastral-line);
	scroll-margin-top: 140px;
}

@media (max-width: 899px) {
	.bl-ft-block {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 48px 0;
	}
}

.bl-ft-block.flip .vis {
	order: -1;
}

@media (max-width: 899px) {
	.bl-ft-block.flip .vis {
		order: 0;
	}
}

.bl-ft-block .meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bl-ft-block .meta .n {
	font-size: 12px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-ft-block .tag,
.bl-ft-rel .tag {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bl-hm-green);
	border: 1px solid color-mix(in srgb, var(--bl-hm-green) 40%, transparent);
	border-radius: 2px;
	padding: 2px 6px;
}

.bl-ft-block h2 {
	margin: 8px 0 0;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--e-global-color-cadastral-ink);
}

@media (max-width: 560px) {
	.bl-ft-block h2 {
		font-size: 23px;
	}
}

.bl-ft-block p {
	margin: 16px 0 0;
	max-width: 460px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-ft-block ul {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bl-ft-block ul li {
	position: relative;
	padding-left: 14px;
	font-size: 15px;
	color: var(--e-global-color-cadastral-ink);
}

.bl-ft-block ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--e-global-color-cadastral-red);
}

.bl-ft-block .cta {
	display: inline-block;
	margin-top: 28px;
	font-size: 14px;
	color: var(--e-global-color-cadastral-ink);
	text-decoration: underline;
	text-decoration-color: var(--e-global-color-cadastral-line);
	text-underline-offset: 4px;
}

.bl-ft-block .cta:hover {
	text-decoration-color: var(--e-global-color-cadastral-ink);
	color: var(--e-global-color-cadastral-ink);
}

.bl-ft-cap {
	position: relative;
}

.bl-ft-beat {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: color-mix(in srgb, var(--e-global-color-cadastral-bg) 90%, transparent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	font-size: 12px;
	color: var(--e-global-color-cadastral-ink);
	font-family: indivisible, sans-serif;
}

.bl-ft-beat.green {
	color: var(--bl-hm-green);
}

.bl-ft-beat.badges b {
	font-weight: 400;
	font-size: 9px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	padding: 1px 5px;
	color: var(--e-global-color-cadastral-graphite);
	margin-right: 3px;
}

.bl-ft-beat i {
	font-style: normal;
	font-size: 10px;
	color: var(--e-global-color-cadastral-graphite);
}

.bl-ft-frame {
	aspect-ratio: 16 / 10;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background-color: var(--e-global-color-cadastral-panel);
	background-image: linear-gradient(var(--e-global-color-cadastral-line) 1px, transparent 1px), linear-gradient(90deg, var(--e-global-color-cadastral-line) 1px, transparent 1px);
	background-size: 28px 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.bl-ft-frame span {
	font-size: 13px;
	color: var(--e-global-color-cadastral-graphite);
}

/* feature page: steps */
.bl-ft-stepwrap {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 48px;
	font-family: indivisible, sans-serif;
}

@media (max-width: 1199px) {
	.bl-ft-stepwrap {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.bl-ft-steps-nav {
	position: sticky;
	top: 128px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (max-width: 1199px) {
	.bl-ft-steps-nav {
		display: none;
	}
}

.bl-ft-steps-nav .lbl {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
	border-bottom: 1px solid var(--e-global-color-cadastral-line);
	padding-bottom: 8px;
	margin-bottom: 4px;
}

.bl-ft-steps-nav a {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 13px;
	color: var(--e-global-color-cadastral-graphite);
	text-decoration: none;
}

.bl-ft-steps-nav a:hover {
	color: var(--e-global-color-cadastral-ink);
}

.bl-ft-steps-nav a .n {
	font-size: 11px;
	color: var(--e-global-color-cadastral-red);
}

.bl-ft-steprows {
	display: flex;
	flex-direction: column;
	gap: 80px;
	min-width: 0;
}

.bl-ft-step {
	scroll-margin-top: 112px;
}

.bl-ft-step .hd {
	display: flex;
	gap: 16px;
	align-items: baseline;
}

.bl-ft-step .hd .n {
	font-size: 14px;
	color: var(--e-global-color-cadastral-red);
}

.bl-ft-step h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--e-global-color-cadastral-ink);
}

@media (max-width: 560px) {
	.bl-ft-step h3 {
		font-size: 19px;
	}
}

.bl-ft-step p {
	margin: 12px 0 0;
	max-width: 680px;
	padding-left: 30px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--e-global-color-cadastral-graphite);
}

@media (max-width: 560px) {
	.bl-ft-step p {
		padding-left: 0;
	}
}

.bl-ft-step .bl-ft-cap,
.bl-ft-step .bl-ft-frame {
	margin-top: 24px;
}

/* feature page: specs */
.bl-ft-specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	font-family: indivisible, sans-serif;
}

@media (max-width: 980px) {
	.bl-ft-specs {
		grid-template-columns: 1fr;
	}
}

.bl-ft-specs .cl {
	border-top: 1px solid var(--e-global-color-cadastral-line);
	padding-top: 20px;
}

.bl-ft-specs .cl .t {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--e-global-color-cadastral-graphite);
	margin-bottom: 12px;
}

.bl-ft-specs .cl ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bl-ft-specs .cl li {
	font-size: 15px;
	line-height: 1.5;
	color: var(--e-global-color-cadastral-ink);
}

/* feature page: related tiles */
.bl-ft-rel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	font-family: indivisible, sans-serif;
}

@media (max-width: 980px) {
	.bl-ft-rel {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.bl-ft-rel {
		grid-template-columns: 1fr;
	}
}

.bl-ft-rel a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	background: var(--e-global-color-cadastral-panel);
	padding: 16px;
	text-decoration: none;
	color: var(--e-global-color-cadastral-ink);
	transition: transform 0.15s, border-color 0.15s;
}

.bl-ft-rel a:hover {
	transform: translateY(-2px);
	border-color: var(--e-global-color-cadastral-ink);
}

.bl-ft-rel .l {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
}

.bl-ft-rel a:hover .l {
	color: var(--e-global-color-cadastral-red);
}

.bl-ft-rel .b {
	font-size: 13px;
	line-height: 1.45;
	color: var(--e-global-color-cadastral-graphite);
}

/* Mode swap, final word: same specificity as .bl-pl-capture img, so this
   block must sit LAST in the file (source order wins). */
img.bl-mode-dark {
	display: none;
}

html[data-bl-theme="dark"] img.bl-mode-light {
	display: none;
}

html[data-bl-theme="dark"] img.bl-mode-dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	html:not([data-bl-theme="light"]) img.bl-mode-light {
		display: none;
	}

	html:not([data-bl-theme="light"]) img.bl-mode-dark {
		display: block;
	}
}