/**
 * Signal OS — Behavioural Cohort Intelligence / Cohort Progression.
 * Scoped to .signal-os-cohorts — does not affect homepage sections.
 *
 * Desktop: Figma 2456:37389
 * Mobile:  Figma 2456:38958
 * Tablet:  Figma 2456:39472
 *
 * @package Fundamento
 */

.signal-os-cohorts {
	--soc-brand: var(--color-text-brand);
	--soc-text: var(--color-text-default);
	--soc-text-subtle: var(--color-text-subtle);
	--soc-eyebrow-bg: var(--color-bg-emphasis);
	--soc-eyebrow-marker: var(--color-neutral-600);
	--soc-card-bg: #efede5;
	--soc-border: var(--color-border-default);
	--soc-pill-marker: #1f7e61;
	--soc-connector-marker: var(--color-neutral-400);
	--soc-max: 74rem; /* 1184px */
	background-color: var(--color-neutral-50);
	color: var(--soc-text);
}

.signal-os-cohorts__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-80);
	max-width: var(--soc-max);
	margin-inline: auto;
	padding: var(--space-160) 0;
}

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

.signal-os-cohorts__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	width: 100%;
	text-align: center;
}

.signal-os-cohorts__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background-color: var(--soc-eyebrow-bg);
}

.signal-os-cohorts__eyebrow-marker {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: var(--soc-eyebrow-marker);
}

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

.signal-os-cohorts__heading {
	margin: 0;
	max-width: 54.625rem; /* 874px */
	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);
	color: var(--soc-brand);
	text-wrap: balance;
}

.signal-os-cohorts__introduction {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	width: 100%;
}

.signal-os-cohorts__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);
}

.signal-os-cohorts__introduction p:nth-child(1) {
	max-width: 52.5rem; /* 840 */
}

.signal-os-cohorts__introduction p:nth-child(2) {
	max-width: 47.75rem; /* 764 */
}

.signal-os-cohorts__introduction p:nth-child(3) {
	max-width: 41.375rem; /* 662 */
}

/* -------------------------------------------------------------------------
   Cohort cards
   ------------------------------------------------------------------------- */

.signal-os-cohorts__cohorts-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-64);
	width: 100%;
}

.signal-os-cohorts__cards-slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	width: 100%;
}

.signal-os-cohorts__cards-viewport {
	width: 100%;
}

.signal-os-cohorts__cards-pagination {
	display: none;
}

.signal-os-cohorts__cards-dot {
	width: 0.625rem;
	height: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background-color: var(--color-neutral-200);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.signal-os-cohorts__cards-dot.is-active {
	background-color: var(--color-text-muted);
}

.signal-os-cohorts__cards-dot:focus-visible {
	outline: 2px solid var(--color-green-400);
	outline-offset: 3px;
}

.signal-os-cohorts__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.signal-os-cohorts__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 25rem; /* 400px */
	padding: var(--space-24);
	overflow: hidden;
	border: 1px solid var(--soc-border);
	border-radius: var(--space-20);
	background-color: var(--soc-card-bg);
	isolation: isolate;
}

.signal-os-cohorts__card-pattern-stage {
	position: absolute;
	z-index: 0;
	width: 567%;
	height: 118.5%;
	pointer-events: none;
	overflow: visible;
}

.signal-os-cohorts__card-pattern-track {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
}

.signal-os-cohorts__card-pattern {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	user-select: none;
    pointer-events: none;
}

.signal-os-cohorts__card-pattern-glow {
	--ascii-glow-radius: 120px;
}

.signal-os-cohorts__card--lending .signal-os-cohorts__card-pattern-stage {
	bottom: -2.375rem;
	left: calc(50% + 20%);
	transform: translateX(-50%);
}

.signal-os-cohorts__card--lending .signal-os-cohorts__card-pattern {
	object-position: 72% 45%;
}

.signal-os-cohorts__card--collections .signal-os-cohorts__card-pattern-stage {
	bottom: -0.75rem;
	left: -20%;
}

.signal-os-cohorts__card--collections .signal-os-cohorts__card-pattern {
	object-position: 40% 50%;
}

.signal-os-cohorts__card--insurance .signal-os-cohorts__card-pattern-stage {
	right: -50%;
	bottom: -10rem;
	left: auto;
}

.signal-os-cohorts__card--insurance .signal-os-cohorts__card-pattern {
	object-position: 20% 60%;
}

.signal-os-cohorts__card-title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--soc-text);
	text-align: center;
}

.signal-os-cohorts__pills {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.signal-os-cohorts__pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 20px;
	border: 1px solid #e6e1d8;
	border-radius: 100px;
	background-color: var(--color-surface-default);
	box-shadow: 0 4px 2px rgba(151, 135, 102, 0.08);
	pointer-events: auto;
	white-space: nowrap;
}

.signal-os-cohorts__pill-marker {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: var(--soc-pill-marker);
}

.signal-os-cohorts__pill-label {
	font-family: var(--font-family-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--soc-text);
}

/* Pill positions — desktop Figma absolute coords / 380×400 card */

.signal-os-cohorts__pill--lending-1 {
	top: 26%;
	left: 36.8%;
}

.signal-os-cohorts__pill--lending-2 {
	top: 46.5%;
	left: 5%;
}

.signal-os-cohorts__pill--lending-3 {
	top: 63.75%;
	left: 36.8%;
}

.signal-os-cohorts__pill--lending-4 {
	top: 81%;
	left: 20.8%;
}

.signal-os-cohorts__pill--collections-1 {
	top: 32.75%;
	left: 25.5%;
}

.signal-os-cohorts__pill--collections-2 {
	top: 49%;
	left: 50.8%;
}

.signal-os-cohorts__pill--collections-3 {
	top: 65.25%;
	left: 2.9%;
}

.signal-os-cohorts__pill--collections-4 {
	top: 81.25%;
	left: 47.9%;
}

.signal-os-cohorts__pill--insurance-1 {
	top: 27.75%;
	left: 11.6%;
}

.signal-os-cohorts__pill--insurance-2 {
	top: 40.75%;
	left: 43.4%;
}

.signal-os-cohorts__pill--insurance-3 {
	top: 59.25%;
	left: 12.1%;
}

.signal-os-cohorts__pill--insurance-4 {
	top: 74.25%;
	left: 52.4%;
}

.signal-os-cohorts__supporting {
	margin: 0;
	max-width: 49.75rem; /* 796 */
	font-family: var(--font-family-display);
	font-size: 1.75rem; /* 28 */
	font-weight: 400;
	line-height: 1.2;
	color: var(--soc-brand);
	text-align: center;
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   Progression
   ------------------------------------------------------------------------- */

.signal-os-cohorts__progression {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	width: 100%;
}

.signal-os-cohorts__progression-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	width: 100%;
	text-align: center;
}

.signal-os-cohorts__progression-heading {
	margin: 0;
	max-width: 54.625rem;
	font-family: var(--font-family-display);
	font-size: 2.5rem; /* 40 */
	font-weight: 400;
	line-height: 1.2;
	color: var(--soc-brand);
}

.signal-os-cohorts__progression-description {
	margin: 0;
	max-width: 49.75rem;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--soc-brand);
}

.signal-os-cohorts__progression-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.signal-os-cohorts__diagram {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 38.125rem; /* 610 */
}

.signal-os-cohorts__progression-source {
	display:none;
	position: absolute;
	top: 0;
	left: calc(50% + 14px);
	z-index: 1;
	margin: 0;
	transform: translateY(-25%);
	font-family: var(--font-family-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--soc-text-subtle);
	white-space: nowrap;
}

.signal-os-cohorts__connector {
	display: flex;
	justify-content: center;
	width: 100%;
	aspect-ratio: 610 / 195;
}

.signal-os-cohorts__connector img {
	display: block;
	width: 100%;
	height: auto;
}

.signal-os-cohorts__progression-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-24);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.signal-os-cohorts__progression-item {
	display: flex;
	align-items: center;
	gap: var(--space-20);
	min-width: 0;
	padding: var(--space-32);
	border: 1px solid var(--soc-border);
	border-radius: var(--space-20);
	background-color: var(--color-surface-default);
}

.signal-os-cohorts__progression-number {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 49px;
	height: 49px;
	border-radius: 1000px;
	background-color: var(--color-neutral-100);
	font-family: var(--font-family-body);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--soc-text-subtle);
}

.signal-os-cohorts__progression-text {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--soc-brand);
}

/* -------------------------------------------------------------------------
   Closing
   ------------------------------------------------------------------------- */

.signal-os-cohorts__closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	width: 100%;
	text-align: center;
}

.signal-os-cohorts__closing-heading {
	margin: 0;
	max-width: 54.625rem;
	font-family: var(--font-family-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--soc-brand);
	text-wrap: balance;
}

.signal-os-cohorts__closing-description {
	margin: 0;
	max-width: 47.75rem;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-neutral-600);
}

.signal-os-cohorts__cta:focus-visible {
	outline: 2px solid var(--color-green-400);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Tablet — Figma 2456:39472 (~3 cards retained, tighter shell)
   ------------------------------------------------------------------------- */

@media (max-width: 74.99rem) and (min-width: 48rem) {
	.signal-os-cohorts__inner {
		gap: var(--space-64);
		padding: var(--space-64) var(--space-32);
	}

	.signal-os-cohorts__heading {
		font-size: 2rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__introduction p {
		max-width: none;
	}

	.signal-os-cohorts__cohorts-block {
		gap: var(--space-24);
	}

	.signal-os-cohorts__cards {
		gap: var(--space-12);
	}

	.signal-os-cohorts__card {
		min-height: 19.25rem; /* ~308 */
		padding: 1.155rem;
		border-radius: var(--space-12);
	}

	.signal-os-cohorts__card-title {
		font-size: 1rem;
		line-height: 1.4;
	}

	.signal-os-cohorts__pill {
		gap: 6px;
		padding: 6px 15px;
	}

	.signal-os-cohorts__pill-marker {
		width: 8px;
		height: 8px;
	}

	.signal-os-cohorts__pill-label {
		font-size: 0.675rem;
	}

	.signal-os-cohorts__supporting {
		font-size: 1.25rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__progression {
		gap: var(--space-40);
	}

	.signal-os-cohorts__progression-heading {
		font-size: 1.5rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__connector {
		display: none;
	}

	.signal-os-cohorts__diagram {
		display: none;
	}

	.signal-os-cohorts__progression-items {
		grid-template-columns: 1fr;
		gap: var(--space-16);
	}

	.signal-os-cohorts__progression-item {
		align-items: center;
		padding: var(--space-24);
		border-radius: var(--space-12);
	}

	.signal-os-cohorts__closing {
		gap: var(--space-16);
	}

	.signal-os-cohorts__closing-heading {
		font-size: 1.25rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__closing-description {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   Mobile — card slider (Figma 2456:39023)
   ------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
	.signal-os-cohorts__inner {
		gap: var(--space-64);
		padding: var(--space-64) var(--space-20);
	}

	.signal-os-cohorts__heading {
		font-size: 2rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__introduction p {
		max-width: none;
	}

	.signal-os-cohorts__cohorts-block {
		gap: var(--space-24);
	}

	.signal-os-cohorts__cards-slider {
    	--soc-card-w: 16.121875rem; /* Figma 257.95px */
		--soc-card-h: 19.25rem; /* Figma 308px */
		--soc-card-gap: 0.9625rem; /* Figma 15.4px */
		--soc-card-pad: 1.155rem; /* Figma 18.48px */
		gap: var(--space-24);
        width: calc(100% + (var(--space-20) * 2));
		margin-inline: calc(-1 * var(--space-20));
	}

	.signal-os-cohorts__cards-viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
        scroll-padding-inline: calc((100% - var(--soc-card-w)) / 2);
	}

	.signal-os-cohorts__cards-viewport::-webkit-scrollbar {
		display: none;
	}

	.signal-os-cohorts__cards-pagination {
		display: flex;
		justify-content: center;
		gap: var(--space-8);
	}

	.signal-os-cohorts__cards {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--soc-card-gap);
		width: max-content;
		margin: 0;
		padding-inline: 20px;
	}

	.signal-os-cohorts__card {
		flex: 0 0 var(--soc-card-w);
		width: var(--soc-card-w);
		height: var(--soc-card-h);
		min-height: var(--soc-card-h);
		max-height: var(--soc-card-h);
		padding: var(--soc-card-pad);
		border: 0.048125rem solid #e6e1d8;
		border-radius: var(--space-12);
		background-color: #efede5;
		scroll-snap-align: center;
		box-sizing: border-box;
	}

	.signal-os-cohorts__card-title {
		font-size: 1rem;
		line-height: 1.4;
	}

	.signal-os-cohorts__pill {
		gap: 6px;
		padding: 6px 14px;
		max-width: calc(100% - 1.5rem);
		white-space: normal;
	}

	.signal-os-cohorts__pill-marker {
		width: 8px;
		height: 8px;
	}

	.signal-os-cohorts__pill-label {
		font-size: 0.8125rem;
	}

	/* Keep readable non-overlapping placement on narrow cards */
	.signal-os-cohorts__pill--lending-1,
	.signal-os-cohorts__pill--collections-1,
	.signal-os-cohorts__pill--insurance-1 {
		top: 22%;
		left: 12%;
		right: auto;
	}

	.signal-os-cohorts__pill--lending-2,
	.signal-os-cohorts__pill--collections-2,
	.signal-os-cohorts__pill--insurance-2 {
		top: 40%;
		left: 8%;
		right: auto;
	}

	.signal-os-cohorts__pill--lending-3,
	.signal-os-cohorts__pill--collections-3,
	.signal-os-cohorts__pill--insurance-3 {
		top: 58%;
		left: 18%;
		right: auto;
	}

	.signal-os-cohorts__pill--lending-4,
	.signal-os-cohorts__pill--collections-4,
	.signal-os-cohorts__pill--insurance-4 {
		top: 76%;
		left: 10%;
		right: auto;
	}

	.signal-os-cohorts__supporting {
		font-size: 1.25rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__progression {
		gap: var(--space-40);
	}

	.signal-os-cohorts__progression-heading {
		font-size: 1.5rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__progression-description {
		max-width: none;
	}

	.signal-os-cohorts__diagram {
		display: none;
	}

	.signal-os-cohorts__progression-items {
		grid-template-columns: 1fr;
		gap: var(--space-16);
	}

	.signal-os-cohorts__progression-item {
		align-items: center;
		padding: var(--space-24);
		border-radius: var(--space-12);
	}

	.signal-os-cohorts__closing {
		gap: var(--space-16);
	}

	.signal-os-cohorts__closing-heading {
		font-size: 1.25rem;
		line-height: normal;
		max-width: none;
	}

	.signal-os-cohorts__closing-description {
		max-width: none;
	}
}

/* Mid desktop: prevent pill overflow when cards shrink before tablet query */
@media (max-width: 84rem) and (min-width: 75rem) {
	.signal-os-cohorts__pill-label {
		font-size: 0.8125rem;
	}

	.signal-os-cohorts__pill {
		padding: 7px 16px;
	}
}