/**
 * Platform progress tabs.
 * Scoped to .platform-progress-tabs — does not affect homepage journey-tabs / enterprise.
 *
 * Signal OS desktop: Figma 2456:37302
 * Signal OS mobile:  Figma 2456:38875
 *
 * @package Fundamento
 */

.platform-progress-tabs {
	--ppt-brand: var(--color-text-brand);
	--ppt-text: var(--color-text-default);
	--ppt-text-subtle: var(--color-text-subtle);
	--ppt-eyebrow-bg: var(--color-bg-emphasis);
	--ppt-eyebrow-marker: var(--color-neutral-600);
	--ppt-border: var(--color-border-default);
	--ppt-nav-bg: var(--color-surface-default);
	--ppt-stage-bg: var(--color-neutral-100);
	--ppt-tab-active-bg: var(--color-neutral-50);
	--ppt-card-bg: var(--color-neutral-50);
	--ppt-progress: var(--color-border-brand-subtle);
	--ppt-item-icon-bg: var(--color-surface-accent);
	--ppt-meta-marker: #1f7e61;
	--ppt-max: 74rem; /* 1184px */
	--ppt-duration: 7s;
	background-color: var(--color-surface-default);
	color: var(--ppt-text);
}

.platform-progress-tabs__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-80);
	max-width: var(--ppt-max);
	margin-inline: auto;
	padding: var(--space-160) 0;
}

/* -------------------------------------------------------------------------
   Intro
   ------------------------------------------------------------------------- */

.platform-progress-tabs__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	width: 100%;
	/* max-width: 67.625rem; */
}

.platform-progress-tabs--align-left .platform-progress-tabs__intro {
	align-items: flex-start;
	text-align: left;
}

.platform-progress-tabs--align-center .platform-progress-tabs__intro {
	align-items: center;
	text-align: center;
}

.platform-progress-tabs__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background-color: var(--ppt-eyebrow-bg);
}

.platform-progress-tabs__eyebrow-marker {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: var(--ppt-eyebrow-marker);
}

.platform-progress-tabs__eyebrow-text {
	font-family: var(--font-family-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-neutral-600);
}

.platform-progress-tabs__heading {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: var(--text-display-h1-alt-size);
	font-weight: 400;
	line-height: var(--text-display-h1-alt-lh);
	letter-spacing: 0;
	color: var(--ppt-brand);
}

.platform-progress-tabs__introduction {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	width: 100%;
	max-width: 58.475rem; /* 934px */
}

.platform-progress-tabs--align-center .platform-progress-tabs__introduction {
	align-items: center;
}

.platform-progress-tabs__introduction p {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-neutral-600);
}

/* -------------------------------------------------------------------------
   Body / shell
   ------------------------------------------------------------------------- */

.platform-progress-tabs__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
	width: 100%;
}

.platform-progress-tabs__shell {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 30.8125rem; /* 493px */
	overflow: hidden;
	border: 1px solid var(--ppt-border);
	border-radius: var(--space-20);
	background-color: var(--ppt-nav-bg);
}

.platform-progress-tabs__nav {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-12);
	min-width: 0;
	padding: var(--space-32);
	background-color: var(--ppt-nav-bg);
}

.platform-progress-tabs__stage {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-32);
	background-color: var(--ppt-stage-bg);
}

/* -------------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------------- */

.platform-progress-tabs__tab {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: var(--space-20);
	min-height: 51px;
	width: 100%;
	margin: 0;
	padding: var(--space-20);
	overflow: hidden;
	border: 0;
	border-radius: var(--space-12);
	background-color: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
	opacity: 0.5;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.platform-progress-tabs__tab.is-active {
	background-color: var(--ppt-tab-active-bg);
	opacity: 1;
}

.platform-progress-tabs__tab:focus-visible {
	outline: 2px solid var(--color-green-400);
	outline-offset: 2px;
}

.platform-progress-tabs__progress {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: none;
	width: 5px;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.platform-progress-tabs__tab.is-active .platform-progress-tabs__progress {
	display: block;
}

.platform-progress-tabs__progress-fill {
	display: block;
	width: 100%;
	height: 0;
	background-color: var(--ppt-progress);
	transition: none;
}

.platform-progress-tabs__progress-fill.is-animating {
	height: 100%;
	transition: height var(--ppt-duration) ease-out;
}

.platform-progress-tabs__tab-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border: 0.808px solid var(--ppt-border);
	border-radius: 4px;
	background-color: var(--color-surface-default);
}

.platform-progress-tabs__tab-icon::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-color: #837453;
	-webkit-mask-image: var(--ppt-icon-mask);
	mask-image: var(--ppt-icon-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.2s ease;
}

.platform-progress-tabs__tab.is-active .platform-progress-tabs__tab-icon::before {
	background-color: #82d3b2;
}

.platform-progress-tabs__tab-icon img {
	display: none;
}

.platform-progress-tabs__tab-copy {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-8);
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
}

.platform-progress-tabs__tab-title {
	font-family: var(--font-family-body);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ppt-text);
}

.platform-progress-tabs__tab-description {
	display: none;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-text-subtle);
}

.platform-progress-tabs__tab.is-active .platform-progress-tabs__tab-description {
	display: block;
}

/* -------------------------------------------------------------------------
   Panels
   ------------------------------------------------------------------------- */

.platform-progress-tabs__panel {
	display: none;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	min-height: 100%;
}

.platform-progress-tabs__panel.is-active {
	display: flex;
}

.platform-progress-tabs__panel-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-20);
	width: 100%;
	min-height: 0;
	padding: 1.9375rem var(--space-32) var(--space-32) var(--space-24);
	overflow: hidden;
	border: 1px solid var(--ppt-border);
	border-radius: var(--space-20);
	background-color: var(--ppt-card-bg);
}

.platform-progress-tabs__panel-heading {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-text-subtle);
}

.platform-progress-tabs__panel-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem 1.5rem;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-progress-tabs__panel-item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	min-width: 0;
}

.platform-progress-tabs__panel-item-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--ppt-item-icon-bg);
}

.platform-progress-tabs__panel-item-icon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.platform-progress-tabs__panel-item-text {
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-brand);
}

.platform-progress-tabs__panel-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	width: 100%;
}

.platform-progress-tabs__panel-meta-label {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-text-subtle);
}

.platform-progress-tabs__panel-meta-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-32);
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-progress-tabs__panel-meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.platform-progress-tabs__panel-meta-marker {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: var(--ppt-meta-marker);
}

.platform-progress-tabs__panel-meta-text {
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-text);
	white-space: nowrap;
}

.platform-progress-tabs__panel-footer {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ppt-brand);
}

.platform-progress-tabs__panel-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--space-12);
}

.platform-progress-tabs__panel-caption {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--ppt-text-subtle);
}

/* -------------------------------------------------------------------------
   Note + closing
   ------------------------------------------------------------------------- */

.platform-progress-tabs__note {
	margin: 0;
	max-width: 58.375rem;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-neutral-600);
	text-align: center;
}

.platform-progress-tabs__closing {
	margin: 0;
	max-width: 61.25rem; /* 980px */
	font-family: var(--font-family-display);
	font-size: 1.75rem; /* 28 */
	font-weight: 400;
	line-height: 1.2;
	color: var(--ppt-brand);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.platform-progress-tabs__progress-fill.is-animating {
		transition: none;
		height: 100%;
	}

	.platform-progress-tabs__tab {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
	.platform-progress-tabs__inner {
		gap: var(--space-64);
		padding: var(--space-64) var(--space-20);
	}

	.platform-progress-tabs__intro {
		align-items: flex-start;
		max-width: none;
		text-align: left;
	}

	.platform-progress-tabs--align-center .platform-progress-tabs__intro {
		align-items: flex-start;
		text-align: left;
	}

	.platform-progress-tabs__heading {
		font-size: 2rem; /* 32 */
		line-height: 1.2;
		max-width: none;
	}

	.platform-progress-tabs__introduction {
		max-width: none;
	}

	.platform-progress-tabs__introduction p + p {
		display: none;
	}

	.platform-progress-tabs__body {
		align-items: stretch;
	}

	.platform-progress-tabs__shell {
		display: flex;
		flex-direction: column;
		min-height: 0;
		border-radius: var(--space-12);
		background-color: var(--color-neutral-50);
	}

	.platform-progress-tabs__nav,
	.platform-progress-tabs__stage {
		display: contents;
	}

	.platform-progress-tabs__tab {
		order: var(--ppt-order);
		flex: 0 0 auto;
		gap: var(--space-20);
		min-height: auto;
		border-radius: 0;
		background-color: transparent;
		opacity: 0.5;
	}
    
    .platform-progress-tabs--signal-os .platform-progress-tabs__tab {
		min-height: 5rem; /* 80px */
	}

	.platform-progress-tabs__tab.is-active {
		border-radius: var(--space-12) var(--space-12) 0 0;
		background-color: var(--color-surface-default);
		opacity: 1;
	}

	.platform-progress-tabs__progress {
		top: 0;
		left: 0;
		width: 100%;
		height: 5px;
	}

	.platform-progress-tabs__progress-fill {
		width: 0;
		height: 100%;
	}

	.platform-progress-tabs__progress-fill.is-animating {
		width: 100%;
		height: 100%;
		transition: width var(--ppt-duration) ease-out;
	}

	.platform-progress-tabs__tab-title {
		font-size: 1rem;
		line-height: 1.4;
	}

	.platform-progress-tabs__tab-description {
		gap: var(--space-4);
	}

	.platform-progress-tabs__tab-copy {
		gap: 4px;
	}

	.platform-progress-tabs__tab.is-active .platform-progress-tabs__tab-description {
		display: block;
	}

	.platform-progress-tabs__panel {
		order: var(--ppt-order);
		gap: var(--space-24);
		min-height: 0;
		padding: var(--space-12);
		background-color: var(--ppt-stage-bg);
	}

	.platform-progress-tabs__panel-card {
		gap: var(--space-20);
		padding: var(--space-24);
		border-radius: var(--space-12);
	}

	.platform-progress-tabs__panel-items {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
	}

	.platform-progress-tabs__panel-item-icon {
		width: 28px;
		height: 28px;
		border-radius: 2.8px;
	}

	.platform-progress-tabs__tab-icon::before {
		width: 16.8px;
		height: 16.8px;
	}

	.platform-progress-tabs__panel-item-icon img {
		width: 16.8px;
		height: 16.8px;
	}

	.platform-progress-tabs__panel-meta-list {
		flex-direction: column;
		gap: var(--space-12);
	}

	.platform-progress-tabs__panel-meta-text {
		white-space: normal;
	}

	.platform-progress-tabs__note {
		max-width: none;
		text-align: center;
	}

	.platform-progress-tabs__closing {
		max-width: none;
		font-size: 1.25rem; /* 20 */
		line-height: normal;
	}

	@media (prefers-reduced-motion: reduce) {
		.platform-progress-tabs__progress-fill.is-animating {
			width: 100%;
			height: 100%;
			transition: none;
		}
	}
}

/* -------------------------------------------------------------------------
   Layout: operational-visibility (Figma 2456:37586 / 2456:39133)
   ------------------------------------------------------------------------- */

.platform-progress-tabs--layout-operational-visibility {
	background-color: var(--color-neutral-50);
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__inner {
	gap: var(--space-64);
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__intro {
	max-width: none;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__heading {
	max-width: 58.375rem;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__introduction {
	max-width: 58.375rem;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__tab-description {
	display: none;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__shell {
	min-height: 30.8125rem;
	border: none;
	border-radius: 0;
	background-color: transparent;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__nav {
	flex: 1 1 0;
	padding: var(--space-32);
	background-color: var(--color-surface-default);
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__stage {
	flex: 1 1 0;
	min-height: 30.8125rem;
	padding: var(--space-32);
	background-color: var(--color-neutral-100);
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__tab {
	flex: 1 1 0;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel {
	min-height: 25.625rem;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-mixed {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	min-height: 0;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-media-slot {
	width: 100%;
	min-height: 19.125rem;
	border: 1px solid var(--ppt-border);
	border-radius: var(--space-20);
	background-color: var(--color-neutral-50);
	overflow: hidden;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-media {
	position: relative;
	width: 100%;
	min-height: 0;
	aspect-ratio: 1024 / 529;
	border: 0;
	border-radius: var(--space-20);
	background-color: transparent;
	overflow: hidden;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-media picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-media .platform-progress-tabs__panel-media-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: none;
	object-fit: cover;
	object-position: center;
	/* Figma exports bake rounded corners on black — slight scale crops the gutter. */
	transform: scale(1.04);
	transform-origin: center;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-12) var(--space-28);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-metric {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	min-width: 0;
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-metric-marker {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: var(--ppt-meta-marker);
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-metric-text {
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-text);
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__callout {
	width: 100%;
	padding: var(--space-12) var(--space-56);
	background-color: var(--color-bg-subtle);
	border-left: var(--space-8) solid var(--color-border-brand);
}

.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__callout p {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.0125rem;
	color: var(--ppt-brand);
}

@media (max-width: 61.99rem) {
	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__shell {
		min-height: 0;
		border: 1px solid var(--ppt-border);
		border-radius: var(--space-12);
		background-color: var(--color-neutral-50);
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__nav {
		padding: 0;
		background-color: transparent;
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__stage {
		min-height: 0;
		padding: 0;
		background-color: transparent;
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel {
		min-height: 0;
		padding: var(--space-12);
		background-color: var(--color-neutral-100);
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-media-slot {
		min-height: 14.25rem;
		border-radius: var(--space-20);
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-media {
		aspect-ratio: 1024 / 344;
		border-radius: var(--space-20);
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__introduction p + p {
		display: block;
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__callout {
		padding: var(--space-12) var(--space-28);
		border-left-width: var(--space-4);
	}
}

@media (max-width: 47.99rem) {
	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-media {
		aspect-ratio: 618 / 456;
		border-radius: var(--space-12);
	}

	.platform-progress-tabs--layout-operational-visibility .platform-progress-tabs__panel-metrics {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Integrations — ecosystem (vendors) + action (steps)
   Figma: 2456:43357, 2456:43438
   ------------------------------------------------------------------------- */

.platform-progress-tabs--surface-white {
	background-color: var(--color-surface-default);
}

.platform-progress-tabs--spacing-top-none .platform-progress-tabs__inner {
	padding-top: 0;
}

.platform-progress-tabs--spacing-bottom-none .platform-progress-tabs__inner {
	padding-bottom: 0;
}

/* Journeys — Example Outcomes (Figma 2456:46767) */
.platform-progress-tabs--journeys.platform-progress-tabs--spacing-top-none .platform-progress-tabs__inner {
	padding-top: var(--space-80, 5rem);
	gap: var(--space-40, 2.5rem);
	padding-bottom: var(--space-80, 5rem);
}

.platform-progress-tabs--signal-os.platform-progress-tabs--layout-intelligence-layers .platform-progress-tabs__heading {
	max-width: 54rem;
}

.platform-progress-tabs--journeys .platform-progress-tabs__heading {
	font-size: 2.5rem; /* 40px */
	line-height: 1.2;
	letter-spacing: 0;
}

.platform-progress-tabs--layout-integrations-ecosystem .platform-progress-tabs__inner {
	gap: var(--space-80);
}

.platform-progress-tabs--layout-integrations-action .platform-progress-tabs__inner {
	gap: var(--space-64);
}

.platform-progress-tabs--layout-integrations-ecosystem .platform-progress-tabs__intro {
	max-width: 54.625rem; /* 874px */
}

.platform-progress-tabs--layout-integrations-action .platform-progress-tabs__introduction {
	max-width: 58.375rem; /* 934px */
}

.platform-progress-tabs--layout-integrations-ecosystem .platform-progress-tabs__shell,
.platform-progress-tabs--layout-integrations-action .platform-progress-tabs__shell {
	min-height: 0;
}

.platform-progress-tabs--layout-integrations-ecosystem .platform-progress-tabs__panel,
.platform-progress-tabs--layout-integrations-action .platform-progress-tabs__panel {
	gap: 0;
}

.platform-progress-tabs__detail {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	min-height: 100%;
}

.platform-progress-tabs__detail .platform-progress-tabs__panel-card {
	gap: var(--space-24);
	padding: 1.9375rem var(--space-32) var(--space-32) var(--space-36);
}

.platform-progress-tabs--layout-integrations-ecosystem .platform-progress-tabs__panel-heading,
.platform-progress-tabs--layout-integrations-action .platform-progress-tabs__panel-heading {
	color: var(--ppt-brand);
}

.platform-progress-tabs__panel-vendors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-progress-tabs__panel-vendor {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	min-width: 0;
}

.platform-progress-tabs__panel-vendor-marker,
.platform-progress-tabs__panel-step-marker {
	display: block;
	flex-shrink: 0;
	width: 0.625rem;
	height: 0.625rem;
	background-color: var(--ppt-meta-marker);
}

.platform-progress-tabs__panel-vendor-text {
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-brand);
}

.platform-progress-tabs--layout-integrations-ecosystem .platform-progress-tabs__panel-footer {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ppt-brand);
}

.platform-progress-tabs__panel-steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-progress-tabs__panel-steps::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.25rem;
	width: 1px;
	border-left: 1px dashed var(--ppt-meta-marker);
	opacity: 0.45;
	pointer-events: none;
}

.platform-progress-tabs__panel-step {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-12);
	min-height: 2.8125rem;
}

.platform-progress-tabs__panel-step-text {
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ppt-text);
}

.platform-progress-tabs__panel-outcome {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ppt-brand);
}

@media (max-width: 767px) {
	.platform-progress-tabs--layout-integrations-ecosystem .platform-progress-tabs__inner,
	.platform-progress-tabs--layout-integrations-action .platform-progress-tabs__inner {
		gap: var(--space-40);
	}

	.platform-progress-tabs__panel-vendors {
		grid-template-columns: 1fr;
	}

	.platform-progress-tabs__detail .platform-progress-tabs__panel-card {
		padding: var(--space-24);
	}
	.platform-progress-tabs--journeys.platform-progress-tabs--spacing-top-none .platform-progress-tabs__inner{
		padding-top: 0;
		padding-bottom: 0;
	}
	.platform-progress-tabs--journeys .platform-progress-tabs__heading{
		font-size: 1.5rem;
	}
}