/* ========================================================================== 
   Systems Place — business-data homepage hero
   ========================================================================== */

.sp-odh {
	--sp-odh-black: #000;
	--sp-odh-ink: #1c1c1c;
	--sp-odh-muted: #585864;
	--sp-odh-line: #d0d1d7;
	--sp-odh-dark-line: #484857;
	--sp-odh-display: "B612", ui-monospace, monospace;
	--sp-odh-sans: "Montserrat", Arial, sans-serif;
	--sp-odh-ease: cubic-bezier(.16, 1, .3, 1);
	--sp-odh-loop: 12s;
	--sp-odh-header-offset: 72px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	min-height: calc(100vh - var(--sp-odh-header-offset));
	min-height: calc(100svh - var(--sp-odh-header-offset));
	background: #fff;
	color: var(--sp-odh-ink);
}

/* WordPress applies the global block gap between pattern-owned top-level
   groups. The homepage hero is the first visual surface, so remove that seam
   above it and before the following proof section. */
body.home .wp-site-blocks > main,
.wp-block-post-content > .sp-odh,
.wp-block-post-content > .sp-odh + * {
	margin-block-start: 0;
}

.sp-odh__inner {
	position: relative;
	z-index: 1;
	width: min(100%, 1320px);
	margin: 0 auto;
	padding: clamp(34px, 4.5vh, 58px) clamp(22px, 5vw, 72px) clamp(30px, 4.5vh, 56px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2.7vh, 34px);
	text-align: center;
}

.sp-odh__lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: sp-odh-intro .8s var(--sp-odh-ease) both;
}

.sp-odh__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 clamp(14px, 1.8vh, 22px);
	color: #4a4a4a;
	font-family: var(--sp-odh-sans);
	font-size: clamp(10px, .75vw, 12px);
	line-height: 1;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
}

.sp-odh__eyebrow::before,
.sp-odh__eyebrow::after {
	content: "";
	width: clamp(26px, 4vw, 54px);
	height: 1px;
	background: #a0a0aa;
}

.sp-odh .sp-odh__title {
	max-width: 25ch;
	margin: 0;
	color: var(--sp-odh-black);
	font-family: var(--sp-odh-display);
	font-size: clamp(38px, 4.4vw, 68px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.045em;
	text-wrap: balance;
}

.sp-odh__lede {
	max-width: 71ch;
	margin: clamp(15px, 2vh, 23px) 0 0;
	color: #3f3f48;
	font-family: var(--sp-odh-sans);
	font-size: clamp(14px, 1.06vw, 17px);
	font-weight: 450;
	line-height: 1.55;
	text-wrap: balance;
}

.sp-odh__actions {
	margin-top: clamp(20px, 2.5vh, 30px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sp-odh__actions .wp-block-button__link {
	min-height: 50px;
	padding: 0 24px;
	border: 1px solid #000;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sp-odh-sans);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	transition: transform .2s var(--sp-odh-ease), background-color .2s, color .2s;
}

.sp-odh__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #000;
	color: #fff;
}

.sp-odh__actions .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: #8a8a94;
	background: rgba(255, 255, 255, .86);
	color: #000;
}

.sp-odh__actions .wp-block-button__link:hover,
.sp-odh__actions .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}

.sp-odh__reassurance {
	margin: 13px 0 0;
	color: #4a4a4a;
	font-family: var(--sp-odh-sans);
	font-size: clamp(11px, .87vw, 13px);
	font-weight: 550;
	line-height: 1.45;
}

.sp-odh__visual {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: sp-odh-panel-intro 1s .1s var(--sp-odh-ease) both;
}

.sp-odh__caption {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	color: #686876;
	font-family: var(--sp-odh-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.sp-odh__caption strong { color: #1c1c1c; }

.sp-odh__console,
.sp-odh__console *,
.sp-odh__console *::before,
.sp-odh__console *::after { box-sizing: border-box; }

.sp-odh__console {
	--sp-odh-sequence: 10.8s;
	width: min(100%, 1040px);
	overflow: hidden;
	color: #fff;
	background-color: #050505;
	background-image:
		linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
	background-size: 36px 36px;
	border: 1px solid #292932;
	border-radius: 16px;
	box-shadow: 0 28px 70px rgba(0, 0, 0, .2), 0 8px 20px rgba(0, 0, 0, .08);
	contain: paint;
}

.sp-odh__console-head {
	min-height: 54px;
	padding: 11px 18px;
	border-bottom: 1px solid #292932;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--sp-odh-sans);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.sp-odh__console-brand,
.sp-odh__mode {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.sp-odh__console-badge {
	width: 30px;
	height: 30px;
	border: 1px solid #585864;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: #161618;
}

.sp-odh__console-badge img {
	width: 61%;
	height: 61%;
	filter: invert(1);
}

.sp-odh__mode { color: var(--wp--preset--color--neutral-100); }

.sp-odh__mode-dot {
	width: 8px;
	height: 8px;
	border: 2px solid #050505;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--wp--preset--color--neutral-100);
	animation: sp-odh-status 1.6s ease-in-out 4;
}

.sp-odh__ledger {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	min-height: 368px;
}

.sp-odh__stage-rail {
	position: relative;
	margin: 0;
	padding: 27px 17px 29px;
	border-right: 1px solid #292932;
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
}

.sp-odh__stage-rail::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 45px;
	bottom: 46px;
	width: 1px;
	background: #3d3d46;
}

.sp-odh__stage {
	position: relative;
	z-index: 1;
	min-height: 48px;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 8px;
	align-items: center;
	color: #777783;
	animation-duration: var(--sp-odh-sequence);
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}


.sp-odh__stage-number {
	grid-column: 2;
	font-family: var(--sp-odh-display);
	font-size: 11px;
	font-weight: 750;
	line-height: 1;
}

.sp-odh__stage-name {
	grid-column: 2;
	color: currentColor;
	font-family: var(--sp-odh-sans);
	font-size: 11px;
	font-weight: 550;
	line-height: 1.25;
	overflow-wrap: normal;
	word-break: normal;
}

.sp-odh__stage-status {
	position: absolute;
	left: 2px;
	top: 50%;
	width: 17px;
	height: 17px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: #050505;
	transform: translateY(-50%);
}

.sp-odh__stage-status::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 3px;
	width: 7px;
	height: 4px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	opacity: 0;
	transform: rotate(-45deg) scale(.7);
}

.sp-odh__stage--1 { animation-name: sp-odh-stage-1; }
.sp-odh__stage--2 { animation-name: sp-odh-stage-2; }
.sp-odh__stage--3 { animation-name: sp-odh-stage-3; }
.sp-odh__stage--4 { animation-name: sp-odh-stage-4; }

.sp-odh__stage--1 .sp-odh__stage-status::after { animation: sp-odh-check-in .22s 2.15s var(--sp-odh-ease) both; }
.sp-odh__stage--2 .sp-odh__stage-status::after { animation: sp-odh-check-in .22s 4.8s var(--sp-odh-ease) both; }
.sp-odh__stage--3 .sp-odh__stage-status::after { animation: sp-odh-check-in .22s 8.1s var(--sp-odh-ease) both; }

.sp-odh__ledger-main {
	padding: 27px 30px 29px;
	display: grid;
	grid-template-columns: minmax(0, .84fr) minmax(0, 1.2fr);
	grid-template-rows: auto 1fr;
	gap: 22px 30px;
	text-align: left;
}

.sp-odh__section-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #9d9da8;
	font-family: var(--sp-odh-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sp-odh__section-label b {
	color: currentColor;
	font-family: var(--sp-odh-display);
	font-size: 11px;
}

.sp-odh__question-card {
	min-width: 0;
	min-height: 126px;
	padding: 17px 19px 19px;
	border: 1px solid #3c3c47;
	border-radius: 10px;
	background: #19191b;
	opacity: 0;
	transform: translateY(8px);
	animation: sp-odh-reveal-up .68s .38s var(--sp-odh-ease) both;
}

.sp-odh__question {
	margin: 18px 0 0;
	color: #fff;
	font-family: var(--sp-odh-sans);
	font-size: clamp(16px, 1.55vw, 21px);
	font-weight: 600;
	line-height: 1.34;
	letter-spacing: -.018em;
	text-wrap: balance;
}

.sp-odh__evidence {
	min-width: 0;
	align-self: stretch;
	opacity: 0;
	animation: sp-odh-fade-in .4s 1.75s ease both;
}

.sp-odh__evidence-list {
	margin: 13px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 11px;
}

.sp-odh__evidence-row {
	min-width: 0;
	display: grid;
	grid-template-columns: 26px max-content minmax(28px, 1fr);
	align-items: center;
	gap: 9px;
	color: #d9d9df;
	opacity: 0;
	transform: translateY(6px);
}

.sp-odh__evidence-row--1 { animation: sp-odh-reveal-up .46s 2.2s var(--sp-odh-ease) both; }
.sp-odh__evidence-row--2 { animation: sp-odh-reveal-up .46s 2.85s var(--sp-odh-ease) both; }
.sp-odh__evidence-row--3 { animation: sp-odh-reveal-up .46s 3.5s var(--sp-odh-ease) both; }

.sp-odh__evidence-check {
	position: relative;
	width: 25px;
	height: 25px;
	border: 1px solid #6c6c78;
	border-radius: 50%;
}

.sp-odh__evidence-check::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 6px;
	width: 10px;
	height: 6px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(-45deg);
}

.sp-odh__evidence-name {
	font-family: var(--sp-odh-sans);
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
}

.sp-odh__evidence-name b { color: #fff; font-weight: 750; }

.sp-odh__evidence-trace {
	position: relative;
	height: 1px;
	overflow: visible;
}

.sp-odh__evidence-trace i {
	position: absolute;
	inset: 0;
	display: block;
	background: #6b6b75;
	transform: scaleX(0);
	transform-origin: left center;
}

.sp-odh__evidence-trace::after {
	content: "";
	position: absolute;
	right: -2px;
	top: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
}

.sp-odh__evidence-row--1 .sp-odh__evidence-trace i { animation: sp-odh-draw-line .62s 2.52s var(--sp-odh-ease) both; }
.sp-odh__evidence-row--2 .sp-odh__evidence-trace i { animation: sp-odh-draw-line .62s 3.17s var(--sp-odh-ease) both; }
.sp-odh__evidence-row--3 .sp-odh__evidence-trace i { animation: sp-odh-draw-line .62s 3.82s var(--sp-odh-ease) both; }
.sp-odh__evidence-row--1 .sp-odh__evidence-trace::after { animation: sp-odh-dot-in .18s 3.05s ease both; }
.sp-odh__evidence-row--2 .sp-odh__evidence-trace::after { animation: sp-odh-dot-in .18s 3.7s ease both; }
.sp-odh__evidence-row--3 .sp-odh__evidence-trace::after { animation: sp-odh-dot-in .18s 4.35s ease both; }

.sp-odh__evidence-note {
	display: block;
	margin-top: 13px;
	color: #858591;
	font-family: var(--sp-odh-sans);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.sp-odh__answer-sheet {
	position: relative;
	grid-column: 2;
	grid-row: 1 / span 2;
	min-width: 0;
	padding: 22px 24px 20px;
	border: 1px solid #d7d7d3;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	background: #f3f3f0;
	box-shadow: 0 18px 38px rgba(0, 0, 0, .24), 0 2px 0 rgba(255, 255, 255, .2) inset;
	color: #111;
	font-family: var(--sp-odh-sans);
	opacity: 0;
	transform: translateX(14px) scale(.985);
	animation: sp-odh-sheet-in .72s 5.05s var(--sp-odh-ease) both;
}

.sp-odh__answer-sheet::after {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 0;
	height: 0;
	border-top: 23px solid #050505;
	border-left: 23px solid #d8d8d4;
}

.sp-odh__answer-sheet .sp-odh__section-label { color: #65656f; }

.sp-odh__answer-check {
	position: relative;
	width: 32px;
	height: 32px;
	margin-top: 19px;
	border: 1px solid #56565f;
	border-radius: 50%;
	opacity: 0;
	transform: scale(.72);
	animation: sp-odh-pop-in .36s 5.62s var(--sp-odh-ease) both;
}


.sp-odh__answer-check::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	width: 13px;
	height: 7px;
	border-left: 2px solid #111;
	border-bottom: 2px solid #111;
	transform: rotate(-45deg);
}

.sp-odh__answer-copy {
	margin-top: 15px;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 650;
	line-height: 1.18;
	letter-spacing: -.035em;
	text-wrap: balance;
	opacity: 0;
	transform: translateY(7px);
	animation: sp-odh-reveal-up .62s 5.83s var(--sp-odh-ease) both;
}

.sp-odh__answer-rule {
	height: 1px;
	margin-top: 18px;
	background: #c1c1bd;
	transform: scaleX(0);
	transform-origin: left center;
	animation: sp-odh-draw-line .58s 6.56s var(--sp-odh-ease) both;
}

.sp-odh__answer-note {
	margin-top: 12px;
	color: #5e5e67;
	font-size: 11px;
	font-weight: 500;
	opacity: 0;
	animation: sp-odh-fade-in .4s 6.98s ease both;
}

.sp-odh__answer-sources {
	margin-top: 11px;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	opacity: 0;
	animation: sp-odh-reveal-up .48s 7.28s var(--sp-odh-ease) both;
}

.sp-odh__answer-sources i {
	padding: 5px 8px;
	border: 1px solid #c4c4c0;
	border-radius: 4px;
	color: #3f3f46;
	font-size: 11px;
	font-style: normal;
}

.sp-odh__follow-focus {
	margin-top: auto;
	padding-top: 15px;
	display: flex;
	align-items: center;
	gap: 11px;
	color: #686870;
	font-family: var(--sp-odh-sans);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: 0;
	animation: sp-odh-fade-in .36s 8.22s ease both;
}

.sp-odh__follow-focus span { white-space: nowrap; }
.sp-odh__follow-focus b { font-family: var(--sp-odh-display); }

.sp-odh__follow-focus i {
	position: relative;
	flex: 1 1 auto;
	height: 1px;
	border-top: 1px dashed #99999f;
	transform: scaleX(0);
	transform-origin: left center;
	animation: sp-odh-draw-line .64s 8.48s var(--sp-odh-ease) both;
}

.sp-odh__follow-focus i::after {
	content: "";
	position: absolute;
	right: 0;
	top: -4px;
	width: 7px;
	height: 7px;
	border: 1px solid #56565f;
	border-radius: 50%;
	background: #f3f3f0;
}

@keyframes sp-odh-intro {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes sp-odh-panel-intro {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes sp-odh-status {
	0%, 100% { opacity: .62; }
	50% { opacity: 1; }
}

@keyframes sp-odh-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sp-odh-reveal-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes sp-odh-sheet-in {
	from { opacity: 0; transform: translateX(14px) scale(.985); }
	to { opacity: 1; transform: none; }
}

@keyframes sp-odh-draw-line {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes sp-odh-dot-in {
	from { opacity: 0; transform: scale(.5); }
	to { opacity: 1; transform: none; }
}

@keyframes sp-odh-check-in {
	from { opacity: 0; transform: rotate(-45deg) scale(.5); }
	to { opacity: 1; transform: rotate(-45deg) scale(1); }
}

@keyframes sp-odh-pop-in {
	from { opacity: 0; transform: scale(.72); }
	to { opacity: 1; transform: none; }
}

@keyframes sp-odh-stage-1 {
	0%, 19% { color: #fff; }
	23%, 100% { color: #a2a2ac; }
}

@keyframes sp-odh-stage-2 {
	0%, 20% { color: #63636e; }
	25%, 44% { color: #fff; }
	49%, 100% { color: #a2a2ac; }
}

@keyframes sp-odh-stage-3 {
	0%, 46% { color: #63636e; }
	51%, 74% { color: #fff; }
	79%, 100% { color: #a2a2ac; }
}

@keyframes sp-odh-stage-4 {
	0%, 76% { color: #63636e; }
	82%, 100% { color: #fff; }
}

/* Match the responsive header height so the header and hero together own the
   first viewport. Min-height lets stacked and short-screen layouts grow when
   their content needs more room instead of clipping the buyer journey. */
@media (max-width: 1180px) {
	.sp-odh { --sp-odh-header-offset: 68px; }
}

/* The desktop composition follows the same single-column story as the
   reference: promise first, then the complete evidence object. The 1180/1181
   navigation boundary is reused for the expanded console internals. */
@media (min-width: 1181px) {
	.sp-odh__inner {
		width: min(100%, 1440px);
		gap: clamp(18px, 2.2vh, 28px);
		padding: clamp(30px, 3.4vh, 46px) clamp(34px, 3.5vw, 56px);
		text-align: center;
	}

	.sp-odh__lockup {
		min-width: 0;
		align-items: center;
	}

	.sp-odh__eyebrow {
		margin-bottom: clamp(14px, 1.6vh, 20px);
	}

	.sp-odh__eyebrow::before,
	.sp-odh__eyebrow::after {
		display: block;
	}

	.sp-odh .sp-odh__title {
		max-width: 28ch;
		font-size: clamp(44px, 3.5vw, 58px);
		line-height: 1.01;
		text-wrap: balance;
	}

	.sp-odh__lede {
		max-width: 76ch;
		font-size: clamp(14px, .92vw, 16px);
		text-wrap: balance;
	}

	.sp-odh__actions {
		align-items: center;
		justify-content: center;
	}

	.sp-odh__reassurance {
		max-width: 72ch;
	}

	.sp-odh__visual {
		width: min(100%, 900px);
		min-width: 0;
		align-items: center;
	}

	.sp-odh__console {
		width: 100%;
	}

	.sp-odh__ledger {
		grid-template-columns: 128px minmax(0, 1fr);
		min-height: 300px;
	}

	.sp-odh__stage-rail {
		padding-inline: 13px;
	}

	.sp-odh__stage-rail::before {
		left: 23px;
	}

	.sp-odh__stage {
		grid-template-columns: 20px minmax(0, 1fr);
		column-gap: 6px;
	}

	.sp-odh__stage-status {
		left: 1px;
	}

	.sp-odh__ledger-main {
		padding: 22px 24px 24px;
		grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
		gap: 18px 22px;
	}

	.sp-odh__question-card {
		min-height: 112px;
	}

	.sp-odh__question {
		font-size: clamp(16px, 1.35vw, 20px);
	}

	.sp-odh__answer-sheet {
		padding: 20px 22px 18px;
	}

	.sp-odh__answer-check {
		margin-top: 15px;
	}

	.sp-odh__answer-copy {
		margin-top: 13px;
		font-size: clamp(19px, 1.75vw, 26px);
	}

	.sp-odh__caption {
		justify-content: center;
	}
}

@media (max-width: 782px) {
	.sp-odh__inner {
		padding: 34px 18px 40px;
		gap: 24px;
	}

	.sp-odh__eyebrow { white-space: normal; }
	.sp-odh__eyebrow::before,
	.sp-odh__eyebrow::after { width: 22px; }

	.sp-odh .sp-odh__title {
		max-width: 18ch;
		font-size: clamp(32px, 9vw, 44px);
		line-height: 1.05;
	}

	.sp-odh__lede { max-width: 38rem; }

	.sp-odh__actions {
		width: 100%;
		flex-direction: column;
	}

	.sp-odh__actions .wp-block-button,
	.sp-odh__actions .wp-block-button__link { width: 100%; }

	.sp-odh__console { width: min(100%, 640px); border-radius: 13px; }

	.sp-odh__ledger { display: block; min-height: 0; }

	.sp-odh__stage-rail {
		padding: 13px 14px;
		border-right: 0;
		border-bottom: 1px solid #292932;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.sp-odh__stage-rail::before {
		left: 24px;
		right: 24px;
		top: 22px;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.sp-odh__stage {
		min-height: 46px;
		padding-top: 24px;
		display: block;
		text-align: center;
	}

	.sp-odh__stage-status {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}

	.sp-odh__stage-number,
	.sp-odh__stage-name { display: block; }

	.sp-odh__stage-number { margin-bottom: 3px; }

	.sp-odh__ledger-main {
		padding: 20px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		gap: 18px;
	}

	.sp-odh__question-card,
	.sp-odh__evidence,
	.sp-odh__answer-sheet {
		grid-column: 1;
		grid-row: auto;
	}

	.sp-odh__question-card { min-height: 0; }

	.sp-odh__answer-sheet { min-height: 310px; }

	.sp-odh__answer-copy { font-size: clamp(22px, 5.4vw, 28px); }

	/* Small screens show the complete evidence record immediately. The stage
	   rail can still communicate sequence without reserving a mostly empty
	   console while delayed content waits to appear. */
	.sp-odh__question-card,
	.sp-odh__evidence,
	.sp-odh__evidence-row,
	.sp-odh__answer-sheet,
	.sp-odh__answer-check,
	.sp-odh__answer-copy,
	.sp-odh__answer-note,
	.sp-odh__answer-sources,
	.sp-odh__follow-focus {
		opacity: 1 !important;
		transform: none !important;
	}

	.sp-odh__evidence-trace i,
	.sp-odh__answer-rule,
	.sp-odh__follow-focus i {
		transform: scaleX(1) !important;
	}

	.sp-odh__evidence-trace::after,
	.sp-odh__stage--1 .sp-odh__stage-status::after,
	.sp-odh__stage--2 .sp-odh__stage-status::after,
	.sp-odh__stage--3 .sp-odh__stage-status::after {
		opacity: 1 !important;
		transform: rotate(-45deg) scale(1) !important;
	}

	.sp-odh__answer-sheet {
		min-height: 0;
	}

	.sp-odh__console-head,
	.sp-odh__section-label,
	.sp-odh__stage-number,
	.sp-odh__stage-name,
	.sp-odh__evidence-note,
	.sp-odh__answer-note,
	.sp-odh__answer-sources i,
	.sp-odh__follow-focus,
	.sp-odh__caption {
		font-size: 11px;
		line-height: 1.35;
	}

	.sp-odh__console-head,
	.sp-odh__section-label,
	.sp-odh__stage-number,
	.sp-odh__stage-name,
	.sp-odh__evidence-note,
	.sp-odh__follow-focus {
		font-family: var(--font-mono, "B612 Mono", ui-monospace, monospace);
	}
}

@media (max-width: 430px) {
	.sp-odh__console-head {
		min-height: 56px;
		padding: 9px 11px;
		font-size: 11px;
	}

	.sp-odh__console-brand { text-align: left; }
	.sp-odh__console-badge { width: 26px; height: 26px; }
	.sp-odh__mode { gap: 6px; }
	.sp-odh__stage-rail { padding-inline: 8px; gap: 4px; }
	.sp-odh__stage-name { font-size: 11px; letter-spacing: 0; }
	.sp-odh__ledger-main { padding: 14px; gap: 14px; }
	.sp-odh__question-card { padding: 15px; }
	.sp-odh__question { margin-top: 13px; font-size: 17px; }
	.sp-odh__evidence-name { font-size: 11px; }
	.sp-odh__answer-sheet { min-height: 0; padding: 18px 17px 17px; }
	.sp-odh__answer-copy { font-size: 21px; }
	.sp-odh__answer-sources { gap: 5px; }
	.sp-odh__answer-sources i { padding: 4px 6px; font-size: 11px; }
	.sp-odh__caption { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-odh *,
	.sp-odh *::before,
	.sp-odh *::after {
		animation: none !important;
		scroll-behavior: auto !important;
	}

	.sp-odh__question-card,
	.sp-odh__evidence,
	.sp-odh__evidence-row,
	.sp-odh__answer-sheet,
	.sp-odh__answer-check,
	.sp-odh__answer-copy,
	.sp-odh__answer-note,
	.sp-odh__answer-sources,
	.sp-odh__follow-focus {
		opacity: 1;
		transform: none;
	}

	.sp-odh__evidence-trace i,
	.sp-odh__answer-rule,
	.sp-odh__follow-focus i { transform: scaleX(1); }

	.sp-odh__evidence-trace::after,
	.sp-odh__stage--1 .sp-odh__stage-status::after,
	.sp-odh__stage--2 .sp-odh__stage-status::after,
	.sp-odh__stage--3 .sp-odh__stage-status::after {
		opacity: 1;
		transform: rotate(-45deg) scale(1);
	}

	.sp-odh__stage { color: #a2a2ac; }
	.sp-odh__stage--4 { color: #fff; }
}