/* =========================================================================
   Case study detail — "Portfolio Automation & Growth"
   Built from Figma "Smart Engage case study detailed" (8C41…, 197:20128).
   Static/bespoke; heavy illustrations are exported images in
   assets/img/case-study-pag/. STAGE 1: hero + Business Context + Business Ask.
   ========================================================================= */

:root {
	--csd-teal: #2ad9c4;
	--csd-ink: #111;
	--csd-ink-70: rgba(17, 17, 17, 0.7);
	--csd-darkteal: #09413e;
}

/* Figma insets every section's content 160px from the frame rails (the hero
   already does this via home-v2). home-v2 leaves body sections at 100px, which
   makes them stick out 60px left of the hero — align the whole page to 160. */
@media (min-width: 1024px) {
	.csd main > section > .hv-shell {
		padding-inline: 160px;
	}
}

/* -------------------------------------------------------------------------
   HERO  (dark)
   ------------------------------------------------------------------------- */
.csd-hero {
	background: #0e0e0e;
	color: #fff;
}
.csd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 96px);
	align-items: center;
	padding-block: clamp(56px, 6vw, 96px);
}
.csd-hero__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.csd-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 8px 20px 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: #fff;
}
.csd-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: var(--csd-teal);
}
.csd-hero__title {
	margin: 0;
	font-weight: 500;
	font-size: 56px;
	line-height: 1.3;
	letter-spacing: -1.12px;
	color: #fff;
}
.csd-hero__sub {
	margin: 0;
	max-width: 661px;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: -0.44px;
	color: rgba(255, 255, 255, 0.7);
}
.csd-hero__media {
	min-width: 0;
}
.csd-hero__media img {
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
   Shared light sections
   ------------------------------------------------------------------------- */
.csd-sec {
	background: #f6f6f6;
	padding-block: 100px;
}
.csd-inner {
	max-width: min(1600px, 100%);
	margin-inline: auto;
}
.csd-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 80px;
}
.csd-head--tight {
	margin-bottom: 40px;
}
.csd-eyebrow {
	position: relative;
	padding: 8px 16px;
	background: rgba(42, 217, 196, 0.2);
	border-radius: 1px;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--csd-darkteal);
	white-space: nowrap;
}
.csd-sechead {
	margin: 0;
	font-weight: 500;
	font-size: 36px;
	line-height: 1.4;
	letter-spacing: -0.72px;
	color: var(--csd-ink);
}
.csd-lead {
	margin: 0;
	max-width: min(1002px, 100%);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: -0.44px;
	color: var(--csd-ink-70);
}

/* corner dots (shared marker, restyled per context) */
.csd-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 1px;
}
.csd-dot--tl { top: 0; left: 0; }
.csd-dot--tr { top: 0; right: 0; }
.csd-dot--br { bottom: 0; right: 0; }
.csd-dot--bl { bottom: 0; left: 0; }
.csd-eyebrow .csd-dot {
	width: 16px;
	height: 16px;
	background: rgba(29, 64, 60, 0.2);
}

/* -------------------------------------------------------------------------
   BUSINESS CONTEXT
   ------------------------------------------------------------------------- */
.csd-ctx {
	display: grid;
	grid-template-columns: minmax(0, 832fr) minmax(0, 791fr);
	gap: 48px;
	align-items: center;
}
.csd-challenges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid rgba(17, 17, 17, 0.2);
}
.csd-ch {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 230px;
	padding: 24px;
	border-top: 1px solid rgba(17, 17, 17, 0.1);
	border-left: 1px solid rgba(17, 17, 17, 0.1);
}
.csd-ch:nth-child(-n + 2) { border-top: none; }
.csd-ch:nth-child(odd) { border-left: none; }
.csd-ch__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	background: var(--csd-darkteal);
	flex: none;
}
.csd-ch__icon svg {
	width: 30px;
	height: 30px;
}
.csd-ch__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.csd-ch__title {
	margin: 0;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: -0.24px;
	color: var(--csd-ink);
}
.csd-ch__desc {
	margin: 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: var(--csd-ink);
}
.csd-ctx__art {
	position: relative;
	min-width: 0;
}
.csd-ctx__art img {
	width: 100%;
	height: auto;
	display: block;
}
.csd-stat {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 21px;
	background: rgba(246, 246, 246, 0.9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(17, 17, 17, 0.1);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
	white-space: nowrap;
}
.csd-stat--a { top: 42%; left: 6%; }
.csd-stat--b { top: 42%; right: 10%; }
.csd-stat__num {
	font-weight: 500;
	font-size: 40px;
	line-height: 1.4;
	letter-spacing: -0.8px;
	color: var(--csd-ink);
}
.csd-stat__label {
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: var(--csd-ink);
}
.csd-stat .csd-dot {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: #e0e0e0;
	border: 2px solid #c7c7c7;
}
.csd-stat .csd-dot--tl { top: -9px; left: -9px; }
.csd-stat .csd-dot--tr { top: -9px; right: -9px; }
.csd-stat .csd-dot--br { bottom: -9px; right: -9px; }
.csd-stat .csd-dot--bl { bottom: -9px; left: -9px; }

/* -------------------------------------------------------------------------
   THE BUSINESS ASK
   ------------------------------------------------------------------------- */
.csd-asks {
	display: flex;
	gap: 24px;
}
.csd-ask {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 201px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	background: #fff;
	border: 1px dashed var(--csd-teal);
}
.csd-ask__num {
	font-weight: 600;
	font-size: 32px;
	line-height: 1.4;
	letter-spacing: -0.64px;
	color: var(--csd-darkteal);
}
.csd-ask__text {
	margin: 0;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.44px;
	color: var(--csd-ink);
}
.csd-ask .csd-dot {
	width: 10px;
	height: 10px;
	background: var(--csd-teal);
}
.csd-ask .csd-dot--tl { top: -1px; left: -1px; }
.csd-ask .csd-dot--tr { top: -1px; right: -1px; }
.csd-ask .csd-dot--br { bottom: -1px; right: -1px; }
.csd-ask .csd-dot--bl { bottom: -1px; left: -1px; }

/* -------------------------------------------------------------------------
   Section figures (exported illustrations)
   ------------------------------------------------------------------------- */
.csd-figure {
	margin: 40px 0 0;
	width: 100%;
}
.csd-figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}
/* Smart Engage mechanics diagram: the exported SVG with the section title
   overlaid as real text at the top of the framed diagram. */
.csd-diagram-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 44px 56px 32px;
	border: 1px solid rgba(17, 17, 17, 0.12);
}
.csd-diagram-frame .csd-diagram-img--mobile {
	display: none;
}
.csd-diagram-img {
	display: block;
	width: 100%;
	height: auto;
}
.csd-diagram-title {
	font-weight: 600;
	font-size: clamp(18px, 1.7vw, 28px);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1d403c;
	text-align: center;
}
/* Grey rounded corner accents on the frame (Figma). */
.csd-diag-corner {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: #e0e0e0;
	border: 2px solid #c7c7c7;
}
.csd-diag-corner--tl { top: -10px; left: -10px; }
.csd-diag-corner--tr { top: -10px; right: -10px; }
.csd-diag-corner--br { bottom: -10px; right: -10px; }
.csd-diag-corner--bl { bottom: -10px; left: -10px; }
.csd-figure--wave img {
	border: 1px solid rgba(17, 17, 17, 0.1);
}

/* Inline stat bar (Campaigns) */
.csd-statbar {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
	padding: 12px 21px;
	background: rgba(17, 17, 17, 0.02);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(17, 17, 17, 0.1);
}
.csd-statbar__num {
	font-weight: 500;
	font-size: 40px;
	line-height: 1.4;
	letter-spacing: -0.8px;
	color: var(--csd-ink);
}
.csd-statbar__label {
	font-weight: 400;
	font-size: 22px;
	letter-spacing: -0.44px;
	color: var(--csd-ink);
}
.csd-statbar .csd-dot {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: #e0e0e0;
	border: 2px solid #c7c7c7;
}
.csd-statbar .csd-dot--tl { top: -9px; left: -9px; }
.csd-statbar .csd-dot--tr { top: -9px; right: -9px; }
.csd-statbar .csd-dot--br { bottom: -9px; right: -9px; }
.csd-statbar .csd-dot--bl { bottom: -9px; left: -9px; }

/* -------------------------------------------------------------------------
   CAMPAIGNS — lifecycle tabs
   ------------------------------------------------------------------------- */
.csd-tabs {
	margin-top: 40px;
}
/* Stacked-stage layout is mobile-only; hidden on desktop (tabs used instead). */
.csd-stages {
	display: none;
}
.csd-tabs__bar {
	display: flex;
	border: 1px solid rgba(17, 17, 17, 0.2);
	overflow-x: auto;
	scrollbar-width: none;
}
.csd-tabs__bar::-webkit-scrollbar {
	display: none;
}
.csd-tab {
	position: relative;
	flex: 1 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 22px 20px;
	background: transparent;
	border: none;
	border-left: 1px solid rgba(17, 17, 17, 0.2);
	font-family: inherit;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: -0.36px;
	color: rgba(17, 17, 17, 0.6);
	cursor: pointer;
	white-space: nowrap;
}
.csd-tab:first-child {
	border-left: none;
}
.csd-tab__icon {
	display: grid;
	place-items: center;
	color: var(--csd-teal);
}
.csd-tab__icon svg {
	width: auto;
	height: 20px;
}
.csd-tab[aria-selected="true"] {
	background: #fff;
	color: #111;
}
.csd-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: -1px;
	height: 2px;
	background: var(--csd-teal);
}
.csd-tabs__panel {
	margin-top: 32px;
}
.csd-tabs__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}
.csd-tabs__title {
	margin: 0;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: -0.48px;
	color: var(--csd-ink);
}
.csd-tabs__desc {
	margin: 0;
	max-width: min(900px, 100%);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--csd-ink-70);
}
.csd-tabs__scroll {
	overflow: hidden;
}
/* Repeating auto-scroll carousel: two identical copies translated by -50%
   loop seamlessly. The 32px gap after each copy matches the in-image card
   gaps so the seam reads as just another gap between cards. */
.csd-tabs__marquee {
	display: flex;
	width: max-content;
	will-change: transform;
	animation-name: csd-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 26s;
}
.csd-tabs__scroll:hover .csd-tabs__marquee {
	animation-play-state: paused;
}
.csd-tabs__img {
	flex: none;
	display: block;
	height: 340px;
	width: auto;
	max-width: none;
	margin-right: 32px;
}
/* Static row (fewer than 4 cards): fit within the panel, no scrolling. */
.csd-tabs__static {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 340px;
}
@keyframes csd-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.csd-tabs__marquee { animation: none; }
}
.csd-tabs__empty {
	margin: 0;
	padding: 56px 24px;
	text-align: center;
	font-size: 16px;
	color: rgba(17, 17, 17, 0.5);
	border: 1px dashed rgba(17, 17, 17, 0.15);
	border-radius: 12px;
}

/* -------------------------------------------------------------------------
   IMPLEMENTATION CORNERSTONES
   ------------------------------------------------------------------------- */
.csd-corners {
	position: relative;
	display: grid;
	/* minmax(0,…), not plain 1fr: a bare `1fr` floors each track at its
	   min-content width, so between 769 and ~800px the five tracks demanded
	   ~796px inside a 699px container and the row ran 47px off-screen. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.csd-corners::before {
	content: "";
	position: absolute;
	top: 68px;
	left: 10%;
	right: 10%;
	height: 1px;
	background: rgba(17, 17, 17, 0.12);
}
.csd-corner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 24px;
	text-align: center;
}
.csd-corner__icon {
	width: 89px;
	height: 89px;
	object-fit: contain;
}
.csd-corner__text {
	margin: 0;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: -0.44px;
	color: var(--csd-ink);
}

/* -------------------------------------------------------------------------
   BUSINESS OUTCOMES
   ------------------------------------------------------------------------- */
.csd-outcomes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}
.csd-outcome {
	position: relative;
	flex: 1 1 300px;
	max-width: 360px;
	min-height: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 28px;
	text-align: center;
	background: rgba(42, 217, 196, 0.06);
	border: 2px solid rgba(42, 217, 196, 0.2);
	border-radius: 32px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 12px 12px rgba(0, 0, 0, 0.08);
}
.csd-outcome__dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(42, 217, 196, 0.55);
}
.csd-outcome__dot--tl { top: 20px; left: 22px; }
.csd-outcome__dot--tr { top: 20px; right: 22px; }
.csd-outcome__dot--br { bottom: 20px; right: 22px; }
.csd-outcome__dot--bl { bottom: 20px; left: 22px; }
.csd-outcome__icon {
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
}
.csd-outcome__icon img,
.csd-outcome__icon svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.csd-outcome__title {
	margin: 0;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.45;
	letter-spacing: -0.4px;
	color: var(--csd-darkteal);
}

/* -------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */
.csd-cta {
	background: #0e0e0e;
	padding-block: clamp(64px, 9vw, 140px);
}
.csd-cta__panel {
	position: relative;
	max-width: min(1600px, 100%);
	margin-inline: auto;
	padding: clamp(64px, 8vw, 120px) 40px;
	border-radius: 32px;
	/* Figma CTA artwork (node 216:14815) replaces the placeholder gradient. */
	background: #0a1614 url("../img/case-study-pag/cta-bg.webp") center / cover no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	overflow: hidden;
}
.csd-cta__title {
	margin: 0;
	max-width: min(1124px, 100%);
	font-weight: 500;
	font-size: 43px;
	line-height: 1.4;
	letter-spacing: -0.96px;
	color: rgba(255, 255, 255, 0.8);
}
.csd-cta__title span {
	color: var(--csd-teal);
}
.csd-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: #fff;
	border-radius: 2px;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.32px;
	color: #000;
	text-decoration: none;
}
.csd-cta__btn:hover {
	filter: brightness(0.94);
}

/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.csd-tabs__img {
		height: 240px;
		margin-right: 22px;
	}
	/* Static rows (fewer than 4 cards) keep full card height and swipe
	   horizontally on mobile instead of shrinking to fit the viewport. */
	.csd-tabs__scroll--static {
		overflow-x: auto;
	}
	.csd-tabs__static {
		height: 240px;
		width: auto;
		max-width: none;
		max-height: none;
	}

	/* Mobile Campaigns: drop the tab bar + single panel, stack all stages. */
	.csd-tabs__bar,
	.csd-tabs__panel {
		display: none;
	}
	.csd-stages {
		display: flex;
		flex-direction: column;
		gap: 44px;
	}
	.csd-stage__head {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
	}
	.csd-stage__head .csd-tab__icon {
		color: var(--csd-teal);
	}
	.csd-stage__title {
		margin: 0;
		font-weight: 500;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: var(--csd-ink);
	}
	.csd-stage__desc {
		margin: 0 0 16px;
		font-weight: 400;
		font-size: 16px;
		line-height: 1.5;
		color: var(--csd-ink-70);
	}
	.csd-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 40px;
	}
	.csd-hero__title {
		font-size: 30px;
		letter-spacing: -0.6px;
	}
	.csd-hero__sub {
		font-size: 15px;
	}

	.csd-sec {
		padding-block: 40px;
	}
	.csd-head {
		margin-bottom: 32px;
		gap: 16px;
	}
	.csd-eyebrow {
		font-size: 14px;
	}
	.csd-sechead {
		font-size: 24px;
		letter-spacing: -0.48px;
	}
	.csd-lead {
		font-size: 15px;
	}

	.csd-ctx {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.csd-ch {
		min-height: 0;
		gap: 16px;
		padding: 20px;
	}
	.csd-ch__title {
		font-size: 18px;
	}
	.csd-stat__num {
		font-size: 28px;
	}
	.csd-stat__label {
		font-size: 14px;
	}

	.csd-asks {
		flex-direction: column;
		gap: 16px;
	}
	.csd-ask {
		flex: 0 0 auto;
		min-height: 0;
		gap: 12px;
	}
	.csd-ask__text {
		font-size: 18px;
	}

	/* Smart Engage diagram: portrait SVG + block title on mobile. */
	.csd-diagram-frame {
		padding: 28px 18px 22px;
		gap: 22px;
	}
	.csd-diagram-frame .csd-diagram-img--desktop {
		display: none;
	}
	.csd-diagram-frame .csd-diagram-img--mobile {
		display: block;
		max-width: 340px;
		margin-inline: auto;
	}
	.csd-diagram-title {
		font-size: 16px;
	}
	.csd-diag-corner {
		width: 16px;
		height: 16px;
		border-radius: 4px;
	}
	.csd-diag-corner--tl { top: -8px; left: -8px; }
	.csd-diag-corner--tr { top: -8px; right: -8px; }
	.csd-diag-corner--br { bottom: -8px; right: -8px; }
	.csd-diag-corner--bl { bottom: -8px; left: -8px; }

	.csd-figure {
		margin-top: 24px;
	}
	.csd-figure img {
		border-radius: 8px;
	}
	.csd-tabs {
		margin-top: 24px;
	}
	.csd-tabs__bar {
		gap: 4px 20px;
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.csd-tab {
		font-size: 14px;
		padding: 10px 2px;
	}
	.csd-tabs__title {
		font-size: 18px;
	}
	.csd-tabs__desc {
		font-size: 15px;
	}
	.csd-statbar {
		gap: 10px;
		padding: 10px 16px;
	}
	.csd-statbar__num {
		font-size: 28px;
	}
	.csd-statbar__label {
		font-size: 15px;
	}
	/* Mobile: vertical timeline — icon left, text right, dashed connector. */
	.csd-corners {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.csd-corners::before {
		display: block;
		top: 48px;
		bottom: 48px;
		left: 36px;
		right: auto;
		width: 0;
		height: auto;
		background: none;
		border-left: 2px dashed rgba(42, 217, 196, 0.6);
	}
	.csd-corner {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 20px;
		padding: 12px 0;
		text-align: left;
	}
	.csd-corner__icon {
		flex: none;
		width: 72px;
		height: 72px;
	}
	.csd-corner__text {
		flex: 1;
		font-size: 16px;
		text-align: left;
	}
	.csd-outcomes {
		gap: 16px;
	}
	.csd-outcome {
		flex: 1 1 100%;
		min-height: 0;
		gap: 16px;
		padding: 32px 24px;
		border-radius: 32px;
	}
	.csd-outcome__icon {
		width: 110px;
		height: 110px;
	}
	.csd-outcome__title {
		font-size: 18px;
	}

	.csd-cta {
		padding-block: 40px;
	}
	.csd-cta__panel {
		padding: 48px 20px;
		border-radius: 20px;
	}
	.csd-cta__title {
		font-size: 26px;
		letter-spacing: -0.52px;
	}
}

/* Small phones: the challenges block is a 2-column grid whose cards carry
   60-character descriptions. Below 480 each column is ~100px of content, so it
   drops to a single column. The 2-col border scheme (top rule off for the first
   row, left rule off for the odd column) becomes "top rule off for the first
   card only". */
@media (max-width: 480px) {
	.csd-challenges {
		grid-template-columns: 1fr;
	}
	.csd-ch:nth-child(n) {
		border-left: none;
		border-top: 1px solid rgba(17, 17, 17, 0.1);
	}
	.csd-ch:first-child {
		border-top: none;
	}
}

/* =========================================================================
   FLUID DESKTOP BAND (769-1919) — see the note in blog.css.
   Max = 1920 design value (1920+ byte-identical), min = this file's own <=768
   value, coefficient = design/19.2vw. Body copy and small UI stay fixed.
   ========================================================================= */
@media (min-width: 769px) and (max-width: 1919px) {
	.csd-hero__title { font-size: clamp(30px, 2.917vw, 56px); letter-spacing: -0.02em; }
	.csd-sec { padding-block: clamp(40px, 5.208vw, 100px); }
	.csd-sechead { font-size: clamp(24px, 1.875vw, 36px); letter-spacing: -0.02em; }
	.csd-ctx { gap: clamp(32px, 2.5vw, 48px); }
	.csd-ch__title,
	.csd-tabs__title { font-size: clamp(18px, 1.25vw, 24px); }
	.csd-stat__num,
	.csd-statbar__num { font-size: clamp(28px, 2.083vw, 40px); letter-spacing: -0.02em; }
	.csd-ask__num { font-size: clamp(22px, 1.667vw, 32px); letter-spacing: -0.02em; }
	.csd-corner,
	.csd-outcomes { gap: clamp(16px, 2.083vw, 40px); }
	.csd-cta__title { font-size: clamp(26px, 2.24vw, 43px); letter-spacing: -0.0223em; }
}