/* ============================================================
   Assessment Promo block (Step 0 "Launch Website" design)
   ============================================================ */
.ap {
	position: relative;
	padding: 3rem 0 4rem;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ap__card {
	max-width: 70rem;
	margin: 0 auto;
	--ap-card-pad-x: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 3.5rem) var(--ap-card-pad-x) clamp(2rem, 4vw, 3rem);
	background: #faf8f1;
	border-radius: 1.25rem;
	box-shadow: 0 20px 40px rgba(34, 31, 31, 0.12);
}

.ap__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/* Left column */
.ap__heading-box {
	display: block;
	width: fit-content;
	max-width: calc(100% + var(--ap-card-pad-x));
	margin-left: calc(-1 * var(--ap-card-pad-x));
	margin-bottom: 1.75rem;
	padding: 0.85rem 1.5rem 0.85rem calc(0.85rem + var(--ap-card-pad-x));
	background: #d4e5ef;
}

.ap__heading {
	margin: 0;
	font-weight: 800;
	line-height: 1.1;
	font-size: clamp(1.6rem, 3.4vw, 2.7rem);
}

.ap__heading-1,
.ap__heading-2 {
	display: block;
}

.ap__heading-1 {
	font-weight: 400;
	color: #92455c;
}

.ap__heading-2 {
	color: #92455c;
}

.ap__subhead {
	margin: 0 0 0.85rem;
	font-weight: 700;
	font-size: clamp(1.2rem, 2.2vw, 1.95rem);
	color: #7ea3cb;
}

.ap__desc {
	margin: 0;
	max-width: 26rem;
	font-size: clamp(1rem, 1.4vw, 1.375rem);
	line-height: 1.45;
	color: #221f1f;
}

/* Right column: tree with the six factor labels */
.ap__right {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ap__tree {
	position: relative;
	width: 100%;
	max-width: 26rem;
	min-height: 17rem;
	margin: 0 auto;
	padding: 2rem 0 2.75rem;
}

.ap__tree-art {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.5rem 0 1rem;
	overflow: visible;
}

.ap__tree-svg {
	display: block;
	width: 78%;
	max-width: 16rem;
	height: auto;
	overflow: visible;
}

.ap__label {
	position: absolute;
	font-weight: 700;
	font-size: clamp(0.8rem, 1.4vw, 1.4rem);
	color: #b69249;
	white-space: nowrap;
}

.ap__label--trust {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.ap__label--access {
	top: 34%;
	left: 0;
}

.ap__label--respect {
	top: 34%;
	right: 0;
}

.ap__label--value {
	top: 70%;
	left: 2%;
}

.ap__label--loyalty {
	top: 70%;
	right: 2%;
}

.ap__label--eva {
	bottom: -1.25rem;
	left: 50%;
	transform: translateX(-50%);
}

/* Footer: footnote + CTA */
.ap__footer {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
}

.ap__footnote {
	margin: 0 0 1.25rem;
	font-size: clamp(1rem, 1.5vw, 1.4rem);
	color: #221f1f;
}

.ap__hl {
	font-weight: 700;
	color: #b69249;
}

.ap__btn {
	display: inline-block;
	min-width: min(100%, 28rem);
	padding: 0.85rem 2rem;
	font-weight: 700;
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: #2084c5;
	border-radius: 0.5rem;
	transition: background 0.2s ease;
}

.ap__btn:hover,
.ap__btn:focus-visible {
	background: #1b6ea4;
	color: #fff;
}

@media (max-width: 768px) {
	.ap__grid {
		grid-template-columns: 1fr;
	}
	.ap__right {
		order: -1;
	}
	.ap__tree {
		max-width: 20rem;
		margin: 0 auto;
	}
	.ap__desc {
		max-width: none;
	}
}

/* ============================================================
   Article variant: maroon card (Step 0 "Articles" design),
   auto-appended to the end of single blog posts.
   ============================================================ */
.ap--article {
	background-color: #fbfcf8;
	padding-left: clamp(1rem, 4vw, 2.5rem);
	padding-right: clamp(1rem, 4vw, 2.5rem);
}

/* No outer .container in the appended markup; center the card in the
   post content column instead. */
.ap--article .ap__card {
	background: #92455c;
	box-shadow: 0 20px 40px rgba(34, 31, 31, 0.18);
}

.ap--article .ap__heading-box {
	background: #faf7f1;
}

.ap--article .ap__heading-1 {
	color: #92455c;
}

.ap--article .ap__heading-2,
.ap--article .ap__subhead {
	color: #7ea3cb;
}

.ap--article .ap__desc,
.ap--article .ap__footnote {
	color: #fbfcf8;
}

.ap--article .ap__hl {
	color: #e1db82;
}

.ap--article .ap__label {
	color: #e1db82;
}

.ap--article .ap-tree {
	fill: #a29197;
}

.ap--article .ap__btn {
	background: #7ea3cb;
	color: #fff;
}

.ap--article .ap__btn:hover,
.ap--article .ap__btn:focus-visible {
	background: #6b93bf;
	color: #fff;
}

/*
 * Featured In sits directly under the hero and uses negative/overlap layout
 * (translate + absolute) to straddle the hero bottom. When the promo block
 * is inserted between them, reset that overlap so logos flow normally below.
 */
.ap + .client-logos-absolute {
	padding-bottom: 0 !important;
}

.ap + .client-logos-absolute > .container > .relative {
	transform: none;
}

.ap + .client-logos-absolute > .container > .relative > .absolute {
	position: relative;
	top: auto;
	width: 100%;
}