/**
 * Home page: the free Business Growth Analyzer band (SaifTec Growth Analyzer Promo widget).
 *
 * A white card on the section's lavender ground, between the certification badges and "What we
 * do": prominent, but quieter than the hero. Type and colour follow the page: Heebo 500 navy
 * headings, Montserrat body in #545470, navy and cyan accents. Contrast: the button is white text
 * on navy (16:1); the small eyebrow uses the darker teal #06789F (5:1 on white) rather than the
 * page's #0AA3D6, which is too light for small text on white.
 *
 * @package Astra Child
 */

.gap {
	--gap-navy: #170D3D;
	--gap-ink: #170D3D;
	--gap-body: #545470;
	--gap-teal: #0AA3D6;
	--gap-teal-ink: #06789F;
	--gap-purple: #3A0CA3;
	--gap-line: #E3E6F5;
	--gap-tile: #EDEFFF;

	position: relative;
	display: grid;
	gap: 28px;
	/* The certification row above already ends with generous space; this evens the gaps around the card. */
	margin: 0 0 16px;
	padding: 28px 22px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(10, 163, 214, .10) 0%, rgba(10, 163, 214, 0) 55%),
		#fff;
	border: 1px solid var(--gap-line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(23, 13, 61, .05), 0 14px 40px rgba(23, 13, 61, .08);
	text-align: left;
}
/* A thin brand accent along the top edge. */
.gap::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--gap-teal), var(--gap-purple));
}

.gap__eyebrow {
	margin: 0 0 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gap-teal-ink);
}
.gap__title {
	margin: 0 0 14px;
	font-family: 'Heebo', sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -.01em;
	color: var(--gap-ink);
}
.gap__desc {
	margin: 0 0 22px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--gap-body);
}

.gap__action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gap__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 24px;
	border-radius: 8px;
	background: var(--gap-navy);
	color: #fff;
	font-family: 'Heebo', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.gap__cta:hover { background: var(--gap-purple); color: #fff; }
.gap__cta:focus-visible { outline: 3px solid var(--gap-teal); outline-offset: 3px; color: #fff; }
.gap__cta-arrow { width: 18px; height: 18px; flex: none; color: var(--gap-teal); }
.gap__note { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--gap-body); }

.gap__benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gap__benefit {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--gap-line);
	border-radius: 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--gap-ink);
}
.gap__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--gap-tile);
	color: var(--gap-purple);
}
.gap__icon svg { width: 22px; height: 22px; }

/* Phones: the button spans the card so the label never wraps awkwardly. */
@media (max-width: 599px) {
	.gap__action { align-items: stretch; }
	.gap__cta { width: 100%; }
	.gap__note { text-align: center; }
	.gap__benefit { gap: 12px; padding: 12px; }
	.gap__icon { width: 40px; height: 40px; border-radius: 10px; }
}
@media (min-width: 768px) {
	.gap { padding: 36px; margin-bottom: 24px; }
	.gap__title { font-size: 34px; }
}
@media (min-width: 1024px) {
	.gap {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: 48px;
		padding: 48px 52px;
	}
	.gap__title { font-size: 38px; }
	.gap__desc { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .gap__cta { transition: none; } }