/**
 * Credit strip: `border-t py-5` on white, the credits `flex flex-wrap
 * items-center gap-x-10 gap-y-4 text-sm` muted; a logo 32px high `gap-3`
 * after its label, a name `font-medium` charcoal, dark red on hover. White
 * since November 2, 2026, where it was `bg-surface-cool`: partner logos
 * come on white grounds, which stood out as boxes on the cool band.
 */

.sba-c-credit-strip {
	padding: 20px 0;
	border-top: 1px solid var(--sba-border);
	background-color: var(--sba-surface);
}

.sba-c-credit-strip .sba-c-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-credit-strip .sba-c-credit-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.sba-c-credit-strip .sba-c-credit-logo a {
	display: inline-flex;
	align-items: center;
}

.sba-c-credit-strip img {
	width: auto;
	height: 32px;
}

.sba-c-credit-strip .sba-c-credit:not(.sba-c-credit-logo) a {
	color: var(--sba-charcoal);
	font-weight: 500;
	text-decoration: none;
}

.sba-c-credit-strip .sba-c-credit:not(.sba-c-credit-logo) a:hover {
	color: var(--sba-red-dark);
}

/* An operator line (the platform pages): the name in bold charcoal, the
   sentence after it; one line from 640px, stacked below (`flex-col gap-2
   sm:flex-row`). */
.sba-c-credit-strip .sba-c-credit-line {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sba-c-credit-strip .sba-c-credit-line strong {
	flex: 0 0 auto;
	color: var(--sba-charcoal);
	font-weight: var(--sba-heading-weight);
}

@media (min-width: 640px) {
	.sba-c-credit-strip .sba-c-credit-line {
		flex-direction: row;
	}
}