/**
 * Platform hero: the cool surface with a hairline below, `py-16 lg:py-24`;
 * the text in 55 parts, the illustration in 45 from 768px, `gap-10
 * lg:gap-12`; stacked below. Carried over from the Elementor sections of
 * assets/css/platforms.css (the prototype's PlatformHero.tsx) on October
 * 17, 2026, together with the illustrations' look, which follows the
 * hero's own rules: the SVGs, the Global Village's burst and the editorial
 * visual of the Academy and the Directory (includes/raskin/
 * platform-illustrations.php, moved by assets/js/platforms.js).
 */

.sba-c.sba-c-pf-hero {
	overflow: hidden;
	padding: 64px 0;
	border-bottom: 1px solid var(--sba-border);
	background-color: var(--sba-surface-cool);
	font-family: var(--sba-font-sans);
}

.sba-c-pf-hero .sba-c-pf-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 40px;
}

.sba-c-pf-hero .sba-c-pf-hero-text > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* The eyebrow's own 20px; the badge after the path wraps with it. */
.sba-c-pf-hero .sba-c-eyebrow.sba-c-eyebrow-hero {
	flex-wrap: wrap;
	margin-bottom: 24px;
}

/* text-4xl md:text-5xl lg:text-6xl, leading-[1.1], tracking-tight, 24ch. */
.sba-c-pf-hero .sba-c-pf-hero-title {
	max-width: 24ch;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.1;
}

/* The headline: font-medium leading-snug, each line a block of 28ch at
   text-2xl md:text-3xl, `mt-6`; the lines after the first muted. */
.sba-c-pf-hero .sba-c-pf-hero-headline {
	margin-top: 24px;
	color: var(--sba-charcoal);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.375;
}

.sba-c-pf-hero .sba-c-pf-hero-line {
	display: block;
	max-width: 28ch;
}

.sba-c-pf-hero .sba-c-pf-hero-line + .sba-c-pf-hero-line {
	margin-top: 8px;
}

.sba-c-pf-hero .sba-c-pf-hero-line-muted {
	color: var(--sba-slate);
}

/* Under the headline, `mt-6`: the answer in bold red, or a lead in the
   muted foreground. */
.sba-c-pf-hero :is(.sba-c-pf-hero-answer, .sba-c-pf-hero-lead) {
	max-width: 48rem;
	margin-top: 24px;
}

.sba-c-pf-hero .sba-c-pf-hero-answer {
	color: var(--sba-red);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	line-height: 28px;
}

.sba-c-pf-hero .sba-c-pf-hero-lead {
	color: var(--sba-slate);
	font-size: 18px;
	line-height: 28px;
}

/* The buttons `mt-10 gap-4`, min-w-[200px] md:min-w-[220px]
   lg:min-w-[240px]; stacked below 640px. */
.sba-c-pf-hero .sba-c-pf-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
}

.sba-c-pf-hero .sba-c-pf-hero-actions .sba-c-button {
	min-width: 200px;
}

/* text-xs: "Opens ventures.swissbiotech.org" under the buttons. */
.sba-c-pf-hero .sba-c-pf-hero-hint {
	margin-top: 12px;
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

/* "Registration guides:" and its links on one line, `mt-6`. */
.sba-c-pf-hero .sba-c-pf-hero-guides {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin-top: 24px;
	font-size: 14px;
	line-height: 20px;
}

.sba-c-pf-hero .sba-c-pf-hero-guides-label {
	color: var(--sba-charcoal);
	font-weight: var(--sba-heading-weight);
}

/* The access note, `mt-6 text-xs` with the info icon in front. */
.sba-c-pf-hero .sba-c-pf-hero-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 36rem;
	margin-top: 24px;
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

.sba-c-pf-hero .sba-c-pf-hero-note .sba-i {
	flex: none;
	margin-top: 0;
	font-size: 16px;
	line-height: 1;
}

/* The illustration: the full width of its column up to 320/360/520px, on
   the right from 768px. */
.sba-c-pf-hero .sba-c-pf-hero-figure {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.sba-pf-illustration-box {
	width: 100%;
	max-width: 320px;
}

.sba-pf-illustration-svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--sba-slate);
}

@media (min-width: 640px) {
	.sba-c-pf-hero .sba-c-pf-hero-actions .sba-c-button {
		min-width: 220px;
	}
}

@media (min-width: 768px) {
	.sba-c-pf-hero .sba-c-pf-hero-grid {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	}

	.sba-c-pf-hero .sba-c-pf-hero-title {
		font-size: 48px;
	}

	.sba-c-pf-hero .sba-c-pf-hero-headline {
		font-size: 30px;
	}

	.sba-c-pf-hero .sba-c-pf-hero-lead {
		font-size: 20px;
	}

	.sba-c-pf-hero .sba-c-pf-hero-figure {
		justify-content: flex-end;
	}

	.sba-pf-illustration-box {
		max-width: 360px;
	}
}

@media (min-width: 1024px) {
	.sba-c.sba-c-pf-hero {
		padding: 96px 0;
	}

	.sba-c-pf-hero .sba-c-pf-hero-grid {
		gap: 48px;
	}

	.sba-c-pf-hero .sba-c-pf-hero-title {
		font-size: 60px;
	}

	.sba-c-pf-hero .sba-c-pf-hero-answer {
		font-size: 24px;
		line-height: 32px;
	}

	.sba-c-pf-hero .sba-c-pf-hero-actions .sba-c-button {
		min-width: 240px;
	}

	.sba-pf-illustration-box {
		max-width: 520px;
	}
}

/* --------------------------------------------------------------------------
 * The Global Village's key visual
 *
 * A burst of colored bars whose vanishing point sits at 79 % of its width
 * and half its height, positioned against the hero, not its figure column:
 * anchored to the viewport's right edge and as wide as the viewport and a
 * little more, so it is the browser that cuts it. A mask fades it out
 * toward the text, the text paints above it, and at three quarters opacity
 * the colors are as quiet as on the old banner. It drifts, one slow scale
 * and turn back and forth, and holds still with reduced motion. On a phone
 * it is the hero's background.
 * -------------------------------------------------------------------------- */

.sba-c-pf-hero-burst {
	position: relative;
}

.sba-c-pf-hero-burst .sba-c-pf-hero-text {
	position: relative;
	z-index: 1;
}

.sba-c-pf-hero-burst .sba-c-pf-hero-figure {
	min-height: 360px;
}

.sba-c-pf-hero-burst .sba-pf-illustration-box.sba-pf-burst-box {
	width: auto;
	max-width: none;
}

.sba-pf-burst {
	position: absolute;
	top: 50%;
	right: 0;
	width: 103vw;
	aspect-ratio: 2720 / 1700;
	transform: translateY(-50%);
	opacity: 0.75;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 36%, hsl(0 0% 0% / 0.55) 55%, #000 68%);
	mask-image: linear-gradient(to right, transparent 36%, hsl(0 0% 0% / 0.55) 55%, #000 68%);
}

.sba-pf-burst-img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 79% 50%;
	animation:
		sba-pf-burst-in 1.2s ease-out both,
		sba-pf-burst-drift 48s ease-in-out infinite alternate;
}

@keyframes sba-pf-burst-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes sba-pf-burst-drift {
	from {
		transform: scale(1) rotate(0deg);
	}

	to {
		transform: scale(1.07) rotate(2deg);
	}
}

/* From the desktop breakpoint the burst does not shrink below 1300px, so
   its bars stay the size the old banner showed. */
@media (min-width: 1024px) {
	.sba-c-pf-hero-burst .sba-c-pf-hero-figure {
		min-height: 420px;
	}

	.sba-pf-burst {
		min-width: 1300px;
	}
}

/* Stacked, the burst is the hero's background: as tall as the hero and
   then some, its vanishing point behind the right half of the text, faint
   enough to read through, and the figure column takes no room. */
@media (max-width: 767px) {
	.sba-c-pf-hero-burst .sba-c-pf-hero-figure {
		min-height: 0;
	}

	.sba-c-pf-hero-burst .sba-c-pf-hero-grid {
		gap: 0;
	}

	.sba-pf-burst {
		top: 50%;
		right: auto;
		left: 50%;
		width: auto;
		height: 120%;
		transform: translate(-75%, -50%);
		opacity: 0.35;
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
		mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
	}

	.sba-pf-burst-img {
		width: auto;
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-pf-burst-img {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
 * The illustrations' SVG parts: the prototype's Tailwind classes.
 * -------------------------------------------------------------------------- */

.sba-pf-svg-bg {
	fill: var(--sba-surface);
}

.sba-pf-svg-red {
	stroke: var(--sba-red);
}

.sba-pf-svg-red-fill {
	fill: var(--sba-red);
}

.sba-pf-svg-red-icon {
	color: var(--sba-red);
}

.sba-pf-node {
	transition: opacity 180ms ease-out;
}

.sba-pf-compact .sba-pf-o-wide {
	display: none;
}

.sba-pf-pulse {
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
}

.sba-pf-animate .sba-pf-pulse {
	animation: sba-pf-pulse 2.8s ease-out infinite;
}

@keyframes sba-pf-pulse {
	from {
		transform: scale(1);
		opacity: 0.35;
	}
	to {
		transform: scale(1.5);
		opacity: 0;
	}
}

.sba-pf-connector {
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	animation: sba-pf-draw 1.2s ease-out forwards;
}

@keyframes sba-pf-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-pf-animate .sba-pf-pulse {
		animation: none;
		opacity: 0;
	}

	.sba-pf-connector {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* --------------------------------------------------------------------------
 * The editorial visual: the Academy and the Directory heroes
 *
 * The prototype's AcademyHeroVisual, as one idiom with two instances: a
 * framed card, a badge over the frame's top right corner (three logos and a
 * count), a card over its bottom left corner with two chips, and a strip of
 * pills under the frame. The Academy's frame holds a square generated
 * photograph, the Directory's a search field and company profile cards (its
 * own rules follow this block). The markup comes from the shortcode
 * (includes/raskin/platform-illustrations.php) in the illustration box,
 * which holds it to 320/360/520px like the SVGs. The stage pads the frame by
 * 8px (12px from 640px) so the badge and the card overhang its corners; the
 * pills strip pulls up 8px under the frame's shadow.
 *
 * The badge and the card enter with a short drift, the pills fade up,
 * staggered, as the prototype's animation classes do; with reduced motion
 * everything is simply there.
 * -------------------------------------------------------------------------- */

.sba-pf-visual {
	position: relative;
	width: 100%;
	margin: 0;
}

.sba-pf-visual-stage {
	position: relative;
	padding: 8px;
}

@media (min-width: 640px) {
	.sba-pf-visual-stage {
		padding: 12px;
	}
}

/* rounded-2xl border bg-background shadow-2xl ring-1 ring-black/5 */
.sba-pf-visual-frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--sba-border);
	border-radius: 16px;
	background-color: var(--sba-surface);
	box-shadow:
		0 0 0 1px hsl(0 0% 0% / 0.05),
		0 25px 50px -12px hsl(0 0% 0% / 0.25);
}

.sba-pf-academy-img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
}

/* The AI generated pill, light variant: white at 80% with a hairline and
 * the charcoal label, 12px in from the frame's corner. The dark variant the
 * guide describes is in sections.css for Elementor's icon list. */
.sba-pf-academy-ai {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius-sm);
	background-color: hsl(0 0% 100% / 0.8);
	box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
	backdrop-filter: blur(4px);
	color: var(--sba-charcoal);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.025em;
	line-height: 1;
}

/* Top right: rounded-full border bg-white/95 px-3.5 py-2 shadow-xl */
.sba-pf-visual-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100% - 16px);
	padding: 8px 14px;
	border: 1px solid var(--sba-border);
	border-radius: 9999px;
	background-color: hsl(0 0% 100% / 0.95);
	box-shadow:
		0 20px 25px -5px hsl(0 0% 0% / 0.1),
		0 8px 10px -6px hsl(0 0% 0% / 0.1);
	backdrop-filter: blur(4px);
}

.sba-pf-visual-avatars {
	display: flex;
	flex-shrink: 0;
}

.sba-pf-visual-avatar {
	display: block;
	width: 20px;
	height: 20px;
	padding: 2px;
	border: 1px solid var(--sba-surface);
	border-radius: 9999px;
	background-color: var(--sba-surface);
	object-fit: contain;
}

.sba-pf-visual-avatar + .sba-pf-visual-avatar {
	margin-left: -6px;
}

.sba-pf-visual-badge-text {
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
}

/* Bottom left: max-w-[260px] rounded-2xl border bg-white/95 p-4 shadow-xl */
.sba-pf-visual-card {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	max-width: 260px;
	padding: 16px;
	border: 1px solid var(--sba-border);
	border-radius: 16px;
	background-color: hsl(0 0% 100% / 0.95);
	box-shadow:
		0 20px 25px -5px hsl(0 0% 0% / 0.1),
		0 8px 10px -6px hsl(0 0% 0% / 0.1);
	backdrop-filter: blur(4px);
}

.sba-pf-visual-card-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.sba-pf-visual-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

/* rounded-md bg-surface-cool px-2 py-1 text-xs font-medium */
.sba-pf-visual-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: var(--sba-radius-md);
	background-color: var(--sba-surface-cool);
	color: var(--sba-charcoal);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.sba-pf-visual-chip-red {
	border-color: hsl(var(--sba-red-hsl) / 0.2);
	background-color: var(--sba-red-light);
	color: var(--sba-red-dark);
}

/* The format pills: -mt-2 flex flex-wrap justify-center gap-2 px-4 */
.sba-pf-visual-pills {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: -8px;
	padding: 0 16px;
}

.sba-pf-visual-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--sba-border);
	border-radius: 9999px;
	background-color: var(--sba-surface);
	box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
	color: var(--sba-slate);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

/* The entrance, as the prototype's animate-academy-* classes. */
@media (prefers-reduced-motion: no-preference) {
	.sba-pf-visual-badge {
		opacity: 0;
		animation: sba-pf-visual-float-tl 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
	}

	.sba-pf-visual-card {
		opacity: 0;
		animation: sba-pf-visual-float-br 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
	}

	.sba-pf-visual-pills {
		opacity: 0;
		animation: sba-pf-visual-fade-up 0.5s ease-out 0.5s forwards;
	}
}

@keyframes sba-pf-visual-float-tl {
	from {
		opacity: 0;
		transform: translate(12px, 12px);
	}

	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes sba-pf-visual-float-br {
	from {
		opacity: 0;
		transform: translate(-12px, 12px);
	}

	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes sba-pf-visual-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
 * Directory hero: what is in the frame
 *
 * A window of the directory on the cool surface: a search field, then a
 * list of company cards in the listing cards' language, white with a
 * hairline, a 44px logo tile, the name over the competence and the canton,
 * and the member flag in light red. The three cards are links to the
 * listings and lift on hover; the fourth is decoration, fading out under
 * the figures card that overhangs the frame's bottom left corner. The cards
 * fade up one after the other, before the badge and the figures card.
 * -------------------------------------------------------------------------- */

.sba-pf-directory-frame {
	padding: 16px;
	background-color: var(--sba-surface-cool);
}

@media (min-width: 640px) {
	.sba-pf-directory-frame {
		padding: 20px;
	}
}

.sba-pf-directory-search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sba-input);
	border-radius: var(--sba-radius-md);
	background-color: var(--sba-surface);
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-pf-directory-search svg {
	flex: 0 0 auto;
}

/* The field opens the directory's search; it is a link, not a form. */
a.sba-pf-directory-search {
	transition: border-color 0.2s, color 0.2s;
}

a.sba-pf-directory-search:hover,
a.sba-pf-directory-search:focus-visible {
	border-color: var(--sba-slate);
	color: var(--sba-charcoal);
	text-decoration: none;
}

a.sba-pf-directory-search:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 1px;
}

.sba-pf-directory-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.sba-pf-directory-item {
	margin: 0;
	padding: 0;
}

.sba-pf-directory-company {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
	color: var(--sba-charcoal);
	text-decoration: none;
	transition: transform var(--sba-duration-hover) ease, box-shadow var(--sba-duration-hover) ease;
}

a.sba-pf-directory-company:hover,
a.sba-pf-directory-company:focus-visible {
	transform: translateY(-2px);
	box-shadow:
		0 10px 15px -3px hsl(var(--sba-charcoal-hsl) / 0.1),
		0 4px 6px -4px hsl(var(--sba-charcoal-hsl) / 0.1);
	color: var(--sba-charcoal);
	text-decoration: none;
}

a.sba-pf-directory-company:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

/* The logo tile: member logos are wordmarks as often as squares, so the
 * image is bounded on both axes, as in the front page's spotlight. */
.sba-pf-directory-logo {
	display: block;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 4px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius-md);
	background-color: var(--sba-surface);
	object-fit: contain;
}

.sba-pf-directory-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sba-pf-directory-name,
.sba-pf-directory-meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sba-pf-directory-name {
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.sba-pf-directory-meta {
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

/* The member flag: the award in brand red on the light red chip, the word
 * from 640px and for assistive technology below. */
.sba-pf-directory-flag {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	border: 1px solid hsl(var(--sba-red-hsl) / 0.2);
	border-radius: var(--sba-radius-sm);
	background-color: var(--sba-red-light);
	color: var(--sba-red-dark);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.sba-pf-directory-flag svg {
	color: var(--sba-red);
}

.sba-pf-directory-flag-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 640px) {
	.sba-pf-directory-flag {
		padding: 4px 8px;
	}

	.sba-pf-directory-flag-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

/* The figures card: three figures side by side, the number over its
 * label and linked to its category, then the members chip. Wider than the Academy's card, so that
 * "Service providers" stays on one line. */
.sba-pf-directory-figures {
	max-width: 288px;
}

.sba-pf-directory-stats {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-pf-directory-stat-item {
	margin: 0;
	padding: 0;
}

/* Each figure links to its category in the directory; the label takes the
 * inline link's red underline on hover and focus, the text stays. */
.sba-pf-directory-stat {
	display: flex;
	flex-direction: column;
	border-radius: var(--sba-radius-sm);
	text-decoration: none;
	white-space: nowrap;
}

a.sba-pf-directory-stat:hover,
a.sba-pf-directory-stat:focus-visible {
	text-decoration: none;
}

a.sba-pf-directory-stat:hover .sba-pf-directory-stat-label,
a.sba-pf-directory-stat:focus-visible .sba-pf-directory-stat-label {
	text-decoration: underline;
	text-decoration-color: var(--sba-red);
	text-underline-offset: 4px;
}

a.sba-pf-directory-stat:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-pf-directory-stat-value {
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 28px;
}

.sba-pf-directory-stat-label {
	color: var(--sba-slate);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

/* The fourth card: the list goes on under the figures card. */
.sba-pf-directory-ghost {
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, hsl(0 0% 0% / 0.6), transparent 90%);
	mask-image: linear-gradient(to bottom, hsl(0 0% 0% / 0.6), transparent 90%);
}

@media (prefers-reduced-motion: no-preference) {
	.sba-pf-directory-item {
		opacity: 0;
		animation: sba-pf-visual-fade-up 0.5s ease-out forwards;
	}

	.sba-pf-directory-item:nth-child(1) {
		animation-delay: 0.05s;
	}

	.sba-pf-directory-item:nth-child(2) {
		animation-delay: 0.15s;
	}

	.sba-pf-directory-item:nth-child(3) {
		animation-delay: 0.25s;
	}

	.sba-pf-directory-item:nth-child(4) {
		animation-delay: 0.35s;
	}
}