/*
 * Block: cy/redesign-cpv-outcomes — overrides.
 *
 * The outcome-card checkmark badge (a Material Symbols Rounded "check"
 * rendered via h3::before in the shared capability stylesheet) was a
 * rounded square. Make it a full circle. Scoped under .cpv-outcomes to
 * win over the shared rule without touching it.
 */

.cpv-outcomes .cpv-outcome-card h3::before {
	border-radius: 50%;
}

/* Align the heading and body text to each other (a shared left edge), instead
 * of indenting the heading past the icon. The check badge sits on its own line
 * above the text. */
.cpv-outcomes .cpv-outcome-card h3 {
	display: block;
}

.cpv-outcomes .cpv-outcome-card h3::before {
	display: flex; /* own line, above the heading text */
	margin-bottom: 14px;
}

/* The card is a non-interactive <article> — hold the resting appearance on
 * hover so there's no hover animation. (The only transition the card carries
 * is the scroll-entrance one defined below.) */
.cpv-outcomes .cpv-outcome-card:hover {
	background: rgba(255, 255, 255, 0.5);
	border-color: var(--cpv-line);
	box-shadow: none;
}

/* ── Scroll-triggered entrance ─────────────────────────────────────────
 * Cards start hidden + nudged down; the entrance JS (view-script.js) reveals
 * them one by one (inline opacity/transform + staggered transition-delay) when
 * the grid scrolls into view. The hidden state and the transition live on the
 * static `.cpv-outcome-card` selector so they survive RUCSS — the reveal is
 * driven entirely from JS, not a runtime class. Motion-safe only. */
@media (prefers-reduced-motion: no-preference) {
	.cpv-outcomes .cpv-outcome-card {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* ── More vertical breathing room on the section ───────────────────────── */
.cpv-outcomes.redesign-capability-outcomes-block {
	padding-top: 104px;
	padding-bottom: 104px;
}

/* ── Dark-sand text instead of navy + unified section-title scale ───────── */
.cpv-outcomes .cpv-section-heading {
	color: var(--color-sand-800, #2d2b24);
	/* Page-wide canonical section-title size (was clamp(38px, …, 48px)). */
	font-size: clamp(30px, 3.2vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.cpv-outcomes .cpv-outcome-card h3 {
	color: var(--color-sand-800, #2d2b24);
}

.cpv-outcomes .cpv-outcome-card p {
	color: var(--color-sand-700, #3c3a30);
}

/* ── Dot-grid canvas ───────────────────────────────────────────────────
 * A subtle uniform dot pattern behind the content to liven up the section.
 * Adapted from the fe-prototypes `.dot-grid` pattern, tuned to the sand
 * palette and masked so it fades in below the heading and out at the foot. */
.cpv-outcomes {
	position: relative;
	overflow: hidden;
	/* Subtle hairline divider across the full width of the section foot —
	   FAQ-divider tone (sand-300) at reduced opacity so a full-bleed line
	   reads as light as the FAQ's short contained dividers. */
	border-bottom: 1px solid rgba(216, 213, 204, 0.5);
}

.cpv-outcomes::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(45, 43, 36, 0.12) 1.3px, transparent 1.3px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.6) 140px, #000 320px, #000 calc(100% - 200px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.6) 140px, #000 320px, #000 calc(100% - 200px), transparent 100%);
}

/* Soft blue radial glow — ambient accent that ties in the blue check badges.
 * Adapted from the fe-prototypes corner-glow gradient; static, not hover. */
.cpv-outcomes::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 70% 55% at 92% 6%, rgba(0, 111, 231, 0.05), transparent 60%),
		radial-gradient(ellipse 60% 50% at 6% 100%, rgba(0, 111, 231, 0.035), transparent 60%);
}

/* Keep content above the pattern + glow. */
.cpv-outcomes .cpv-section-inner {
	position: relative;
	z-index: 1;
}

@media(max-width: 720px) {
	.cpv-outcomes .cpv-section-inner {
		width: 100%;
	}
}