/* Homepage cards, 26 October 2026.

   Taken from the Iconly "10 UI ideas to steal" slides the owner sent: cards that sit on the page
   with a soft gradient and depth instead of hairline columns, and small pill labels that name
   what each card is. It applies to the two card bands on the homepage only (the Maplewood
   promise and the three firsts, both .mcis-first), so no other page changes. The pill label also
   replaces the grey label that failed Lighthouse's contrast check (3.2:1 against 4.5:1 needed). */
.mcis-firsts-grid {
	gap: 24px;
	border-top: 0;
}

.mcis-first,
.mcis-first + .mcis-first {
	padding: 32px 30px 28px;
	border: 1px solid rgba(20, 24, 60, 0.07);
	border-radius: 28px;
	background: linear-gradient(165deg, #ffffff 0%, #f4f5fb 100%);
	box-shadow: 0 18px 40px -26px rgba(20, 24, 60, 0.35), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mcis-first:hover,
.mcis-first:focus-visible {
	background: linear-gradient(165deg, #ffffff 0%, #f4f5fb 100%);
	transform: translateY(-4px);
	box-shadow: 0 26px 48px -26px rgba(20, 24, 60, 0.45), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.mcis-first-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(236, 32, 39, 0.09);
	color: #b3141a;
	font-size: 12px;
	font-weight: 600;
}

.mcis-first h3 {
	margin-top: 18px;
}

@media only screen and (max-width: 991px) {
	.mcis-firsts-grid {
		gap: 16px;
	}

	.mcis-first,
	.mcis-first + .mcis-first {
		padding: 26px 22px 24px;
		border-left: 1px solid rgba(20, 24, 60, 0.07);
		border-top: 1px solid rgba(20, 24, 60, 0.07);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcis-first,
	.mcis-first:hover,
	.mcis-first:focus-visible {
		transition: none;
		transform: none;
	}
}

/* ---- the strip of numbers: dark glass cards with large figures (the "visualize your numbers" and dark mode slides) ----
   Same strip, same movement and the same figures; only the surface changes, from a flat red band to a
   dark one with a card per figure. The accent stays on the "1st" badges. */
.mcis-home-firsts {
	background: linear-gradient(135deg, #1b1e2b 0%, #0d0f16 100%);
}

.mcis-home-firsts-track li {
	margin-inline: 8px;
	padding: 14px 26px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 22px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
	box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.mcis-home-firsts-track span {
	color: rgba(255, 255, 255, 0.78);
}