/**
 * ZeltaCode Guarantee — front-end styles.
 */

.zcgu {
	--zcgu-accent: #ff8a4c;
	--zcgu-divider: #1c1f26;
	--zcgu-icon-box: 38px;
	--zcgu-seal: 104px;
	--zcgu-ring-color: rgba(255, 255, 255, 0.032);
	--zcgu-ring-gap: 74px;
	--zcgu-ring-x: 50%;
	--zcgu-ring-y: 50%;

	position: relative;
	padding: 60px 40px;
	background-color: #050507;
	overflow: hidden;
}

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

/**
 * Concentric ring backdrop. A repeating radial gradient draws the whole set in
 * one paint — cheaper than stacking a dozen positioned circles, and it scales
 * with the section instead of needing fixed sizes.
 */
.zcgu-rings-yes .zcgu::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-radial-gradient(
		circle at var(--zcgu-ring-x) var(--zcgu-ring-y),
		transparent 0,
		transparent calc(var(--zcgu-ring-gap) - 1px),
		var(--zcgu-ring-color) calc(var(--zcgu-ring-gap) - 1px),
		var(--zcgu-ring-color) var(--zcgu-ring-gap)
	);
}

.zcgu > * {
	position: relative;
	z-index: 1;
}

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

.zcgu__head {
	margin-bottom: 32px;
}

.zcgu .zcgu__eyebrow {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.8px;
	line-height: 1;
	text-transform: uppercase;
	color: #8a90a0;
}

.zcgu .zcgu__heading {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -1px;
	color: #fff;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* Panel                                                               */
/* ------------------------------------------------------------------ */

.zcgu__panel {
	border: 1px solid rgba(255, 138, 76, 0.45);
	border-radius: 3px;
	background-color: #0b0d11;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Lead block                                                          */
/* ------------------------------------------------------------------ */

.zcgu__lead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 26px;
	border-bottom: 1px solid var(--zcgu-divider);
}

.zcgu__lead-main {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	min-width: 0;
}

.zcgu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--zcgu-icon-box);
	height: var(--zcgu-icon-box);
	border: 1px solid var(--zcgu-accent);
	border-radius: 3px;
	background-color: rgba(255, 138, 76, 0.06);
	color: var(--zcgu-accent);
	font-size: 15px;
	line-height: 1;
}

.zcgu .zcgu__icon i,
.zcgu .zcgu__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

.zcgu .zcgu__icon svg {
	fill: currentColor;
}

.zcgu__lead-copy {
	min-width: 0;
}

.zcgu .zcgu__lead-title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.3px;
	color: #fff;
	overflow-wrap: break-word;
	word-break: break-word;
}

.zcgu .zcgu__lead-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: #8a90a0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Seal                                                                */
/* ------------------------------------------------------------------ */

.zcgu__seal {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--zcgu-seal);
	height: var(--zcgu-seal);
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 50%;
}

/* Second ring, inset, so the stamp reads as a seal rather than a plain circle. */
.zcgu-sealring-yes .zcgu__seal::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 50%;
	pointer-events: none;
}

.zcgu__seal-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	max-width: 76%;
	text-align: center;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.2px;
	line-height: 1.3;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
}

.zcgu__seal-line {
	display: block;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* Promise columns                                                     */
/* ------------------------------------------------------------------ */

/**
 * Column rules are drawn with a left border on every cell except the first in
 * each row. Using nth-child would break the moment the column count changes at
 * a breakpoint, so each breakpoint restates which cells start a row.
 */
.zcgu__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zcgu__point {
	min-width: 0;
	padding: 26px 26px 30px;
	border-left: 1px solid var(--zcgu-divider);
}

.zcgu__point:nth-child(3n + 1) {
	border-left: 0;
}

/* Rule between wrapped rows of cells. */
.zcgu__point:nth-child(n + 4) {
	border-top: 1px solid var(--zcgu-divider);
}

.zcgu .zcgu__num {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1;
	color: #4e5561;
}

.zcgu .zcgu__point-title {
	margin: 0 0 11px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.2px;
	color: #fff;
	overflow-wrap: break-word;
	word-break: break-word;
}

.zcgu .zcgu__point-text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: #8a90a0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Coverage note                                                       */
/* ------------------------------------------------------------------ */

.zcgu .zcgu__note {
	margin: 0;
	padding: 16px 26px;
	border-top: 1px solid var(--zcgu-divider);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--zcgu-accent);
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* Overflow safety                                                     */
/* ------------------------------------------------------------------ */

.zcgu,
.zcgu__panel,
.zcgu__lead,
.zcgu__lead-main,
.zcgu__lead-copy,
.zcgu__points,
.zcgu__point {
	min-width: 0;
}

.zcgu__panel,
.zcgu__points,
.zcgu__point {
	max-width: 100%;
}

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

@media (max-width: 1024px) {
	.zcgu {
		padding: 48px 28px;
	}

	.zcgu .zcgu__heading {
		font-size: 29px;
		letter-spacing: -0.8px;
	}

	/* Two columns: reset the 3-up rules, restate for 2-up. */
	.zcgu__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zcgu__point:nth-child(3n + 1) {
		border-left: 1px solid var(--zcgu-divider);
	}

	.zcgu__point:nth-child(2n + 1) {
		border-left: 0;
	}

	.zcgu__point:nth-child(n + 4) {
		border-top: 0;
	}

	.zcgu__point:nth-child(n + 3) {
		border-top: 1px solid var(--zcgu-divider);
	}
}

@media (max-width: 767px) {
	.zcgu {
		padding: 36px 18px;
	}

	.zcgu__head {
		margin-bottom: 24px;
	}

	.zcgu .zcgu__heading {
		font-size: 25px;
		letter-spacing: -0.5px;
	}

	/* The seal drops below the copy rather than squeezing it. */
	.zcgu__lead {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 22px 20px;
	}

	.zcgu__lead-main {
		gap: 16px;
	}

	.zcgu__seal {
		align-self: center;
	}

	/* Single column: every cell starts a row, so no left rules at all. */
	.zcgu__points {
		grid-template-columns: 1fr;
	}

	.zcgu__point {
		padding: 22px 20px 24px;
		border-left: 0 !important;
		border-top: 1px solid var(--zcgu-divider);
	}

	.zcgu__point:first-child {
		border-top: 0;
	}

	.zcgu .zcgu__note {
		padding: 14px 20px;
		letter-spacing: 1.2px;
	}
}

@media (max-width: 420px) {
	.zcgu__lead-main {
		flex-direction: column;
	}
}