/* =========================================================================
   Studio Variant — Commercial page

   A page-scoped layer, loaded after sv.css and the shared capability layer
   in scanning.css. Everything here is prefixed .cm-, so it cannot reach the
   landing page or any of the five capability chapters.

   The capability pages are about process: a single object, drawn in CAD, on
   a technical sheet. This page is about context. So the language here is a
   wide letterboxed environment — a machine, a line, an installation, a
   counter — with a technical overlay laid over it, and a problem-to-result
   rail running underneath. Titanium carries the commercial register; brass
   is reserved for the moment something is being worked on or resolved.
   ========================================================================= */

/* ------------------------------ 1. Hero -------------------------------- */

.cm-hero {
	position: relative;
	overflow: hidden;
	padding: var(--sv-10) 0 var(--sv-8);
	border-bottom: 1px solid var(--sv-border-hairline);
}

.cm-hero-inner {
	position: relative;
	display: grid;
	gap: var(--sv-8);
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: center;
}

.cm-hero-text {
	max-width: 46ch;
}

.cm-hero h1 {
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-l);
	line-height: 0.98;
	letter-spacing: -0.028em;
	margin: var(--sv-5) 0 0;
	color: var(--sv-text);
}

.cm-hero h1 span {
	display: block;
}

.cm-hero h1 span:nth-child(2) {
	color: var(--sv-mist-300);
}

.cm-sub {
	margin: var(--sv-5) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-body-s);
	line-height: 1.75;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sv-titanium);
	border-left: 2px solid var(--sv-titanium-line);
	padding-left: var(--sv-4);
	max-width: 46ch;
}

/* The supporting copy, the actions and the closing line each need air
   from the block above them — the shared .sc-* rules assume a capability
   hero, where the mono sub-headline does not exist. */
.cm-hero-text .sc-lede {
	margin-top: var(--sv-5);
}

.cm-hero-text .sc-actions {
	margin-top: var(--sv-6);
}

.cm-hero-text > .sv-micro {
	margin-top: var(--sv-5);
	letter-spacing: 0.16em;
	color: var(--sv-text-muted);
}

.cm-hero-art {
	position: relative;
	min-height: 320px;
}

.cm-hero-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Motion in the drawn scenes.

   The flows are dashed strokes that draw themselves toward the aperture
   and away from it, so the hero reads as movement through one place
   rather than five unrelated diagrams. The animations only run while the
   scene is on screen — commercial.js adds .is-running — and they are
   suppressed entirely under reduced motion, where the artwork still
   reads correctly as a static drawing. */
.cm-flow-in,
.cm-flow-out {
	stroke-dasharray: 5 7;
	stroke-dashoffset: 0;
}

.cm-hero-svg.is-running .cm-flow-in {
	animation: cm-draw 2.6s linear infinite;
}

.cm-hero-svg.is-running .cm-flow-out {
	animation: cm-draw 2.6s linear infinite;
}

@keyframes cm-draw {
	to {
		stroke-dashoffset: -48;
	}
}

.cm-gate-pulse {
	opacity: 0.25;
}

.cm-hero-svg.is-running .cm-gate-pulse {
	animation: cm-pulse 3.4s var(--sv-ease-precision) infinite;
}

@keyframes cm-pulse {
	0%,
	100% {
		opacity: 0.16;
	}
	50% {
		opacity: 0.6;
	}
}

/* Branding appearing on a batch: each item resolves a fraction after the
   one before it, which is the only way a repeated process reads as
   repeated rather than instant. */
.cm-brand-on {
	opacity: 0;
	animation: cm-brand 4.4s var(--sv-ease-precision) infinite;
}

@keyframes cm-brand {
	0% {
		opacity: 0;
	}
	18%,
	72% {
		opacity: 1;
	}
	90%,
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-flow-in,
	.cm-flow-out,
	.cm-gate-pulse,
	.cm-brand-on {
		animation: none !important;
		opacity: 1;
	}

	.cm-gate-pulse {
		opacity: 0.35;
	}
}

/* The strip under the hero: problem in, route out. */
.cm-motif {
	margin-top: var(--sv-8);
	border-top: 1px solid var(--sv-border-hairline);
	padding-top: var(--sv-5);
}

.cm-motif-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-5) var(--sv-7);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-motif-item {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}

.cm-motif-item i {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--sv-titanium-line);
}

/* ------------------------- 2. Section furniture ------------------------ */

.cm-section {
	position: relative;
	padding: var(--sv-9) 0;
	border-top: 1px solid var(--sv-border-hairline);
}

.cm-section.is-sunken {
	background: var(--sv-bg-sunken);
}

.cm-head {
	max-width: 62ch;
}

.cm-head h2 {
	margin: var(--sv-4) 0 0;
	letter-spacing: -0.02em;
}

.cm-head .sv-body-l {
	margin: var(--sv-5) 0 0;
	color: var(--sv-text-secondary);
	max-width: 58ch;
}

/* ------------------------- 3. The route spine -------------------------- */

.cm-spine {
	margin-top: var(--sv-7);
	display: grid;
	gap: var(--sv-6);
}

.cm-track {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--sv-2);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cmstage;
}

.cm-stage {
	position: relative;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	padding: var(--sv-4) var(--sv-3) var(--sv-5);
	min-height: 118px;
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	transition: border-color 220ms var(--sv-ease-precision), background 220ms var(--sv-ease-precision);
}

.cm-stage i {
	font-family: var(--sv-font-mono);
	font-style: normal;
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	color: var(--sv-text-faint);
}

.cm-stage b {
	font-family: var(--sv-font-mono);
	font-weight: 500;
	font-size: var(--sv-label);
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}

.cm-stage span {
	font-size: var(--sv-body-s);
	line-height: 1.5;
	color: var(--sv-text-muted);
}

.cm-stage::after {
	content: "";
	position: absolute;
	inset: auto auto -1px 0;
	width: 0;
	height: 2px;
	background: var(--sv-brass);
	transition: width 320ms var(--sv-ease-precision);
}

.cm-stage.is-lit {
	border-color: var(--sv-brass-line);
	background: var(--sv-surface-raised);
}

.cm-stage.is-lit::after {
	width: 100%;
}

.cm-stage.is-first b {
	color: var(--sv-text);
}

.cm-feeds-label {
	margin: 0 0 var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

.cm-feeds {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-feed {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-pill);
	padding: var(--sv-2) var(--sv-4);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
	text-decoration: none;
	transition: border-color 200ms var(--sv-ease-precision), color 200ms var(--sv-ease-precision);
}

.cm-feed em {
	font-style: normal;
	color: var(--sv-text-faint);
}

.cm-feed:hover,
.cm-feed:focus-visible {
	border-color: var(--sv-brass-line);
	color: var(--sv-text);
}

.cm-spine-note {
	margin: var(--sv-5) 0 0;
	max-width: 62ch;
	font-size: var(--sv-body-s);
	line-height: 1.7;
	color: var(--sv-text-muted);
}

/* The short statements the specification asks the page to land on. They are
   the one place the page raises its voice, so they get the display face and
   sit on their own with a hairline above. */
.cm-line {
	margin: var(--sv-7) 0 0;
	padding-top: var(--sv-5);
	border-top: 1px solid var(--sv-border-hairline);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	line-height: 1.28;
	letter-spacing: -0.012em;
	color: var(--sv-text);
	max-width: 34ch;
}

/* ---------------------- 4. Example application cases ------------------- */

.cm-case {
	display: grid;
	gap: var(--sv-7);
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	align-items: start;
	margin-top: var(--sv-9);
	padding-top: var(--sv-9);
	border-top: 1px solid var(--sv-border-hairline);
}

/* The first case follows the section head, which already provides the
   separation, so it does not need a rule of its own. */
.cm-case:first-of-type {
	margin-top: var(--sv-8);
	padding-top: 0;
	border-top: 0;
}

.cm-case-index {
	position: sticky;
	top: 96px;
	display: grid;
	gap: var(--sv-3);
}

.cm-case-desig {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	margin: 0;
}

.cm-case-desig b {
	display: block;
	font-weight: 500;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
	color: var(--sv-mist-200);
	margin-bottom: var(--sv-1);
}

.cm-case-rule {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--sv-titanium-line);
}

.cm-case-body {
	display: grid;
	gap: var(--sv-6);
	min-width: 0;
}

.cm-case-body h3 {
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-m);
	line-height: 1.04;
	letter-spacing: -0.024em;
	margin: 0;
	color: var(--sv-text);
	max-width: 22ch;
}

.cm-case-copy {
	display: grid;
	gap: var(--sv-4);
	max-width: 68ch;
}

.cm-case-copy p {
	margin: 0;
	color: var(--sv-text-secondary);
}

/* The letterboxed environment panel */
.cm-env,
.cm-split-art {
	position: relative;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: linear-gradient(180deg, var(--sv-graphite-850) 0%, var(--sv-void) 100%);
	/* The drawings keep their drawn width — commercial.js sets a min-width
	   from each scene's own canvas — so a narrow column pans the drawing
	   instead of shrinking its annotations away. */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.cm-env::-webkit-scrollbar,
.cm-split-art::-webkit-scrollbar {
	height: 6px;
}

.cm-env::-webkit-scrollbar-thumb,
.cm-split-art::-webkit-scrollbar-thumb {
	background: var(--sv-border-strong);
	border-radius: var(--sv-radius-pill);
}

.cm-env-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* The problem-to-result rail under each case */
.cm-rail {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-rail li {
	position: relative;
	flex: 1 1 128px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	padding: var(--sv-3) var(--sv-4);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
	display: flex;
	align-items: center;
}

.cm-rail li.is-problem {
	border-color: var(--sv-border-strong);
	color: var(--sv-text-muted);
}

.cm-rail li.is-work {
	border-color: var(--sv-titanium-line);
}

.cm-rail li.is-result {
	border-color: var(--sv-brass-line);
	color: var(--sv-text);
	background: var(--sv-surface-raised);
}

.cm-rail li::before {
	content: "";
	position: absolute;
	left: calc(var(--sv-2) * -1);
	top: 50%;
	width: var(--sv-2);
	height: 1px;
	background: var(--sv-border-strong);
}

.cm-rail li:first-child::before {
	display: none;
}

/* Considerations, listed rather than promised */
.cm-points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-points li {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-pill);
	padding: var(--sv-2) var(--sv-4);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}

/* Capabilities this example could use — real links to the capability pages */
.cm-caps {
	display: grid;
	gap: var(--sv-3);
}

.cm-caps-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-cap {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	padding: var(--sv-2) var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
	text-decoration: none;
	transition: border-color 200ms var(--sv-ease-precision), color 200ms var(--sv-ease-precision);
}

.cm-cap:hover,
.cm-cap:focus-visible {
	border-color: var(--sv-titanium-line);
	color: var(--sv-text);
}

.cm-cap i {
	font-style: normal;
	color: var(--sv-text-faint);
}

/* A standing caution or qualification inside a case */
.cm-standing {
	border: 1px solid var(--sv-border);
	border-left: 2px solid var(--sv-titanium-line);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	padding: var(--sv-4) var(--sv-5);
	margin: 0;
	color: var(--sv-text-secondary);
	font-size: var(--sv-body-s);
	line-height: 1.7;
	max-width: 84ch;
}

.cm-case-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
}

/* The two-branch layout used by hospitality */
.cm-branches {
	display: grid;
	gap: var(--sv-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cm-branch {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface);
	padding: var(--sv-5);
	display: grid;
	gap: var(--sv-4);
	align-content: start;
}

.cm-branch h4 {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}

.cm-branch ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sv-2);
}

.cm-branch li {
	position: relative;
	padding-left: var(--sv-5);
	font-size: var(--sv-body-s);
	line-height: 1.6;
	color: var(--sv-text-secondary);
}

.cm-branch li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 10px;
	height: 1px;
	background: var(--sv-titanium-line);
}

/* --------------------------- 5. Sectors -------------------------------- */

.cm-sectors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: var(--sv-6) 0 0;
	padding: 0;
}

.cm-sectors li {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	padding: var(--sv-3) var(--sv-5);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
	background: var(--sv-surface);
}

/* ---------------- 6. One problem, multiple capabilities ---------------- */

.cm-workflows {
	display: grid;
	gap: var(--sv-4);
	margin-top: var(--sv-7);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.cm-workflow {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface);
	padding: var(--sv-6);
	display: grid;
	gap: var(--sv-5);
	align-content: start;
}

.cm-workflow.is-long {
	grid-row: span 2;
}

.cm-workflow h3 {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

.cm-chain {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.cm-chain li {
	position: relative;
	padding: var(--sv-3) 0 var(--sv-3) var(--sv-7);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-body-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}

.cm-chain li::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--sv-border-strong);
}

.cm-chain li:first-child::before {
	top: 50%;
}

.cm-chain li:last-child::before {
	bottom: 50%;
}

.cm-chain li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: calc(50% - 4px);
	width: 9px;
	height: 9px;
	border: 1px solid var(--sv-titanium-line);
	border-radius: 50%;
	background: var(--sv-bg);
}

.cm-chain li.is-end {
	color: var(--sv-text);
}

.cm-chain li.is-end::after {
	border-color: var(--sv-brass);
	background: var(--sv-brass);
}

.cm-workflow-note {
	margin: 0;
	font-size: var(--sv-body-s);
	line-height: 1.7;
	color: var(--sv-text-muted);
}

.cm-workflow-line {
	margin: var(--sv-7) 0 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--sv-mist-200);
	max-width: 30ch;
}

/* ------------------------ 7. The guidance tool ------------------------- */

.cm-tool-band {
	margin-top: var(--sv-7);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	background: var(--sv-surface);
	padding: var(--sv-7);
}

.cm-tool-note {
	margin: var(--sv-5) 0 0;
	max-width: 76ch;
	font-size: var(--sv-body-s);
	line-height: 1.7;
	color: var(--sv-text-muted);
}

/* ---------------------- 8. Send us the part / legacy ------------------- */

.cm-split {
	display: grid;
	gap: var(--sv-7);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.cm-split-art {
	background: var(--sv-bg-sunken);
}

.cm-split-body {
	display: grid;
	gap: var(--sv-5);
	align-content: start;
}

.cm-questions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sv-3);
}

.cm-questions li {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	line-height: 1.25;
	letter-spacing: -0.012em;
	color: var(--sv-mist-300);
}

.cm-questions li:last-child {
	color: var(--sv-text);
}

/* ------------------------ 9. Relationship / sizes ---------------------- */

.cm-relationship {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: var(--sv-6) 0 0;
	padding: 0;
	counter-reset: cmrel;
}

.cm-relationship li {
	flex: 1 1 180px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	padding: var(--sv-5) var(--sv-4);
	display: grid;
	gap: var(--sv-2);
	align-content: start;
}

.cm-relationship li b {
	font-family: var(--sv-font-mono);
	font-weight: 500;
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}

.cm-relationship li span {
	font-size: var(--sv-body-s);
	line-height: 1.6;
	color: var(--sv-text-muted);
}

.cm-sizes {
	display: grid;
	gap: var(--sv-6);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	margin-top: var(--sv-6);
}

.cm-sizes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sv-3);
}

.cm-sizes-list li {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--sv-mist-300);
}

.cm-sizes-list li:last-child {
	color: var(--sv-text);
}

/* ---------------------------- 10. Closing ------------------------------ */

.cm-close {
	display: grid;
	gap: var(--sv-6);
	max-width: 70ch;
}

.cm-close h2 {
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-l);
	line-height: 1;
	letter-spacing: -0.028em;
	margin: 0;
	color: var(--sv-text);
}

.cm-close-copy {
	margin: 0;
	font-size: var(--sv-body-l);
	line-height: 1.75;
	color: var(--sv-text-secondary);
}

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

/* The closing block is wrapped in a reveal container, so the grid gap on
   .cm-close cannot reach the heading, copy and actions. They space
   themselves. */
.cm-close-copy {
	margin-top: var(--sv-5);
	max-width: 56ch;
}

.cm-close-actions {
	margin-top: var(--sv-6);
}

/* The route across to the other audience page — equal in weight, not
   subordinate, and prepared for the Creators page being built. */
.cm-creator-route {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface);
	padding: var(--sv-5) var(--sv-6);
	text-decoration: none;
	transition: border-color 220ms var(--sv-ease-precision), background 220ms var(--sv-ease-precision);
}

.cm-creator-route:hover,
.cm-creator-route:focus-visible {
	border-color: var(--sv-brass-line);
	background: var(--sv-surface-raised);
}

.cm-creator-route p {
	margin: 0;
}

.cm-creator-title {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	letter-spacing: -0.012em;
	color: var(--sv-text);
	margin-top: var(--sv-1) !important;
}

.cm-creator-arrow {
	color: var(--sv-brass);
	flex: none;
}

/* --------------------------- 11. Responsive ---------------------------- */

@media (max-width: 1180px) {
	.cm-track {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cm-workflows {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-workflow.is-long {
		grid-row: auto;
	}
}

@media (max-width: 1040px) {
	.cm-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-7);
	}

	.cm-hero-text {
		max-width: none;
	}

	.cm-case {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-5);
	}

	.cm-case-index {
		position: static;
		display: flex;
		align-items: center;
		gap: var(--sv-4);
	}

	.cm-case-desig b {
		display: inline;
		font-size: var(--sv-body-l);
		margin: 0;
	}

	.cm-case-rule {
		flex: 1;
	}

	.cm-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-sizes {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.cm-hero {
		padding: var(--sv-8) 0 var(--sv-7);
	}

	.cm-section {
		padding: var(--sv-8) 0;
	}

	.cm-track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-branches {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-tool-band {
		padding: var(--sv-5);
		border-radius: var(--sv-radius-md);
	}

	.cm-rail li {
		flex: 1 1 100%;
	}

	.cm-rail li::before {
		left: 50%;
		top: calc(var(--sv-2) * -1);
		width: 1px;
		height: var(--sv-2);
	}

	.cm-creator-route {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sv-3);
	}

	/* Touch targets stay comfortable rather than technical. */
	.cm-feed,
	.cm-cap {
		padding: var(--sv-3) var(--sv-4);
		font-size: var(--sv-label);
	}
}

@media (max-width: 460px) {
	.cm-track {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-stage {
		min-height: 0;
	}
}

/* =========================================================================
   EVENTS / HOSPITALITY / CONFERENCES

   One additional commercial application area, built from the components
   the page already uses. The only new pieces are a stack rhythm for a
   longer section, a two-line headline, a "this plus this plus this"
   statement and a three-up route grid.
   ========================================================================= */

.cm-ev-title span {
	display: block;
}

.cm-ev-stack {
	display: grid;
	gap: var(--sv-9);
	margin-top: var(--sv-8);
}

/* The example application inside this section is the same .cm-case
   component as the nine above it, so it carries its own spacing already. */
.cm-ev-stack > .cm-case {
	margin-top: 0;
}

.cm-ev-block {
	display: grid;
	gap: var(--sv-6);
	align-content: start;
}

.cm-ev-block > .sv-label {
	margin: 0;
	color: var(--sv-text-faint);
}

.cm-ev-block > .sv-body-l {
	margin: 0;
	max-width: 68ch;
}

.cm-ev-block > .cm-line {
	margin-top: 0;
}

/* CUSTOM DESIGN + PRECISION MANUFACTURING + PERSONALISATION */
.cm-ev-sum {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-ev-sum li {
	position: relative;
	flex: 1 1 210px;
	display: flex;
	align-items: center;
	border: 1px solid var(--sv-border);
	border-left: 2px solid var(--sv-brass-line);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface-raised);
	padding: var(--sv-4) var(--sv-5);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text);
}

.cm-ev-sum li + li::before {
	content: "+";
	position: absolute;
	left: calc(var(--sv-5) * -0.5 - 4px);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-body-s);
	color: var(--sv-brass);
}

/* the quieter version used for the two illustrative combinations */
.cm-ev-sum.is-quiet li {
	flex: 1 1 240px;
	background: var(--sv-surface);
	border-left-color: var(--sv-titanium-line);
	font-size: var(--sv-micro);
	color: var(--sv-mist-200);
	padding: var(--sv-3) var(--sv-4);
}

.cm-ev-sum.is-quiet li + li::before {
	color: var(--sv-text-faint);
}

.cm-ev-many {
	display: grid;
	gap: var(--sv-6);
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	align-items: center;
}

.cm-ev-many > p {
	margin: 0;
	color: var(--sv-text-secondary);
	max-width: 52ch;
}

.cm-ev-routes {
	display: grid;
	gap: var(--sv-4);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1040px) {
	.cm-ev-routes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-ev-many {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 760px) {
	.cm-ev-stack {
		gap: var(--sv-8);
		margin-top: var(--sv-7);
	}

	.cm-ev-routes {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-ev-sum,
	.cm-ev-sum.is-quiet {
		gap: var(--sv-4);
	}

	.cm-ev-sum li,
	.cm-ev-sum.is-quiet li {
		flex: 1 1 100%;
	}

	.cm-ev-sum li + li::before {
		left: 50%;
		top: calc(var(--sv-4) * -0.5);
		transform: translate(-50%, -50%);
	}
}