/*
 * Cloud Markup design system.
 * Tailwind v4 reads this file in preview and compiles it for production.
 */

@theme {
	--color-primary: #006fbf;
	--color-primary-50: #e6f4ff;
	--color-primary-100: #cbeaff;
	--color-primary-500: #006fbf;
	--color-primary-700: #005a9c;
	--color-secondary: #555a60;
	--color-secondary-100: #f1f3f5;
	--color-secondary-600: #555a60;
	--color-neutral: #3c3a3c;
	--color-background: #f7f8fa;
	--color-signal: #0193fc;
	--color-coral: #d9dee5;
	--font-sans: "Segoe UI", Arial, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
}

@layer base {
	:root {
		--cm-ink: #3c3a3c;
		--cm-ink-soft: #50545a;
		--cm-paper: #f7f8fa;
		--cm-white: #ffffff;
		--cm-line: #d9dee5;
		--cm-muted: #626a73;
		--cm-brand: #0193fc;
		--cm-signal: #e6f4ff;
		--cm-signal-dark: #006fbf;
		--cm-blue: #006fbf;
		--cm-coral: #d9dee5;
		--cm-radius: 6px;
	}

	* {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
		scroll-padding-top: 84px;
	}

	body {
		margin: 0;
		background: var(--cm-paper);
		color: var(--cm-ink);
		font-family: "Segoe UI", Arial, sans-serif;
		font-size: 16px;
		line-height: 1.6;
		letter-spacing: 0;
		text-rendering: optimizeLegibility;
	}

	button,
	a {
		-webkit-tap-highlight-color: transparent;
	}

	a {
		color: inherit;
	}

	button,
	input,
	textarea,
	select {
		font: inherit;
	}

	::selection {
		background: var(--cm-signal);
		color: var(--cm-ink);
	}

	[x-cloak] {
		display: none !important;
	}
}

@layer components {
	.cm-shell {
		width: min(1180px, calc(100% - 40px));
		margin-inline: auto;
	}

	.cm-skip-link {
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 9999;
		padding: 10px 14px;
		background: var(--cm-ink);
		color: #fff;
		text-decoration: none;
		transform: translateY(-150%);
		transition: transform 160ms ease;
	}

	.cm-skip-link:focus {
		transform: translateY(0);
	}

	.cm-site-header {
		position: absolute;
		inset: 0 0 auto;
		z-index: 50;
		border-bottom: 1px solid rgba(60, 58, 60, 0.12);
		background: rgba(247, 248, 250, 0.92);
		backdrop-filter: blur(14px);
	}

	.cm-header-inner {
		display: flex;
		min-height: 72px;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.cm-wordmark {
		display: inline-flex;
		align-items: center;
		gap: 11px;
		color: var(--cm-ink);
		font-size: 16px;
		font-weight: 750;
		line-height: 1;
		text-decoration: none;
	}

	.cm-wordmark-logo {
		display: block;
		width: 48px;
		height: auto;
		aspect-ratio: 192 / 122;
		object-fit: contain;
	}

	.cm-wordmark-mark {
		position: relative;
		display: grid;
		width: 33px;
		height: 33px;
		place-items: center;
		border: 1.5px solid var(--cm-ink);
		background: var(--cm-white);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
		font-weight: 700;
	}

	.cm-wordmark-mark::after {
		content: "";
		position: absolute;
		right: -5px;
		bottom: -5px;
		width: 9px;
		height: 9px;
		background: var(--cm-brand);
		border: 1px solid var(--cm-ink);
	}

	.cm-primary-nav {
		display: flex;
		align-items: center;
		gap: 28px;
		font-size: 14px;
		font-weight: 600;
	}

	.cm-primary-nav--desktop {
		margin-left: auto;
	}

	.cm-primary-nav > a:not(.cm-button) {
		color: var(--cm-ink-soft);
		text-decoration: none;
	}

	.cm-primary-nav > a:not(.cm-button):hover {
		color: var(--cm-blue);
	}

	.cm-nav-toggle {
		display: none;
		width: 42px;
		height: 42px;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--cm-line);
		border-radius: var(--cm-radius);
		background: var(--cm-white);
		color: var(--cm-ink);
		cursor: pointer;
	}

	.cm-button {
		display: inline-flex;
		min-height: 48px;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 12px 18px;
		border: 1px solid var(--cm-ink);
		border-radius: var(--cm-radius);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
	}

	.cm-button:hover {
		transform: translateY(-2px);
		box-shadow: 4px 4px 0 var(--cm-ink);
	}

	.cm-button--small {
		min-height: 40px;
		padding: 9px 14px;
		font-size: 13px;
	}

	.cm-button--ink {
		background: var(--cm-ink);
		color: #fff;
	}

	.cm-button--signal {
		background: var(--cm-blue);
		color: var(--cm-white);
	}

	.cm-button:focus-visible,
	.cm-text-link:focus-visible,
	.cm-primary-nav a:focus-visible,
	.cm-wordmark:focus-visible,
	.cm-nav-toggle:focus-visible {
		outline: 3px solid var(--cm-blue);
		outline-offset: 3px;
	}

	.cm-hero {
		position: relative;
		overflow: hidden;
		padding: 118px 0 58px;
		background: var(--cm-paper);
	}

	.cm-hero::before {
		content: "";
		position: absolute;
		top: 72px;
		bottom: 0;
		left: calc(50% - 1px);
		width: 1px;
		background: rgba(60, 58, 60, 0.08);
	}

	.cm-hero-grid {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
		align-items: center;
		gap: 52px;
	}

	.cm-hero-copy {
		position: relative;
		z-index: 2;
	}

	.cm-kicker {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		margin: 0 0 20px;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: uppercase;
	}

	.cm-kicker span {
		width: 9px;
		height: 9px;
		background: var(--cm-brand);
		border: 1px solid var(--cm-ink);
	}

	.cm-hero h1 {
		max-width: 650px;
		margin: 0;
		font-size: 64px;
		font-weight: 760;
		line-height: 0.99;
		letter-spacing: 0;
	}

	.cm-hero-lede {
		max-width: 620px;
		margin: 24px 0 0;
		color: #555a60;
		font-size: 18px;
		line-height: 1.65;
	}

	.cm-hero-actions {
		display: flex;
		align-items: center;
		gap: 22px;
		margin-top: 30px;
	}

	.cm-text-link {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}

	.cm-play-icon {
		display: grid;
		width: 34px;
		height: 34px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 50%;
		background: var(--cm-white);
	}

	.cm-hero-audience {
		margin: 22px 0 0;
		color: var(--cm-muted);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 11px;
	}

	.cm-workbench-wrap {
		position: relative;
		min-width: 0;
	}

	.cm-workbench {
		position: relative;
		overflow: hidden;
		border: 1px solid var(--cm-ink);
		border-radius: var(--cm-radius);
		background: var(--cm-white);
		box-shadow: 12px 12px 0 rgba(60, 58, 60, 0.12);
	}

	.cm-workbench-bar {
		display: grid;
		grid-template-columns: 88px 1fr auto;
		min-height: 42px;
		align-items: center;
		padding: 0 13px;
		border-bottom: 1px solid var(--cm-line);
		background: #f1f3f5;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
	}

	.cm-window-dots {
		display: flex;
		gap: 5px;
	}

	.cm-window-dots span {
		width: 7px;
		height: 7px;
		border: 1px solid var(--cm-ink);
		border-radius: 50%;
		background: var(--cm-white);
	}

	.cm-window-dots span:nth-child(2) {
		background: var(--cm-signal);
	}

	.cm-workbench-path {
		color: var(--cm-muted);
	}

	.cm-workbench-path span {
		color: var(--cm-ink);
		font-weight: 600;
	}

	.cm-workbench-path b {
		margin-inline: 6px;
	}

	.cm-workbench-status {
		display: flex;
		align-items: center;
		gap: 5px;
		color: var(--cm-muted);
	}

	.cm-workbench-status span {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #006fbf;
	}

	.cm-workbench-body {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 174px;
		height: 390px;
	}

	.cm-tool-rail {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding-top: 13px;
		border-right: 1px solid var(--cm-line);
		background: #f7f8fa;
	}

	.cm-tool-rail span {
		display: grid;
		width: 30px;
		height: 30px;
		place-items: center;
		border: 1px solid transparent;
		border-radius: 4px;
		color: #6b7280;
	}

	.cm-tool-rail span.is-active {
		border-color: var(--cm-ink);
		background: var(--cm-signal);
		color: var(--cm-ink);
	}

	.cm-tool-rail svg {
		width: 16px;
		height: 16px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.6;
	}

	.cm-canvas {
		position: relative;
		overflow: hidden;
		background: #f7f8fa;
	}

	.cm-canvas-grid {
		position: absolute;
		inset: 0;
		background: #f1f3f5;
		opacity: 0.72;
	}

	.cm-node {
		position: absolute;
		z-index: 2;
		display: flex;
		min-width: 120px;
		align-items: center;
		gap: 8px;
		padding: 9px;
		border: 1px solid var(--cm-ink);
		border-radius: 5px;
		background: var(--cm-white);
		box-shadow: 3px 3px 0 rgba(60, 58, 60, 0.1);
	}

	.cm-node small,
	.cm-node b {
		display: block;
		line-height: 1.25;
	}

	.cm-node small {
		margin-bottom: 2px;
		color: var(--cm-muted);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 8px;
		text-transform: uppercase;
	}

	.cm-node b {
		font-size: 11px;
	}

	.cm-node-icon {
		display: grid;
		flex: 0 0 auto;
		width: 30px;
		height: 30px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 4px;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		font-weight: 700;
	}

	.cm-node-icon--blue { background: #e6f4ff; }
	.cm-node-icon--signal { background: var(--cm-signal); font-size: 15px; }
	.cm-node-icon--coral { background: #e6f4ff; }
	.cm-node-icon--ink { background: var(--cm-ink); color: #fff; }

	.cm-node--cognito { top: 58px; left: 24px; }
	.cm-node--api { top: 58px; left: 178px; }
	.cm-node--lambda { top: 186px; left: 102px; }
	.cm-node--data { top: 298px; left: 212px; }

	.cm-review-pin {
		position: absolute;
		top: -12px;
		right: -12px;
		display: grid;
		width: 25px;
		height: 25px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 50% 50% 50% 4px;
		background: var(--cm-blue);
		color: var(--cm-white);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		font-weight: 700;
	}

	.cm-flow-line {
		position: absolute;
		z-index: 1;
		border-color: var(--cm-blue);
		border-style: solid;
		opacity: 0.75;
	}

	.cm-flow-line::after {
		content: "";
		position: absolute;
		width: 7px;
		height: 7px;
		border-right: 2px solid var(--cm-blue);
		border-bottom: 2px solid var(--cm-blue);
		transform: rotate(-45deg);
	}

	.cm-flow-line--one {
		top: 105px;
		left: 145px;
		width: 37px;
		border-width: 2px 0 0;
	}

	.cm-flow-line--one::after {
		top: -4px;
		right: -1px;
	}

	.cm-flow-line--two {
		top: 119px;
		left: 230px;
		width: 0;
		height: 73px;
		border-width: 0 0 0 2px;
	}

	.cm-flow-line--two::after {
		right: -3px;
		bottom: -1px;
		transform: rotate(45deg);
	}

	.cm-canvas-badge {
		position: absolute;
		right: 10px;
		bottom: 10px;
		z-index: 4;
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 7px 9px;
		border: 1px solid var(--cm-ink);
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.94);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 8px;
	}

	.cm-canvas-badge span {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #006fbf;
	}

	.cm-canvas-badge b {
		margin-left: 4px;
	}

	.cm-review-panel {
		padding: 13px 11px;
		border-left: 1px solid var(--cm-line);
		background: #f1f3f5;
	}

	.cm-review-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 13px;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		text-transform: uppercase;
	}

	.cm-review-head b {
		color: #006fbf;
	}

	.cm-review-note {
		display: grid;
		grid-template-columns: 25px 1fr;
		gap: 7px;
		margin-bottom: 9px;
		padding: 9px 7px;
		border: 1px solid var(--cm-line);
		border-radius: 4px;
		background: var(--cm-white);
	}

	.cm-review-note.is-resolved {
		opacity: 0.58;
	}

	.cm-review-avatar {
		display: grid;
		width: 25px;
		height: 25px;
		place-items: center;
		border-radius: 50%;
		background: var(--cm-ink);
		color: #fff;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 8px;
	}

	.cm-review-note b {
		display: block;
		font-size: 9px;
		line-height: 1.25;
	}

	.cm-review-note p {
		margin: 4px 0 0;
		color: var(--cm-muted);
		font-size: 8px;
		line-height: 1.45;
	}

	.cm-review-action {
		display: block;
		width: 100%;
		text-align: center;
		min-height: 32px;
		margin-top: 6px;
		border: 1px solid #d9dee5;
		border-radius: 4px;
		background: #f1f3f5;
		color: #6b7280;
		font-size: 9px;
		font-weight: 700;
	}

	.cm-annotation {
		position: absolute;
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 7px 9px;
		border: 1px solid var(--cm-ink);
		background: var(--cm-signal);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		font-weight: 600;
		box-shadow: 3px 3px 0 var(--cm-ink);
	}

	.cm-annotation span {
		padding-right: 7px;
		border-right: 1px solid rgba(60, 58, 60, 0.4);
		font-weight: 700;
	}

	.cm-annotation--top {
		top: -16px;
		right: 26px;
	}

	.cm-annotation--bottom {
		bottom: -17px;
		left: 88px;
		background: #e6f4ff;
	}

	.cm-proof-strip {
		border-block: 1px solid var(--cm-ink);
		background: var(--cm-white);
	}

	.cm-proof-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.cm-proof-grid p {
		display: grid;
		grid-template-columns: 32px auto;
		margin: 0;
		padding: 19px 28px;
		border-right: 1px solid var(--cm-line);
		color: var(--cm-muted);
		font-size: 12px;
		line-height: 1.45;
	}

	.cm-proof-grid p:last-child {
		border-right: 0;
	}

	.cm-proof-grid span {
		grid-row: 1 / 3;
		color: var(--cm-blue);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
	}

	.cm-proof-grid strong {
		color: var(--cm-ink);
		font-size: 13px;
	}

	.cm-difference {
		border-bottom: 1px solid var(--cm-line);
		background: var(--cm-white);
	}

	.cm-comparison-wrap {
		overflow-x: auto;
		border: 1px solid var(--cm-ink);
		border-radius: var(--cm-radius);
		background: var(--cm-white);
	}

	.cm-comparison-table {
		width: 100%;
		min-width: 720px;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.cm-comparison-table th,
	.cm-comparison-table td {
		padding: 22px 24px;
		border-right: 1px solid var(--cm-line);
		border-bottom: 1px solid var(--cm-line);
		text-align: left;
		vertical-align: top;
	}

	.cm-comparison-table tr > *:last-child {
		border-right: 0;
	}

	.cm-comparison-table tbody tr:last-child > * {
		border-bottom: 0;
	}

	.cm-comparison-table thead th {
		background: var(--cm-ink);
		color: var(--cm-white);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.cm-comparison-table thead th:last-child {
		background: var(--cm-blue);
	}

	.cm-comparison-table tbody th {
		width: 22%;
		color: var(--cm-ink);
		font-size: 14px;
	}

	.cm-comparison-table td {
		color: var(--cm-muted);
		font-size: 14px;
		line-height: 1.6;
	}

	.cm-comparison-table td:last-child {
		background: #e6f4ff;
		color: var(--cm-ink);
		font-weight: 650;
	}

	@media (max-width: 1060px) {
		.cm-hero-grid {
			grid-template-columns: minmax(0, 0.82fr) minmax(430px, 1.18fr);
			gap: 30px;
		}

		.cm-workbench-body {
			grid-template-columns: 42px minmax(0, 1fr);
		}

		.cm-review-panel {
			display: none;
		}

		.cm-node--api { left: 168px; }
		.cm-node--data { left: 194px; }
	}

	@media (max-width: 820px) {
		.cm-shell {
			width: min(100% - 28px, 680px);
		}

		.cm-site-header {
			position: absolute;
		}

		.cm-nav-toggle {
			display: inline-flex;
		}

		.cm-primary-nav {
			position: absolute;
			top: 63px;
			right: 14px;
			left: 14px;
			display: none;
			align-items: stretch;
			flex-direction: column;
			gap: 0;
			padding: 10px;
			border: 1px solid var(--cm-ink);
			border-radius: var(--cm-radius);
			background: var(--cm-white);
			box-shadow: 6px 6px 0 var(--cm-ink);
		}

		.cm-primary-nav.is-open {
			display: flex;
		}

		.cm-primary-nav > a:not(.cm-button) {
			padding: 12px 10px;
			border-bottom: 1px solid var(--cm-line);
		}

		.cm-primary-nav .cm-button {
			margin-top: 9px;
		}

		.cm-hero {
			padding: 100px 0 46px;
		}

		.cm-hero::before {
			display: none;
		}

		.cm-hero-grid {
			grid-template-columns: 1fr;
			gap: 36px;
		}

		.cm-hero h1 {
			font-size: 50px;
		}

		.cm-hero-lede {
			font-size: 16px;
		}

		.cm-workbench-wrap {
			max-width: 620px;
		}

		.cm-workbench-body {
			height: 310px;
		}

		.cm-node--cognito { top: 39px; }
		.cm-node--api { top: 39px; }
		.cm-node--lambda { top: 152px; }
		.cm-node--data { top: 248px; }

		.cm-proof-grid {
			grid-template-columns: 1fr;
		}

		.cm-proof-grid p {
			border-right: 0;
			border-bottom: 1px solid var(--cm-line);
		}

		.cm-proof-grid p:last-child {
			border-bottom: 0;
		}
	}

	@media (max-width: 520px) {
		.cm-header-inner {
			min-height: 64px;
		}

		.cm-wordmark-text {
			font-size: 15px;
		}

		.cm-hero {
			padding-top: 88px;
		}

		.cm-kicker {
			margin-bottom: 14px;
			font-size: 10px;
		}

		.cm-hero h1 {
			font-size: 38px;
			line-height: 1.02;
		}

		.cm-hero-lede {
			margin-top: 18px;
			font-size: 15px;
		}

		.cm-hero-actions {
			align-items: stretch;
			flex-direction: column;
			gap: 14px;
			margin-top: 22px;
		}

		.cm-button--signal {
			width: 100%;
		}

		.cm-text-link {
			justify-content: center;
		}

		.cm-hero-audience {
			font-size: 9px;
		}

		.cm-workbench-wrap {
			margin-top: 2px;
		}

		.cm-workbench {
			box-shadow: 7px 7px 0 rgba(60, 58, 60, 0.14);
		}

		.cm-workbench-bar {
			grid-template-columns: 54px 1fr;
		}

		.cm-workbench-status {
			display: none;
		}

		.cm-workbench-body {
			grid-template-columns: 34px minmax(0, 1fr);
			height: 258px;
		}

		.cm-tool-rail span {
			width: 25px;
			height: 25px;
		}

		.cm-node {
			min-width: 98px;
			padding: 7px;
		}

		.cm-node-icon {
			width: 24px;
			height: 24px;
		}

		.cm-node small {
			font-size: 6px;
		}

		.cm-node b {
			font-size: 8px;
		}

		.cm-node--cognito { top: 26px; left: 12px; }
		.cm-node--api { top: 26px; left: 132px; }
		.cm-node--lambda { top: 125px; left: 64px; }
		.cm-node--data { top: 205px; left: 147px; }

		.cm-flow-line--one {
			top: 64px;
			left: 112px;
			width: 21px;
		}

		.cm-flow-line--two {
			top: 70px;
			left: 174px;
			height: 59px;
		}

		.cm-canvas-badge {
			right: 6px;
			bottom: 6px;
			font-size: 6px;
		}

		.cm-annotation--top {
			top: -12px;
			right: 12px;
		}

		.cm-annotation--bottom {
			bottom: -14px;
			left: 36px;
		}

		.cm-proof-grid p {
			padding: 15px 12px;
		}
	}


	.screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.cm-nav-menu {
		display: none;
		margin-left: auto;
	}

	.cm-nav-menu > summary {
		list-style: none;
	}

	.cm-nav-menu > summary::-webkit-details-marker {
		display: none;
	}

	.cm-nav-icon--close {
		display: none;
	}

	.cm-nav-menu[open] .cm-nav-icon--open {
		display: none;
	}

	.cm-nav-menu[open] .cm-nav-icon--close {
		display: block;
	}

	.cm-hero h1 {
		font-size: 64px;
	}

	.cm-section {
		padding-block: 112px;
	}

	.cm-section-heading {
		max-width: 830px;
		margin-bottom: 58px;
	}

	.cm-section-heading--split {
		display: grid;
		max-width: none;
		grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
		align-items: end;
		gap: 80px;
	}

	.cm-section-heading h2,
	.cm-artifacts-copy h2,
	.cm-secondary-tour h2,
	.cm-faq-intro h2,
	.cm-get-started h2 {
		margin: 0;
		font-size: 48px;
		font-weight: 750;
		line-height: 1.05;
		letter-spacing: 0;
	}

	.cm-section-heading > p,
	.cm-section-heading--split > p {
		margin: 0;
		color: var(--cm-muted);
		font-size: 17px;
		line-height: 1.7;
	}

	.cm-section-heading--light h2,
	.cm-section-heading--light > p {
		color: #f7f8fa;
	}

	.cm-section-heading--light > p {
		color: #d9dee5;
	}

	.cm-purpose {
		background: var(--cm-paper);
	}

	.cm-principle-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border-top: 1px solid var(--cm-ink);
		border-bottom: 1px solid var(--cm-ink);
	}

	.cm-principle-grid article {
		min-width: 0;
		padding: 34px 30px 38px;
		border-right: 1px solid var(--cm-line);
	}

	.cm-principle-grid article:first-child {
		padding-left: 0;
	}

	.cm-principle-grid article:last-child {
		padding-right: 0;
		border-right: 0;
	}

	.cm-principle-grid article > span,
	.cm-capability-copy > span {
		color: var(--cm-blue);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
		font-weight: 600;
		text-transform: uppercase;
	}

	.cm-principle-grid h3 {
		margin: 18px 0 12px;
		font-size: 23px;
		line-height: 1.22;
		letter-spacing: 0;
	}

	.cm-principle-grid p {
		margin: 0;
		color: var(--cm-muted);
		font-size: 14px;
		line-height: 1.7;
	}

	.cm-workflow {
		border-top: 1px solid var(--cm-line);
		background: var(--cm-white);
	}

	.cm-workflow-list {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--cm-ink);
		list-style: none;
	}

	.cm-workflow-list li {
		display: grid;
		grid-template-columns: 56px minmax(200px, 0.65fr) minmax(260px, 1fr) 220px;
		align-items: center;
		gap: 26px;
		min-height: 156px;
		padding: 25px 0;
		border-bottom: 1px solid var(--cm-line);
	}

	.cm-step-number,
	.cm-step-label {
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
		font-weight: 600;
	}

	.cm-step-number {
		align-self: start;
		padding-top: 7px;
		color: var(--cm-blue);
	}

	.cm-step-label {
		margin: 0 0 6px;
		color: var(--cm-muted);
		text-transform: uppercase;
	}

	.cm-workflow-list h3 {
		margin: 0;
		font-size: 25px;
		line-height: 1.15;
		letter-spacing: 0;
	}

	.cm-workflow-list li > p {
		margin: 0;
		color: var(--cm-muted);
		font-size: 14px;
		line-height: 1.65;
	}

	.cm-step-visual {
		position: relative;
		overflow: hidden;
		width: 220px;
		height: 88px;
		border: 1px solid var(--cm-ink);
		border-radius: 5px;
		background: #f7f8fa;
	}

	.cm-step-visual--prompt {
		display: flex;
		align-items: center;
		padding: 14px;
		background: var(--cm-ink);
		color: #f7f8fa;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-step-visual--prompt i {
		width: 6px;
		height: 14px;
		margin-left: 5px;
		background: var(--cm-signal);
		animation: cm-blink 1.1s steps(2, start) infinite;
	}

	@keyframes cm-blink {
		50% { opacity: 0; }
	}

	.cm-step-visual--graph i {
		position: absolute;
		width: 34px;
		height: 25px;
		border: 1px solid var(--cm-ink);
		border-radius: 3px;
		background: var(--cm-white);
	}

	.cm-step-visual--graph i:nth-child(1) { top: 15px; left: 18px; background: #e6f4ff; }
	.cm-step-visual--graph i:nth-child(2) { top: 47px; left: 91px; background: var(--cm-signal); }
	.cm-step-visual--graph i:nth-child(3) { top: 15px; right: 18px; background: #e6f4ff; }

	.cm-step-visual--graph b {
		position: absolute;
		top: 28px;
		width: 65px;
		height: 30px;
		border-bottom: 1px solid var(--cm-blue);
	}

	.cm-step-visual--graph b:nth-of-type(1) { left: 50px; transform: rotate(21deg); }
	.cm-step-visual--graph b:nth-of-type(2) { right: 50px; transform: rotate(-21deg); }

	.cm-step-visual--check {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		background: var(--cm-white);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-step-visual--check b {
		color: #006fbf;
	}

	.cm-step-visual--files i {
		position: absolute;
		top: 22px;
		width: 52px;
		height: 42px;
		border: 1px solid var(--cm-ink);
		border-radius: 3px;
		background: var(--cm-white);
		box-shadow: 2px 2px 0 rgba(60, 58, 60, 0.12);
	}

	.cm-step-visual--files i:nth-child(1) { left: 17px; }
	.cm-step-visual--files i:nth-child(2) { left: 62px; top: 18px; background: #e6f4ff; }
	.cm-step-visual--files i:nth-child(3) { left: 106px; top: 14px; background: var(--cm-signal); }

	.cm-step-visual--files span {
		position: absolute;
		right: 14px;
		bottom: 12px;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		font-weight: 700;
	}

	.cm-tour {
		overflow: hidden;
		border-block: 1px solid var(--cm-ink);
		background: var(--cm-ink);
		color: #f7f8fa;
	}

	.cm-video-slot {
		overflow: hidden;
		border: 1px solid #f7f8fa;
		border-radius: var(--cm-radius);
		background: #3c3a3c;
		box-shadow: 12px 12px 0 rgba(1, 147, 252, 0.18);
	}

	.cm-video-toolbar {
		display: flex;
		min-height: 42px;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		border-bottom: 1px solid rgba(247, 248, 250, 0.18);
		color: #d9dee5;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
	}

	.cm-video-poster {
		position: relative;
		display: grid;
		aspect-ratio: 16 / 9;
		grid-template-columns: 54px minmax(0, 1fr) 210px;
		overflow: hidden;
		background: #f1f3f5;
	}

	.cm-video-sidebar {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 13px;
		padding-top: 18px;
		border-right: 1px solid var(--cm-line);
		background: #f7f8fa;
	}

	.cm-video-sidebar i {
		width: 24px;
		height: 24px;
		border: 1px solid var(--cm-line);
		border-radius: 4px;
		background: var(--cm-white);
	}

	.cm-video-sidebar i:first-child {
		border-color: var(--cm-ink);
		background: var(--cm-signal);
	}

	.cm-video-stage {
		position: relative;
		background: #f7f8fa;
	}

	.cm-video-node {
		position: absolute;
		z-index: 2;
		display: grid;
		min-width: 95px;
		min-height: 54px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 4px;
		background: var(--cm-white);
		color: var(--cm-ink);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
		font-weight: 600;
		box-shadow: 4px 4px 0 rgba(60, 58, 60, 0.1);
	}

	.cm-video-node--one { top: 18%; left: 8%; background: #e6f4ff; }
	.cm-video-node--two { top: 18%; left: 39%; }
	.cm-video-node--three { top: 54%; left: 39%; background: var(--cm-signal); }
	.cm-video-node--four { top: 54%; right: 8%; background: #e6f4ff; }

	.cm-video-link {
		position: absolute;
		z-index: 1;
		border-color: var(--cm-blue);
		border-style: solid;
	}

	.cm-video-link--one {
		top: calc(18% + 27px);
		left: calc(8% + 95px);
		width: calc(31% - 95px);
		border-width: 2px 0 0;
	}

	.cm-video-link--two {
		top: calc(18% + 54px);
		left: calc(39% + 47px);
		height: calc(36% - 54px);
		border-width: 0 0 0 2px;
	}

	.cm-video-link--three {
		top: calc(54% + 27px);
		left: calc(39% + 95px);
		width: calc(53% - 95px);
		border-width: 2px 0 0;
	}

	.cm-video-inspector {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 19px 16px;
		border-left: 1px solid var(--cm-line);
		background: #f1f3f5;
		color: var(--cm-ink);
	}

	.cm-video-inspector strong {
		margin-bottom: 7px;
		font-size: 13px;
	}

	.cm-video-inspector span {
		color: var(--cm-muted);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 8px;
		text-transform: uppercase;
	}

	.cm-video-inspector i {
		height: 28px;
		border: 1px solid #d9dee5;
		border-radius: 3px;
		background: var(--cm-white);
	}

	.cm-video-play {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 10;
		display: grid;
		width: 70px;
		height: 70px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 50%;
		background: var(--cm-signal);
		color: var(--cm-ink);
		box-shadow: 5px 5px 0 var(--cm-ink);
		transform: translate(-50%, -50%);
		cursor: not-allowed;
	}

	.cm-video-meta {
		display: flex;
		min-height: 62px;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 11px 16px;
		border-top: 1px solid rgba(247, 248, 250, 0.18);
		color: #d9dee5;
	}

	.cm-video-meta div {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 12px;
	}

	.cm-video-meta span,
	.cm-video-meta p {
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-video-meta span {
		color: var(--cm-signal);
	}

	.cm-video-meta strong {
		font-size: 13px;
	}

	.cm-video-meta p {
		margin: 0;
		color: #6b7280;
	}

	.cm-capabilities {
		background: var(--cm-paper);
	}

	.cm-capability-list {
		border-top: 1px solid var(--cm-ink);
	}

	.cm-capability-row {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
		align-items: center;
		gap: 80px;
		min-height: 330px;
		padding: 54px 0;
		border-bottom: 1px solid var(--cm-line);
	}

	.cm-capability-copy {
		max-width: 540px;
	}

	.cm-capability-copy h3 {
		margin: 18px 0 15px;
		font-size: 34px;
		line-height: 1.12;
		letter-spacing: 0;
	}

	.cm-capability-copy p {
		margin: 0;
		color: var(--cm-muted);
		font-size: 15px;
		line-height: 1.75;
	}

	.cm-mode-visual,
	.cm-identity-visual,
	.cm-catalog-visual,
	.cm-layer-visual {
		min-width: 0;
		border: 1px solid var(--cm-ink);
		border-radius: var(--cm-radius);
		background: var(--cm-white);
	}

	.cm-mode-visual {
		padding: 16px;
	}

	.cm-mode-tabs {
		display: inline-grid;
		grid-template-columns: repeat(2, 1fr);
		padding: 3px;
		border: 1px solid var(--cm-line);
		border-radius: 4px;
		background: #f1f3f5;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-mode-tabs span {
		padding: 7px 12px;
	}

	.cm-mode-tabs span.is-active {
		border: 1px solid var(--cm-ink);
		border-radius: 3px;
		background: var(--cm-signal);
		color: var(--cm-ink);
	}

	.cm-mode-canvas {
		position: relative;
		height: 210px;
		margin-top: 15px;
		overflow: hidden;
		border: 1px solid var(--cm-line);
		background: #f7f8fa;
	}

	.cm-mode-canvas i {
		position: absolute;
		width: 82px;
		height: 47px;
		border: 1px solid var(--cm-ink);
		border-radius: 4px;
		background: var(--cm-white);
	}

	.cm-mode-canvas i:nth-child(1) { top: 38px; left: 10%; background: #e6f4ff; }
	.cm-mode-canvas i:nth-child(2) { top: 38px; left: 43%; background: var(--cm-signal); }
	.cm-mode-canvas i:nth-child(3) { top: 126px; left: 43%; background: #e6f4ff; }

	.cm-mode-canvas b {
		position: absolute;
		top: 61px;
		left: calc(10% + 82px);
		width: calc(33% - 82px);
		border-top: 2px solid var(--cm-blue);
	}

	.cm-mode-canvas em {
		position: absolute;
		right: 10px;
		bottom: 10px;
		padding: 6px 8px;
		border: 1px solid var(--cm-ink);
		background: var(--cm-white);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 8px;
		font-style: normal;
	}

	.cm-identity-visual {
		display: grid;
		grid-template-columns: 1fr 56px 1fr;
		align-items: center;
		min-height: 220px;
		padding: 26px;
		background: var(--cm-white);
	}

	.cm-identity-visual > div {
		display: grid;
		min-height: 102px;
		place-items: center;
		padding: 14px;
		border: 1px solid var(--cm-ink);
		border-radius: 4px;
		background: var(--cm-white);
		box-shadow: 4px 4px 0 rgba(60, 58, 60, 0.1);
	}

	.cm-identity-visual > div:last-child {
		transform: translateY(28px);
	}

	.cm-identity-visual span,
	.cm-identity-visual i {
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		font-style: normal;
	}

	.cm-identity-visual i {
		padding: 5px 7px;
		background: #e6f4ff;
	}

	.cm-identity-visual > b {
		display: grid;
		width: 38px;
		height: 38px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 50%;
		background: var(--cm-signal);
	}

	.cm-identity-visual svg {
		width: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
	}

	.cm-catalog-visual {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		padding: 22px;
		background: #3c3a3c;
	}

	.cm-catalog-visual span {
		display: grid;
		aspect-ratio: 1.35 / 1;
		place-items: center;
		border: 1px solid #555a60;
		border-radius: 4px;
		background: #f7f8fa;
		color: var(--cm-ink);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 14px;
		font-weight: 700;
	}

	.cm-catalog-visual span:nth-child(2),
	.cm-catalog-visual span:nth-child(5) {
		background: var(--cm-signal);
	}

	.cm-catalog-visual span:nth-child(3) {
		background: #e6f4ff;
	}

	.cm-catalog-visual span:nth-child(6) {
		background: #e6f4ff;
	}

	.cm-layer-visual {
		display: flex;
		min-height: 230px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 24px;
		background: #f1f3f5;
	}

	.cm-layer-visual span {
		display: flex;
		width: min(100%, 400px);
		min-height: 36px;
		align-items: center;
		justify-content: space-between;
		padding: 7px 12px;
		border: 1px solid var(--cm-ink);
		background: var(--cm-white);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		box-shadow: 0 3px 0 rgba(60, 58, 60, 0.08);
	}

	.cm-layer-visual span::after {
		content: "distinct";
		color: var(--cm-blue);
	}

	.cm-layer-visual span + span {
		margin-top: -1px;
	}

	.cm-layer-visual span:nth-child(1) { width: 100%; background: var(--cm-signal); }
	.cm-layer-visual span:nth-child(2) { width: 92%; }
	.cm-layer-visual span:nth-child(3) { width: 84%; }
	.cm-layer-visual span:nth-child(4) { width: 76%; }
	.cm-layer-visual span:nth-child(5) { width: 68%; background: #e6f4ff; }

	.cm-artifacts {
		border-block: 1px solid var(--cm-ink);
		background: #f1f3f5;
	}

	.cm-artifacts-grid {
		display: grid;
		grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr);
		align-items: center;
		gap: 78px;
	}

	.cm-artifacts-copy > p:not(.cm-kicker) {
		margin: 23px 0 0;
		color: var(--cm-muted);
		font-size: 16px;
		line-height: 1.75;
	}

	.cm-check-list {
		display: grid;
		gap: 10px;
		margin: 28px 0 0;
		padding: 0;
		list-style: none;
	}

	.cm-check-list li {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;
		font-weight: 600;
	}

	.cm-check-list span {
		display: grid;
		width: 22px;
		height: 22px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 50%;
		background: var(--cm-signal);
		font-size: 11px;
	}

	.cm-artifact-workbench {
		overflow: hidden;
		border: 1px solid var(--cm-ink);
		border-radius: var(--cm-radius);
		background: var(--cm-white);
		box-shadow: 10px 10px 0 rgba(60, 58, 60, 0.12);
	}

	.cm-artifact-head {
		display: flex;
		min-height: 44px;
		align-items: center;
		justify-content: space-between;
		padding: 0 14px;
		border-bottom: 1px solid var(--cm-line);
		background: #3c3a3c;
		color: #f7f8fa;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-artifact-head b {
		color: var(--cm-signal);
	}

	.cm-artifact-body {
		display: grid;
		grid-template-columns: 0.9fr 1.1fr;
		min-height: 360px;
	}

	.cm-file-tree {
		display: flex;
		flex-direction: column;
		gap: 13px;
		padding: 22px 18px;
		border-right: 1px solid var(--cm-line);
		background: #f7f8fa;
	}

	.cm-file-tree strong {
		margin-bottom: 7px;
		font-size: 13px;
	}

	.cm-file-tree span {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-file-tree i {
		width: 10px;
		height: 12px;
		border: 1px solid var(--cm-ink);
		background: var(--cm-white);
	}

	.cm-file-tree i.is-blue { background: #e6f4ff; }
	.cm-file-tree i.is-signal { background: var(--cm-signal); }
	.cm-file-tree i.is-coral { background: #e6f4ff; }

	.cm-evidence-pane {
		display: grid;
		grid-template-columns: 1fr auto;
		align-content: start;
		padding: 23px 20px;
	}

	.cm-evidence-pane p {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 12px 0;
		border-bottom: 1px solid var(--cm-line);
		font-size: 11px;
	}

	.cm-evidence-pane p span {
		color: var(--cm-muted);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 7px;
	}

	.cm-evidence-pane > b {
		align-self: center;
		color: #006fbf;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-evidence-summary {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 12px;
		margin-top: 28px;
		padding: 16px;
		border: 1px solid var(--cm-ink);
		background: var(--cm-signal);
	}

	.cm-evidence-summary strong {
		font-size: 34px;
		line-height: 1;
	}

	.cm-evidence-summary span {
		font-size: 10px;
		line-height: 1.4;
	}

	.cm-secondary-tour {
		background: var(--cm-white);
	}

	.cm-secondary-tour-grid {
		display: grid;
		grid-template-columns: minmax(0, 0.7fr) minmax(500px, 1.3fr);
		align-items: center;
		gap: 80px;
	}

	.cm-secondary-tour-grid > div:first-child > p:not(.cm-kicker) {
		color: var(--cm-muted);
		font-size: 16px;
		line-height: 1.7;
	}

	.cm-secondary-tour ul {
		display: grid;
		gap: 8px;
		margin: 24px 0 0;
		padding-left: 18px;
		font-size: 13px;
		font-weight: 600;
	}

	.cm-video-slot--secondary {
		border-color: var(--cm-ink);
		background: var(--cm-ink);
		box-shadow: 10px 10px 0 #e6f4ff;
	}

	.cm-video-poster--secondary {
		display: block;
		background: var(--cm-ink);
	}

	.cm-terminal-lines {
		position: absolute;
		top: 15%;
		left: 8%;
		display: grid;
		gap: 13px;
		width: 58%;
	}

	.cm-terminal-lines span {
		height: 8px;
		background: #6b7280;
	}

	.cm-terminal-lines span:nth-child(1) { width: 44%; background: var(--cm-signal); }
	.cm-terminal-lines span:nth-child(2) { width: 88%; }
	.cm-terminal-lines span:nth-child(3) { width: 68%; background: #0193fc; }
	.cm-terminal-lines span:nth-child(4) { width: 96%; }
	.cm-terminal-lines span:nth-child(5) { width: 54%; background: #0193fc; }

	.cm-export-stamp {
		position: absolute;
		right: 8%;
		bottom: 12%;
		display: grid;
		gap: 5px;
		padding: 14px;
		border: 1px solid var(--cm-signal);
		color: var(--cm-signal);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		transform: rotate(-3deg);
	}

	.cm-export-stamp b {
		font-size: 22px;
	}

	.cm-export-stamp span {
		font-size: 7px;
	}

	.cm-trust {
		border-block: 1px solid #555a60;
		background: #3c3a3c;
		color: #f7f8fa;
	}

	.cm-trust-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border-top: 1px solid #555a60;
		border-bottom: 1px solid #555a60;
	}

	.cm-trust-grid article {
		min-width: 0;
		padding: 34px 28px 38px;
		border-right: 1px solid #555a60;
	}

	.cm-trust-grid article:first-child {
		padding-left: 0;
	}

	.cm-trust-grid article:last-child {
		padding-right: 0;
		border-right: 0;
	}

	.cm-trust-grid article > span {
		color: var(--cm-signal);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 10px;
	}

	.cm-trust-grid h3 {
		margin: 18px 0 12px;
		font-size: 24px;
		line-height: 1.2;
	}

	.cm-trust-grid p {
		margin: 0;
		color: #d9dee5;
		font-size: 14px;
		line-height: 1.65;
	}

	.cm-patterns {
		background: var(--cm-paper);
	}

	.cm-pattern-table {
		border-top: 1px solid var(--cm-ink);
	}

	.cm-pattern-table > div {
		display: grid;
		grid-template-columns: 210px 1fr 120px;
		align-items: center;
		gap: 34px;
		min-height: 92px;
		border-bottom: 1px solid var(--cm-line);
	}

	.cm-pattern-table span {
		font-size: 16px;
		font-weight: 700;
	}

	.cm-pattern-table p {
		margin: 0;
		color: var(--cm-muted);
		font-size: 14px;
	}

	.cm-pattern-table b {
		justify-self: end;
		padding: 6px 8px;
		border: 1px solid var(--cm-ink);
		border-radius: 3px;
		background: var(--cm-white);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		font-weight: 600;
	}

	.cm-pattern-table > div:nth-child(2) b { background: var(--cm-signal); }
	.cm-pattern-table > div:nth-child(3) b { background: #e6f4ff; }
	.cm-pattern-table > div:nth-child(4) b { background: #e6f4ff; }

	.cm-faq {
		border-top: 1px solid var(--cm-ink);
		background: var(--cm-white);
	}

	.cm-faq-grid {
		display: grid;
		grid-template-columns: minmax(260px, 0.7fr) minmax(500px, 1.3fr);
		align-items: start;
		gap: 100px;
	}

	.cm-faq-intro {
		position: sticky;
		top: 110px;
	}

	.cm-faq-intro p:not(.cm-kicker) {
		margin: 22px 0 0;
		color: var(--cm-muted);
		font-size: 15px;
		line-height: 1.7;
	}

	.cm-faq-list {
		border-top: 1px solid var(--cm-ink);
	}

	.cm-faq-list details {
		border-bottom: 1px solid var(--cm-line);
	}

	.cm-faq-list summary {
		display: grid;
		grid-template-columns: 1fr 34px;
		align-items: center;
		gap: 20px;
		min-height: 84px;
		padding: 18px 0;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.35;
		cursor: pointer;
		list-style: none;
	}

	.cm-faq-list summary::-webkit-details-marker {
		display: none;
	}

	.cm-faq-list summary span {
		display: grid;
		width: 30px;
		height: 30px;
		place-items: center;
		border: 1px solid var(--cm-ink);
		border-radius: 50%;
		background: var(--cm-paper);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-weight: 500;
		transition: transform 160ms ease, background 160ms ease;
	}

	.cm-faq-list details[open] summary span {
		background: var(--cm-signal);
		transform: rotate(45deg);
	}

	.cm-faq-list details p {
		max-width: 680px;
		margin: -4px 48px 28px 0;
		color: var(--cm-muted);
		font-size: 15px;
		line-height: 1.75;
	}

	.cm-get-started {
		border-top: 1px solid var(--cm-ink);
		background: #e6f4ff;
	}

	.cm-get-started-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
		align-items: center;
		gap: 88px;
	}

	.cm-get-started-action {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
		padding: 28px;
		border: 1px solid var(--cm-ink);
		border-radius: var(--cm-radius);
		background: var(--cm-white);
		box-shadow: 8px 8px 0 var(--cm-ink);
	}

	.cm-get-started-action p {
		margin: 0;
		color: var(--cm-muted);
		font-size: 15px;
		line-height: 1.7;
	}

	.cm-privacy-link {
		color: var(--cm-blue);
		font-size: 12px;
		font-weight: 700;
	}

	.cm-privacy-link:focus-visible {
		outline: 3px solid var(--cm-blue);
		outline-offset: 3px;
	}

	.cm-site-footer {
		padding: 76px 0 24px;
		background: #3c3a3c;
		color: #f7f8fa;
	}

	.cm-footer-main {
		display: grid;
		grid-template-columns: minmax(240px, 1.1fr) minmax(480px, 0.9fr);
		gap: 80px;
		padding-bottom: 62px;
	}

	.cm-wordmark--footer {
		color: #f7f8fa;
	}

	.cm-wordmark--footer .cm-wordmark-mark {
		border-color: #f7f8fa;
		background: #3c3a3c;
		color: #f7f8fa;
	}

	.cm-footer-brand p {
		max-width: 330px;
		margin: 24px 0 0;
		color: #b8c0cc;
		font-size: 15px;
	}

	.cm-footer-nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 34px;
	}

	.cm-footer-nav > div {
		display: flex;
		flex-direction: column;
		gap: 11px;
	}

	.cm-footer-nav strong {
		margin-bottom: 6px;
		color: var(--cm-signal);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		text-transform: uppercase;
	}

	.cm-footer-nav a {
		color: #d9dee5;
		font-size: 13px;
		text-decoration: none;
	}

	.cm-footer-nav a:hover {
		color: var(--cm-signal);
	}

	.cm-footer-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 22px;
		border-top: 1px solid #555a60;
		color: #b8c0cc;
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
	}

	.cm-footer-bottom p {
		margin: 0;
	}

	@media (min-width: 821px) {
		.cm-nav-menu:not([open]) > .cm-primary-nav {
			display: flex;
		}
	}

	@media (max-width: 1060px) {
		.cm-section {
			padding-block: 92px;
		}

		.cm-section-heading--split {
			gap: 48px;
		}

		.cm-workflow-list li {
			grid-template-columns: 46px minmax(180px, 0.65fr) minmax(230px, 1fr);
		}

		.cm-step-visual {
			display: none;
		}

		.cm-capability-row {
			gap: 48px;
		}

		.cm-artifacts-grid,
		.cm-secondary-tour-grid {
			gap: 50px;
		}

		.cm-secondary-tour-grid {
			grid-template-columns: minmax(0, 0.75fr) minmax(430px, 1.25fr);
		}

		.cm-faq-grid {
			gap: 70px;
		}
	}

	@media (max-width: 820px) {
		.cm-primary-nav--desktop {
			display: none;
		}

		.cm-nav-menu {
			display: block;
		}

		.cm-hero h1 {
			font-size: 50px;
		}

		.cm-nav-menu[open] > .cm-primary-nav {
			display: flex;
		}

		.cm-section {
			padding-block: 76px;
		}

		.cm-section-heading,
		.cm-section-heading--split {
			display: block;
			margin-bottom: 42px;
		}

		.cm-section-heading h2,
		.cm-artifacts-copy h2,
		.cm-secondary-tour h2,
		.cm-faq-intro h2,
		.cm-get-started h2 {
			font-size: 38px;
		}

		.cm-section-heading--split > p {
			margin-top: 22px;
		}

		.cm-principle-grid,
		.cm-trust-grid {
			grid-template-columns: 1fr;
		}

		.cm-principle-grid article,
		.cm-principle-grid article:first-child,
		.cm-principle-grid article:last-child,
		.cm-trust-grid article,
		.cm-trust-grid article:first-child,
		.cm-trust-grid article:last-child {
			padding: 28px 0;
			border-right: 0;
			border-bottom: 1px solid var(--cm-line);
		}

		.cm-principle-grid article:last-child,
		.cm-trust-grid article:last-child {
			border-bottom: 0;
		}

		.cm-trust-grid article {
			border-color: #555a60;
		}

		.cm-workflow-list li {
			grid-template-columns: 38px 1fr;
			gap: 8px 18px;
			padding: 28px 0;
		}

		.cm-workflow-list li > p {
			grid-column: 2;
		}

		.cm-video-poster {
			grid-template-columns: 42px minmax(0, 1fr);
		}

		.cm-video-inspector {
			display: none;
		}

		.cm-video-node {
			min-width: 78px;
			min-height: 45px;
			font-size: 8px;
		}

		.cm-video-meta {
			align-items: flex-start;
			flex-direction: column;
			gap: 5px;
		}

		.cm-capability-row,
		.cm-artifacts-grid,
		.cm-secondary-tour-grid,
		.cm-faq-grid,
		.cm-get-started-grid,
		.cm-footer-main {
			grid-template-columns: 1fr;
		}

		.cm-capability-row {
			gap: 32px;
			min-height: 0;
			padding: 44px 0;
		}

		.cm-capability-copy h3 {
			font-size: 30px;
		}

		.cm-artifacts-grid,
		.cm-secondary-tour-grid,
		.cm-get-started-grid {
			gap: 44px;
		}

		.cm-faq-grid {
			gap: 44px;
		}

		.cm-faq-intro {
			position: static;
		}

		.cm-pattern-table > div {
			grid-template-columns: 1fr auto;
			gap: 8px 20px;
			padding: 22px 0;
		}

		.cm-pattern-table p {
			grid-column: 1 / -1;
			grid-row: 2;
		}

		.cm-pattern-table b {
			grid-column: 2;
			grid-row: 1;
		}

		.cm-footer-main {
			gap: 46px;
		}

		.cm-footer-nav {
			max-width: 580px;
		}
	}

	@media (max-width: 520px) {
		.cm-hero h1 {
			font-size: 36px;
		}

		.cm-section {
			padding-block: 62px;
		}

		.cm-section-heading h2,
		.cm-artifacts-copy h2,
		.cm-secondary-tour h2,
		.cm-faq-intro h2,
		.cm-get-started h2 {
			font-size: 32px;
		}

		.cm-principle-grid h3 {
			font-size: 21px;
		}

		.cm-workflow-list h3 {
			font-size: 22px;
		}

		.cm-video-toolbar {
			font-size: 7px;
		}

		.cm-video-poster {
			grid-template-columns: 32px minmax(0, 1fr);
		}

		.cm-video-sidebar {
			gap: 8px;
			padding-top: 10px;
		}

		.cm-video-sidebar i {
			width: 18px;
			height: 18px;
		}

		.cm-video-node--one { top: 14%; left: 5%; }
		.cm-video-node--two { top: 14%; left: 48%; }
		.cm-video-node--three { top: 58%; left: 28%; }
		.cm-video-node--four { top: 58%; right: 4%; }

		.cm-video-play {
			width: 56px;
			height: 56px;
		}

		.cm-video-meta div {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			gap: 3px;
		}

		.cm-video-meta p {
			display: none;
		}

		.cm-capability-copy h3 {
			font-size: 27px;
		}

		.cm-mode-canvas {
			height: 180px;
		}

		.cm-identity-visual {
			grid-template-columns: 1fr 38px 1fr;
			padding: 14px;
		}

		.cm-identity-visual > div {
			padding: 8px;
		}

		.cm-identity-visual i {
			font-size: 7px;
		}

		.cm-catalog-visual {
			gap: 7px;
			padding: 12px;
		}

		.cm-artifact-body {
			grid-template-columns: 1fr;
		}

		.cm-file-tree {
			border-right: 0;
			border-bottom: 1px solid var(--cm-line);
		}

		.cm-evidence-pane {
			min-height: 290px;
		}

		.cm-pattern-table span {
			font-size: 14px;
		}

		.cm-pattern-table p {
			font-size: 12px;
		}

		.cm-faq-list summary {
			min-height: 74px;
			font-size: 16px;
		}

		.cm-get-started-action {
			padding: 20px;
			box-shadow: 6px 6px 0 var(--cm-ink);
		}

		.cm-get-started-action .cm-button {
			width: 100%;
		}

		.cm-footer-nav {
			grid-template-columns: repeat(2, 1fr);
			gap: 32px 22px;
		}

		.cm-footer-bottom {
			align-items: flex-start;
			flex-direction: column;
			gap: 6px;
		}
	}

	@media (max-width: 520px) and (max-height: 720px) {
		.cm-hero {
			padding-bottom: 28px;
		}

		.cm-hero-grid {
			gap: 24px;
		}

		.cm-hero-lede {
			line-height: 1.5;
		}

		.cm-hero-audience {
			display: none;
		}

		.cm-workbench-body {
			height: 210px;
		}

		.cm-node--lambda { top: 101px; }
		.cm-node--data { top: 163px; }
	}

	.cm-illustrative-label {
	position: absolute;
	top: 52px;
	left: 62px;
	z-index: 7;
	padding: 5px 7px;
	border: 1px solid var(--cm-ink);
	border-radius: 3px;
	background: var(--cm-white);
	color: var(--cm-muted);
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 8px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.cm-standard-page {
	min-height: 70vh;
	padding: 132px 0 96px;
	background: var(--cm-paper);
}

.cm-standard-page-content {
	width: min(820px, calc(100% - 40px));
	margin-inline: auto;
}

.cm-standard-page-header {
	max-width: 760px;
	margin-bottom: 42px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--cm-line);
}

.cm-standard-page-title {
	margin: 0;
	font-size: 48px;
	font-weight: 750;
	line-height: 1.08;
}

.cm-standard-page-media {
	margin: 0 0 38px;
	overflow: hidden;
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
	background: var(--cm-white);
}

.cm-standard-page-media img {
	display: block;
	width: 100%;
	height: auto;
}

.cm-prose {
	max-width: 760px;
	color: var(--cm-ink-soft);
	font-size: 16px;
	line-height: 1.75;
}

.cm-prose > :first-child {
	margin-top: 0;
}

.cm-prose h2 {
	margin: 48px 0 16px;
	color: var(--cm-ink);
	font-size: 30px;
	line-height: 1.2;
}

.cm-prose h3 {
	margin: 34px 0 12px;
	color: var(--cm-ink);
	font-size: 22px;
	line-height: 1.3;
}

.cm-prose p,
.cm-prose ul,
.cm-prose ol {
	margin: 0 0 20px;
}

.cm-prose ul,
.cm-prose ol {
	padding-left: 24px;
}

.cm-prose li + li {
	margin-top: 8px;
}

.cm-prose a {
	color: var(--cm-blue);
	font-weight: 650;
	text-underline-offset: 3px;
}

.cm-prose a:focus-visible {
	outline: 3px solid var(--cm-blue);
	outline-offset: 3px;
}

.cm-error-page {
	min-height: 72vh;
	padding: 144px 0 96px;
	background: var(--cm-paper);
}

.cm-error-content {
	max-width: 820px;
}

.cm-error-code {
	margin: 0 0 16px;
	color: var(--cm-blue);
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 72px;
	font-weight: 750;
	line-height: 1;
}

.cm-error-title {
	max-width: 720px;
	margin: 0;
	font-size: 48px;
	line-height: 1.08;
}

.cm-error-copy {
	max-width: 640px;
	margin: 22px 0 0;
	color: var(--cm-muted);
	font-size: 17px;
	line-height: 1.7;
}

.cm-error-actions,
.cm-error-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 32px;
}

.cm-error-link,
.cm-error-links a {
	color: var(--cm-blue);
	font-size: 14px;
	font-weight: 700;
	text-underline-offset: 4px;
}

.cm-error-link:focus-visible,
.cm-error-links a:focus-visible {
	outline: 3px solid var(--cm-blue);
	outline-offset: 3px;
}

@media (max-width: 520px) {
	.cm-illustrative-label {
		top: 49px;
		left: 46px;
		font-size: 7px;
	}
}

@media (max-width: 820px) {
	.cm-standard-page {
		padding: 108px 0 76px;
	}

	.cm-standard-page-content {
		width: min(100% - 28px, 680px);
	}

	.cm-standard-page-title,
	.cm-error-title {
		font-size: 38px;
	}

	.cm-error-page {
		padding: 116px 0 76px;
	}

	.cm-error-code {
		font-size: 60px;
	}
}

@media (max-width: 520px) {
	.cm-standard-page {
		padding: 92px 0 62px;
	}

	.cm-standard-page-header {
		margin-bottom: 32px;
		padding-bottom: 22px;
	}

	.cm-standard-page-title,
	.cm-error-title {
		font-size: 32px;
	}

	.cm-prose {
		font-size: 15px;
	}

	.cm-prose h2 {
		margin-top: 38px;
		font-size: 25px;
	}

	.cm-prose h3 {
		margin-top: 28px;
		font-size: 20px;
	}

	.cm-error-page {
		padding: 100px 0 62px;
	}

	.cm-error-code {
		font-size: 52px;
	}

	.cm-error-copy {
		font-size: 15px;
	}

	.cm-error-actions,
	.cm-error-links {
		align-items: stretch;
		flex-direction: column;
	}

	.cm-error-actions .cm-button {
		width: 100%;
	}
}

.cm-nav-label--close {
	display: none !important;
}

.cm-nav-menu[open] .cm-nav-label--open {
	display: none !important;
}

.cm-nav-menu[open] .cm-nav-label--close {
	display: block !important;
}

@media (max-width: 900px) {
	.cm-faq-grid,
	.cm-footer-main {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.cm-footer-nav {
		width: 100%;
	}
}

@media (max-width: 1060px) {
	.cm-comparison-table th,
	.cm-comparison-table td {
		padding: 18px 20px;
	}

	.cm-get-started-grid {
		gap: 48px;
	}
}

@media (max-width: 820px) {
	.cm-comparison-table {
		min-width: 660px;
	}

	.cm-get-started-grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}
}

@media (max-width: 520px) {
	.cm-comparison-wrap {
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.cm-comparison-table,
	.cm-comparison-table tbody,
	.cm-comparison-table tr,
	.cm-comparison-table th,
	.cm-comparison-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.cm-comparison-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.cm-comparison-table tbody tr {
		margin-bottom: 16px;
		overflow: hidden;
		border: 1px solid var(--cm-ink);
		border-radius: var(--cm-radius);
		background: var(--cm-white);
	}

	.cm-comparison-table tbody th,
	.cm-comparison-table td {
		padding: 14px 16px;
		border-right: 0;
		border-bottom: 1px solid var(--cm-line);
	}

	.cm-comparison-table tbody th {
		background: var(--cm-ink);
		color: var(--cm-white);
	}

	.cm-comparison-table td::before {
		display: block;
		margin-bottom: 4px;
		color: var(--cm-blue);
		font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
		font-size: 9px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.cm-comparison-table td:nth-of-type(1)::before {
		content: "Generic diagram tools";
	}

	.cm-comparison-table td:nth-of-type(2)::before {
		content: "Cloud Markup";
	}

	.cm-comparison-table td:last-child {
		border-bottom: 0;
	}

	.cm-canvas-badge {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
		* {
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
		}
	}
}