/* The closing note at the top of the archive.
 *
 * This replaced the original acquisition banner. It is the first and most
 * important thing on the page, so it gets room: generous whitespace, one
 * headline, one sentence of substance, the two destinations, a signature.
 * Everything below it is the preserved marketing site.
 *
 * Uses the Webflow design tokens (--green-*, Akkurat, Ariata) with fallbacks,
 * so it holds together even if treasury-marketing.css fails to load.
 */

.closing {
	background-color: var(--green-100, #e8f2f0);
	border-bottom: 1px solid var(--green-200, #a4c7be);
	padding: 88px 24px 72px;
	font-family: Akkurat, "Akkurat Fallback", sans-serif;
}

.closing-inner {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.closing-title {
	color: var(--green-800, #1c5c50);
	font-family: "Ariata Display (Demo)", "Ariata Fallback", Georgia, serif;
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}

.closing-lede {
	color: var(--green-800, #1c5c50);
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.55;
	margin: 0 0 40px;
	opacity: 0.85;
}

.closing-note {
	color: var(--green-600, #386f65);
	font-size: 15px;
	line-height: 1.6;
	margin: 32px 0 0;
}

.closing-link {
	color: var(--green-600, #386f65);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 1px;
}

.closing-link:hover {
	opacity: 0.7;
}

.closing-sig {
	color: var(--green-600, #386f65);
	font-size: 15px;
	font-weight: 700;
	margin: 20px 0 0;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   The two destinations. Utility, not decoration — a former member landing here
   should be one glance from the thing they came for.
   --------------------------------------------------------------------------- */

.wayfinding {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	text-align: left;
}

.wayfinding-card {
	display: block;
	background: #fff;
	border: 1px solid var(--green-200, #a4c7be);
	border-radius: 10px;
	padding: 18px 20px;
	text-decoration: none;
	transition:
		border-color 0.15s ease,
		transform 0.15s ease;
}

.wayfinding-card:hover {
	border-color: var(--green-600, #386f65);
	transform: translateY(-1px);
}

.wayfinding-label {
	display: block;
	color: var(--gray-500, #6b7280);
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 5px;
}

.wayfinding-dest {
	display: block;
	color: var(--green-800, #1c5c50);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 600px) {
	.closing {
		padding: 56px 20px 48px;
	}

	.wayfinding {
		grid-template-columns: 1fr;
	}
}