/*
 * Resource Center (/knowledge-center/).
 *
 * Markup: template-parts/resource-center/page.php, list.php, card-*.php.
 * Design: Lovable "Sanguine Bio Sample Finder", src/pages/KnowledgeCenter.tsx
 * (commit d52fcfe). Enqueued on this page only by inc/resource-center.php.
 *
 * EVERY RULE HANGS FROM THE PAGE'S BODY CLASS, .sb-resource-center-page, and is
 * at least two classes deep (0,2,0): style.css sets family, size and leading on
 * bare h1/h2/h3, p and ul li, and the Beaver Builder skin sets colour and
 * family on h1..h6 and a. So type, colour and margin are declared on every text
 * element's own class, never left to inherit. Form controls go three deep.
 *
 * PX THROUGHOUT: the theme sets html { font-size: 10px }. Each value is the
 * design's Tailwind class resolved against its 16px root.
 *
 * Breakpoints are the design's: 640 (sm), 768 (md), 1024 (lg).
 *
 * BUILD RULINGS on the five gaps the design left open (pack, B7):
 *   1. Titles clamp at four lines (only a title that runs past four is cut).
 *   2. A lone last protocol row spans both columns.
 *   3. Below 1024 only the tabs stick; the topic control sits under them.
 *   4. The overview's third card is rendered and hidden from 768 to 1023.
 *   5. A results group of two keeps the three-column grid.
 */

.sb-resource-center-page .sb-rc {
	--sbr-navy: #07038c;                       /* --primary */
	--sbr-orange: #c24b14;                     /* --accent */
	--sbr-bg: #f6f7f9;                         /* --background */
	--sbr-card: #fff;                          /* --card */
	--sbr-border: #dbdfe6;                     /* --border, --input */
	--sbr-secondary: #f2f4f8;                  /* --secondary */
	--sbr-muted: #edeff2;                      /* --muted */
	--sbr-muted-fg: #58677e;                   /* --muted-foreground */
	--sbr-ink: #141d2e;                        /* --foreground */
	--sbr-ink-80: rgb(20 29 46 / 0.8);
	--sbr-tint: rgb(242 244 248 / 0.4);        /* bg-secondary/40 */
	--sbr-navy-10: rgb(7 3 140 / 0.1);         /* bg-primary/10 */
	--sbr-font: Inter, system-ui, sans-serif;
	--sbr-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--sbr-ring: 0 0 0 2px #fff, 0 0 0 4px var(--sbr-navy);

	/*
	 * Height of the site's own sticky header, which the type bar sticks under.
	 * js/resource-center.js measures the real header and overwrites this; these
	 * are the header's heights with its promotion strip showing, for a visitor
	 * without script.
	 */
	--sb-rc-top: 117px;

	background: var(--sbr-bg);
	color: var(--sbr-ink);
	font-family: var(--sbr-font);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
	.sb-resource-center-page .sb-rc {
		--sb-rc-top: 95px;
	}
}

@media (min-width: 1280px) {
	.sb-resource-center-page .sb-rc {
		--sb-rc-top: 99px;
	}
}

.sb-resource-center-page .sb-rc *,
.sb-resource-center-page .sb-rc *::before,
.sb-resource-center-page .sb-rc *::after {
	box-sizing: border-box;
}

/*
 * CONTAINER ESCAPE. The body is printed through the_content, inside the theme's
 * content container, which would stop the navy bands reaching the viewport
 * edges. Same escape as the homepage's and the leadership page's.
 */
body.sb-resource-center-page .fl-content-full.container,
body.sb-resource-center-page .fl-content-full.container > .row,
body.sb-resource-center-page .fl-content-full.container > .row > .fl-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.sb-resource-center-page .fl-content-full .fl-post,
body.sb-resource-center-page .fl-content-full .fl-post-content {
	margin: 0;
	padding: 0;
}

/*
 * Keyboard focus and in-page anchors must not land under the two sticky bars
 * (the site header, then the type bar: 57px).
 */
html:has(body.sb-resource-center-page) {
	scroll-padding-top: 190px;
}

@media (min-width: 768px) {
	html:has(body.sb-resource-center-page) {
		scroll-padding-top: 172px;
	}
}

.sb-resource-center-page .sb-rc__results {
	scroll-margin-top: calc(var(--sb-rc-top) + 57px);
	outline: none;
}

.sb-resource-center-page .sb-rc-card__link,
.sb-resource-center-page .sb-rc__more,
.sb-resource-center-page .sb-rc__btn,
.sb-resource-center-page .sb-rc__chip,
.sb-resource-center-page .sb-rc__clear,
.sb-resource-center-page .sb-rc__browse-link {
	scroll-margin-top: calc(var(--sb-rc-top) + 57px + 16px);
}

/* sr-only */
.sb-resource-center-page .sb-rc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- container: mx-auto max-w-[1440px] px-4 sm:px-6 ---------- */

.sb-resource-center-page .sb-rc__wrap {
	width: 100%;
	max-width: 1440px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 16px;
	padding-left: 16px;
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc__wrap {
		padding-right: 24px;
		padding-left: 24px;
	}
}

/* h-4 w-4 icons inside links and buttons */
.sb-resource-center-page .sb-rc__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* ---------- header band ---------- */

.sb-resource-center-page .sb-rc__hero {
	margin: 0;
	background: var(--sbr-navy);
	color: #fff;
}

/* py-8 lg:py-10 */
.sb-resource-center-page .sb-rc__hero-inner {
	padding-top: 32px;
	padding-bottom: 32px;
}

.sb-resource-center-page .sb-rc__crumbs {
	margin: 0;
	padding: 0;
}

/* flex items-center gap-2 text-sm */
.sb-resource-center-page .sb-rc__crumb-list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-resource-center-page .sb-rc__crumb {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: normal;
	color: #fff;
}

.sb-resource-center-page .sb-rc__crumb::before,
.sb-resource-center-page .sb-rc__crumb::marker {
	content: none;
}

/* inline-flex min-h-11 items-center rounded-sm hover:underline underline-offset-4 */
.sb-resource-center-page .sb-rc .sb-rc__crumb-link,
.sb-resource-center-page .sb-rc .sb-rc__crumb-link:visited,
.sb-resource-center-page .sb-rc .sb-rc__crumb-link:focus {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-radius: 2px;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #fff;
	text-decoration: none;
	text-underline-offset: 4px;
}

.sb-resource-center-page .sb-rc .sb-rc__crumb-link:hover {
	color: #fff;
	text-decoration: underline;
}

/* mt-3 text-4xl font-bold sm:text-5xl */
.sb-resource-center-page .sb-rc__h1 {
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

/* mt-4 text-base text-primary-foreground/85 sm:text-lg */
.sb-resource-center-page .sb-rc__lede {
	margin: 16px 0 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: normal;
	color: rgb(255 255 255 / 0.85);
}

/* mt-7 flex max-w-[640px] gap-2 */
.sb-resource-center-page .sb-rc__search {
	display: flex;
	gap: 8px;
	max-width: 640px;
	margin: 28px 0 0;
	padding: 0;
}

/* h-12 min-w-0 flex-1 rounded-md border border-primary-foreground/30 bg-background px-4 */
.sb-resource-center-page .sb-rc .sb-rc__search-input {
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 6px;
	background: var(--sbr-bg);
	box-shadow: none;
	font-family: var(--sbr-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--sbr-ink);
	-webkit-appearance: none;
	appearance: none;
}

.sb-resource-center-page .sb-rc .sb-rc__search-input::placeholder {
	color: var(--sbr-muted-fg);
	opacity: 1;
}

.sb-resource-center-page .sb-rc .sb-rc__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* h-12 w-12 shrink-0 bg-accent p-0 */
.sb-resource-center-page .sb-rc .sb-rc__search-go {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--sbr-orange);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s var(--sbr-ease);
}

.sb-resource-center-page .sb-rc .sb-rc__search-go:hover {
	background: rgb(235 116 61 / 0.9);
	color: #fff;
}

/* On navy the ring is white with a navy gap. */
.sb-resource-center-page .sb-rc .sb-rc__search-input:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__search-go:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__crumb-link:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__btn--accent:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__btn--on-navy:focus-visible {
	box-shadow: 0 0 0 2px var(--sbr-navy), 0 0 0 4px #fff;
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc__h1 {
		font-size: 48px;
		line-height: 48px;
	}

	.sb-resource-center-page .sb-rc__lede {
		font-size: 18px;
		line-height: 28px;
	}
}

@media (min-width: 1024px) {
	.sb-resource-center-page .sb-rc__hero-inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* ---------- type bar ---------- */

/* sticky z-30 border-b border-border bg-background */
.sb-resource-center-page .sb-rc__bar {
	position: -webkit-sticky;
	position: sticky;
	top: var(--sb-rc-top);
	z-index: 30;
	margin: 0;
	border-bottom: 1px solid var(--sbr-border);
	background: var(--sbr-bg);
}

.sb-resource-center-page .sb-rc__bar-inner {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* sr-only until focused */
.sb-resource-center-page .sb-rc .sb-rc__skip,
.sb-resource-center-page .sb-rc .sb-rc__skip:visited {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--sbr-navy);
	text-decoration: none;
}

.sb-resource-center-page .sb-rc .sb-rc__skip:focus {
	top: 6px;
	left: 16px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	overflow: visible;
	clip: auto;
	border-radius: 6px;
	background: var(--sbr-bg);
	box-shadow: var(--sbr-ring);
}

.sb-resource-center-page .sb-rc__tabs {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* flex overflow-x-auto overscroll-x-contain whitespace-nowrap, no scrollbar */
.sb-resource-center-page .sb-rc__tabs-row {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	white-space: nowrap;
	scrollbar-width: none;
}

.sb-resource-center-page .sb-rc__tabs-row::-webkit-scrollbar {
	display: none;
}

/* inline-flex min-h-14 shrink-0 items-center gap-2 border-b-2 px-3 text-sm font-semibold */
.sb-resource-center-page .sb-rc .sb-rc__tab,
.sb-resource-center-page .sb-rc .sb-rc__tab:visited,
.sb-resource-center-page .sb-rc .sb-rc__tab:focus {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-navy);
	text-decoration: none;
}

.sb-resource-center-page .sb-rc .sb-rc__tab:hover {
	background: var(--sbr-tint);
	color: var(--sbr-navy);
	text-decoration: none;
}

.sb-resource-center-page .sb-rc .sb-rc__tab[aria-current="page"] {
	border-bottom-color: var(--sbr-navy);
}

/* A type with no match in a results view: greyed, still a link. */
.sb-resource-center-page .sb-rc .sb-rc__tab--muted,
.sb-resource-center-page .sb-rc .sb-rc__tab--muted:visited,
.sb-resource-center-page .sb-rc .sb-rc__tab--muted:hover,
.sb-resource-center-page .sb-rc .sb-rc__tab--muted:focus {
	color: var(--sbr-muted-fg);
}

/*
 * Under a topic, a type that carries no topics: count 0, greyed, and not a
 * link (a span with aria-disabled), so it is not in the Tab order.
 */
.sb-resource-center-page .sb-rc .sb-rc__tab--off,
.sb-resource-center-page .sb-rc .sb-rc__tab--off:hover {
	background: none;
	color: var(--sbr-muted-fg);
	cursor: default;
	opacity: 0.7;
}

/*
 * The ring is drawn inside the tab, not around it: the row scrolls sideways
 * (its overflow clips an outer ring left and right) and, once stuck, the tab's
 * top edge touches the site header, which would cover the ring's upper side.
 */
.sb-resource-center-page .sb-rc .sb-rc__tab:focus-visible {
	box-shadow: inset 0 0 0 2px var(--sbr-navy);
}

/* rounded-full px-2 py-0.5 text-xs font-medium */
.sb-resource-center-page .sb-rc__pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 9999px;
	background: var(--sbr-secondary);
	font-family: var(--sbr-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: normal;
	color: var(--sbr-muted-fg);
}

.sb-resource-center-page .sb-rc__tab[aria-current="page"] .sb-rc__pill {
	background: var(--sbr-navy);
	color: #fff;
}

/* The cut edge of a row that scrolls sideways. */
.sb-resource-center-page .sb-rc__tabs-fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 2px;
	width: 16px;
	background: linear-gradient(to right, rgb(246 247 249 / 0), rgb(246 247 249 / 0.9));
	pointer-events: none;
}

/* flex shrink-0 items-center gap-2 py-2 */
.sb-resource-center-page .sb-rc__topic {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 0;
}

.sb-resource-center-page .sb-rc__topic--bar {
	display: none;
}

.sb-resource-center-page .sb-rc .sb-rc__topic-label {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-ink);
}

/* h-11 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-sm md:w-40 */
.sb-resource-center-page .sb-rc .sb-rc__topic-select {
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
	max-width: none;
	height: 44px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid var(--sbr-border);
	border-radius: 6px;
	background-color: var(--sbr-bg);
	box-shadow: none;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--sbr-ink);
}

/* outline icon button, h-11 w-11 */
.sb-resource-center-page .sb-rc .sb-rc__topic-go {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sbr-border);
	border-radius: 6px;
	background: var(--sbr-bg);
	box-shadow: none;
	color: var(--sbr-ink);
	cursor: pointer;
	transition: background-color 0.15s var(--sbr-ease);
}

.sb-resource-center-page .sb-rc .sb-rc__topic-go:hover {
	background: var(--sbr-secondary);
	color: var(--sbr-ink);
}

.sb-resource-center-page .sb-rc .sb-rc__topic-select:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__topic-go:focus-visible {
	box-shadow: var(--sbr-ring);
}

/* Under the bar, below 1024: its own row, not sticky. */
.sb-resource-center-page .sb-rc__topic-row {
	border-bottom: 1px solid var(--sbr-border);
	background: var(--sbr-bg);
}

@media (min-width: 768px) {
	.sb-resource-center-page .sb-rc__tabs-fade {
		display: none;
	}

	.sb-resource-center-page .sb-rc__topic-row .sb-rc__topic {
		justify-content: flex-start;
	}

	.sb-resource-center-page .sb-rc .sb-rc__topic-row .sb-rc__topic-select {
		flex: 0 0 auto;
		width: 160px;
	}
}

@media (min-width: 1024px) {
	.sb-resource-center-page .sb-rc__bar-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	/* The bar is the design's 56px row: the 44px control is centred in it. */
	.sb-resource-center-page .sb-rc__topic--bar {
		display: flex;
		padding: 6px 0;
	}

	.sb-resource-center-page .sb-rc .sb-rc__topic--bar .sb-rc__topic-select {
		flex: 0 0 auto;
		width: 160px;
	}

	.sb-resource-center-page .sb-rc__topic-row {
		display: none;
	}
}

/* ---------- sections ---------- */

.sb-resource-center-page .sb-rc__section {
	margin: 0;
	background: var(--sbr-bg);
}

/* every second overview section: bg-secondary/40 */
.sb-resource-center-page .sb-rc__section--tint {
	background: var(--sbr-tint);
}

/* py-12 lg:py-16 */
.sb-resource-center-page .sb-rc__section-inner {
	padding-top: 48px;
	padding-bottom: 48px;
}

/* flex flex-wrap items-center justify-between gap-4 */
.sb-resource-center-page .sb-rc__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* text-3xl font-bold text-primary lg:text-4xl */
.sb-resource-center-page .sb-rc__h2 {
	margin: 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc__h2--on-navy {
	color: #fff;
}

/* mt-3 max-w-3xl leading-relaxed text-foreground/80 */
.sb-resource-center-page .sb-rc__desc {
	max-width: 768px;
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: normal;
	color: var(--sbr-ink-80);
}

/* mt-5 text-sm text-muted-foreground */
.sb-resource-center-page .sb-rc__status {
	margin: 20px 0 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--sbr-muted-fg);
}

/* min-h-11 inline-flex items-center gap-2 rounded-sm text-sm font-semibold text-primary hover:underline */
.sb-resource-center-page .sb-rc .sb-rc__more,
.sb-resource-center-page .sb-rc .sb-rc__more:visited,
.sb-resource-center-page .sb-rc .sb-rc__more:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-navy);
	text-decoration: none;
	text-underline-offset: 4px;
}

.sb-resource-center-page .sb-rc .sb-rc__more:hover {
	color: var(--sbr-navy);
	text-decoration: underline;
}

.sb-resource-center-page .sb-rc .sb-rc__more:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__clear:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__chip:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__browse-link:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__pubs-link:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__btn--outline:focus-visible {
	box-shadow: var(--sbr-ring);
}

/* The "View all" link: beside the h2 from 640, under the list on phones. */
.sb-resource-center-page .sb-rc .sb-rc__more--top {
	display: none;
}

.sb-resource-center-page .sb-rc .sb-rc__more--bottom {
	margin-top: 20px;
}

.sb-resource-center-page .sb-rc .sb-rc__more--group {
	margin-top: 16px;
}

.sb-resource-center-page .sb-rc__earlier {
	margin: 20px 0 -8px;
	padding: 0;
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc .sb-rc__more--top {
		display: inline-flex;
	}

	.sb-resource-center-page .sb-rc .sb-rc__more--bottom {
		display: none;
	}
}

@media (min-width: 1024px) {
	.sb-resource-center-page .sb-rc__section-inner {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.sb-resource-center-page .sb-rc__h2 {
		font-size: 36px;
		line-height: 40px;
	}
}

/* ---------- lists ---------- */

/* mt-7 grid items-stretch gap-6 */
.sb-resource-center-page .sb-rc__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.sb-resource-center-page .sb-rc__item {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sbr-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--sbr-ink);
}

.sb-resource-center-page .sb-rc__item::before,
.sb-resource-center-page .sb-rc__item::marker {
	content: none;
}

/* News: divide-y overflow-hidden rounded-lg border bg-card (one card, rows inside) */
.sb-resource-center-page .sb-rc__list--log {
	display: block;
	overflow: hidden;
	border: 1px solid var(--sbr-border);
	border-radius: 8px;
	background: var(--sbr-card);
}

.sb-resource-center-page .sb-rc__list--log > .sb-rc__item + .sb-rc__item {
	border-top: 1px solid var(--sbr-border);
}

@media (min-width: 768px) {
	/* md:grid-cols-2 */
	.sb-resource-center-page .sb-rc__list--card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	/* Ruling 4: the overview shows two cards here; the third is rendered and hidden. */
	.sb-resource-center-page .sb-rc__list--preview.sb-rc__list--card > .sb-rc__item:nth-child(n+3) {
		display: none;
	}

	.sb-resource-center-page .sb-rc__list--feature-md > .sb-rc__item:first-child {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	/* lg:grid-cols-3; protocols lg:grid-cols-2 */
	.sb-resource-center-page .sb-rc__list--card {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sb-resource-center-page .sb-rc__list--row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-resource-center-page .sb-rc__list--feature-lg > .sb-rc__item:first-child {
		grid-column: span 3;
	}

	/* Ruling 2: a lone last protocol row spans both columns. */
	.sb-resource-center-page .sb-rc__list--row > .sb-rc__item:last-child:nth-child(odd) {
		grid-column: span 2;
	}
}

/* ---------- the card frame ---------- */

/* group relative flex h-full min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-card hover:border-primary */
.sb-resource-center-page .sb-rc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--sbr-border);
	border-radius: 8px;
	background: var(--sbr-card);
	transition: border-color 0.15s var(--sbr-ease), background-color 0.15s var(--sbr-ease);
}

.sb-resource-center-page .sb-rc-card:hover {
	border-color: var(--sbr-navy);
}

/* Keyboard focus: a ring around the whole card (its one link covers it). */
.sb-resource-center-page .sb-rc-card:has(.sb-rc-card__link:focus-visible) {
	box-shadow: var(--sbr-ring);
}

/* aspect-video overflow-hidden bg-primary/10: a fixed 16:9 box, so no shift when the image arrives */
.sb-resource-center-page .sb-rc-card__media {
	position: relative;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sbr-navy-10);
	color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc .sb-rc-card__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* h-10 w-10 */
.sb-resource-center-page .sb-rc-card__media-icon {
	width: 40px;
	height: 40px;
}

/* absolute bottom-3 left-3; h-9 w-9 rounded-full bg-primary-foreground text-primary shadow-sm */
.sb-resource-center-page .sb-rc-card__play {
	position: absolute;
	bottom: 12px;
	left: 12px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc-card__play-icon {
	width: 20px;
	height: 20px;
}

/* flex min-w-0 flex-1 flex-col p-5 sm:p-6 */
.sb-resource-center-page .sb-rc-card__body {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
}

/* flex flex-wrap items-center justify-between gap-x-3 gap-y-2 text-xs */
.sb-resource-center-page .sb-rc-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	font-family: var(--sbr-font);
	font-size: 12px;
	line-height: 16px;
}

/* inline-flex items-center gap-1.5 font-semibold uppercase tracking-wide text-primary */
.sb-resource-center-page .sb-rc-card__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sbr-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--sbr-navy);
}

/* A protocol that opens as a PDF: a small tag after its label. */
.sb-resource-center-page .sb-rc-card__pdf {
	margin-left: 2px;
	padding: 1px 6px;
	border: 1px solid var(--sbr-border);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: 0.3px;
	color: var(--sbr-muted-fg);
}

/* h-3.5 w-3.5 */
.sb-resource-center-page .sb-rc-card__label-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.sb-resource-center-page .sb-rc-card__date {
	font-family: var(--sbr-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: normal;
	color: var(--sbr-muted-fg);
}

/* mt-3 self-start rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground */
.sb-resource-center-page .sb-rc-card__topic {
	align-self: flex-start;
	margin: 12px 0 0;
	padding: 4px 10px;
	border: 1px solid var(--sbr-border);
	border-radius: 9999px;
	font-family: var(--sbr-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: normal;
	color: var(--sbr-muted-fg);
}

/* mt-3 text-lg font-bold leading-snug text-primary sm:text-xl */
.sb-resource-center-page .sb-rc-card__title {
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 24.75px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-navy);
}

/*
 * The title's link covers the whole card (after:absolute after:inset-0).
 * Ruling 1: clamped at four lines.
 */
.sb-resource-center-page .sb-rc .sb-rc-card__link,
.sb-resource-center-page .sb-rc .sb-rc-card__link:visited,
.sb-resource-center-page .sb-rc .sb-rc-card__link:focus {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	font: inherit;
	letter-spacing: inherit;
	color: var(--sbr-navy);
	text-decoration: none;
	text-underline-offset: 4px;
}

.sb-resource-center-page .sb-rc .sb-rc-card__link::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
}

.sb-resource-center-page .sb-rc .sb-rc-card:hover .sb-rc-card__link {
	color: var(--sbr-navy);
	text-decoration: underline;
}

/* mt-3 text-sm leading-relaxed text-foreground/80 line-clamp-2 (case studies: 3) */
.sb-resource-center-page .sb-rc-card__excerpt {
	display: -webkit-box;
	margin: 12px 0 0;
	padding: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 22.75px;
	letter-spacing: normal;
	color: var(--sbr-ink-80);
}

.sb-resource-center-page .sb-rc-card__excerpt--3 {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* mt-auto flex min-h-11 items-end gap-2 pt-5 text-sm font-semibold text-primary */
.sb-resource-center-page .sb-rc-card__action {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	min-height: 44px;
	margin: auto 0 0;
	padding: 20px 0 0;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--sbr-navy);
}

/* h-4 w-4 transition-transform group-hover:translate-x-1 */
.sb-resource-center-page .sb-rc-card__arrow {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-bottom: 2px;
	transition: transform 0.15s var(--sbr-ease);
}

.sb-resource-center-page .sb-rc-card:hover .sb-rc-card__arrow {
	transform: translateX(4px);
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc-card__body {
		padding: 24px;
	}

	.sb-resource-center-page .sb-rc-card__title {
		font-size: 20px;
		line-height: 27.5px;
	}
}

/* ---------- the wide first card (image cards only) ---------- */

@media (min-width: 768px) and (max-width: 1023.98px) {
	.sb-resource-center-page .sb-rc__list--feature-md > .sb-rc__item:first-child .sb-rc-card {
		flex-direction: row;
	}

	.sb-resource-center-page .sb-rc__list--feature-md > .sb-rc__item:first-child .sb-rc-card__media {
		align-self: flex-start;
		width: 45%;
	}

	.sb-resource-center-page .sb-rc__list--feature-md > .sb-rc__item:first-child .sb-rc-card__title {
		font-size: 24px;
		line-height: 33px;
	}
}

@media (min-width: 1024px) {
	.sb-resource-center-page .sb-rc__list--feature-lg > .sb-rc__item:first-child .sb-rc-card {
		flex-direction: row;
	}

	.sb-resource-center-page .sb-rc__list--feature-lg > .sb-rc__item:first-child .sb-rc-card__media {
		align-self: flex-start;
		width: 45%;
	}

	.sb-resource-center-page .sb-rc__list--feature-lg > .sb-rc__item:first-child .sb-rc-card__title {
		font-size: 24px;
		line-height: 33px;
	}
}

/* ---------- protocol row ---------- */

/* ml-5 mt-5 grid h-12 w-12 shrink-0 place-items-center rounded-md bg-primary/10 text-primary sm:my-6 sm:ml-6 */
.sb-resource-center-page .sb-rc-card__tile {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 20px 0 0 20px;
	border-radius: 6px;
	background: var(--sbr-navy-10);
	color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc-card__tile-icon {
	width: 24px;
	height: 24px;
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc-card--row {
		flex-direction: row;
	}

	.sb-resource-center-page .sb-rc-card__tile {
		margin: 24px 0 24px 24px;
	}

	/* sm:pl-4 */
	.sb-resource-center-page .sb-rc-card--row .sb-rc-card__body {
		padding-left: 16px;
	}
}

/* ---------- news row ---------- */

/* Rows of one card: no frame of their own; hover:bg-secondary/40 */
.sb-resource-center-page .sb-rc-card--log {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: var(--sbr-card);
}

.sb-resource-center-page .sb-rc-card--log:hover {
	background: var(--sbr-tint);
}

/* The list clips its rows, so the ring is drawn inside the row. */
.sb-resource-center-page .sb-rc-card--log:has(.sb-rc-card__link:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--sbr-navy);
}

/* px-6 pt-5 text-sm font-bold text-primary sm:w-32 sm:shrink-0 sm:py-6 */
.sb-resource-center-page .sb-rc-card__when {
	display: block;
	padding: 20px 24px 0;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc-card__when-day,
.sb-resource-center-page .sb-rc-card__when-year {
	display: none;
}

/* pt-3 sm:pl-0 sm:pt-6 */
.sb-resource-center-page .sb-rc-card--log .sb-rc-card__body {
	padding-top: 12px;
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc-card--log {
		flex-direction: row;
	}

	.sb-resource-center-page .sb-rc-card__when {
		flex-shrink: 0;
		width: 128px;
		padding: 24px;
	}

	/* The full date stays for screen readers; the two-line date is what is seen. */
	.sb-resource-center-page .sb-rc-card__when-full {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	/* whitespace-nowrap text-2xl */
	.sb-resource-center-page .sb-rc-card__when-day {
		display: block;
		font-size: 24px;
		line-height: 32px;
		white-space: nowrap;
	}

	/* mt-1 text-sm text-muted-foreground */
	.sb-resource-center-page .sb-rc-card__when-year {
		display: block;
		margin-top: 4px;
		font-size: 14px;
		line-height: 20px;
		color: var(--sbr-muted-fg);
	}

	.sb-resource-center-page .sb-rc-card--log .sb-rc-card__body {
		padding-top: 24px;
		padding-left: 0;
	}
}

/* ---------- results ---------- */

/* mt-5 flex flex-wrap items-center gap-2 */
.sb-resource-center-page .sb-rc__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
}

/* inline-flex min-h-11 items-center gap-2 rounded-full border border-border px-4 text-sm text-primary hover:bg-secondary */
.sb-resource-center-page .sb-rc .sb-rc__chip,
.sb-resource-center-page .sb-rc .sb-rc__chip:visited,
.sb-resource-center-page .sb-rc .sb-rc__chip:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	max-width: 100%;
	padding: 0 16px;
	border: 1px solid var(--sbr-border);
	border-radius: 9999px;
	background: none;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--sbr-navy);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.sb-resource-center-page .sb-rc .sb-rc__chip:hover {
	background: var(--sbr-secondary);
	color: var(--sbr-navy);
	text-decoration: none;
}

.sb-resource-center-page .sb-rc__chip-x {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

/* inline-flex min-h-11 items-center rounded-sm px-3 text-sm font-semibold text-primary underline underline-offset-4 */
.sb-resource-center-page .sb-rc .sb-rc__clear,
.sb-resource-center-page .sb-rc .sb-rc__clear:visited,
.sb-resource-center-page .sb-rc .sb-rc__clear:hover,
.sb-resource-center-page .sb-rc .sb-rc__clear:focus {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 2px;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--sbr-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* mt-9 space-y-10 */
.sb-resource-center-page .sb-rc__groups {
	margin: 36px 0 0;
}

.sb-resource-center-page .sb-rc__group {
	margin: 0;
}

.sb-resource-center-page .sb-rc__group + .sb-rc__group {
	margin-top: 40px;
}

/* flex items-center gap-2 text-xl font-bold text-primary */
.sb-resource-center-page .sb-rc__h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-navy);
}

/* No results: mt-8 flex flex-wrap gap-3 */
.sb-resource-center-page .sb-rc__browse {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px 0 0;
	padding: 0;
}

/* inline-flex min-h-11 items-center gap-2 rounded-md border border-border px-4 text-sm font-semibold text-primary hover:border-primary */
.sb-resource-center-page .sb-rc .sb-rc__browse-link,
.sb-resource-center-page .sb-rc .sb-rc__browse-link:visited,
.sb-resource-center-page .sb-rc .sb-rc__browse-link:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--sbr-border);
	border-radius: 6px;
	background: none;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--sbr-navy);
	text-decoration: none;
	transition: border-color 0.15s var(--sbr-ease);
}

.sb-resource-center-page .sb-rc .sb-rc__browse-link:hover {
	border-color: var(--sbr-navy);
	color: var(--sbr-navy);
	text-decoration: none;
}

/* ---------- buttons ---------- */

/*
 * ui/button.tsx size lg: inline-flex items-center justify-center gap-2
 * whitespace-nowrap rounded-md text-sm font-semibold h-11 px-8.
 */
.sb-resource-center-page .sb-rc .sb-rc__btn,
.sb-resource-center-page .sb-rc .sb-rc__btn:visited,
.sb-resource-center-page .sb-rc .sb-rc__btn:focus {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	margin: 0;
	padding: 0 32px;
	border: 1px solid transparent;
	border-radius: 6px;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s var(--sbr-ease), background-color 0.15s var(--sbr-ease), border-color 0.15s var(--sbr-ease);
}

/* variant outline, border-primary text-primary hover:bg-primary hover:text-primary-foreground */
.sb-resource-center-page .sb-rc .sb-rc__btn--outline,
.sb-resource-center-page .sb-rc .sb-rc__btn--outline:visited,
.sb-resource-center-page .sb-rc .sb-rc__btn--outline:focus {
	border-color: var(--sbr-navy);
	background-color: var(--sbr-bg);
	color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc .sb-rc__btn--outline:hover {
	background-color: var(--sbr-navy);
	color: #fff;
	text-decoration: none;
}

.sb-resource-center-page .sb-rc .sb-rc__btn--outline[aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* bg-accent text-accent-foreground hover:bg-accent/90 */
.sb-resource-center-page .sb-rc .sb-rc__btn--accent,
.sb-resource-center-page .sb-rc .sb-rc__btn--accent:visited,
.sb-resource-center-page .sb-rc .sb-rc__btn--accent:focus {
	background-color: var(--sbr-orange);
	color: #fff;
}

.sb-resource-center-page .sb-rc .sb-rc__btn--accent:hover {
	background-color: rgb(235 116 61 / 0.9);
	color: #fff;
	text-decoration: none;
}

/* border-primary-foreground/60 bg-transparent text-primary-foreground hover:bg-primary-foreground hover:text-primary */
.sb-resource-center-page .sb-rc .sb-rc__btn--on-navy,
.sb-resource-center-page .sb-rc .sb-rc__btn--on-navy:visited,
.sb-resource-center-page .sb-rc .sb-rc__btn--on-navy:focus {
	border-color: rgb(255 255 255 / 0.6);
	background-color: transparent;
	color: #fff;
}

.sb-resource-center-page .sb-rc .sb-rc__btn--on-navy:hover {
	background-color: #fff;
	color: var(--sbr-navy);
	text-decoration: none;
}

/*
 * Keyboard focus on the buttons. Stated here, after the base rule above: that
 * rule covers :focus with `box-shadow: none` at the same specificity, and it
 * was switching these rings off (measured with real Tab keys on staging).
 */
.sb-resource-center-page .sb-rc .sb-rc__btn--outline:focus-visible {
	box-shadow: var(--sbr-ring);
}

.sb-resource-center-page .sb-rc .sb-rc__btn--accent:focus-visible,
.sb-resource-center-page .sb-rc .sb-rc__btn--on-navy:focus-visible {
	box-shadow: 0 0 0 2px var(--sbr-navy), 0 0 0 4px #fff;
}

/* mt-9 flex justify-center */
.sb-resource-center-page .sb-rc__loadmore {
	display: flex;
	justify-content: center;
	margin: 36px 0 0;
	padding: 0;
}

/* role="alert": mt-8 flex flex-wrap items-center justify-center gap-4 rounded-lg border bg-secondary/40 p-5 */
.sb-resource-center-page .sb-rc__error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 32px 0 0;
	padding: 20px;
	border: 1px solid var(--sbr-border);
	border-radius: 8px;
	background: var(--sbr-tint);
}

.sb-resource-center-page .sb-rc__error[hidden] {
	display: none;
}

.sb-resource-center-page .sb-rc__error-text {
	margin: 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--sbr-ink);
}

/* ---------- loading (script only): card-shaped placeholders in the same grid ---------- */

.sb-resource-center-page .sb-rc__skeleton {
	overflow: hidden;
	border: 1px solid var(--sbr-border);
	border-radius: 8px;
	background: var(--sbr-card);
}

.sb-resource-center-page .sb-rc__list--log > .sb-rc__skeleton {
	border-width: 1px 0 0;
	border-radius: 0;
}

.sb-resource-center-page .sb-rc__skeleton-media {
	aspect-ratio: 16 / 9;
	background: var(--sbr-navy-10);
}

.sb-resource-center-page .sb-rc__skeleton-body {
	display: grid;
	gap: 16px;
	padding: 24px;
}

.sb-resource-center-page .sb-rc__skeleton-line {
	height: 12px;
	border-radius: 4px;
	background: var(--sbr-muted);
}

.sb-resource-center-page .sb-rc__skeleton-line:nth-child(1) { width: 96px; }
.sb-resource-center-page .sb-rc__skeleton-line:nth-child(2) { width: 80%; height: 20px; }
.sb-resource-center-page .sb-rc__skeleton-line:nth-child(3) { width: 60%; height: 20px; }
.sb-resource-center-page .sb-rc__skeleton-line:nth-child(4) { width: 112px; }

@media (prefers-reduced-motion: no-preference) {
	.sb-resource-center-page .sb-rc__skeleton {
		animation: sb-rc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
}

@keyframes sb-rc-pulse {
	50% {
		opacity: 0.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-resource-center-page .sb-rc-card,
	.sb-resource-center-page .sb-rc-card__arrow {
		transition: none;
	}

	.sb-resource-center-page .sb-rc-card:hover .sb-rc-card__arrow {
		transform: none;
	}
}

/* ---------- newsletter (News view): the Press page's own form ---------- */

/* mt-14 border-t border-border pt-10 */
.sb-resource-center-page .sb-rc__news-letter {
	margin: 56px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--sbr-border);
}

/* text-2xl font-bold text-primary lg:text-3xl */
.sb-resource-center-page .sb-rc__news-letter-title {
	margin: 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc__news-letter-text {
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--sbr-ink-80);
}

/* mt-6 max-w-xl */
.sb-resource-center-page .sb-rc__news-letter-form {
	max-width: 576px;
	margin: 24px 0 0;
}

@media (min-width: 1024px) {
	.sb-resource-center-page .sb-rc__news-letter-title {
		font-size: 30px;
		line-height: 36px;
	}
}

/*
 * Gravity Forms' legacy markup, drawn as the design's form: two radios in a
 * row, then the email field and the Subscribe button side by side from 640.
 * !important because the plugin's legacy stylesheet styles these same nodes
 * through long selector chains.
 */
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper,
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper form {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--sbr-font) !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper ul.gform_fields {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper ul.gform_fields > li.gfield {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper li.gfield::before,
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper li.gchoice::before {
	content: none !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper li.gform_hidden,
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper li.gfield--type-html,
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper li.gfield--type-hidden {
	display: none !important;
}

/* The field labels are hidden by the form's own settings: kept for screen readers. */
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gfield_label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper ul.gfield_radio {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 24px !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper ul.gfield_radio li.gchoice {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	list-style: none !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper ul.gfield_radio input[type="radio"] {
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	accent-color: var(--sbr-navy);
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper ul.gfield_radio label {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--sbr-font) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: var(--sbr-ink) !important;
	cursor: pointer;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .ginput_container_email {
	margin: 16px 0 0 !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .ginput_container_email input {
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid var(--sbr-border) !important;
	border-radius: 6px !important;
	background: var(--sbr-bg) !important;
	box-shadow: none !important;
	font-family: var(--sbr-font) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--sbr-ink) !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper form {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 12px !important;
	align-items: end !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_body {
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* The site's footer-signup styling pins this button over the field: back in the flow. */
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_footer {
	position: static !important;
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_footer .gform_button {
	position: static !important;
	float: none !important;
}

@media (min-width: 640px) {
	/* Email field and Subscribe side by side (the radios sit above the field). */
	.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper form {
		grid-template-columns: minmax(0, 1fr) auto !important;
	}
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_footer .gform_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--sbr-orange) !important;
	box-shadow: none !important;
	font-family: var(--sbr-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #fff !important;
	cursor: pointer;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_footer .gform_button:hover {
	background: rgb(235 116 61 / 0.9) !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper input:focus-visible,
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_button:focus-visible {
	box-shadow: var(--sbr-ring) !important;
}

.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .validation_message,
.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_validation_errors,
.sb-resource-center-page .sb-rc__news-letter-form .gform_confirmation_message {
	font-family: var(--sbr-font) !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc__news-letter-form .gform_wrapper .gform_footer .gform_button {
		width: auto !important;
	}
}

/* ---------- closing band ---------- */

/*
 * bg-primary text-primary-foreground. The publications line follows on the
 * page background, as in the design.
 */
.sb-resource-center-page .sb-rc__cta {
	margin: 0;
	background: var(--sbr-navy);
	color: #fff;
}

/* flex flex-col justify-between gap-8 py-14 lg:flex-row lg:items-center lg:py-16 */
.sb-resource-center-page .sb-rc__cta-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding-top: 56px;
	padding-bottom: 56px;
}

/* mt-3 max-w-2xl leading-relaxed text-primary-foreground/85 */
.sb-resource-center-page .sb-rc__cta-text {
	max-width: 672px;
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--sbr-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: normal;
	color: rgb(255 255 255 / 0.85);
}

/* flex shrink-0 flex-col gap-3 sm:flex-row */
.sb-resource-center-page .sb-rc__cta-actions {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	gap: 12px;
}

.sb-resource-center-page .sb-rc__cta .sb-rc__h2 {
	font-size: 30px;
	line-height: 36px;
}

@media (min-width: 640px) {
	.sb-resource-center-page .sb-rc__cta-actions {
		flex-direction: row;
	}
}

@media (min-width: 1024px) {
	.sb-resource-center-page .sb-rc__cta-inner {
		flex-direction: row;
		align-items: center;
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* flex flex-wrap items-center justify-center gap-2 py-4 text-sm text-muted-foreground */
.sb-resource-center-page .sb-rc__pubs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-top: 16px;
	padding-bottom: 16px;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--sbr-muted-fg);
}

.sb-resource-center-page .sb-rc .sb-rc__pubs-link,
.sb-resource-center-page .sb-rc .sb-rc__pubs-link:visited,
.sb-resource-center-page .sb-rc .sb-rc__pubs-link:hover,
.sb-resource-center-page .sb-rc .sb-rc__pubs-link:focus {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-radius: 2px;
	font-family: var(--sbr-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--sbr-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- forced colours ---------- */

/*
 * The focus ring is a box-shadow, as in the design (a transparent 2px outline,
 * not `outline: none`), so forced-colours mode still shows an outline.
 * !important because css/legacy/legacy-site.css has
 * `a:focus { outline: 0 !important }`.
 */
.sb-resource-center-page .sb-rc a:focus-visible,
.sb-resource-center-page .sb-rc button:focus-visible,
.sb-resource-center-page .sb-rc select:focus-visible,
.sb-resource-center-page .sb-rc input:focus-visible {
	outline: 2px solid transparent !important;
	outline-offset: 2px !important;
}