/**
 * Icon cards: `grid gap-6`, two columns from 768px (`md:grid-cols-2|3`),
 * four from 1024px.
 *
 * card: the prototype's `.value-card`, `rounded-lg border-border/50 bg-card
 * p-6`, lifting 4px with `shadow-lg` on hover; the icon tile 48px `mb-4`,
 * the title `text-xl font-bold`, the text `mt-3 text-sm leading-relaxed`
 * filling the card, the link `mt-6`.
 * plain: `rounded-lg border border-border/60 bg-card p-6`, the 40px tile.
 * compact: the same card, the title `font-bold` at body size, the text
 * `mt-2 text-sm`, its links `font-medium`, the link `mt-3` (Press).
 * numbered: `gap-4`, the card `rounded-xl border border-border/60 bg-card
 * p-6`, lifting 2px with `shadow-md` on hover; the 44px tile (its number
 * beside it went on October 26, 2026), the title `mt-5 text-xl font-bold`,
 * dark red on hover, the text `mt-2 text-sm leading-relaxed`, the link's
 * label `mt-5`.
 * open: no card, `gap-x-10 gap-y-12`.
 * text-base: the text `leading-relaxed` at body size, the title `text-xl`,
 * the card `p-6 lg:p-7` (Media).
 */

.sba-c-icon-cards .sba-c-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.sba-c-icon-cards .sba-c-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: inherit;
	text-decoration: none;
}

.sba-c-icon-cards .sba-c-cards-card .sba-c-card {
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--sba-border) 50%, transparent);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sba-c-icon-cards .sba-c-cards-card .sba-c-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.sba-c-icon-cards :is(.sba-c-cards-plain, .sba-c-cards-compact) .sba-c-card {
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--sba-border) 60%, transparent);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
}

.sba-c-icon-cards .sba-c-cards-numbered {
	gap: 16px;
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card {
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--sba-border) 60%, transparent);
	border-radius: 12px;
	background-color: var(--sba-surface);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-icon-tile {
	width: 44px;
	height: 44px;
	margin: 0;
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card-title {
	margin-top: 20px;
	transition: color var(--sba-duration-hover) ease;
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card:hover .sba-c-card-title {
	color: var(--sba-red-dark);
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card-text {
	margin-top: 8px;
}

.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card-more {
	margin-top: 20px;
}

.sba-c-icon-cards .sba-c-cards-open {
	gap: 48px 40px;
}

/* Open: the 44px tile, and `mt-12 lg:mt-16` under the header
   (Sponsorship's benefits). */
.sba-c-icon-cards .sba-c-cards-open .sba-c-icon-tile {
	width: 44px;
	height: 44px;
}

.sba-c-icon-cards .sba-c-section-header + .sba-c-cards-open {
	margin-top: 48px;
}

.sba-c-icon-cards .sba-c-icon-tile {
	margin-bottom: 16px;
}

.sba-c-icon-cards .sba-c-card-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-c-icon-cards .sba-c-cards-plain .sba-c-card-title,
.sba-c-icon-cards .sba-c-cards-open .sba-c-card-title {
	font-size: 18px;
}

/* In the plain card the small tile stands apart from the title (`mt-4`). */
.sba-c-icon-cards .sba-c-cards-plain .sba-c-icon-tile {
	margin-bottom: 16px;
}

.sba-c-icon-cards .sba-c-card-text {
	flex: 1 1 auto;
	margin: 12px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 1.625;
}

/* Text as paragraphs or as a list, `space-y-3`. The list keeps its
   bullets, outside the text as in all copy (assets/css/lists.css); the
   prototype took them off. The reset leaves margins to the rules after
   it. */
.sba-c-icon-cards .sba-c-card-text > *,
.sba-c-icon-cards .sba-c-card-text li {
	margin: 0;
}

.sba-c-icon-cards .sba-c-card-text :is(p, li) {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.sba-c-icon-cards .sba-c-card-text ul {
	display: grid;
	gap: 12px;
	padding: 0 0 0 1.5em;
	list-style: disc outside;
}

.sba-c-icon-cards .sba-c-card-text > * + * {
	margin-top: 12px;
}

/* The buttons between header and cards, the cards then `mt-14`; the note
   under them `mt-6 text-sm`. */
.sba-c-icon-cards .sba-c-buttons + .sba-c-cards {
	margin-top: 56px;
}

.sba-c-icon-cards .sba-c-cards-note {
	max-width: 48rem;
	margin-top: 24px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-icon-cards .sba-c-cards-note p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.sba-c-icon-cards .sba-c-cards-text-base .sba-c-card-title {
	font-size: 20px;
}

.sba-c-icon-cards .sba-c-cards-text-base .sba-c-card-text {
	font-size: 16px;
}

.sba-c-icon-cards .sba-c-card-more {
	margin: 24px 0 0;
}

/* A card's links when it has several: equal text links one under the
   other, where the single one would stand (`mt-6`, `space-y-2`). */
.sba-c-icon-cards .sba-c-card-links {
	display: grid;
	justify-items: start;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.sba-c-icon-cards .sba-c-card-links li {
	display: flex;
	margin: 0;
}

.sba-c-icon-cards .sba-c-cards-compact .sba-c-card-links {
	margin-top: 12px;
}

.sba-c-icon-cards .sba-c-cards-compact .sba-c-card-title {
	font-size: 16px;
	line-height: 24px;
}

.sba-c-icon-cards .sba-c-cards-compact .sba-c-card-text {
	margin-top: 8px;
	line-height: 20px;
}

.sba-c-icon-cards .sba-c-cards-compact .sba-c-card-text a {
	font-weight: 500;
}

.sba-c-icon-cards .sba-c-cards-compact .sba-c-card-more {
	margin-top: 12px;
}

@media (min-width: 768px) {
	.sba-c-icon-cards .sba-c-cards-2,
	.sba-c-icon-cards .sba-c-cards-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sba-c-icon-cards .sba-c-cards-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sba-c-icon-cards .sba-c-cards-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sba-c-icon-cards .sba-c-cards-text-base:not(.sba-c-cards-open) .sba-c-card {
		padding: 28px;
	}

	.sba-c-icon-cards .sba-c-section-header + .sba-c-cards-open {
		margin-top: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-icon-cards .sba-c-cards-numbered .sba-c-card:hover,
	.sba-c-icon-cards .sba-c-cards-card .sba-c-card:hover {
		transform: none;
	}
}

/* Pillars, after the chapter pages' pillar cards (assets/css/chapters.css,
   "Pillar cards"): a 20px red icon, the title at 18px, the text at 14px, in
   a bordered card `p-7` whose border turns red under the pointer. The
   number and rule before the icon ("01 ——") went on October 26, 2026. For
   cards that lead nowhere; the large tiles on the light red are for cards
   that do. */
.sba-c-icon-cards .sba-c-cards-pillars {
	gap: 20px;
}

.sba-c-icon-cards .sba-c-cards-pillars .sba-c-card {
	padding: 28px;
	border: 1px solid hsl(220 13% 90% / 0.6);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	transition:
		border-color var(--sba-duration-hover) ease,
		box-shadow var(--sba-duration-hover) ease;
}

.sba-c-icon-cards .sba-c-cards-pillars .sba-c-card:hover {
	border-color: hsl(var(--sba-red-hsl) / 0.4);
	box-shadow: 0 10px 15px -3px hsl(var(--sba-charcoal-hsl) / 0.1);
}

.sba-c-icon-cards .sba-c-card-index {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.sba-c-icon-cards .sba-c-card-index .sba-i {
	color: var(--sba-red);
	font-size: 20px;
	line-height: 1;
}

.sba-c-icon-cards .sba-c-cards-pillars .sba-c-card-title {
	font-size: 18px;
}

.sba-c-icon-cards .sba-c-cards-pillars .sba-c-card-text {
	margin-top: 8px;
	font-size: 14px;
}

/* Logo cards (Business solutions' partner offers): the partner's logo in a
   56px row in place of the icon tile, 48px tall and at most 176px wide,
   left aligned (a fixed height, so an SVG with only a viewBox has a size,
   and every logo stands as tall as the others); its name in the card heading's type while the logo is
   missing. A badge ("New") sits at the right of the row, the outlined pill
   of the platform pages' operator badge in the dark red. */
.sba-c-icon-cards .sba-c-card-logo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	align-self: stretch;
	min-height: 56px;
	margin-bottom: 20px;
}

.sba-c-icon-cards .sba-c-card-logo-row .sba-c-icon-tile {
	margin: 0;
}

.sba-c-icon-cards .sba-c-card-logo {
	display: flex;
	align-items: center;
	min-width: 0;
	height: 56px;
}

.sba-c-icon-cards .sba-c-card-logo img {
	display: block;
	width: auto;
	max-width: 176px;
	height: 48px;
	object-fit: contain;
	object-position: left center;
}

.sba-c-icon-cards .sba-c-card-logo-name {
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-c-icon-cards .sba-c-card-badge {
	flex: none;
	padding: 4px 12px;
	border: 1px solid hsl(var(--sba-red-hsl) / 0.4);
	border-radius: 9999px;
	background-color: var(--sba-surface);
	color: var(--sba-red-dark);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

/* Beside, a platform page's audience cards: the card's border and padding,
   the 48px tile in a column of its own beside the title (`text-lg`) and
   the text (`flex gap-5 items-start`). */
.sba-c-icon-cards .sba-c-cards-beside .sba-c-card {
	flex-direction: row;
	gap: 20px;
	padding: 24px;
	border: 1px solid hsl(220 14% 90% / 0.5);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
}

.sba-c-icon-cards .sba-c-cards-beside .sba-c-icon-tile {
	margin: 0;
}

.sba-c-icon-cards .sba-c-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sba-c-icon-cards .sba-c-cards-beside .sba-c-card-title {
	font-size: 18px;
}

.sba-c-icon-cards .sba-c-cards-beside .sba-c-card-text {
	margin-top: 4px;
}

/* Three across only from 1024px: beside the tile, a third of a tablet's
   width leaves the text 120px (Ventures, the Global Village). */
@media (min-width: 768px) and (max-width: 1023px) {
	.sba-c-icon-cards .sba-c-cards-beside.sba-c-cards-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* An item's eyebrow over its title in the eyebrow's type, `mb-2`, and its
   meta under the title, `mt-1 text-sm font-medium` in the foreground. */
.sba-c-icon-cards .sba-c-card-eyebrow {
	margin-bottom: 8px;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-icon-cards .sba-c-card-meta {
	margin-top: 4px;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-icon-cards .sba-c-card-meta p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Text over the cards at body size, `mt-6`; the label right over them, the
   section eyebrow's type, `mt-12 mb-6`. */
.sba-c-icon-cards .sba-c-cards-text {
	max-width: 48rem;
	font-size: 16px;
	line-height: 1.625;
}

.sba-c-icon-cards .sba-c-section-header + .sba-c-cards-text {
	margin-top: 24px;
}

.sba-c-icon-cards .sba-c-cards-label {
	margin: 48px 0 24px;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-icon-cards .sba-c-section-header + .sba-c-cards-label {
	margin-top: 48px;
}

.sba-c-icon-cards .sba-c-cards-label + .sba-c-cards {
	margin-top: 0;
}

/* Under a tagline the note follows `mt-6`, the buttons `mt-8`. */
.sba-c-icon-cards .sba-c-tagline + .sba-c-cards-note {
	margin-top: 24px;
}

/* Text links at the end, `mt-10`. */
.sba-c-icon-cards .sba-c-cards + .sba-c-links,
.sba-c-icon-cards .sba-c-cards-note + .sba-c-links {
	margin-top: 40px;
}