:root,
:root[data-theme="dark"] {
	color-scheme: dark;
	--surface-canvas: #000000;
	--surface-page: #1a1a1a;
	--surface-elevated: #282828;
	--surface-inverse: #f7f7f7;
	--text-primary: #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.78);
	--text-muted: #a6a6a6;
	--text-subtle: rgba(255, 255, 255, 0.46);
	--text-inverse: #282828;
	--hairline: #333333;
	--accent: #b30000;
	--font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-display: "Geist", sans-serif;
	--font-script: "Yellowtail", cursive;
}

html,
body {
	background: #000000;
	color: #ffffff;
}

body {
	font-family: var(--font-sans);
	font-size: 18px;
	line-height: 1.6;
}

.prototype-loading {
	padding: 48px;
	color: #a6a6a6;
}

.site-header {
	position: absolute;
	top: 0;
	right: max(24px, calc((100vw - 1200px) / 2));
	left: max(24px, calc((100vw - 1200px) / 2));
	z-index: 20;
	width: auto;
	max-width: none;
	height: 73px;
	padding: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.brand img {
	display: block;
	width: 118px;
	height: auto;
}

.site-header .brand img,
.footer-brand img {
	content: url("/brand/fabric-logo-white.svg");
}

:root[data-theme="dark"] .site-header .brand img {
	content: url("/brand/fabric-logo-white.svg");
}

.theme-toggle {
	display: none;
}

.brand .tf-brand-divider {
	width: 1px;
	height: 22px;
	background: rgba(255, 255, 255, 0.28);
}

.brand strong {
	font-family: var(--font-script);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.brand .product-name {
	font-family: var(--font-sans);
	font-size: 1.125rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	letter-spacing: -0.045em;
}

.site-header .brand,
.footer-brand {
	color: #ffffff;
}

.site-header nav {
	gap: 20px;
}

.site-header nav a,
.site-header .button-small {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
}

.site-header nav a {
	color: rgba(255, 255, 255, 0.78);
}

.site-header nav a:hover {
	color: #ffffff;
}

.button,
.site-header .button-small {
	min-height: 52px;
	padding: 13px 25px;
	border-radius: 50px;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
}

.site-header .button-small {
	flex: 0 0 auto;
	min-width: max-content;
	min-height: 48px;
	padding: 11px 20px;
}

.button-primary,
.site-header .button-primary {
	border-color: #ffffff;
	background: #ffffff;
	color: #282828;
}

.button-primary svg,
.site-header .button-primary svg {
	color: #b30000;
}

.button-primary:hover,
.site-header .button-primary:hover {
	border-color: #ebebeb;
	background: #ebebeb;
	color: #282828;
	transform: translateY(-2px);
}

.button-secondary {
	border-color: rgba(255, 255, 255, 0.28);
	background: transparent;
	color: #ffffff;
}

.button-secondary:hover {
	border-color: rgba(255, 255, 255, 0.68);
	background: rgba(255, 255, 255, 0.04);
}

.hero {
	position: relative;
	display: block;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0;
	overflow: hidden;
	background: #000000;
}

.tf-hero-weave {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 43%, transparent 76%),
		linear-gradient(0deg, #000000 0%, transparent 34%), url("/marketing/hero-weave.webp");
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

.hero-grid-bg,
.hero-grid-fade,
.hero-diagram-wrap,
.hero-pill {
	display: none;
}

.hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	width: min(1200px, calc(100% - 48px));
	max-width: none;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
	padding: 175px 0 82px;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
}

.hero h1 {
	max-width: 900px;
	font-family: var(--font-display);
	font-size: clamp(48px, 5.3vw, 72px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.hero-lede {
	max-width: 680px;
	margin-top: 32px;
	color: rgba(255, 255, 255, 0.65);
	font-size: clamp(18px, 1.45vw, 21px);
	line-height: 1.55;
}

.hero-actions {
	justify-content: flex-start;
	margin-top: 38px;
}

.hero-start {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	width: min(100%, 640px);
	margin-top: 38px;
}

.hero-start input {
	flex: 1 1 240px;
	min-height: 52px;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	font-family: var(--font-sans);
	font-size: 16px;
}

.hero-start input::placeholder {
	color: rgba(255, 255, 255, 0.46);
}

.hero-start input:focus {
	outline: none;
	border-color: #ff8577;
	box-shadow: 0 0 0 3px rgba(179, 0, 0, 0.35);
}

.hero-start .button {
	flex: 0 0 auto;
}

.hero-secondary {
	margin-top: 16px;
	font-size: 15px;
}

.hero-secondary a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.hero-secondary a:hover {
	color: #ffffff;
}

.trust-list {
	justify-content: flex-start;
	margin-top: 36px;
	color: rgba(255, 255, 255, 0.58);
}

.trust-list li span {
	background: #ff8577;
}

.proof-strip {
	border-color: #333333;
	background: #000000;
}

.proof-strip > div {
	border-color: #333333;
}

.proof-strip span,
.eyebrow,
.eyebrow.dark {
	color: #ff8577;
}

.section,
.roles-section,
.architecture-section,
.governance-section,
.launch-section,
.integrations-section,
.faq-section {
	padding-right: max(24px, calc((100vw - 1200px) / 2));
	padding-left: max(24px, calc((100vw - 1200px) / 2));
}

.problem-section,
.process-section,
.architecture-section,
.launch-section {
	background: #f7f7f7;
	color: #282828;
}

.problem-section .section-heading h2,
.process-section .section-heading h2,
.architecture-section .section-heading h2,
.launch-section .section-heading h2,
.problem-section h3,
.process-section h3,
.architecture-section h3,
.launch-section h3 {
	color: #282828;
}

.problem-section p,
.process-section p,
.architecture-section p,
.launch-section p {
	color: #666666;
}

/* Light editorial sections contain dark TechFabric panels. Keep the section
	copy dark while giving every nested panel its own explicit inverse palette. */
.problem-section blockquote {
	color: #4f4f4f;
}

.problem-section .contrast-grid article,
.process-section .process-grid li,
.architecture-section .architecture-flow article,
.launch-section .launch-grid li {
	background: #181818;
	color: #ffffff;
}

.problem-section .contrast-grid h3,
.process-section .process-grid h3,
.architecture-section .architecture-flow h3,
.launch-section .launch-grid h3 {
	color: #ffffff;
}

.problem-section .contrast-grid p,
.problem-section .contrast-grid li,
.process-section .process-grid p,
.architecture-section .architecture-flow p,
.launch-section .launch-grid p {
	color: #a6a6a6;
}

.integrations-section .integration-mark {
	background: #ffffff;
}

.problem-section .card-kicker,
.process-section .step-number,
.architecture-section .architecture-flow article > span,
.launch-section .launch-grid li > span,
.launch-section .launch-grid small {
	color: #8f8f8f;
}

.process-section .step-icon {
	background: #f7f7f7;
	color: #282828;
}

.architecture-section .architecture-flow article + article::before {
	border-color: #333333;
	background: #181818;
	color: #a6a6a6;
}

.architecture-section .architecture-note {
	color: #666666;
}

.architecture-section .architecture-note strong {
	color: #282828;
}

.roles-section,
.governance-section,
.faq-section {
	background: #1a1a1a;
}

.section-heading h2,
.platform-copy h2,
.faq-intro h2,
.final-cta h2,
.contact-copy h2 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.mkt-card,
.process-grid li,
.architecture-flow article,
.launch-grid li,
.faq-list details {
	border-color: #333333;
	border-radius: 16px;
}

.roles-section .mkt-card,
.governance-section .mkt-card,
.faq-list details {
	background: #282828;
}

.roles-section {
	--local-surface: #1a1a1a;
	--local-surface-raised: #181818;
	--local-text: #ffffff;
	--local-muted: #a6a6a6;
	--local-subtle: #777777;
	--local-border: #333333;
	--local-accent: #ffffff;
}

.roles-section .role-core {
	background: #f7f7f7;
	color: #181818;
}

.roles-section .role-core strong {
	font-family: var(--font-script);
	font-size: 30px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
}

.roles-section .role-core img,
:root[data-theme="dark"] .roles-section .role-core img {
	width: 32px;
	height: 32px;
	filter: none;
}

.roles-section .role-list h3 {
	color: #ffffff;
}

.roles-section .role-list p,
.roles-section .section-heading > p {
	color: #a6a6a6;
}

.tagline-section,
.final-cta,
.contact-section {
	background: #000000;
}

.platform-section {
	background: #1a1a1a;
}

footer {
	background: #000000;
}

.prototype-badge {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1000;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #333333;
	border-radius: 4px;
	background: #000000;
	color: #777777;
	font: 10px/1.4 var(--font-mono);
	letter-spacing: 0.1em;
}

@media (max-width: 900px) {
	.site-header {
		right: 24px;
		left: 24px;
	}

	.site-header nav {
		display: none;
	}
}

/* Final page-wide audit: one metadata role, one card geometry, one content
	measure, and one visual treatment for named infrastructure. */
body .card-kicker,
body .step-number,
body .role-list article > span,
body .role-list small,
body .launch-grid li > span,
body .launch-grid small,
body .architecture-note,
body .trust-rail span,
body .stack-row > span:first-child {
	color: #777777;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

body .role-list article > span {
	color: #d33a3a;
}

body .role-list small {
	border-color: color-mix(in srgb, currentColor 42%, transparent);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

body .role-list article:nth-child(1) small {
	color: #f06a5f;
}
body .role-list article:nth-child(2) small {
	color: #7fb7ff;
}
body .role-list article:nth-child(3) small {
	color: #a894ff;
}
body .role-list article:nth-child(4) small {
	color: #e9a45c;
}
body .role-list article:nth-child(5) small {
	color: #69c98b;
}
body .role-list article:nth-child(6) small {
	color: #de78ad;
}

body .launch-grid li > span {
	position: static;
}

body .launch-grid li {
	border: 1px solid #333333;
	border-radius: 16px;
	background: #1f1f1f;
	box-shadow: none;
}

body .platform-stack {
	border-top: 1px solid #333333;
}

body .platform-stack .stack-row {
	display: grid;
	grid-template-columns: minmax(150px, 0.72fr) 56px minmax(0, 1.28fr);
	align-items: center;
	gap: 8px 24px;
	padding: 24px 0;
	border-bottom: 1px solid #333333;
}

body .platform-stack .stack-row > span:first-child {
	grid-row: 1 / span 2;
	grid-column: 1;
}

body .tf-stack-logo {
	display: grid;
	grid-row: 1 / span 2;
	grid-column: 2;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 12px;
}

body .tf-stack-logo img {
	display: block;
	max-width: 30px;
	max-height: 25px;
}

body .tf-stack-logo-1 {
	background: #f48120;
}
body .tf-stack-logo-2 {
	background: #336791;
}
body .tf-stack-logo-3 {
	background: #5b45d6;
}
body .tf-stack-logo-4 {
	background: #e64545;
}

body .tf-stack-logo img {
	filter: brightness(0) invert(1);
}

body .platform-stack .stack-row strong {
	grid-column: 3;
	color: #ffffff;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.25;
}

body .platform-stack .stack-row small {
	grid-column: 3;
	color: #a6a6a6;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 620px) {
	body .platform-stack .stack-row {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	body .platform-stack .stack-row > span:first-child {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	body .tf-stack-logo {
		grid-row: 2 / span 2;
		grid-column: 1;
	}

	body .platform-stack .stack-row strong,
	body .platform-stack .stack-row small {
		grid-column: 2;
	}
}

@media (max-width: 620px) {
	body {
		font-size: 16px;
	}

	.site-header {
		right: 16px;
		left: 16px;
	}

	.brand img {
		width: 96px;
	}

	.brand .tf-brand-divider {
		display: none;
	}

	.brand .product-name {
		font-size: 1.0625rem;
	}

	.canvass-mark {
		width: 24px;
		height: 24px;
	}

	.site-header .button-small {
		min-height: 44px;
		padding: 10px 16px;
		font-size: 13px;
	}

	.hero,
	.hero-inner {
		min-height: 100vh;
		min-height: 100svh;
	}

	.hero-inner {
		width: calc(100% - 32px);
		padding: 145px 0 58px;
	}

	.hero h1 {
		font-size: 44px;
	}

	.hero-lede {
		font-size: 17px;
	}

	.hero-actions,
	.hero-start {
		align-items: stretch;
		flex-direction: column;
	}

	.hero-actions .button,
	.hero-start .button,
	.hero-start input {
		width: 100%;
	}

	.prototype-badge {
		display: none;
	}
}

/* FAQ mirrors techfabric-web/components/faq.tsx: one restrained reading
	column, transparent rows, white/12 separators, and a red disclosure mark. */
body .faq-section {
	display: block;
	background: #1a1a1a;
	color: #ffffff;
}

body .faq-intro {
	position: static;
	max-width: 760px;
}

body .faq-intro > p:not(.eyebrow) {
	max-width: 68ch;
	color: rgba(255, 255, 255, 0.55);
}

body .faq-list {
	max-width: 76ch;
	margin-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body .faq-section .faq-list details {
	padding: 24px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #ffffff;
}

body .faq-section .faq-list summary {
	min-height: 0;
	color: #ffffff;
	font-family: var(--font-display);
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 600;
	line-height: 1.35;
	transition: color 200ms ease;
}

body .faq-section .faq-list summary:hover {
	color: #ff8577;
}

body .faq-section .faq-list summary svg {
	width: 22px;
	height: 22px;
	color: #ff8577;
	transition: transform 200ms ease;
}

body .faq-section .faq-list details p {
	max-width: 68ch;
	margin: 16px 42px 0 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 17px;
	line-height: 1.88;
}

/* Smooth architecture rail: one clipped outer surface and true hairline
	dividers, instead of one-pixel grid gaps that expose jagged corner seams. */
body .architecture-section .architecture-flow {
	gap: 0;
	border: 1px solid #333333;
	border-radius: 16px;
	background: #1f1f1f;
	box-shadow: none;
	overflow: hidden;
}

body .process-section .process-grid {
	gap: 0;
	border: 1px solid #333333;
	border-radius: 16px;
	background: #1f1f1f;
	box-shadow: none;
	overflow: hidden;
}

body .process-section .process-grid li {
	border: 0;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-radius: 0;
	background: #1f1f1f;
}

body .process-section .process-grid li:nth-child(3n) {
	border-right: 0;
}

body .process-section .process-grid li:nth-last-child(-n + 3) {
	border-bottom: 0;
}

body .architecture-section .architecture-flow article {
	border: 0;
	border-right: 1px solid #333333;
	border-radius: 0;
	background: #1f1f1f;
}

body .architecture-section .architecture-flow article:last-child {
	border-right: 0;
}

body .architecture-section .architecture-flow article + article::before {
	z-index: 2;
	top: 27px;
	left: -16px;
	width: 31px;
	height: 31px;
	border: 1px solid #333333;
	background: #1f1f1f;
	box-shadow: 0 0 0 5px #1f1f1f;
}

body .roles-section .role-core img,
:root[data-theme="dark"] body .roles-section .role-core img {
	filter: brightness(0);
}

body .tf-symbol {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 0;
	border-radius: 12px;
	color: #ffffff;
}

body .tf-symbol svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body .architecture-flow .tf-symbol-1 {
	background: #e64545;
}
body .architecture-flow .tf-symbol-2 {
	background: #5b45d6;
}
body .architecture-flow .tf-symbol-3 {
	background: #0078d4;
}
body .architecture-flow .tf-symbol-4 {
	background: #137333;
}

body .governance-section .tf-symbol-1 {
	background: #0078d4;
}
body .governance-section .tf-symbol-2 {
	background: #5b45d6;
}
body .governance-section .tf-symbol-3 {
	background: #137333;
}

body .architecture-flow .tf-symbol,
body .governance-section .tf-symbol {
	color: #ffffff;
}

body .architecture-flow .tf-symbol svg,
body .governance-section .tf-symbol svg {
	stroke: #ffffff;
}

@media (max-width: 900px) {
	body .process-section .process-grid li,
	body .process-section .process-grid li:nth-child(3n),
	body .process-section .process-grid li:nth-last-child(-n + 3) {
		border-right: 0;
		border-bottom: 1px solid #333333;
	}

	body .process-section .process-grid li:last-child {
		border-bottom: 0;
	}

	body .architecture-section .architecture-flow article {
		border-right: 0;
		border-bottom: 1px solid #333333;
	}

	body .architecture-section .architecture-flow article:last-child {
		border-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
	TechFabric source-system mapping. These rules intentionally come last: the
	prototype reuses GTM's semantic HTML, but presentation is owned by the exact
	ground/card/type recipes documented in techfabric-web/design.md.
	------------------------------------------------------------------------- */

.section-heading h2,
.platform-copy h2,
.faq-intro h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 4.4vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.section-heading > p,
.faq-intro > p:not(.eyebrow),
.platform-copy > p:not(.eyebrow) {
	font-family: var(--font-sans);
	font-size: clamp(17px, 1.8vw, 21px);
	line-height: 1.6;
}

.eyebrow,
.card-kicker,
.step-number,
.role-list article > span,
.role-list small,
.architecture-flow article > span,
.launch-grid li > span,
.launch-grid small {
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.4;
}

/* Light panel cards: #F7F7F7 ground, #F2F2F2 fill, charcoal copy. */
.problem-section .contrast-grid,
.process-section .process-grid,
.architecture-section .architecture-flow {
	border-color: #cccccc;
	background: #cccccc;
}

.problem-section .contrast-grid article,
.process-section .process-grid li,
.architecture-section .architecture-flow article,
.launch-section .launch-grid li {
	border-color: #cccccc;
	background: #f2f2f2;
	color: #282828;
	box-shadow: none;
}

.problem-section .contrast-grid h3,
.process-section .process-grid h3,
.architecture-section .architecture-flow h3,
.launch-section .launch-grid h3 {
	color: #282828;
}

.problem-section .contrast-grid p,
.problem-section .contrast-grid li,
.process-section .process-grid p,
.architecture-section .architecture-flow p,
.launch-section .launch-grid p {
	color: #666666;
}

.problem-section .card-kicker,
.process-section .step-number,
.architecture-section .architecture-flow article > span,
.launch-section .launch-grid li > span,
.launch-section .launch-grid small {
	color: #666666;
}

.process-section .step-icon {
	background: #282828;
	color: #ffffff;
}

.architecture-section .architecture-flow article + article::before {
	border-color: #cccccc;
	background: #f2f2f2;
	color: #666666;
}

/* Page-grey card variant: white fill on #1A1A1A, exactly as the source guide. */
.governance-section .gda-grid,
.governance-section .trust-rail {
	border-color: #333333;
	background: #333333;
}

.governance-section .gda-grid article,
.governance-section .trust-rail,
.faq-section .faq-list details {
	background: #ffffff;
	color: #282828;
}

.governance-section .gda-grid h3,
.faq-section .faq-list summary {
	color: #282828;
}

.governance-section .gda-grid p,
.governance-section .trust-rail span,
.faq-section .faq-list p {
	color: #666666;
}

/* TechFabric button hierarchy changes with its ground. */
.problem-section .button-primary,
.process-section .button-primary,
.architecture-section .button-primary,
.launch-section .button-primary {
	border-color: #282828;
	background: #282828;
	color: #ffffff;
}

.problem-section .button-primary:hover,
.process-section .button-primary:hover,
.architecture-section .button-primary:hover,
.launch-section .button-primary:hover {
	border-color: #3a3a3a;
	background: #3a3a3a;
	color: #ffffff;
}

.problem-section .button-secondary,
.process-section .button-secondary,
.architecture-section .button-secondary,
.launch-section .button-secondary {
	border: 2px solid #cccccc;
	background: #ebebeb;
	color: #282828;
}

/* GTM Fabric uses TechFabric's dark presentation continuously. The source
	website supports light panels, but this product deliberately selects only
	the black and page-grey variants requested for this exploration. */
.problem-section,
.architecture-section,
.launch-section,
.integrations-section,
.tagline-section,
.final-cta,
.contact-section {
	background: #000000;
	color: #ffffff;
}

.process-section,
.roles-section,
.governance-section,
.faq-section,
.platform-section {
	background: #1a1a1a;
	color: #ffffff;
}

.problem-section .section-heading h2,
.process-section .section-heading h2,
.architecture-section .section-heading h2,
.launch-section .section-heading h2,
.integrations-section .section-heading h2,
.problem-section h3,
.process-section h3,
.architecture-section h3,
.launch-section h3,
.integrations-section h3,
.integrations-section h4,
.problem-section blockquote {
	color: #ffffff;
}

.problem-section p,
.process-section p,
.architecture-section p,
.launch-section p,
.integrations-section p,
.problem-section .contrast-grid p,
.problem-section .contrast-grid li,
.process-section .process-grid p,
.architecture-section .architecture-flow p,
.launch-section .launch-grid p,
.integrations-section .integration-lane li p,
.architecture-section .architecture-note {
	color: #a6a6a6;
}

.problem-section .contrast-grid,
.process-section .process-grid,
.architecture-section .architecture-flow,
.governance-section .gda-grid,
.governance-section .trust-rail {
	border-color: #333333;
	background: #333333;
}

.problem-section .contrast-grid article,
.process-section .process-grid li,
.architecture-section .architecture-flow article,
.launch-section .launch-grid li,
.integrations-section .integration-lane,
.governance-section .gda-grid article,
.governance-section .trust-rail,
.faq-section .faq-list details {
	border-color: #333333;
	background: #1f1f1f;
	color: #ffffff;
}

.problem-section .contrast-grid h3,
.process-section .process-grid h3,
.architecture-section .architecture-flow h3,
.launch-section .launch-grid h3,
.integrations-section .integration-lane h3,
.integrations-section .integration-lane h4,
.governance-section .gda-grid h3,
.faq-section .faq-list summary,
.architecture-section .architecture-note strong {
	color: #ffffff;
}

.governance-section .gda-grid p,
.governance-section .trust-rail span,
.faq-section .faq-list p {
	color: #a6a6a6;
}

.architecture-section .architecture-flow article + article::before {
	border-color: #333333;
	background: #1f1f1f;
	color: #a6a6a6;
}

.process-section .step-icon {
	background: #ffffff;
	color: #282828;
}

.integrations-section .integration-lane {
	box-shadow: none;
}

.integrations-section .integration-lane .card-kicker {
	color: #8f8f8f;
}

.integrations-section .integration-lane li {
	border-top-color: #333333;
}

/* Each loop stage gets a distinct, purposeful signal color. The pictograms
	stay as accessible inline SVGs; color identifies the stage without replacing
	the text label or number. */
.process-grid li:nth-child(1) .step-icon {
	background: #e64545;
	color: #ffffff;
}
.process-grid li:nth-child(2) .step-icon {
	background: #5b45d6;
	color: #ffffff;
}
.process-grid li:nth-child(3) .step-icon {
	background: #0078d4;
	color: #ffffff;
}
.process-grid li:nth-child(4) .step-icon {
	background: #c76500;
	color: #ffffff;
}
.process-grid li:nth-child(5) .step-icon {
	background: #137333;
	color: #ffffff;
}
.process-grid li:nth-child(6) .step-icon {
	background: #b03075;
	color: #ffffff;
}

.tf-ecosystem {
	padding: 48px max(24px, calc((100vw - 1200px) / 2));
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	background: #1a1a1a;
}

.tf-ecosystem > p {
	margin: 0 0 24px;
	color: #a6a6a6;
	font: 13px/1.4 var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tf-logo-rail {
	display: grid;
	grid-template-columns: 1.5fr 1.45fr repeat(3, 0.75fr);
	gap: 12px;
}

.tf-logo {
	display: flex;
	min-height: 88px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	border-radius: 16px;
	color: #ffffff;
}

.tf-logo img {
	display: block;
	max-width: 100%;
	max-height: 34px;
}

.tf-logo b {
	font-family: var(--font-display);
	font-size: 16px;
}

.tf-logo-databricks {
	background: #b51e2b;
}
.tf-logo-temporal {
	background: #5b45d6;
}
.tf-logo-azure {
	background: #0078d4;
}
.tf-logo-aws {
	background: #c76500;
}
.tf-logo-gcp {
	background: #137333;
}

.tf-logo-azure img,
.tf-logo-aws img,
.tf-logo-gcp img {
	width: 30px;
}

@media (max-width: 900px) {
	.tf-logo-rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.tf-ecosystem {
		padding: 32px 16px;
	}

	.tf-logo-rail {
		grid-template-columns: 1fr;
	}
}

/* Editorial refinement: black negative space, strong type, and ruled indexes
	carry the TechFabric character while the product story remains GTM-specific. */
body main {
	background: #000000;
}

body .section {
	padding-top: clamp(96px, 10vw, 160px);
	padding-bottom: clamp(96px, 10vw, 160px);
}

body .section-heading {
	margin-bottom: clamp(56px, 7vw, 96px);
}

body .section-heading h2,
body .platform-copy h2,
body .faq-intro h2 {
	max-width: 13ch;
	font-family: var(--font-sans);
	font-size: clamp(42px, 5vw, 72px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.045em;
}

body .section-heading > p,
body .platform-copy > p:not(.eyebrow),
body .faq-intro > p:not(.eyebrow) {
	max-width: 47ch;
	color: rgba(255, 255, 255, 0.58);
	font-size: 18px;
	line-height: 1.75;
}

body .process-section,
body .roles-section,
body .governance-section,
body .faq-section,
body .platform-section {
	background: #181818;
}

body .process-section {
	background: #000000;
}

body .process-section .process-grid {
	border-color: rgba(255, 255, 255, 0.12);
	background: #181818;
}

body .process-section .process-grid li {
	min-height: 360px;
	padding: 40px;
	border-color: rgba(255, 255, 255, 0.1);
	background: #181818;
}

body .process-section .step-icon {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

body .process-section .step-icon svg {
	width: 25px;
	height: 25px;
	stroke-width: 1.65;
}

body .process-section .step-icon svg.glyph,
body .architecture-section .tf-symbol svg.glyph,
body .governance-section .tf-symbol svg.glyph {
	fill: currentColor;
	stroke: none;
}

body .process-section .process-grid h3 {
	font-size: 24px;
	font-weight: 650;
	letter-spacing: -0.025em;
}

body .process-section .process-grid p {
	max-width: 34ch;
	font-size: 17px;
	line-height: 1.75;
}

/* Authority chain: a ruled editorial index, not another dashboard rail. */
body .architecture-section .architecture-flow {
	display: block;
	width: min(100%, 980px);
	margin-left: auto;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

body .architecture-section .architecture-flow article {
	display: grid;
	grid-template-columns: 56px minmax(180px, 0.75fr) minmax(260px, 1.25fr);
	min-height: 150px;
	align-items: center;
	gap: 28px;
	padding: 28px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0;
	background: transparent;
}

body .architecture-section .architecture-flow article + article::before {
	display: none;
}

body .architecture-section .architecture-flow h3 {
	margin: 0;
	font-size: 21px;
	font-weight: 650;
	letter-spacing: -0.025em;
}

body .architecture-section .architecture-flow p {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
}

body .architecture-section .tf-symbol,
body .governance-section .tf-symbol {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

body .architecture-section .tf-symbol svg,
body .governance-section .tf-symbol svg {
	width: 24px;
	height: 24px;
	stroke-width: 1.65;
}

body .architecture-section .tf-symbol img {
	display: block;
	width: 23px;
	height: 28px;
	filter: brightness(0) invert(1);
}

body .architecture-note {
	width: min(100%, 980px);
	margin: 28px 0 0 auto;
}

/* Guarantees use the same quiet service-index cadence as TechFabric. */
body .governance-section .gda-grid {
	display: block;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0;
	background: transparent;
}

body .governance-section .gda-grid article {
	display: grid;
	grid-template-columns: 64px minmax(180px, 0.55fr) minmax(320px, 1.45fr);
	min-height: 158px;
	align-items: center;
	gap: 28px;
	padding: 30px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0;
	background: transparent;
}

body .governance-section .gda-grid h3,
body .governance-section .gda-grid p {
	margin: 0;
}

body .governance-section .gda-grid h3 {
	font-size: 28px;
	font-weight: 650;
	letter-spacing: -0.03em;
}

body .governance-section .gda-grid p {
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.7;
}

body .governance-section .trust-rail {
	margin-top: 40px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	background: #1f1f1f;
}

@media (max-width: 760px) {
	body .section-heading h2,
	body .platform-copy h2,
	body .faq-intro h2 {
		font-size: 42px;
	}

	body .process-section .process-grid li {
		min-height: 300px;
		padding: 32px 24px;
	}

	body .architecture-section .architecture-flow article,
	body .governance-section .gda-grid article {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 18px;
		padding: 28px 0;
	}

	body .architecture-section .architecture-flow p,
	body .governance-section .gda-grid p {
		grid-column: 2;
	}
}