/*
 * capabilities-section.css
*/
.c-capabilities-section__header{
	max-width:1000px;
	margin-left:auto !important;
	margin-right:auto !important;
	padding:84px 0 34px;
}
.c-capabilities-section__header h2{
	margin:30px 0;
	font-size:var(--heading-h1);
	font-weight: var(--font-weight-regular);
	line-height:120%;
	letter-spacing:var(--heading-letter-spacing);
}

.c-capabilities-section__header p{
	color: var(--color-gray-text);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-md);
	line-height: 180%;
}

/* h2.c-capabilities-header__title Platform page: "Guidepoint360 Capabilities" title block
 * (eyebrow + h2 + subtitle) above the callout cards grid.
 * Centered per feedback; mobile padding reduced to 16px.
 * Added 2026-08-25.
 */

@media (max-width: 767px) {
	.c-capabilities-title-block {
		padding: 16px !important;
	}
}


/* ================================================================
   "Guidepoint 360" callout cards row (APIs & MCP, Guidepoint
   Library, Guidepoint Network, Mobile App, AskGP).
   Rebuilt to match Figma: single row of 5 uniform text-only cards
   (no icons/logo images) on a yellow background, with a plain text
   "Guidepoint" wordmark above instead of the old circular graphic.
   Added 2026-08-25.
   ================================================================ */

.c-callout-cards {
	background-color: var(--color-yellow-bg);
	padding: 60px 80px;
}

.c-callout-cards__logo {
	text-align: center;
	margin: 0 0 40px;
}

.c-callout-cards__logo img {
	width: 401px;
	height: 85px;
	object-fit: contain;
}

@media (max-width: 767px) {
	.c-callout-cards__logo img {
		width: 330px;
		height: 57px;
	}
}

.c-callout-cards__grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 24px;
}

.c-callout-card {
	width: 228px;
	flex: 0 0 228px;
	background-color: var(--color-white);
	box-sizing: border-box;
	padding: 35px 0px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
}

.c-callout-card__title {
	font-family: var(--font-primary) !important;
	font-weight: var(--font-weight-semibold) !important;
	font-size: 13.5px !important;
	color: var(--color-off-black-text) !important;
	margin: 0 0 8px !important;
	padding-bottom: 8px;
	border-bottom: 1px solid #B4B4B4;
}

.c-callout-card__body {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 9px;
	line-height: 150%;
	color: #878C91;
	margin: 0 0 16px;
	height: 68px;
	overflow: hidden;
}

/* .c-callout-card__link now also carries c-icon-card__button
   (the same reusable "Learn More" pill button used on Services),
   scaled down to fit inside the much smaller 228x234px card here
   (Services' cards are larger). Same look, smaller footprint. */
.c-callout-card__link.c-icon-card__button,
.c-callout-card__link.c-icon-card__button:hover {
	align-self: flex-start;
	padding: 12px 24px !important;
	font-size: 11px !important;
}
.c-callout-card__link.c-icon-card__button .vcex-button-inner {
	gap: 31px !important;
}

@media (max-width: 1150px) {
	.c-callout-cards__grid {
		flex-wrap: wrap;
	}
	.c-callout-cards {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.c-callout-card {
		flex-basis: auto;
		padding-top: 13px !important;
		padding-bottom: 13px !important;
	}
}

@media (max-width: 767px) {
	.c-callout-cards {
		padding: 16px !important;
	}
	.c-callout-card__body {
		font-size: 14px;
	}

	.c-callout-cards__grid {
		flex-direction: column;
	}
	.c-callout-card {
		width: 100%;
	}
}