/**
 * Graphic / Animation block — section shell around a product stage graphic.
 */

.fact-graphic-section {
	position: relative;
	padding: clamp(56px, 7vw, 96px) 0;
	overflow: hidden;
	color: #1d1d1f;
	background: #f7f7f5;
}

.fact-graphic-section--white {
	background: #fff;
}

.fact-graphic-section--none {
	background: transparent;
}

.fact-graphic-section--grid {
	background: #fafaf8;
}

.fact-graphic-section--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(42, 42, 42, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(42, 42, 42, 0.035) 1px, transparent 1px),
		radial-gradient(circle at 50% 55%, rgba(255, 43, 28, 0.07), transparent 42%);
	background-size: 72px 72px, 72px 72px, auto;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 40%, transparent 100%);
}

.fact-graphic-section__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: clamp(28px, 4vw, 44px);
}

.fact-graphic-section__header {
	display: grid;
	gap: 14px;
	justify-items: center;
	max-width: 760px;
	text-align: center;
}

.fact-graphic-section__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #6b6b68;
	font: 600 11px/1 var(--font-sans, Inter, system-ui, sans-serif);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fact-graphic-section__kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--signal, #e31b23);
	box-shadow: 0 0 0 4px rgba(227, 27, 35, 0.12);
}

.fact-graphic-section__title {
	margin: 0;
	color: #1d1d1f;
	font: 600 clamp(30px, 4vw, 48px) / 1.05 var(--font-display, Inter, system-ui, sans-serif);
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.fact-graphic-section__stage {
	width: 100%;
	margin-inline: auto;
}

.fact-graphic-section__stage--narrow {
	max-width: 600px;
}

.fact-graphic-section__stage--medium {
	max-width: 860px;
}

.fact-graphic-section__stage--wide {
	max-width: 1200px;
}

.fact-graphic-section__stage .fact-graphic--radial {
	max-width: 960px;
	margin-inline: auto;
}

.fact-graphic-section__caption {
	max-width: 640px;
	margin: 0;
	color: #6b6b68;
	font: 500 15px/1.5 var(--font-sans, Inter, system-ui, sans-serif);
	text-align: center;
}