/**
 * Single case study.
 * Desktop frame: 1440, content 1184, sidebar 292, article 860.
 * Tablet and mobile frames were not available after the Figma rate limit,
 * so those breakpoints follow the Customers page (1200 / 768).
 */

.case-study-single {
	background-color: var(--color-neutral-0);
}

.cs-single__wrap {
	width: min(1184px, calc(100% - 2.5rem));
	margin-inline: auto;
}

.cs-single-hero {
	padding-top: 143px;
	background-color: var(--color-neutral-0);
}

.cs-single-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.cs-single-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background-color: var(--color-bg-emphasis);
}

.cs-single-hero__eyebrow-marker {
	width: 10px;
	height: 10px;
	background-color: var(--color-text-subtle);
}

.cs-single-hero__eyebrow-text {
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-single-hero__title {
	max-width: 999px;
	margin: 0;
	font-family: var(--font-family-display);
	font-size: 3.75rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--color-text-brand);
}

.cs-single-hero__summary {
	max-width: 1017px;
	margin: 0;
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-single-hero__meta {
	display: flex;
	gap: var(--space-24);
	width: min(472px, 100%);
	margin-top: var(--space-16);
}

.cs-single-hero__meta-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}

.cs-single-hero__meta-label,
.cs-single-hero__author,
.cs-single-hero__date {
	margin: 0;
}

.cs-single-hero__meta-label {
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-single-hero__author,
.cs-single-hero__date {
	font-family: var(--font-family-body);
	font-size: var(--text-body-lg-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-default);
}

.cs-single-hero__author {
	color: #1b1b1b;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a.cs-single-hero__author:hover,
a.cs-single-hero__author:focus-visible {
	color: var(--color-text-brand);
}

.cs-single-hero__media {
	position: relative;
	height: 506px;
	margin-top: var(--space-40);
	background-color: #d9d9d9;
}

.cs-single-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-single-hero__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 404px;
	height: 116px;
	padding: 10px;
	background-color: var(--color-surface-default);
	transform: translate(-50%, -50%);
}

.cs-single-hero__logo-img {
	width: 311px;
	height: 72px;
	object-fit: contain;
	object-position: center bottom;
}

.cs-article {
	background-color: var(--color-neutral-0);
}

.cs-article__layout {
	display: grid;
	grid-template-columns: 292px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-block: var(--space-80);
}

.cs-article__layout--solo {
	grid-template-columns: minmax(0, 1fr);
}

.cs-sidebar {
	position: sticky;
	top: 80px;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.cs-toc {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-bottom: var(--space-16);
	border-bottom: 1px solid var(--color-neutral-300);
}

.cs-toc__label,
.cs-share__label {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text-muted);
}

.cs-toc__toggle {
	display: none;
}

.cs-toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-toc__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	padding-block: var(--space-8);
	color: var(--color-text-subtle);
	font-family: var(--font-family-body);
	font-size: var(--text-body-lg-size);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

.cs-toc__link:hover,
.cs-toc__link:focus-visible {
	color: var(--color-text-brand);
	text-decoration: none;
}

.cs-toc__marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-top: 8px;
	background-color: var(--color-neutral-300);
}

.cs-toc__link.is-active {
	font-weight: 500;
	color: var(--color-text-brand);
}

.cs-toc__link.is-active .cs-toc__marker {
	background-color: var(--color-green-600);
}

.cs-share {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.cs-share__actions {
	display: flex;
	gap: 12px;
}

.cs-share__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background-color: var(--color-surface-accent);
	color: inherit;
	cursor: pointer;
}

.cs-share__button img {
	width: 18px;
	height: 18px;
}

.cs-share__button:hover,
.cs-share__button:focus-visible {
	background-color: var(--color-blue-100);
}

.cs-share__button.is-copied {
	outline: 2px solid var(--color-brand-default);
	outline-offset: 2px;
}

.cs-article__sections {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

.cs-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	scroll-margin-top: 96px;
}

.cs-section--metrics {
	gap: var(--space-20);
}

.cs-section__heading {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--color-text-default);
}

.cs-prose {
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-prose p {
	margin: 0 0 var(--space-16);
}

.cs-prose p:last-child {
	margin-bottom: 0;
}

.cs-prose strong,
.cs-list__text strong {
	font-weight: 500;
	color: var(--color-text-default);
}

.cs-callout {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-16);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-default);
}

.cs-callout__label,
.cs-callout__text {
	margin: 0;
}

.cs-callout__label {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-family-body);
	font-size: var(--text-body-lg-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-green-900);
}

.cs-callout__label img {
	width: 24px;
	height: 24px;
}

.cs-callout__text {
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-brand);
}

.cs-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
}

.cs-list__index {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 100px;
	background-color: var(--color-surface-accent);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-list__text {
	flex: 1 1 auto;
	padding-top: 4px;
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-list--bullet {
	gap: 16px;
}

.cs-list--bullet .cs-list__item {
	gap: var(--space-8);
}

.cs-list--bullet .cs-list__item::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 8px;
	background-color: var(--color-text-subtle);
}

.cs-list--bullet .cs-list__text {
	padding-top: 0;
}

.cs-table-wrap {
	overflow: auto;
	border: 1px solid var(--color-border-default);
	border-radius: 12px;
}

.cs-table-wrap--narrow {
	max-width: 552px;
}

.cs-table {
	width: 100%;
	border-collapse: collapse;
}

.cs-table th,
.cs-table td {
	padding: 20px 24px;
	border-bottom: 1px solid var(--color-border-default);
	font-family: var(--font-family-body);
	line-height: 1.4;
	text-align: left;
	vertical-align: middle;
}

.cs-table th {
	background-color: var(--color-bg-default);
	font-size: var(--text-body-md-size);
	font-weight: 500;
	color: var(--color-text-muted);
}

.cs-table td {
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	color: var(--color-text-default);
	background-color: var(--color-neutral-0);
}

.cs-table tr:last-child td {
	border-bottom: 0;
}

.cs-figure {
	max-width: 575px;
	margin: 0;
}

.cs-figure__img {
	width: 100%;
	height: auto;
}

.cs-figure__caption {
	margin-top: var(--space-8);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-stats {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.cs-stats__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-20);
}

.cs-stats__row--single {
	grid-template-columns: minmax(0, 1fr);
}

.cs-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-20);
	border: 1px solid var(--color-surface-accent);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-accent);
}

.cs-stat__value,
.cs-stat__label {
	margin: 0;
}

.cs-stat__value {
	font-family: var(--font-family-display);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-text-brand);
}

.cs-stat__label {
	font-family: var(--font-family-body);
	font-size: var(--text-body-lg-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-subtle);
}

.cs-quote {
	margin: 0;
	padding: var(--space-12) var(--space-24);
	border-left: 8px solid var(--color-border-brand);
	background-color: var(--color-bg-muted);
}

.cs-quote__text,
.cs-quote__attribution {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	color: var(--color-text-brand);
}

.cs-quote__attribution {
	margin-top: var(--space-16);
}

.cs-related {
	padding-block: var(--space-64);
	background-color: var(--color-neutral-0);
}

.cs-related__layout {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.cs-related__heading {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-text-default);
	white-space: nowrap;
}

.cs-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24);
}

@media (min-width: 48rem) {
	.cs-single__wrap {
		width: min(1184px, calc(100% - 4rem));
	}
}

@media (min-width: 90rem) {
	.cs-single__wrap {
		width: min(1184px, calc(100% - 16rem));
	}
}

@media (max-width: 74.99875rem) {
	.cs-single-hero {
		padding-top: 160px;
	}

	.cs-single-hero__title {
		font-size: 2.5rem;
	}

	.cs-single-hero__media {
		height: 360px;
	}

	.cs-single-hero__logo {
		width: min(404px, calc(100% - 48px));
	}

	.cs-article__layout,
	.cs-related__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32);
	}

	.cs-sidebar {
		position: static;
	}

	.cs-toc {
		position: sticky;
		top: 64px;
		z-index: 4;
		background-color: var(--color-neutral-0);
	}

	.cs-toc__toggle {
		display: none;
	}

	.cs-toc__nav {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cs-toc__nav::-webkit-scrollbar {
		display: none;
	}

	.cs-toc__list {
		flex-direction: row;
		gap: var(--space-20);
		width: max-content;
		min-width: 100%;
	}

	.cs-toc__link {
		white-space: nowrap;
		font-size: var(--text-body-md-size);
	}

	.cs-table-wrap--narrow,
	.cs-figure {
		max-width: none;
	}

	.cs-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.cs-related__heading {
		font-size: 2rem;
		white-space: normal;
	}
}

@media (max-width: 47.99875rem) {
	.cs-single-hero__title {
		font-size: 2rem;
	}

	.cs-single-hero__meta {
		flex-direction: column;
		width: 100%;
	}

	.cs-single-hero__media {
		height: 220px;
	}

	.cs-single-hero__logo {
		height: 80px;
	}

	.cs-single-hero__logo-img {
		width: min(220px, 78%);
		height: auto;
	}

	.cs-section__heading {
		font-size: 1.5rem;
	}

	.cs-stats__row,
	.cs-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cs-stat__value {
		font-size: 2rem;
	}

	.cs-table th,
	.cs-table td {
		padding: 16px;
	}

	.cs-related__heading {
		font-size: 2rem;
		white-space: normal;
	}
}