.widgets--success-hero {
	padding: 12rem var(--pd) 4rem;
	background: var(--gr1i);
	color: var(--g6);

	> .intro {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: center;
	}

	.copy {
		min-width: 0;
		max-width: 42rem;
	}

	.eyebrow {
		margin: 0 0 1.25rem;
		color: var(--c1);
		font-size: 0.85rem;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	h1 {
		margin: 0 0 1.5rem;
		font-family: var(--font-header);
		font-size: 3rem;
		font-weight: 800;
		line-height: 1.12;
		text-wrap: balance;
		overflow-wrap: anywhere;
	}

	.text {
		max-width: 36rem;
		font-size: 1.1rem;
		line-height: 1.65;
		color: var(--g4);
	}

	.text > :first-child,
	.note > :first-child { margin-top: 0; }
	.text > :last-child,
	.note > :last-child { margin-bottom: 0; }

	.action {
		margin-top: 2rem;
		a {
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			gap: 2rem;
			max-width: 100%;
			min-height: 3.25rem;
			padding: 1rem 1.5rem;
			border-radius: 2rem;
			background: var(--c1);
			color: var(--bg);
			font-size: 0.95rem;
			font-weight: 700;
			line-height: 1.4;
			text-decoration: none;
			&:hover { background: var(--c2); }
			&:focus-visible { outline: 0.2rem solid var(--c3); outline-offset: 0.25rem; }
			&[href=""] { display: none; }
			> span { font-size: 1.4rem; }
		}
	}

	.visual {
		position: relative;
		min-width: 0;
		margin: 0;
		border-radius: 1.5rem 1.5rem 5rem 1.5rem;
		overflow: hidden;
		background: var(--c7);
		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
		figcaption {
			position: absolute;
			inset: auto 2rem 2rem;
			width: fit-content;
			max-width: calc(100% - 4rem);
			padding: 0.75rem 1rem;
			border-radius: 0.75rem;
			background: var(--bg);
			color: var(--c2);
			font-size: 0.85rem;
			font-weight: 700;
			line-height: 1.4;
			&:empty { display: none; }
		}
	}

	> .results { margin-top: 3rem; }
	.context {
		margin: 0 0 1.25rem;
		font-size: 0.95rem;
		font-weight: 700;
		line-height: 1.5;
		color: var(--g4);
	}
	.metrics {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: 0;
		border: var(--px) solid var(--c6);
		border-radius: 1.25rem;
		overflow: hidden;
		background: var(--bg);
	}
	.metric {
		min-width: 0;
		padding: 1.75rem 2rem;
		color: var(--c2);
		& + .metric { border-left: var(--px) solid var(--c6); }
		&.observed { background: var(--c2); color: var(--bg); }
		dt { font-size: 1rem; font-weight: 700; line-height: 1.5; }
		dd { margin: 0; }
		.value {
			margin-block: 0.5rem 0.75rem;
			font-size: 3.75rem;
			font-weight: 800;
			line-height: 1.15;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}
		.kind { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; line-height: 1.5; }
		.dot { flex: 0 0 0.5rem; height: 0.5rem; border: var(--px) solid currentColor; border-radius: 50%; }
		&.observed .dot { background: currentColor; }
	}
	.note {
		max-width: 70rem;
		margin-top: 1.25rem;
		font-size: 0.8rem;
		line-height: 1.65;
		color: var(--g4);
	}

	@media (max-width: 1279px) {
		> .intro { gap: 2rem; }
		h1 { font-size: 2.6rem; }
		.metric { padding: 1.5rem; }
	}
	@media (max-width: 991px) {
		padding-top: 8rem;
		> .intro { grid-template-columns: minmax(0, 1fr); }
		.copy { max-width: 44rem; }
		.visual {
			img { aspect-ratio: 16 / 9; }
		}
		.metric .value { font-size: 3rem; }
	}
	@media (max-width: 767px) {
		padding-bottom: 3rem;
		h1 { font-size: 2.25rem; }
		.text { font-size: 1rem; }
		.metric { padding: 1.25rem 1rem; }
		.metric .value { font-size: 2.4rem; }
	}
	@media (max-width: 540px) {
		padding-inline: 1rem;
		h1 { font-size: 2rem; }
		.visual {
			border-radius: 1rem 1rem 3rem 1rem;
			img { aspect-ratio: 4 / 3; }
			figcaption { inset: auto 1rem 1rem; max-width: calc(100% - 2rem); }
		}
		> .results { margin-top: 2rem; }
		.metrics { grid-template-columns: minmax(0, 1fr); }
		.metric {
			padding: 1.25rem 1.5rem;
			& + .metric { border-left: none; border-top: var(--px) solid var(--c6); }
			.value { font-size: 3.25rem; }
		}
		.action a { width: 100%; }
	}
}