/* =========================================================================
   Studio Variant — 3D Scanning capability page

   Page-scoped styling only. Every colour, space, radius, font and easing
   below comes from the shared tokens in sv.css, so this page is the same
   environment one level deeper rather than a second visual language.
   Nothing here can reach the landing page: the selectors are all sc-*.
   ========================================================================= */

/* ------------------------------ Page shell ------------------------------ */

.sc-page {
	overflow-x: hidden;
}

/* The header is the door's menu bar, made sticky because this page scrolls */
.sc-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(16, 18, 19, 0.86);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
}

/* Small vector wordmark, the same drawn asset as the door's lockup */
.sc-home {
	display: inline-flex;
	align-items: center;
	width: 124px;
	flex: none;
}
/* The process navigation owns the centre of the bar, so the small mark
   stands down when the two would meet. */
@media (max-width: 1240px) {
	.sc-home,
	.sc-topbar-rule {
		display: none;
	}
}
/* While the process line is showing, the small mark stands down before the
   line tightens; below 1240px the processes move into the menu. */
@media (min-width: 1240px) and (max-width: 1479px) {
	.sc-topbar .sc-home,
	.sc-topbar .sc-topbar-rule {
		display: none;
	}
	.sc-topbar .sv-technav {
		--tn-pad: var(--sv-2);
	}
}
@media (max-width: 1239px) {
	.sc-topbar .sv-technav {
		display: none;
	}
}
.sc-home .sv-wordmark-svg {
	opacity: 0.9;
	transition: opacity var(--sv-base) var(--sv-ease-precision);
}
.sc-home:hover .sv-wordmark-svg {
	opacity: 1;
}

.sc-topbar-left {
	display: flex;
	align-items: center;
	gap: clamp(var(--sv-4), 2.2vw, var(--sv-6));
	min-width: 0;
}
.sc-topbar-rule {
	width: 1px;
	height: 22px;
	background: var(--sv-graphite-600);
	flex: none;
}

/* Measured background, one shade quieter than the door's */
.sc-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(to right, rgba(185, 192, 196, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(185, 192, 196, 0.045) 1px, transparent 1px);
	background-size: 96px 96px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 8%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 8%, transparent 78%);
}

/* Section rhythm. Sections alternate surface so the page has depth
   without introducing new colour. */
.sc-section {
	position: relative;
	padding: clamp(var(--sv-8), 8vw, var(--sv-10)) 0;
	border-top: 1px solid var(--sv-border-hairline);
	isolation: isolate;
}
.sc-section.is-sunken {
	background: rgba(8, 9, 10, 0.55);
}
.sc-head {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	max-width: 62ch;
}
.sc-head .sv-display-m,
.sc-head .sv-display-l {
	white-space: pre-line;
}
.sc-lede {
	max-width: 58ch;
}

/* ---------------------------------- Hero -------------------------------- */

.sc-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sv-7), 6vw, var(--sv-9)) 0 0;
	background-color: var(--sv-bg);
	background-image: var(--sv-texture-carbon);
}
.sc-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(var(--sv-6), 4vw, var(--sv-8));
	align-items: start;
}
.sc-hero-text {
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
	max-width: 46ch;
}
.sc-desig {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-3);
	align-self: flex-start;
	border: 1px solid var(--sv-graphite-600);
	border-radius: var(--sv-radius-xs);
	padding: 7px var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--sv-mist-300);
	background: rgba(8, 9, 10, 0.45);
}
.sc-desig b {
	color: var(--sv-titanium);
	font-weight: 500;
}
.sc-desig i {
	display: block;
	width: 1px;
	height: 12px;
	background: var(--sv-graphite-500);
}

/* PHYSICAL. CAPTURED. DIGITAL. — one line each, held tight */
.sc-hero h1 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(2.5rem, 5.6vw, 4.5rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.034em;
	color: var(--sv-text);
}
.sc-hero h1 span {
	display: block;
}
.sc-hero h1 span:nth-child(2) {
	color: var(--sv-mist-200);
}
.sc-hero h1 span:nth-child(3) {
	color: var(--sv-mist-300);
}

.sc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
}

/* The capture scene */
.sc-hero-art {
	position: relative;
	margin: 0 calc(var(--sv-gutter) * -1);
	will-change: transform;
}
/* The hero drawing is written in by script. Until it arrives the empty
   host keeps the drawing's own proportions, so the sections below do not
   move when it appears. Each chapter's drawing has its own viewBox. */
.sc-hero-art:empty {
	aspect-ratio: 1120 / 640;
}
[data-sv-capability="additive-manufacturing"] .sc-hero-art:empty,
[data-sv-capability="subtractive-manufacturing"] .sc-hero-art:empty,
[data-sv-capability="laser-processing"] .sc-hero-art:empty {
	aspect-ratio: 760 / 560;
}
[data-sv-capability="uv-printing"] .sc-hero-art:empty {
	aspect-ratio: 900 / 460;
}
.sc-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Motif strip beneath the hero */
.sc-motif {
	border-top: 1px solid var(--sv-border-hairline);
	background: rgba(8, 9, 10, 0.5);
	position: relative;
	z-index: 2;
}
.sc-motif-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.sc-motif-item {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	padding: var(--sv-4) 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	position: relative;
}
.sc-motif-item + .sc-motif-item::before {
	content: "";
	position: absolute;
	left: calc(var(--sv-5) * -1);
	top: 50%;
	width: 18px;
	height: 1px;
	background: var(--sv-graphite-500);
}
.sc-motif-art {
	flex: none;
	width: 30px;
	color: var(--sv-titanium);
}
.sc-motif-art svg {
	width: 100%;
	height: auto;
	stroke-opacity: 0.7;
}

/* ------------------------- Capability modules --------------------------- */

.sc-modules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-4);
}
.sc-module {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	box-shadow: var(--sv-shadow-hairline);
	overflow: hidden;
	transition: border-color var(--sv-base) var(--sv-ease-precision),
		background-color var(--sv-base) var(--sv-ease-precision);
}
.sc-module::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sv-titanium-line), transparent);
	opacity: 0;
	transition: opacity var(--sv-base);
}
.sc-module:hover,
.sc-module:focus-within {
	border-color: var(--sv-titanium-line);
	background-color: var(--sv-surface-hover);
}
.sc-module:hover::after,
.sc-module:focus-within::after {
	opacity: 1;
}
.sc-module-index {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	color: var(--sv-titanium-deep);
}
.sc-module h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 500;
	letter-spacing: -0.006em;
	color: var(--sv-text);
}
.sc-module-art {
	margin-top: auto;
	padding-top: var(--sv-4);
	color: var(--sv-titanium);
}
.sc-mod-svg {
	width: 100%;
	max-width: 200px;
	height: auto;
}
/* The base state is the physical outline. Hover adds the captured or
   designed geometry, so the drawing explains the module. */
.sc-mod-base {
	stroke-opacity: 0.62;
	transition: stroke-opacity var(--sv-base);
}
.sc-mod-reveal {
	opacity: 0;
	transition: opacity var(--sv-slow) var(--sv-ease-precision);
}
/* The measurement points are always there, faintly: the drawing should read
   as captured geometry before anyone hovers it. */
.sc-mod-points {
	opacity: 0.28;
	transition: opacity var(--sv-slow) var(--sv-ease-precision);
}
.sc-module:hover .sc-mod-base,
.sc-module:focus-within .sc-mod-base {
	stroke-opacity: 0.9;
}
.sc-module:hover .sc-mod-reveal,
.sc-module:focus-within .sc-mod-reveal {
	opacity: 0.85;
}
.sc-module:hover .sc-mod-points,
.sc-module:focus-within .sc-mod-points {
	opacity: 0.6;
}
/* Touch has no hover, so the reveal is simply present. The drawing has to do
   its explaining on a phone as well as on a pointer device. */
@media (hover: none) {
	.sc-mod-base {
		stroke-opacity: 0.82;
	}
	.sc-mod-reveal {
		opacity: 0.72;
	}
	.sc-mod-points {
		opacity: 0.52;
	}
}

/* A stated distinction, not a footnote */
.sc-distinction {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
	overflow: hidden;
}
.sc-distinction > div {
	padding: var(--sv-5);
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.sc-distinction > div + div {
	border-left: 1px solid var(--sv-border);
}
.sc-distinction dt {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sv-titanium);
	margin: 0;
}
.sc-distinction dd {
	margin: 0;
	color: var(--sv-text-secondary);
}

/* --------------------------- Branching routes --------------------------- */

.sc-branch {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Shared trunk: physical object → 3D scan → digital capture */
.sc-trunk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 320px;
}
.sc-node {
	width: 100%;
	text-align: center;
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	background-color: var(--sv-surface-raised);
	background-image: var(--sv-texture-carbon);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}
.sc-node.is-capture {
	border-color: var(--sv-titanium-line);
	color: var(--sv-titanium-bright);
}
.sc-link {
	width: 1px;
	height: var(--sv-6);
	background: linear-gradient(180deg, var(--sv-border-strong), var(--sv-border-strong));
	position: relative;
}
.sc-link::after {
	content: "";
	position: absolute;
	left: -3px;
	bottom: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 5px solid var(--sv-border-strong);
}

/* The split itself, drawn rather than implied */
/* The split is drawn across the full row, so each branch lands on the
   centre line of its own route rather than near it. */
.sc-split {
	width: 100%;
	height: 56px;
	position: relative;
}
.sc-split::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -28px;
	width: 1px;
	height: 28px;
	background: var(--sv-border-strong);
}
.sc-split::before {
	content: "";
	position: absolute;
	left: calc(25% - var(--sv-5) / 4);
	right: calc(25% - var(--sv-5) / 4);
	top: 0;
	height: 1px;
	background: var(--sv-border-strong);
}
.sc-split span {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--sv-border-strong);
}
.sc-split span:first-child {
	left: calc(25% - var(--sv-5) / 4);
}
.sc-split span:last-child {
	left: calc(75% + var(--sv-5) / 4);
}
.sc-split span::after {
	content: "";
	position: absolute;
	left: -3px;
	bottom: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 5px solid var(--sv-border-strong);
}

.sc-routes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-5);
	width: 100%;
}
/* Both routes are the same object with the same weight. The only difference
   allowed is the accent, and both accents are equal in the system. */
.sc-route {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	padding: clamp(var(--sv-5), 3vw, var(--sv-7)) clamp(var(--sv-5), 2.4vw, var(--sv-6));
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	box-shadow: var(--sv-shadow-hairline);
	position: relative;
	transition: border-color var(--sv-slow) var(--sv-ease-precision);
}
.sc-route::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sv-titanium-line), transparent);
}
.sc-route:hover {
	border-color: var(--sv-titanium-line);
}
.sc-route h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	letter-spacing: -0.018em;
	color: var(--sv-text);
}
.sc-route-note {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.sc-route-cta {
	margin-top: auto;
}

/* The full-project chain, inside its route */
.sc-chain {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.sc-chain li {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	padding: var(--sv-2) var(--sv-3);
	border: 1px solid var(--sv-graphite-700);
	border-radius: var(--sv-radius-xs);
	background: rgba(8, 9, 10, 0.4);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-mist-300);
}
.sc-chain li b {
	color: var(--sv-titanium-deep);
	font-weight: 500;
}

/* Delivered-data list, inside the scan-only route, so the two columns
   carry the same amount of substance */
.sc-deliver {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.sc-deliver li {
	display: flex;
	gap: var(--sv-3);
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
	line-height: 1.55;
}
.sc-deliver li::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin-top: 8px;
	border: 1px solid var(--sv-titanium-deep);
	transform: rotate(45deg);
}

/* ----------------------------- On-site ---------------------------------- */

.sc-onsite {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(var(--sv-6), 5vw, var(--sv-9));
	align-items: center;
}
.sc-applications {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--sv-border);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	overflow: hidden;
}
.sc-applications li {
	background: var(--sv-surface);
	padding: var(--sv-4);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-mist-300);
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
.sc-applications li i {
	font-style: normal;
	color: var(--sv-titanium-deep);
	font-size: var(--sv-micro);
}

/* ------------------------------ Process --------------------------------- */

.sc-steps {
	display: flex;
	flex-direction: column;
}
.sc-step {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: clamp(var(--sv-4), 2vw, var(--sv-6));
	padding-bottom: var(--sv-7);
	position: relative;
}
.sc-step:last-child {
	padding-bottom: 0;
}
.sc-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 25px;
	top: 56px;
	bottom: 12px;
	width: 1px;
	background: linear-gradient(180deg, var(--sv-border-strong), var(--sv-graphite-700));
}
.sc-step-marker {
	width: 52px;
	height: 52px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	display: grid;
	place-items: center;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.08em;
	color: var(--sv-titanium);
	background: var(--sv-graphite-850);
}
.sc-step-body {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	padding-top: var(--sv-2);
}
.sc-step h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	color: var(--sv-text);
}

/* Optional continuation. Dashed, offset and explicitly labelled, because
   the point is that a visitor may stop at step 03. */
.sc-optional {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: clamp(var(--sv-4), 2vw, var(--sv-6));
	margin: 0 0 var(--sv-7);
	position: relative;
}
.sc-optional-rule {
	justify-self: center;
	width: 1px;
	align-self: stretch;
	background-image: linear-gradient(180deg, var(--sv-graphite-500) 0 6px, transparent 6px 12px);
	background-size: 1px 12px;
}
.sc-optional-body {
	border: 1px dashed var(--sv-graphite-500);
	border-radius: var(--sv-radius-md);
	padding: var(--sv-4) var(--sv-5);
	background: rgba(8, 9, 10, 0.4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-4);
}
.sc-optional-body p {
	margin: 0;
	color: var(--sv-text-secondary);
	font-size: var(--sv-body-s);
	max-width: 52ch;
}
.sc-optional-tag {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sv-titanium);
	display: flex;
	align-items: center;
	gap: var(--sv-2);
}
.sc-step.is-optional .sc-step-marker {
	border-style: dashed;
	color: var(--sv-mist-300);
}

/* ------------------------- Reconstruction ------------------------------- */

.sc-stages {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-4);
	align-items: stretch;
}
.sc-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
	overflow: hidden;
}
.sc-stage + .sc-stage::before {
	content: "";
	position: absolute;
	left: calc(var(--sv-4) * -1 - 1px);
	top: 50%;
	width: var(--sv-4);
	height: 1px;
	background: var(--sv-graphite-500);
}
.sc-stage-art {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(185, 192, 196, 0.05), transparent 70%);
}
.sc-stage-art .sc-svg {
	max-height: 100%;
}
.sc-stage p {
	margin: 0;
}
.sc-stage-label {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}
.sc-stage-index {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
}

/* ------------------------------ Technology ------------------------------ */

.sc-tech {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--sv-6), 4vw, var(--sv-8));
	align-items: start;
}
/* Deliberately an empty, labelled frame: real equipment detail drops in
   here later without the section being redesigned. */
.sc-spec {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
	overflow: hidden;
}
.sc-spec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-4);
	padding: var(--sv-3) var(--sv-4);
	border-bottom: 1px solid var(--sv-border);
	background: var(--sv-surface);
}
.sc-spec-row {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	border-top: 1px solid var(--sv-border-hairline);
}
.sc-spec-row:first-of-type {
	border-top: 0;
}
.sc-spec-row dt,
.sc-spec-row dd {
	margin: 0;
	padding: var(--sv-3) var(--sv-4);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sc-spec-row dt {
	color: var(--sv-text-faint);
	border-right: 1px solid var(--sv-border-hairline);
}
.sc-spec-row dd {
	color: var(--sv-mist-300);
}
.sc-spec-row dd.is-pending {
	color: var(--sv-text-faint);
}

/* ---------------------- Project records (placeholders) ------------------ */

.sc-records {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-4);
}
.sc-record {
	border: 1px dashed var(--sv-graphite-500);
	border-radius: var(--sv-radius-md);
	background: rgba(8, 9, 10, 0.4);
	padding: var(--sv-5);
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
}
.sc-record-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.sc-record-flow i {
	font-style: normal;
	color: var(--sv-graphite-400);
}
.sc-record-slot {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(185, 192, 196, 0.04) 0 6px,
		transparent 6px 12px
	);
	display: grid;
	place-items: center;
}

/* ------------------------------- Closing -------------------------------- */

.sc-close {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sv-6);
}
.sc-close h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.028em;
	color: var(--sv-text);
}
.sc-close h2 em {
	display: block;
	font-style: normal;
	color: var(--sv-mist-300);
}
.sc-close-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sv-3);
}

/* Next capability, treated as a drawing continuation rather than a button */
.sc-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-5);
	width: 100%;
	padding: var(--sv-5) clamp(var(--sv-4), 3vw, var(--sv-6));
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	text-align: left;
	transition: border-color var(--sv-base) var(--sv-ease-precision);
}
.sc-next:hover {
	border-color: var(--sv-titanium-line);
}
.sc-next-title {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	color: var(--sv-text);
	margin: 0;
}
.sc-next-arrow {
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	display: grid;
	place-items: center;
	color: var(--sv-titanium);
	transition: transform var(--sv-base) var(--sv-ease-precision), border-color var(--sv-base);
}
.sc-next:hover .sc-next-arrow {
	transform: translateX(3px);
	border-color: currentColor;
}

/* Page footer, carrying the same designation marking as the door */
.sc-footer {
	border-top: 1px solid var(--sv-border);
	background: var(--sv-bg-sunken);
	padding: var(--sv-7) 0 0;
}
.sc-footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sv-5);
	padding-bottom: var(--sv-6);
}
.sc-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-5);
}
.sc-footer-links a {
	/* Taller touch target; vertical padding on an inline link does not
	   move the row */
	padding: 6px 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	transition: color var(--sv-base);
}
.sc-footer-links a:hover {
	color: var(--sv-text);
}

/* ------------------------------ Responsive ------------------------------ */

@media (min-width: 1081px) {
	/* Wide: the capture scene sits beside its own explanation */
	.sc-hero-inner {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		align-items: center;
	}
	.sc-hero-art {
		margin: 0 calc(var(--sv-gutter) * -1) 0 0;
	}
}

@media (max-width: 1080px) {
	.sc-modules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sc-stages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* The connector now runs between columns, so the mid-row link goes */
	.sc-stage + .sc-stage::before {
		display: none;
	}
	.sc-onsite,
	.sc-tech {
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-motif-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sc-motif-item + .sc-motif-item::before {
		display: none;
	}
}

@media (max-width: 860px) {
	.sc-routes {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Stacked, the split becomes one trunk feeding two equal routes in turn */
	.sc-split {
		height: 40px;
	}
	.sc-split::before {
		left: 50%;
		right: 50%;
	}
	.sc-split span:first-child,
	.sc-split span:last-child {
		left: 50%;
	}
	.sc-split::after {
		top: -20px;
		height: 20px;
	}
	.sc-distinction {
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-distinction > div + div {
		border-left: 0;
		border-top: 1px solid var(--sv-border);
	}
	.sc-records {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	/* On a phone the scene renders about a third of its design width, so the
	   sheet notes would be unreadable. They go, and the type that remains is
	   sized for the rendered width rather than the drawing. */
	.sc-sheet-note {
		display: none;
	}
	.sc-sheet text {
		font-size: 26px;
		letter-spacing: 2.4px;
	}
	.sc-sheet-head {
		font-size: 26px;
		letter-spacing: 3.4px;
	}
	.sc-modules {
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-stages {
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-applications {
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-home {
		width: 132px;
	}
	.sc-topbar-rule {
		display: none;
	}
	/* Diagrams stay legible by losing the smallest annotation, never the
	   structure. */
	.sc-hero-art {
		margin: 0 calc(var(--sv-gutter) * -1);
	}
	.sc-step,
	.sc-optional {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: var(--sv-4);
	}
	.sc-step-marker {
		width: 40px;
		height: 40px;
		font-size: var(--sv-micro);
	}
	.sc-step:not(:last-child)::before {
		left: 19px;
		top: 44px;
	}
	.sc-next {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sv-4);
	}
	/* One column on a phone, so the drawing centres under its own copy
	   instead of hugging the left edge of a wide card. */
	.sc-module-art {
		display: flex;
		justify-content: center;
	}
	.sc-mod-svg {
		max-width: 168px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-hero-art {
		transform: none !important;
	}
}


/* ------------------------ Example workflows ----------------------------- */

.sc-examples {
	display: flex;
	flex-direction: column;
	gap: var(--sv-6);
}
.sc-example {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: rgba(8, 9, 10, 0.4);
	padding: var(--sv-5);
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
}
.sc-example-head {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	max-width: 64ch;
}
.sc-example-head h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--sv-text);
}
.sc-example-head p {
	margin: 0;
}
.sc-example-num {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-titanium);
}
.sc-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sv-4);
}
.sc-flow-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	padding: var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-bg-sunken);
	min-width: 0;
}
.sc-flow-stage + .sc-flow-stage::before {
	content: "";
	position: absolute;
	left: calc(var(--sv-4) * -1 - 1px);
	top: 34%;
	width: var(--sv-4);
	height: 1px;
	background: var(--sv-graphite-500);
}
.sc-flow-art {
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	border-bottom: 1px solid var(--sv-border);
	padding-bottom: var(--sv-2);
	background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(185, 192, 196, 0.05), transparent 70%);
}
.sc-example-svg {
	width: 100%;
	height: auto;
}
.sc-flow-stage p {
	margin: 0;
}
.sc-flow-label {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.sc-flow-label b {
	font-weight: 500;
	color: var(--sv-titanium);
	margin-right: 4px;
}
.sc-flow-stage .sv-body-s {
	color: var(--sv-text-muted);
	font-size: 0.8rem;
}
@media (max-width: 1100px) {
	.sc-flow {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sc-flow-stage + .sc-flow-stage::before {
		display: none;
	}
}
@media (max-width: 640px) {
	.sc-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sv-3);
	}
	.sc-example {
		padding: var(--sv-4);
	}
}