/* Artmark capability-page sections:
     .am-glance — "…at a Glance": cream section, four white list cards.
     .am-req    — "Built for Demanding …": dark section, row of check cards.
   Colors/typography are overridable via widget controls. */

/* ================================================================ */
/* Capability Glance                                                 */
/* ================================================================ */

.am-glance {
	width: 100%;
	background-color: #faf5ee;
}

.am-glance__inner {
	width: 100%;
	margin: 0 auto;
}

.am-glance__labelrow {
	display: flex;
	justify-content: flex-start;
}

.am-glance__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1;
	color: #1f2937;
}

.am-glance__plus {
	font-size: 15px;
	line-height: 1;
}

.am-glance__title {
	margin: 0 0 48px;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #020713;
}

.am-glance__grid {
	--am-gl-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--am-gl-cols), minmax(0, 1fr));
	column-gap: 26px;
	row-gap: 26px;
	align-items: stretch;
}

.am-glance__card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background-color: #ffffff;
	border: 1px solid #e5e0d6;
}

.am-glance__cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.am-glance__cardtitle {
	margin: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: -0.01em;
	color: #020713;
}

.am-glance__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	background-color: #d6eafb;
	color: #0e1a1e;
}

.am-glance__icon img,
.am-glance__icon svg {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.am-glance__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-glance__list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid #ece7dd;
	font-size: 15px;
	line-height: 22px;
	color: #1f2937;
}

/* The short rule that stands in for a bullet. Hidden unless the widget's
   "Show Dash" switch is on, so the toggle is an explicit opt-in rather than
   relying on an empty prefix-class token. The margin centres it against the
   first line of text rather than sitting it on the baseline. */
.am-glance__list li::before {
	content: "";
	display: none;
	flex: 0 0 auto;
	width: 14px;
	height: 1px;
	margin-top: 10px;
	background-color: #9ca3af;
}

.am-glance-dash-yes .am-glance__list li::before {
	display: block;
}

@media (max-width: 1024px) {
	.am-glance__grid {
		--am-gl-cols: 2;
	}

	.am-glance__title {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.am-glance__grid {
		--am-gl-cols: 1;
	}

	.am-glance__title {
		font-size: 27px;
	}

	.am-glance__card {
		padding: 22px;
	}

	/* One column on a phone: the title and the icon tile side by side left the
	   title wrapping into a narrow strip with the tile stranded against the
	   right edge. Stacked reads far better, and Card Head Layout can put them
	   back in a row. */
	.am-glance-cardhead-stack .am-glance__cardhead {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.am-glance-cardhead-stack .am-glance__cardhead .am-glance__icon {
		order: -1;
	}
}

/* ================================================================ */
/* Requirement Cards                                                 */
/* ================================================================ */

.am-req {
	width: 100%;
	background-color: #101a1f;
}

.am-req__inner {
	width: 100%;
	margin: 0 auto;
}

.am-req__labelrow {
	display: flex;
	justify-content: flex-start;
}

.am-req__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1;
	color: #e8eaed;
}

.am-req__plus {
	font-size: 15px;
	line-height: 1;
}

.am-req__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 64px;
	margin-bottom: 52px;
}

.am-req__headleft {
	min-width: 0;
}

.am-req__title {
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.am-req__title-alt {
	color: #8fc7ee;
}

.am-req__intro {
	flex: 0 1 auto;
	margin: 0;
	max-width: 540px;
	font-size: 15px;
	line-height: 26px;
	color: #b9bec6;
}

.am-req__grid {
	--am-req-cols: 5;
	display: grid;
	grid-template-columns: repeat(var(--am-req-cols), minmax(0, 1fr));
	column-gap: 25px;
	row-gap: 25px;
}

.am-req__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 180px;
	padding: 26px;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

a.am-req__card:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.am-req__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin-bottom: 22px;
	background-color: #d6eafb;
	color: #0e5f96;
}

.am-req__icon img,
.am-req__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.am-req__cardtitle {
	margin: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.am-req__carddesc {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 21px;
	color: #b9bec6;
}

@media (max-width: 1200px) {
	.am-req__grid {
		--am-req-cols: 3;
	}
}

@media (max-width: 1024px) {
	.am-req__head {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 40px;
	}

	.am-req__intro {
		max-width: 100%;
	}

	.am-req__title {
		font-size: 36px;
	}

	.am-req__grid {
		--am-req-cols: 2;
	}
}

@media (max-width: 767px) {
	.am-req__title {
		font-size: 28px;
	}

	.am-req__grid {
		--am-req-cols: 1;
	}

	.am-req__card {
		min-height: 0;
		padding: 22px;
	}
}