/* Key figures — five stat cards in one bordered strip. */

/*
 * Flush on top: the 100px between the hero panel (ends y=799) and the first
 * card (starts y=899) belongs to the hero band, so its gradient can finish on
 * the page background. See the band note in sections/page-hero.css.
 */
.section--flush-top { padding-top: 0; }

.figures__row {
	display: grid;
	grid-template-columns: 1fr;
}

.figure {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 26px;
	border: 1px solid var(--color-neutral-4);
	border-bottom-width: 0;
}

.figure:first-child {
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
}

.figure:last-child {
	border-bottom-width: 1px;
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}

.figure--tinted { background: #eaedf3; }

.figure__value {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 36px;
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

.figure__value--accent { color: var(--color-accent); }

.figure__label {
	margin-top: var(--space-5);
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: -0.32px;
	word-break: break-word;
}

@media (min-width: 1024px) {
	.figures__row { grid-template-columns: repeat(5, 1fr); }

	.figure {
		height: 239px;
		border-width: 1px 1px 1px 0;
		border-radius: 0;
	}

	.figure:first-child {
		border-left-width: 1px;
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	}

	.figure:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

	.figure__value { font-size: var(--h2-size); }

	/* Figma pins the label to the bottom of a fixed-height card. */
	.figure__label { margin-top: auto; }
}