/**
 * Page styles — mls-data-integration. Loaded only on that page.
 *
 * Generated from the inline styles the templates used to carry. Values are
 * design tokens (site-tokens.css). Loaded after style.css.
 */

.field-mapping__row {
	display:grid;
	grid-template-columns:1fr auto 1fr;
	gap:6px;
	align-items:center;
	padding:5px 0;
	border-bottom:1px solid var(--site-bg-subtle);
	font-size:9px;
}

.field-mapping__arrow {
	color:var(--site-teal);
	font-size:8px;
}

.field-mapping__title {
	font-size:9px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.05em;
	color:var(--site-text-muted);
	margin-bottom:8px;
}

.field-mapping__raw-value {
	font-weight:600;
	color:var(--site-navy);
}

.field-mapping__normalised-value {
	font-weight:600;
	color:var(--site-teal);
}

.badge--scheduled {
	background:var(--site-bg-subtle);
	color:var(--site-text-muted);
}

.lr-av--lime {
	background:var(--site-green-45);
}

.lr-av--gray {
	background:var(--site-text-muted);
}

.lr-av__sync-icon {
	font-size:10px;
}

.integration-compare__card-head {
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:16px;
}

.integration-compare__point {
	display:flex;
	gap:8px;
	align-items:flex-start;
	margin-bottom:8px;
}

.integration-compare__point-text {
	font-size:12px;
	color:var(--site-slate-65);
}

.integration-compare__card-title {
	font-size:13px;
	font-weight:700;
	color:var(--site-slate-91);
}

.data-flow__connector {
	width:2px;
	height:16px;
	background:var(--site-border);
	margin:2px auto;
}

.data-flow {
	background:var(--site-white);
	border:1px solid var(--site-border);
	border-radius:16px;
	padding:24px;
	font-size:11px;
}

.data-flow__step-body {
	padding-top:6px;
}

.data-flow__step-marker {
	display:flex;
	flex-direction:column;
	align-items:center;
	flex-shrink:0;
}

.data-flow__step-title {
	font-weight:700;
	color:var(--site-navy);
}

.data-flow__title {
	font-size:11px;
	font-weight:700;
	color:var(--site-navy);
	margin-bottom:16px;
	text-align:center;
}

.data-flow__step-desc {
	color:var(--site-text-muted);
	font-size:10px;
}

.sec-sub--seo-note {
	color:var(--site-slate-65);
	margin-top:32px;
}

@media (max-width: 900px) {
	#dedup .inner > div.field-mapping__row { grid-template-columns:1fr;gap:20px; }
	#dedup .inner > div.field-mapping__row > div:nth-child(2) { margin:4px 0; }
	#dedup .inner > div.field-mapping__row > div:nth-child(2) svg { transform:rotate(90deg); }
}

@media (max-width: 640px) {
	.app-frame .field-mapping__row { grid-template-columns:1fr;gap:4px; }
	.app-frame .field-mapping__row > * { min-width:0; }
}

/* Elements whose values come from the page data: the value arrives as a custom property. */

.integration-compare__point-icon {
	font-size:10px;
	margin-top:3px;
	flex-shrink:0;
	color:var(--data-color);
}

.integration-compare__card-icon {
	font-size:20px;
	color:var(--data-color);
}

.integration-compare__card {
	background:var(--site-white-alpha-5);
	border-radius:16px;
	padding:24px;
	border:1px solid var(--data-border);
}

.data-flow__step-glyph {
	font-size:13px;
	color:var(--data-color);
}

.data-flow__step-icon {
	width:32px;
	height:32px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--data-bg);
}


.data-flow__step {
	display:flex;
	gap:10px;
	align-items:flex-start;
}
.data-flow__step--has-next {
	margin-bottom:4px;
}

/* Moved here from another stylesheet: this is where these classes are used. */
.field-mapping__body {
	padding:12px 14px;
}
.field-mapping__key {
	color:var(--site-text-muted);
}
.eyebrow--integration-compare {
	color:var(--site-teal);
}
.feat-grid--sync-layers {
	margin-top:48px;
}
.mlsg-grid--data-flow {
	margin-top:48px;
}
.mlsg-r3--integration-compare {
	margin-top:48px;
}
.sync-layers__explore {
	margin-top:40px;
}
.mlsg-title--data-flow {
	font-size:1.5rem;
}