/**
 * ZeltaCode Facts — front-end styles.
 *
 * Type stack, as specified:
 *   eyebrow  Space Grotesk 16px
 *   heading  Inter Tight 48px / 600
 *   the rest Inter
 *
 * Declared here as well as in the widget's typography defaults, so the section
 * still reads correctly if a site strips Elementor's generated CSS or the panel
 * values are reset.
 */

.zcfa {
	--zcfa-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--zcfa-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--zcfa-font-label: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--zcfa-line: rgba( 255, 255, 255, 0.11 );
	--zcfa-cell-bg: #0c0c0e;

	background: #000;
	font-family: var( --zcfa-font-body );
}

.zcfa *,
.zcfa *::before,
.zcfa *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Heading block                                                       */
/* ------------------------------------------------------------------ */

.zcfa .zcfa__eyebrow {
	margin: 0 0 16px;
	font-family: var( --zcfa-font-label );
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1.8px;
	line-height: 1;
	text-transform: uppercase;
	color: #5e9eff;
}

.zcfa .zcfa__heading {
	margin: 0;
	font-family: var( --zcfa-font-display );
	font-size: 48px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -1.4px;
	color: #ededed;
	overflow-wrap: break-word;
}

.zcfa .zcfa__sub {
	margin: 18px 0 0;
	max-width: 62ch;
	font-family: var( --zcfa-font-body );
	font-size: 16px;
	line-height: 1.6;
	color: #8a8a8a;
}

/* ------------------------------------------------------------------ */
/* The strip                                                           */
/* ------------------------------------------------------------------ */

/**
 * The hairlines between cells are the grid's own 1px gaps showing the
 * container colour through, rather than borders on each cell. That way the
 * dividers stay correct at any column count and on any wrapped row — no
 * :last-child border resets, and no doubled line where rows meet.
 */
.zcfa__grid {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 1px;
	margin-top: 44px;
	border: 1px solid var( --zcfa-line );
	border-radius: 0;
	background-color: var( --zcfa-line );
	overflow: hidden;
}

.zcfa__cell {
	padding: 28px 24px;
	background-color: var( --zcfa-cell-bg );
}

/* ------------------------------------------------------------------ */
/* Cell text                                                           */
/* ------------------------------------------------------------------ */

.zcfa .zcfa__label {
	display: block;
	font-family: var( --zcfa-font-body );
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1.4px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #4e4e4e;
}

.zcfa .zcfa__value {
	margin: 10px 0 0;
	font-family: var( --zcfa-font-body );
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.4px;
	color: #ededed;
}

.zcfa .zcfa__note {
	margin: 8px 0 0;
	font-family: var( --zcfa-font-body );
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: #4e4e4e;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.zcfa__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.zcfa .zcfa__heading {
		font-size: 38px;
	}
}

@media ( max-width: 767px ) {
	.zcfa__grid {
		grid-template-columns: 1fr;
	}

	.zcfa .zcfa__heading {
		font-size: 30px;
		letter-spacing: -1px;
	}

	.zcfa .zcfa__eyebrow {
		font-size: 14px;
	}
}