/* ==========================================================================
   Studio Variant — Capabilities index layer (.cp-*)
   ========================================================================== */

.cp-hero {
	position: relative;
	overflow: hidden;
	padding: var(--sv-10) 0 var(--sv-8);
	background: radial-gradient(110% 80% at 14% 10%, rgba(140, 155, 163, 0.08) 0%, transparent 60%),
		var(--sv-bg);
}
.cp-hero-inner {
	position: relative;
	max-width: 60ch;
}
.cp-hero h1 {
	margin: var(--sv-5) 0 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-xl);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: var(--sv-text);
}
.cp-hero h1 span {
	display: block;
}
.cp-hero h1 span:nth-child(2) {
	color: var(--sv-mist-200);
}
.cp-lede {
	margin: var(--sv-5) 0 0;
	color: var(--sv-text-secondary);
}

.cp-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sv-3);
}
.cp-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sv-5);
	padding: var(--sv-5) clamp(var(--sv-4), 3vw, var(--sv-6));
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	text-decoration: none;
	transition: border-color var(--sv-base) var(--sv-ease-precision);
}
.cp-card:hover {
	border-color: var(--sv-titanium-line);
}
.cp-card:hover .sc-next-arrow {
	transform: translateX(3px);
	border-color: currentColor;
}
.cp-index {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	color: var(--sv-brass);
}
.cp-body {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.cp-title {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	color: var(--sv-text);
}
.cp-desc {
	font-size: var(--sv-body-s);
	line-height: 1.55;
	color: var(--sv-text-secondary);
	max-width: 70ch;
}

.cp-close {
	margin-top: var(--sv-8);
	padding-top: var(--sv-6);
	border-top: 1px solid var(--sv-border);
	display: grid;
	gap: var(--sv-5);
	grid-template-columns: minmax(0, 1.2fr) auto;
	align-items: center;
}
.cp-close .sv-body-l {
	margin: 0;
	max-width: 52ch;
	color: var(--sv-text-secondary);
}
.cp-close-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
}

@media (max-width: 760px) {
	.cp-hero {
		padding: var(--sv-8) 0 var(--sv-7);
	}
	.cp-card {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.cp-card .sc-next-arrow {
		display: none;
	}
	.cp-close {
		grid-template-columns: 1fr;
	}
	.cp-close-actions .sv-btn {
		flex: 1 1 auto;
	}
}