/*
 * SynerFuse content styles.
 * Loaded on the front end and inside the block editor, so pages look the same while editing.
 * Colors and type sizes come from theme.json presets.
 */

:root {
	--sf-ink: var(--wp--preset--color--ink, #0E2A3B);
	--sf-slate: var(--wp--preset--color--slate, #3A5261);
	--sf-signal: var(--wp--preset--color--signal, #0074A1);
	--sf-fuse: var(--wp--preset--color--fuse, #0FB0E3);
	--sf-halo: var(--wp--preset--color--halo, #89D6F0);
	--sf-mist: var(--wp--preset--color--mist, #D3EEF9);
	/* A mid blue for filled map areas: halo is too light to read as selected. */
	--sf-deep: #1B6E94;
	--sf-paper: var(--wp--preset--color--paper, #E3F1F8);
	--sf-line: #D5E4EC;
	--sf-field-border: #6F8998;
	--sf-error: #B42318;
	--sf-success: #1B6E3B;
	--sf-display: var(--wp--preset--font-family--display, "Red Hat Display", system-ui, sans-serif);
	--sf-radius-panel: 28px;
	--sf-radius-media: 14px;
	--sf-section-space: clamp(2.75rem, 5vw, 4.75rem);
	--sf-deep: #0B4A5F;
}

/* ---------- Sections ---------- */

/*
 * The section rhythm is written out literally rather than read from a custom
 * property. A var() that fails to resolve makes the whole declaration invalid
 * at computed-value time, which silently drops the padding to zero instead of
 * falling back, and a single missing variable would then flatten every section
 * on the site. --sf-section-space is still defined above, so anything that
 * wants to follow this rhythm can, and a child theme can still override here.
 */
.sf-section {
	padding-top: clamp(2.75rem, 5vw, 4.75rem);
	padding-bottom: clamp(2.75rem, 5vw, 4.75rem);
}

.sf-section--tight {
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Full-width sections sit flush against each other. */
.entry-content > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

.sf-section__intro > * {
	max-width: 46rem;
}

.sf-section__intro + .wp-block-columns,
.sf-section__intro + .sf-team-grid,
.sf-section__intro + .sf-news {
	margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Row 28: a hairline between two plain sections so blocks read as distinct. */
.entry-content > .alignfull:not(.has-background) + .alignfull:not(.has-background) {
	border-top: 1px solid var(--sf-line);
}

/* Dark sections */
.has-ink-background-color {
	color: #D8E8F0;
}

.has-ink-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.has-ink-background-color a:where(:not(.wp-element-button)) {
	color: var(--sf-fuse);
}

.has-ink-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--sf-fuse);
	color: var(--sf-ink);
}

.has-ink-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: #fff;
	color: var(--sf-ink);
}

.has-ink-background-color .is-style-sf-divided > li {
	border-color: rgba(255, 255, 255, 0.18);
}

/* ---------- Type helpers ---------- */

.is-style-sf-lead,
.sf-lead {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--sf-ink);
}

.sf-caution {
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
	max-width: 36rem;
}

p.is-style-sf-notice,
.is-style-sf-notice {
	border-left: 4px solid var(--sf-fuse);
	background: var(--sf-paper);
	padding: 1rem 1.25rem;
	border-radius: 0 12px 12px 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--sf-ink);
}

.has-paper-background-color .is-style-sf-notice {
	background: #fff;
}

/* ---------- Buttons ---------- */

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--sf-signal);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--sf-ink);
	border-color: var(--sf-ink);
	color: #fff;
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--sf-signal);
	outline-offset: 3px;
}

.has-ink-background-color .wp-block-button__link:focus-visible {
	outline-color: var(--sf-fuse);
}

/* ---------- Brand rings (block style on Group) ---------- */

.is-style-sf-rings {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	--sf-rings-size: clamp(28rem, 56vw, 52rem);
	--sf-rings-right: calc(-1 * clamp(9rem, 17vw, 17rem));
	/*
	 * The emblem supplies the cyan ring and the spine, so it is sized to the
	 * mark's own proportions: its outer edge meets the halo band exactly.
	 */
	--sf-rings-core: calc(var(--sf-rings-size) * 0.659);
	--sf-rings-core-inset: calc(var(--sf-rings-size) * 0.1705);
}

.is-style-sf-rings::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: var(--sf-rings-right);
	width: var(--sf-rings-size);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: url("../images/rings.svg") center / contain no-repeat;
	pointer-events: none;
}

/* The home hero builds the full mark: these rings plus the emblem in the middle. */
.sf-hero-home.is-style-sf-rings::before {
	background-image: url("../images/rings-mark.svg");
}

.sf-hero-home.is-style-sf-rings::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: calc(var(--sf-rings-right) + var(--sf-rings-core-inset));
	width: var(--sf-rings-core);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: url("../images/emblem-spine.png") center / contain no-repeat;
	border-radius: 50%;
	pointer-events: none;
}

@media (max-width: 1100px) {
	.is-style-sf-rings::before,
	.sf-hero-home.is-style-sf-rings::after {
		right: calc(-18rem + var(--offset, 0rem));
		opacity: 0.6;
	}

	.sf-hero-home.is-style-sf-rings::after {
		--offset: var(--sf-rings-core-inset);
	}
}

@media (max-width: 781px) {
	.is-style-sf-rings {
		--sf-rings-size: 30rem;
	}

	.is-style-sf-rings::before {
		top: auto;
		bottom: -17rem;
		right: -15rem;
		width: var(--sf-rings-size);
		transform: none;
		opacity: 0.35;
	}

	.sf-hero-home.is-style-sf-rings::after {
		top: auto;
		bottom: calc(-17rem + var(--sf-rings-core-inset));
		right: calc(-15rem + var(--sf-rings-core-inset));
		transform: none;
		opacity: 0.35;
	}
}

/* ---------- Home hero ---------- */

.sf-hero-home {
	padding-top: clamp(3.5rem, 8vw, 7rem);
	padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

.sf-hero-home__content > * {
	max-width: 36rem;
}

.sf-hero-home h1 {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.03em;
	max-width: 10em;
	text-wrap: balance;
	margin-top: 0;
}

/*
 * Attribution line under the hero heading. The size comes from the Small
 * preset, so it stays adjustable in the editor's typography panel.
 */
.sf-hero-home .is-style-sf-lead {
	margin-top: 1.75rem;
}

/* The lead sits closer when the attribution line already broke the gap. */
.sf-hero-home .wp-block-buttons {
	margin-top: 2.25rem;
}

.sf-hero-home .sf-caution {
	margin-top: 2.5rem;
}

/*
 * The one orchestrated motion on the site, following the SynerFuse brand video:
 * the vertebra lands first, waves pulse outward from it, and the rings then grow
 * out of the centre and lock into place.
 */
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	.sf-hero-home.is-style-sf-rings::after {
		animation:
			sf-core-in 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both,
			sf-core-pulse 2.1s cubic-bezier(0.25, 0.6, 0.2, 1) 0.35s both;
	}

	.sf-hero-home.is-style-sf-rings::before {
		animation: sf-rings-in 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) 0.95s both;
	}
}

@keyframes sf-core-in {
	from {
		opacity: 0;
		transform: translateY(-50%) scale(0.5);
	}
	60% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

/* Three waves leaving the emblem, each a little behind the one before it. */
@keyframes sf-core-pulse {
	0% {
		box-shadow:
			0 0 0 0 rgba(15, 176, 227, 0.3),
			0 0 0 0 rgba(15, 176, 227, 0.2),
			0 0 0 0 rgba(15, 176, 227, 0.12);
	}
	45% {
		box-shadow:
			0 0 0 7rem rgba(15, 176, 227, 0.12),
			0 0 0 4rem rgba(15, 176, 227, 0.16),
			0 0 0 1.5rem rgba(15, 176, 227, 0.1);
	}
	100% {
		box-shadow:
			0 0 0 16rem rgba(15, 176, 227, 0),
			0 0 0 12rem rgba(15, 176, 227, 0),
			0 0 0 8rem rgba(15, 176, 227, 0);
	}
}

/* The rings grow out from behind the emblem rather than fading in at full size. */
@keyframes sf-rings-in {
	from {
		opacity: 0;
		transform: translateY(-50%) scale(0.62);
	}
	55% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

/* ---------- Call-to-action band ---------- */

.sf-cta__inner > * {
	max-width: 46rem;
}

/* ---------- Images ---------- */

.wp-block-image img {
	height: auto;
}

.wp-block-image.is-style-sf-framed img {
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
	padding: clamp(0.75rem, 2.5vw, 2rem);
}

.wp-block-image.is-style-sf-logo img {
	width: auto;
	max-width: min(100%, 260px);
	max-height: 110px;
	object-fit: contain;
}

/* ---------- Partner cards ---------- */

.sf-partner-cards {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.sf-partner-card {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
}

.sf-partner-card__logo {
	display: grid;
	place-items: center;
	min-height: 8.5rem;
	padding: 1.5rem;
	background: var(--sf-paper);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
}

/* For logos drawn in white, for dark backgrounds. */
.sf-partner-card__logo.is-dark {
	background: var(--sf-ink);
	border-color: var(--sf-ink);
}

.sf-partner-card__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 5rem;
	object-fit: contain;
}

/* Used when a partner has no logo file. */
.sf-partner-card__mark {
	font-family: var(--sf-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-align: center;
	color: var(--sf-signal);
}

.sf-partner-card__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.sf-partner-card__text {
	margin: 0.6rem 0 0;
	max-width: 56ch;
}

.sf-partner-card__link {
	margin: 0.9rem 0 0;
	font-weight: 600;
}

@media (max-width: 700px) {
	.sf-partner-card {
		grid-template-columns: 1fr;
	}

	.sf-partner-card__logo {
		min-height: 6.5rem;
	}
}

/* ---------- Published results: rings, bands, dots ---------- */

/*
 * Two class names, not one: the base .sf-charts rule is further down the file
 * and would otherwise win on source order.
 */
.sf-charts.sf-charts--pair {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.sf-charts.sf-charts--single {
	grid-template-columns: minmax(0, 1fr);
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* The standing study caveat, on every card rather than once per section. */
.sf-chart__caveat {
	margin: 0.85rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sf-slate);
}

/* Pain: two three-quarter dials, one inside the other. */

.sf-rings__track {
	fill: none;
	stroke: var(--sf-mist);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 0 13;
}

.sf-rings__arc {
	fill: none;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 0 13;
}

.sf-rings__value {
	font-family: var(--sf-display);
	font-size: 2.5rem;
	font-weight: 600;
	fill: var(--sf-ink);
}

.sf-rings__label {
	font-size: 0.875rem;
	fill: var(--sf-slate);
}

/* Disability: stacked bands, with a bracket over the part being described. */

.sf-bands__rowlabel {
	font-family: var(--sf-display);
	font-size: 0.9375rem;
	font-weight: 600;
	fill: var(--sf-ink);
}

.sf-bands__value {
	font-size: 0.875rem;
	font-weight: 600;
	fill: #fff;
}

.sf-bands__bracket {
	fill: none;
	stroke: var(--sf-slate);
	stroke-width: 1;
}

.sf-bands__callout {
	font-family: var(--sf-display);
	font-size: 1.0625rem;
	font-weight: 600;
	fill: var(--sf-ink);
}

.sf-bands__caption {
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.8125rem;
	font-weight: 400;
	fill: var(--sf-slate);
}

.sf-bands__legend {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.4rem 1.5rem;
}

.sf-bands__range {
	color: var(--sf-slate);
}

/* Opioid use: one dot per patient, filled when they were taking them. */

.sf-dots__dot {
	fill: #fff;
	stroke: var(--sf-signal);
	stroke-width: 1.5;
}

.sf-dots__dot.is-on {
	fill: var(--sf-signal);
	stroke: var(--sf-signal);
}

.sf-dots__title {
	font-family: var(--sf-display);
	font-size: 0.9375rem;
	font-weight: 600;
	fill: var(--sf-ink);
}

.sf-dots__count {
	font-family: var(--sf-display);
	font-size: 2.25rem;
	font-weight: 600;
	fill: var(--sf-ink);
}

.sf-dots__of,
.sf-dots__caption {
	font-size: 0.8125rem;
	fill: var(--sf-slate);
}

.sf-dots__arrow {
	fill: none;
	stroke: var(--sf-slate);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sf-dots__swatch {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	border: 1.5px solid var(--sf-signal);
	background: #fff;
	margin-right: 0.5rem;
	vertical-align: -0.1rem;
}

.sf-dots__swatch.is-on {
	background: var(--sf-signal);
}

/* ---------- Research partners ---------- */

.sf-partners-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sf-partner-tile {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
}

/* Matching the group cards on the home page, which is the size asked for. */
.sf-partner-tile__logo {
	display: grid;
	place-items: center;
	height: 9rem;
	padding: 1.25rem 1.5rem;
	background: var(--sf-paper);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
	margin-bottom: 1.25rem;
}

.sf-partner-tile__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 5.5rem;
	object-fit: contain;
}

.sf-partner-tile__mark {
	font-family: var(--sf-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--sf-signal);
}

.sf-partner-tile__name {
	margin: 0;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--sf-ink);
	line-height: 1.25;
}

.sf-partner-tile__place {
	margin: 0.3rem 0 0;
	color: var(--sf-slate);
	font-size: var(--wp--preset--font-size--small);
}

.sf-partner-tile__links {
	margin: auto 0 0;
	padding-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.sf-trial__footnote {
	margin-top: 1.25rem;
	color: var(--sf-slate);
}

@media (max-width: 900px) {
	.sf-charts.sf-charts--pair {
		grid-template-columns: 1fr;
	}

	.sf-partners-grid {
		grid-template-columns: 1fr;
	}

	.sf-bands__legend {
		grid-template-columns: 1fr;
	}
}

/* ---------- Technology: key message, flow graphic ---------- */

/* What the procedure is for, before how it works. */
.sf-keymessage .sf-section__intro {
	max-width: 48rem;
}

.sf-keymessage h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

/* The procedure graphic now sits above the four steps rather than beside them. */
.sf-flow__image {
	margin: 0 auto clamp(2rem, 5vw, 3rem);
	max-width: 46rem;
}

.sf-flow__image img {
	display: block;
	width: 100%;
	height: auto;
}

.sf-flow__cite {
	display: block;
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

/* ---------- The QuantumStim group (home) ---------- */

/*
 * Three companies across. Each logo gets a tile of its own so that marks drawn
 * at different weights and proportions still read as one row, and the text
 * below starts at the same line on every card whatever the logo's height.
 */

/*
 * Auto-fit rather than a fixed three, so a fourth company joins the row on a
 * wide screen instead of stranding itself on a line of its own, and the grid
 * steps down to two and then one without another breakpoint.
 */
.sf-family {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.sf-family__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sf-family__card > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sf-family__card:hover,
.sf-family__card:focus-within {
	border-color: var(--sf-halo);
	box-shadow: 0 10px 28px rgba(14, 42, 59, 0.08);
}

.sf-family__logo {
	display: grid;
	place-items: center;
	/* A set height, not a minimum, so the three tiles stay level whatever is in them. */
	height: 11.25rem;
	padding: 1.25rem 1.5rem;
	background: var(--sf-paper);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
}

/* For a logo drawn in white, which needs a dark tile to be visible at all. */
.sf-family__logo.is-dark {
	background: var(--sf-ink);
	border-color: var(--sf-ink);
}

/* For artwork that carries its own white ground, which would show as a box. */
.sf-family__logo.is-white {
	background: #fff;
}

/* For a square lockup, which a height cap leaves small in a wide tile. */
.sf-family__logo.is-large .sf-family__img img {
	max-height: 8.75rem;
}

/*
 * A wordmark several times wider than it is tall is held back by the tile's
 * side padding, not by the height cap, so it gets the width back.
 */
.sf-family__logo.is-wide {
	padding-inline: 0.75rem;
}

/* Shown in place of a logo until the artwork exists. */
.sf-family__mark {
	margin: 0;
	font-family: var(--sf-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--sf-signal);
}

.sf-family__img {
	margin: 0;
}

.sf-family__img img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 4.75rem;
	object-fit: contain;
}

.sf-family__name {
	margin-top: 1.5rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.sf-family__text {
	margin-top: 0.6rem;
	color: var(--sf-slate);
}

/* Pushed to the foot of the card so the links line up across the row. */
.sf-family__link {
	margin-top: auto;
	padding-top: 1.1rem;
	font-weight: 600;
}

@media (max-width: 900px) {
	/* Two up on a tablet; one only once that would be under 14rem a card. */
	.sf-family {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	}
}

/* ---------- Panels ---------- */

.is-style-sf-panel {
	background: var(--sf-paper);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.has-paper-background-color .is-style-sf-panel {
	background: #fff;
}

.is-style-sf-panel > :first-child {
	margin-top: 0;
}

/* ---------- Problem statistics ---------- */

.sf-problem {
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sf-problem__panel {
	background: #fff;
	border-radius: var(--sf-radius-panel);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid var(--sf-line);
}

.sf-problem__panel > * {
	margin-top: 0;
}

.sf-problem__panel .wp-block-image {
	margin: 0 0 1.75rem;
}

.sf-problem__panel .wp-block-image img {
	display: block;
	width: 100%;
	height: clamp(150px, 16vw, 210px);
	object-fit: cover;
	border-radius: var(--sf-radius-media);
}

.sf-problem__panel h3 {
	margin: 1rem 0 1.5rem;
}

.sf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: 1.5rem 2rem;
}

.sf-stats > * {
	margin: 0 !important;
}

.sf-stats--three {
	margin-top: clamp(2rem, 4vw, 3rem);
	gap: 2rem;
}

.sf-stat {
	border-top: 2px solid var(--sf-fuse);
	padding-top: 1rem;
}

.sf-stat > * {
	margin: 0;
}

.sf-stat__value {
	font-family: var(--sf-display);
	font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.375rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-wrap: balance;
	line-height: 1.05;
	color: var(--sf-ink);
}

.sf-stat__label {
	margin-top: 0.4rem !important;
	color: var(--sf-slate);
}

.sf-callout {
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.4;
	color: var(--sf-ink);
	margin-top: 2rem !important;
}

/* ---------- Points (three-column text) ---------- */

.sf-points .wp-block-column {
	border-top: 1px solid var(--sf-line);
	padding-top: 1.5rem;
}

.sf-points h3 {
	margin-top: 0;
}

.has-ink-background-color .sf-points .wp-block-column {
	border-color: rgba(255, 255, 255, 0.2);
}

/* ---------- Lists ---------- */

.wp-block-list.is-style-sf-divided {
	list-style: none;
	padding-left: 0;
	border-top: 1px solid var(--sf-line);
}

.wp-block-list.is-style-sf-divided > li {
	padding: 1rem 0;
	margin: 0;
	border-bottom: 1px solid var(--sf-line);
}

.wp-block-list.is-style-sf-divided strong {
	font-family: var(--sf-display);
	font-weight: 600;
	color: var(--sf-ink);
}

.has-ink-background-color .wp-block-list.is-style-sf-divided {
	border-color: rgba(255, 255, 255, 0.18);
}

.has-ink-background-color .wp-block-list.is-style-sf-divided strong {
	color: #fff;
}

/* Timeline: the leading <strong> in each item is the date. */
.wp-block-list.is-style-sf-timeline {
	list-style: none;
	padding-left: 0;
	margin-top: 2rem;
}

.wp-block-list.is-style-sf-timeline > li {
	position: relative;
	padding: 1.25rem 0 1.25rem 8.5rem;
	border-top: 1px solid var(--sf-line);
	margin: 0;
}

.wp-block-list.is-style-sf-timeline > li:last-child {
	border-bottom: 1px solid var(--sf-line);
}

.wp-block-list.is-style-sf-timeline > li > strong:first-child {
	position: absolute;
	left: 0;
	top: 1.1rem;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--sf-signal);
	line-height: 1.3;
}

@media (max-width: 600px) {
	.wp-block-list.is-style-sf-timeline > li {
		padding-left: 0;
		padding-top: 3.25rem;
	}
}

/* Numbered steps: for real sequences only. */
.wp-block-list.is-style-sf-steps {
	list-style: none;
	padding-left: 0;
	counter-reset: sf-step;
}

.wp-block-list.is-style-sf-steps > li {
	counter-increment: sf-step;
	position: relative;
	padding: 0.35rem 0 0.35rem 3rem;
	margin: 0 0 0.9rem;
	min-height: 2rem;
	color: var(--sf-ink);
}

.wp-block-list.is-style-sf-steps > li::before {
	content: counter(sf-step);
	position: absolute;
	left: 0;
	top: 0.2rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 2px solid var(--sf-halo);
	display: grid;
	place-items: center;
	font-family: var(--sf-display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sf-signal);
}

.sf-compare {
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sf-compare__col {
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.sf-compare__col > :first-child {
	margin-top: 0;
}

.sf-compare__col--synerfuse {
	background: var(--sf-paper);
	border-color: var(--sf-halo);
}

/* ---------- Team grid (SynerFuse Core block) ---------- */

.sf-team-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--sf-cols, 4), minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
}

@media (max-width: 1024px) {
	.sf-team-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.sf-team-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sf-team-card {
	position: relative;
	margin: 0;
}

.sf-team-card__photo {
	aspect-ratio: 4 / 5;
	border-radius: var(--sf-radius-media);
	overflow: hidden;
	background: var(--sf-mist);
	margin: 0 0 1rem;
}

.sf-team-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-initials {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-family: var(--sf-display);
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--sf-signal);
	background:
		radial-gradient(circle closest-side, #fff 0 52%, var(--sf-fuse) 52% 60%, var(--sf-halo) 60% 74%, var(--sf-mist) 74% 100%);
}

.sf-team-card__name {
	font-size: 1.1875rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.005em;
	margin: 0;
}

.sf-team-card__name a {
	color: var(--sf-ink);
	text-decoration: none;
}

.sf-team-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--sf-radius-media);
}

.sf-team-card__name a:hover,
.sf-team-card__name a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.sf-team-card__name a:focus-visible {
	outline: none;
}

.sf-team-card__name a:focus-visible::after {
	outline: 3px solid var(--sf-signal);
	outline-offset: 4px;
}

.sf-team-card__credentials {
	font-weight: 400;
	color: var(--sf-slate);
}

.sf-team-card__role {
	margin: 0.35rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--sf-slate);
}

.sf-empty {
	padding: 1.5rem;
	border: 1px dashed var(--sf-field-border);
	border-radius: 12px;
	color: var(--sf-slate);
}

/* ---------- News list (SynerFuse Core block) ---------- */

.sf-news__notice {
	margin: 0 0 2rem;
}

.sf-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sf-line);
}

.sf-news-item {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: 0.5rem 2rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--sf-line);
	margin: 0;
}

.sf-news-item__date {
	margin: 0;
	padding-top: 0.2rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
	font-variant-numeric: tabular-nums;
}

.sf-news-item__body > * {
	margin: 0;
}

.sf-news-item__source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
	margin-bottom: 0.4rem !important;
}

.sf-news-item__type {
	display: inline-block;
	padding: 0.1rem 0.65rem;
	border-radius: 999px;
	background: var(--sf-mist);
	color: var(--sf-ink);
	font-weight: 600;
	font-size: 0.8125rem;
}

.sf-news-item__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

.sf-news-item__title a {
	color: var(--sf-ink);
	text-decoration: none;
}

.sf-news-item__title a:hover,
.sf-news-item__title a:focus-visible {
	color: var(--sf-signal);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.sf-news-item__external {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.3em;
	vertical-align: baseline;
	color: var(--sf-signal);
}

.sf-news-item__excerpt {
	margin-top: 0.5rem !important;
	color: var(--sf-slate);
	max-width: 60ch;
}

.sf-news-item__more {
	margin-top: 0.6rem !important;
	font-weight: 600;
}

@media (max-width: 640px) {
	.sf-news-item {
		grid-template-columns: 1fr;
	}
}

/* Pagination (news block and archives) */
.sf-pagination {
	margin-top: 2.5rem;
}

.sf-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.sf-pagination a.page-numbers,
.sf-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--sf-line);
	color: var(--sf-ink);
	text-decoration: none;
	font-family: var(--sf-display);
	font-weight: 500;
}

.sf-pagination a.page-numbers:hover {
	border-color: var(--sf-signal);
	color: var(--sf-signal);
}

.sf-pagination span.current {
	background: var(--sf-ink);
	border-color: var(--sf-ink);
	color: #fff;
}

/* ---------- Forms (SynerFuse Core block) ---------- */

.sf-form-wrap {
	scroll-margin-top: 7rem;
}

.sf-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.sf-field {
	grid-column: 1 / -1;
	margin: 0;
}

.sf-field--half {
	grid-column: auto;
}

@media (max-width: 640px) {
	.sf-form__grid {
		grid-template-columns: 1fr;
	}
}

.sf-field > label,
.sf-field__legend {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--sf-ink);
}

.sf-field__optional {
	font-weight: 400;
	color: var(--sf-slate);
}

.sf-field input[type="text"],
.sf-field input[type="email"],
.sf-field input[type="tel"],
.sf-field select,
.sf-field textarea,
.sf-password-form input[type="password"],
.sf-search-form input[type="search"] {
	width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	font: inherit;
	font-size: 1rem;
	color: var(--sf-ink);
	background: #fff;
	border: 1px solid var(--sf-field-border);
	border-radius: 10px;
	box-shadow: none;
}

.sf-field textarea {
	min-height: 9rem;
	resize: vertical;
}

.sf-field input:focus-visible,
.sf-field select:focus-visible,
.sf-field textarea:focus-visible,
.sf-password-form input:focus-visible,
.sf-search-form input:focus-visible {
	outline: 3px solid var(--sf-signal);
	outline-offset: 1px;
	border-color: var(--sf-signal);
}

.sf-field [aria-invalid="true"] {
	border-color: var(--sf-error);
	border-width: 2px;
}

.sf-field--checkbox label {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-weight: 400;
	color: var(--sf-ink);
}

.sf-field--checkbox input {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	accent-color: var(--sf-signal);
	flex: none;
}

.sf-form__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sf-form__footer {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.sf-form__submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.sf-form__status {
	margin: 1rem 0 0;
	font-weight: 600;
}

.sf-form__status:empty {
	display: none;
}

.sf-form__status.is-success {
	color: var(--sf-success);
}

.sf-form__status.is-error {
	color: var(--sf-error);
}

.sf-form.is-sent .sf-form__grid,
.sf-form.is-sent .sf-form__footer {
	display: none;
}

.sf-form.is-sent .sf-form__status {
	margin-top: 0;
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	background: #EAF6EE;
}

/* Editor: the form preview is not interactive. */
.block-editor-block-list__layout .sf-form {
	pointer-events: none;
}

/* ---------- Investor page ---------- */

.sf-public-section > :first-child {
	margin-top: 0;
}

.sf-password-form label {
	display: block;
	font-weight: 600;
	color: var(--sf-ink);
	margin-bottom: 0.4rem;
}

.sf-password-form__row,
.sf-search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sf-password-form__row input,
.sf-search-form__row input {
	flex: 1 1 14rem;
}

.sf-password-form button,
.sf-search-form button {
	border: 0;
	cursor: pointer;
}

/* ---------- Misc ---------- */

.sf-media-contact {
	color: var(--sf-slate);
}

.sf-address {
	line-height: 1.7;
}

.sf-contact {
	gap: clamp(2rem, 5vw, 4.5rem);
}

.sf-field__required {
	font-weight: 400;
	color: var(--sf-slate);
}

/* ---------- Investor login disclosure ---------- */

.sf-password {
	margin-top: 1.5rem;
}

.sf-password__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	background: var(--sf-signal);
	color: #fff;
	font-family: var(--sf-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	list-style: none;
}

.sf-password__toggle::-webkit-details-marker {
	display: none;
}

.sf-password__toggle::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.sf-password[open] .sf-password__toggle::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.sf-password__toggle:hover,
.sf-password__toggle:focus-visible {
	background: var(--sf-ink);
}

.sf-password .sf-password-form {
	margin-top: 1.25rem;
}

.sf-gate__help {
	margin-top: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

/*
 * Shown inside the password panel when the password was refused. The panel is
 * forced open in that case, so the message is the first thing in it.
 */
.sf-password__error {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	border-left: 4px solid var(--sf-error);
	background: #FDECEC;
	color: var(--sf-ink);
	font-weight: 600;
}

.sf-password__error + .sf-password-form {
	margin-top: 1rem;
}

.sf-password__error code {
	font-weight: 400;
}

/*
 * The box as a block. The panel inside it is the same disclosure the theme's
 * own password form draws, so the styles above do the work and only the
 * spacing around it belongs here.
 */

.sf-investor-gate > .sf-password:first-child {
	margin-top: 0;
}

.sf-investor-gate__open {
	margin: 0;
}

/* The panel sits in a column, so it should not run on past its own content. */
/*
 * Each half sizes to its own content rather than stretching to the taller one.
 *
 * This has to be align-self on the columns. Core sets align-items:initial with
 * !important on .wp-block-columns and then sets flex-start on
 * .are-vertically-aligned-top without it, so the container-level alignment the
 * block's own setting produces never wins. align-self is on the item, so it is
 * not in that argument at all.
 */
.sf-investors__gate > .wp-block-column {
	align-self: flex-start;
}

.sf-investors__gate > .sf-gate__login > :last-child {
	margin-bottom: 0;
}

/* ---------- For Investors ---------- */

/*
 * Four sections, three grids. Each grid is plain CSS over ordinary group
 * blocks, so the cards can be reordered, added to or emptied in the editor
 * without the layout needing anything done to it.
 */

/* Documents: three covers, each one a link to its PDF. */

.sf-docs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.25rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-doc {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
}

.sf-doc > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sf-doc__cover {
	margin: 0;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sf-doc__cover a {
	display: block;
}

.sf-doc__cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.sf-doc:hover .sf-doc__cover,
.sf-doc:focus-within .sf-doc__cover {
	border-color: var(--sf-signal);
	box-shadow: 0 8px 24px rgba(14, 42, 59, 0.1);
}

.sf-doc__title {
	font-size: var(--wp--preset--font-size--medium);
}

.sf-doc__title a {
	color: var(--sf-ink);
	text-decoration: none;
}

.sf-doc__title a:hover,
.sf-doc__title a:focus-visible {
	color: var(--sf-signal);
	text-decoration: underline;
}

.sf-doc__meta {
	color: var(--sf-slate);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* The LSI film, and each story's film: 16:9 until a file is in them. */

.sf-feature-video,
.sf-story__video {
	margin: 0;
	border-radius: var(--sf-radius-panel);
	overflow: hidden;

	/*
	 * Black behind the picture, not a brand colour. A video whose element box
	 * and picture disagree gets letterboxed inside its own box, and the bars are
	 * this background showing through. That happens for an ordinary reason:
	 * anamorphic footage, stored at one pixel shape and displayed at another,
	 * which the browser sizes from the stored dimensions and paints at the
	 * displayed ones. Black reads as part of the player; pale blue reads as a bug.
	 */
	background: #000;

	/*
	 * The shape lives on the figure, not on the video. The browser puts an
	 * aspect-ratio of its own on each video element, taken from that file's
	 * stored dimensions, and an inline value like that outranks any selector
	 * here. Sizing the figure instead and giving the video a definite height
	 * inside it leaves nothing for that value to decide, so every player is the
	 * same shape whatever its file says.
	 */
	aspect-ratio: 16 / 9;
}

.sf-feature-video video,
.sf-story__video video {
	display: block;
	width: 100%;
	height: 100%;

	/* Both dimensions definite, so the inline ratio has nothing left to size. */
	object-fit: contain;
}

/*
 * Until a film is dropped in, the block holds its shape and says so. Both
 * disappear on their own the moment the figure has a video in it, so there is
 * nothing to remember to take out later.
 */
.sf-feature-video:not(:has(video)),
.sf-story__video:not(:has(video)) {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border: 1px dashed var(--sf-halo);
	background: var(--sf-mist);
}

.sf-feature-video:not(:has(video))::after,
.sf-story__video:not(:has(video))::after {
	content: "Video to be added";
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sf-signal);
}

/* Patient stories: two up, each a film and a line or two. */

.sf-stories {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-story {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
}

.sf-story > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sf-story__title {
	font-size: var(--wp--preset--font-size--large);
}

/* Ambassadors: who they are, then before, why and now. */

.sf-ambs {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-amb {
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
}

.sf-amb__head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: start;
	margin: 0;
}

.sf-amb__photo {
	margin: 0;
	border-radius: var(--sf-radius-panel);
	overflow: hidden;
}

.sf-amb__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.sf-amb__who {
	margin: 0;
}

.sf-amb__who > * {
	margin-top: 0;
}

.sf-amb__name {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.35rem;
}

.sf-amb__role {
	color: var(--sf-slate);
	margin-bottom: 1.25rem;
}

.sf-amb__quote {
	margin: 0;
	padding-left: 1.1rem;
	border-left: 3px solid var(--sf-fuse);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--sf-ink);
}

.sf-amb__quote p {
	margin: 0;
}

.sf-amb__stages {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.25rem);
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--sf-line);
}

.sf-amb__stage {
	margin: 0;
}

.sf-amb__stage > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sf-amb__stage-title {
	margin-bottom: 0.5rem;
	color: var(--sf-signal);
}

/* The ambassador's film, under their story. */

.sf-amb__film {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	margin-left: auto;
	margin-right: auto;
	max-width: 54rem;
}

.sf-amb__film .wp-block-embed {
	margin: 0;
}

.sf-amb__film iframe {
	display: block;
	border-radius: var(--sf-radius-panel);
}

@media (max-width: 900px) {
	.sf-docs,
	.sf-stories,
	.sf-amb__head,
	.sf-amb__stages {
		grid-template-columns: 1fr;
	}

	.sf-amb__head {
		gap: 1.25rem;
	}
}

@media (max-width: 600px) {
	.sf-docs {
		gap: 1.75rem;
	}
}

/* ---------- Development pipeline chart ---------- */

/*
 * Indications and pipeline.
 *
 * Indications are rows, the therapy's stages are columns, and a guide drops
 * from each stage through every row so an arrow's end can be read against the
 * column it stops in. One flat grid rather than nested ones, so the guides,
 * boxes, chips and arrows all sit on the same column lines by construction.
 */
.sf-pipeline__panel {
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	padding: clamp(1.1rem, 3vw, 1.85rem);
}

.sf-pipeline__scroll {
	overflow-x: auto;
	padding-bottom: 0.5rem;
}

.sf-pipeline__scroll:focus-visible {
	outline: 2px solid var(--sf-signal);
	outline-offset: 3px;
}

.sf-pipeline__grid {
	display: grid;
	grid-template-columns: minmax(9rem, 1.05fr) repeat(5, minmax(7rem, 1fr));
	gap: 0.75rem;
	align-items: stretch;
	min-width: 46rem;
}

/*
 * Column guides, from the stage chips down through the three indication rows.
 * Spanned explicitly rather than running to -1: every row here is implicit, and
 * -1 resolves to the end of the explicit grid, which these rows are not in.
 *
 * Paint order is set by z-index rather than markup order, since grid items take
 * z-index without being positioned: lane, then guide, then arrow.
 */
.sf-pipeline__guide {
	grid-row: 3 / span 4;
	z-index: 1;
	border-left: 1px dashed #C8DCE7;
	margin-left: calc(-0.75rem / 2);
	pointer-events: none;
}

.sf-pipeline__guide.is-col-5 {
	border-right: 1px dashed #C8DCE7;
	margin-right: calc(-0.75rem / 2);
}

.sf-pipeline__colhead {
	margin: 0;
	align-self: end;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--sf-line);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-signal);
}

.sf-pipeline__colhead--left {
	grid-column: 1;
	grid-row: 1;
}

.sf-pipeline__colhead--right {
	grid-column: 2 / -1;
	grid-row: 1;
}

.sf-pipeline__milestone {
	grid-row: 2;
	margin: 0;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--sf-line);
	border-radius: 10px;
	background: #fff;
	font-family: var(--sf-display);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--sf-ink);
	display: grid;
	place-items: center;
	gap: 0.3rem;
}

/* Not near-term: dashed and muted, with the word on it so it is not colour alone. */
.sf-pipeline__milestone.is-future {
	border-style: dashed;
	border-color: #B9CEDA;
	background: var(--sf-paper);
	color: var(--sf-slate);
}

.sf-pipeline__future {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--sf-line);
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-slate);
}

.sf-pipeline__stage {
	grid-row: 3;
	margin: 0;
	padding: 0.6rem 0.5rem;
	border-radius: 8px;
	background: var(--sf-fuse);
	color: var(--sf-ink);
	font-family: var(--sf-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	display: grid;
	place-items: center;
}

.sf-pipeline__track {
	grid-column: 1;
	margin: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--sf-line);
	border-radius: 10px;
	background: var(--sf-paper);
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--sf-ink);
	font-weight: 600;
	display: grid;
	align-content: center;
}

.sf-pipeline__track span {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

/*
 * The lane is the full scale the arrow is measured against. It shares its cells
 * with the arrow, and comes first in the markup so the arrow paints over it.
 */
.sf-pipeline__lane {
	grid-column: 2 / -1;
	z-index: 0;
	background: var(--sf-paper);
	border-radius: 10px;
}

.sf-pipeline__bar {
	grid-column-start: 2;
	z-index: 2;
	align-self: center;
	height: 2.5rem;
	background: var(--sf-halo);
	clip-path: polygon(0 20%, calc(100% - 1.75rem) 20%, calc(100% - 1.75rem) 0, 100% 50%, calc(100% - 1.75rem) 100%, calc(100% - 1.75rem) 80%, 0 80%);
}

.sf-pipeline__bar.is-span-1 { grid-column-end: span 1; }
.sf-pipeline__bar.is-span-2 { grid-column-end: span 2; }
.sf-pipeline__bar.is-span-3 { grid-column-end: span 3; }
.sf-pipeline__bar.is-span-4 { grid-column-end: span 4; }
.sf-pipeline__bar.is-span-5 { grid-column-end: span 5; }

/* Indication rows start under the stage chips. */
.sf-pipeline__grid .is-r1 { grid-row: 4; }
.sf-pipeline__grid .is-r2 { grid-row: 5; }
.sf-pipeline__grid .is-r3 { grid-row: 6; }

.is-col-1 { grid-column: 2; }
.is-col-2 { grid-column: 3; }
.is-col-3 { grid-column: 4; }
.is-col-4 { grid-column: 5; }
.is-col-5 { grid-column: 6; }

.sf-nowrap {
	white-space: nowrap;
}

/* Only shown where the grid is wider than the panel. */
.sf-pipeline__hint {
	display: none;
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

@media (max-width: 860px) {
	.sf-pipeline__hint {
		display: block;
	}
}

/* ---------- Sourced statistics (rows 1 to 5, 13, 14, 25) ---------- */

.sf-source {
	margin: 0.5rem 0 0 !important;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.sf-source a {
	color: inherit;
	opacity: 0.85;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sf-source a:hover {
	opacity: 1;
}

.sf-context-note {
	margin-top: 1.75rem !important;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
	max-width: 52rem;
}

/* ---------- Counters (rows 3, 29) ---------- */

.sf-counters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.sf-counter {
	border-top: 2px solid var(--sf-fuse);
	padding-top: 1rem;
}

.sf-counter__value {
	margin: 0;
	font-family: var(--sf-display);
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.sf-counter__label {
	margin: 0.5rem 0 0;
	line-height: 1.45;
}

.sf-callout-block {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	max-width: 48rem;
}

.sf-scope .sf-callout {
	margin: 0 !important;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.35;
	color: #fff;
}

/* ---------- Press mention (row 20) ---------- */

/*
 * Core ships .wp-block-columns{align-items:initial!important}, which beats any
 * container-level vertical alignment, so the card is pinned to the top of its
 * own column with align-self instead of aligning the row.
 */
.sf-feasibility > .wp-block-column {
	align-self: flex-start;
}

/*
 * Same reason: the text beside the procedure graphic is centred against it
 * with align-self on the column, not with the row's vertical alignment.
 */
.sf-flow__lead > .wp-block-column {
	align-self: center;
}

.sf-press {
	margin-top: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--sf-line);
	border-left: 4px solid var(--sf-fuse);
	border-radius: 0 var(--sf-radius-media) var(--sf-radius-media) 0;
	background: #fff;
}

.sf-press__outlet {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sf-slate);
}

/*
 * A definite max-width rather than a percentage: the wordmark is 4.2:1, and
 * left to fill the column it dwarfs the headline it introduces.
 */
.sf-press__logo {
	margin: 0.55rem 0 0;
}

.sf-press__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 13rem);
	max-height: 3.25rem;
}

.sf-press__headline {
	margin: 0.75rem 0 0;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.3;
	color: var(--sf-ink);
}

.sf-press__link {
	margin: 0.9rem 0 0;
	font-weight: 600;
}

/* ---------- Milestones timeline (row 18) ---------- */

/* ---------- Patent regions (row 10) ---------- */

.sf-regions {
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--sf-radius-panel);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-regions__label {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sf-halo);
}

.sf-regions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sf-regions__list li {
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-family: var(--sf-display);
	font-weight: 500;
	color: #fff;
}

/* ---------- Pipeline note and legal pages ---------- */

.sf-pipeline__note {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
	max-width: 52rem;
}

.sf-legal-date {
	color: var(--sf-slate);
	font-size: var(--wp--preset--font-size--small);
}

.sf-legal h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 2.5rem;
}

/* ---------- Video embed (row 32) ---------- */

.sf-video .wp-block-embed {
	margin-inline: auto;
	margin-block: 0;
}

/*
 * Between 1200px and 1500px the wide container fills almost the whole window,
 * so the player looks oversized. Pull it in there only, scaling linearly from
 * 900px up to the usual 1200px so there is no jump at either end. Phones,
 * tablets and anything above 1500px are untouched.
 */
@media (min-width: 1200px) and (max-width: 1500px) {
	.sf-video .wp-block-embed {
		max-width: calc(900px + (100vw - 1200px));
	}
}

.sf-video iframe {
	display: block;
	width: 100%;
	border-radius: var(--sf-radius-media);
}

/* ---------- Interactive patent map ---------- */

.sf-map__label {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sf-halo);
}

.sf-map__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sf-map__button {
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-family: var(--sf-display);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sf-map__button:hover {
	border-color: var(--sf-fuse);
}

.sf-map__button.is-active {
	background: var(--sf-fuse);
	border-color: var(--sf-fuse);
	color: var(--sf-ink);
}

.sf-map__button:focus-visible {
	outline: 3px solid var(--sf-fuse);
	outline-offset: 3px;
}

.sf-map__canvas {
	margin-top: 1.5rem;
	border-radius: var(--sf-radius-panel);
	overflow: hidden;
}

.sf-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Base landmass: grey on the dark band. */
.sf-map__svg path,
.sf-map__svg polygon,
.sf-map__svg circle,
.sf-map__svg rect {
	fill: #3C5162;
	stroke: #0E2A3B;
	stroke-width: 0.4;
	transition: fill 0.25s ease;
}

/* Countries where patents are issued. */
.sf-map__svg .is-covered {
	fill: var(--sf-halo);
}

/* When one region is isolated, the rest fall back to grey. */
.sf-map.is-filtered .sf-map__svg .is-covered {
	fill: #3C5162;
}

.sf-map .sf-map__svg .is-selected,
.sf-map.is-filtered .sf-map__svg .is-covered.is-selected {
	fill: var(--sf-fuse);
	stroke: #fff;
	stroke-width: 0.6;
}

.sf-map__status {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-halo);
}

.sf-map__fallback {
	margin-top: 1.5rem;
}

.sf-map__notice {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border: 1px dashed rgba(255, 255, 255, 0.4);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
}

@media (prefers-reduced-motion: reduce) {
	.sf-map__svg path,
	.sf-map__svg polygon,
	.sf-map__svg circle,
	.sf-map__svg rect,
	.sf-map__button {
		transition: none;
	}
}

/* ---------- Procedure flow: one connected line through the operation ---------- */

/* ---------- Opening statement card ---------- */

.sf-statement {
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 4.5vw, 3.25rem);
	border-radius: var(--sf-radius-panel);
	background: var(--sf-ink);
	color: #fff;
}

/*
 * Decorative arcs bleeding off the right edge. Behind the text and inert, so
 * a long statement never collides with them.
 */
.sf-statement__rings {
	position: absolute;
	top: 50%;
	right: clamp(-7rem, -5vw, -3rem);
	width: clamp(18rem, 30vw, 28rem);
	height: clamp(18rem, 30vw, 28rem);
	transform: translateY(-50%);
	color: var(--sf-fuse);
	opacity: 0.55;
	pointer-events: none;
}

.sf-statement__lead,
.sf-statement__foot {
	position: relative;
}

.sf-statement__lead {
	margin: 0;
	max-width: 46rem;
	font-family: var(--sf-display);
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	font-weight: 500;
	line-height: 1.3;
}

/* The alternative name is an aside inside the sentence, not part of its weight. */
.sf-statement__alias {
	font-size: 0.68em;
	font-weight: 400;
	color: var(--sf-halo);
	white-space: nowrap;
}

.sf-statement__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
	padding-top: clamp(1.1rem, 2.5vw, 1.6rem);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* Narrow enough that the link stays on the footer's own line beside it. */
.sf-statement__data {
	min-width: 0;
	max-width: 40rem;
}

.sf-statement__finding {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--sf-halo);
}

.sf-statement__note {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.sf-statement__link {
	margin: 0;
	flex: none;
	font-weight: 600;
}

.sf-statement__link a {
	color: #fff;
	text-underline-offset: 0.25em;
}

/* ---------- Pulled quotation ---------- */

.sf-pullquote {
	margin: 0;
	padding: clamp(1.1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--sf-halo);
	border-radius: var(--sf-radius-media);
	background: var(--sf-mist);
}

.sf-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.sf-pullquote p {
	margin: 0;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	color: var(--sf-ink);
}

.sf-pullquote figcaption {
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

/* ---------- Procedure panel: graphic and steps in one frame ---------- */

.sf-procedure {
	margin-top: clamp(2rem, 4vw, 3rem);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	background: #fff;
	overflow: hidden;
}

.sf-procedure__image {
	margin: 0;
}

/*
 * The graphic carries its own title, set in the artwork rather than in markup,
 * so at full panel width that type renders larger than any heading on the
 * page. Capping the image's width is the only way to bring it down: the text
 * is pixels, not characters. Centred, since it no longer fills the panel.
 */
.sf-procedure__image img {
	display: block;
	width: 100%;
	max-width: 40rem;
	height: auto;
	margin-inline: auto;
}

/* The rule between the graphic and the steps is the frame's own divider. */
.sf-procedure__flow {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border-top: 1px solid var(--sf-line);
}

.sf-flow {
	margin-top: 0;
}

.sf-flow__steps {
	--sf-flow-gap: clamp(1.25rem, 2.5vw, 2.5rem);
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sf-flow-gap);
}

.sf-flow__step {
	position: relative;
	margin: 0;
	padding-top: 3rem;
}

/*
 * Each step draws the connector leaving its own marker and reaching the next
 * one, rather than one line spanning the row. Drawn per step, the segment into
 * the design goal can be dashed while the rest stays solid.
 */
.sf-flow__step::before {
	content: "";
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	right: calc(-1 * (var(--sf-flow-gap) + 0.9rem));
	height: 2px;
	background: var(--sf-fuse);
}

.sf-flow__step.is-last::before {
	display: none;
}

/* What the study did not demonstrate is not drawn as a solid run into it. */
.sf-flow__step.to-goal::before {
	background: none;
	background-image: linear-gradient(to right, var(--sf-fuse) 55%, transparent 55%);
	background-size: 11px 2px;
	background-repeat: repeat-x;
}

.sf-flow__num {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--sf-fuse);
	border: 2px solid var(--sf-fuse);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--sf-display);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

/* Hollow marker for the step the published study did not demonstrate. */
.sf-flow__step.is-goal .sf-flow__num {
	background: #fff;
	color: var(--sf-fuse);
}

.sf-flow__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}

.sf-flow__text {
	margin: 0.6rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
}

.sf-flow__quote {
	margin: 1.25rem 0 0;
	padding-left: 1rem;
	border-left: 2px solid var(--sf-halo);
}

.sf-flow__quote blockquote {
	margin: 0;
}

.sf-flow__quote p {
	margin: 0;
	font-family: var(--sf-display);
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--sf-ink);
}

.sf-flow__quote figcaption {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

/*
 * The legend is what makes the hollow marker and the dashed run readable.
 * Without it the two states are decoration, so it sits with the steps rather
 * than in the source note below.
 */
.sf-flow__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding-top: clamp(1rem, 2vw, 1.4rem);
	border-top: 1px solid var(--sf-line);
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

.sf-flow__key {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.sf-flow__keydot {
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--sf-fuse);
	border: 2px solid var(--sf-fuse);
}

.sf-flow__keydot.is-goal {
	background: #fff;
}

.sf-source-note {
	margin-top: 1.5rem !important;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sf-slate);
}

/* Below the four-across layout the line runs down the left instead. */
@media (max-width: 860px) {
	.sf-flow__steps {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sf-flow__step {
		padding: 0 0 2rem 3.25rem;
	}

	.sf-flow__step.is-last {
		padding-bottom: 0;
	}

	.sf-flow__step::before {
		top: 0.9rem;
		bottom: -0.9rem;
		left: 0.9rem;
		right: auto;
		width: 2px;
		height: auto;
	}

	.sf-flow__step.to-goal::before {
		background-image: linear-gradient(to bottom, var(--sf-fuse) 55%, transparent 55%);
		background-size: 2px 11px;
		background-repeat: repeat-y;
	}
}


/* ---------- Published study card ---------- */

.sf-study {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	background: #fff;
}

/* Registry on one side, journal on the other: two independent records. */
.sf-study__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	padding-bottom: clamp(0.9rem, 2vw, 1.25rem);
	border-bottom: 1px solid var(--sf-line);
}

.sf-study__reg,
.sf-study__journal {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-slate);
}

.sf-study__title {
	margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.3;
}

.sf-study__authors {
	margin: 0.85rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--sf-slate);
}

/*
 * Four figures on one rule. Equal columns rather than auto, so no single long
 * label ("Serious adverse events") takes space from the numbers beside it.
 */
.sf-study__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-top: clamp(1.25rem, 3vw, 1.9rem);
	padding: clamp(1.25rem, 3vw, 1.9rem) 0;
	border-top: 1px solid var(--sf-line);
	border-bottom: 1px solid var(--sf-line);
}

.sf-study__stat + .sf-study__stat {
	padding-left: clamp(1rem, 2.5vw, 2rem);
	border-left: 1px solid var(--sf-line);
}

.sf-study__statlabel {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-slate);
}

/*
 * Tints on individual figures: blue for what the study found, red for what the
 * patient went through first. --sf-signal rather than --sf-fuse, which is
 * 2.52:1 on white and fails even the large-text bar.
 */
.sf-study__statvalue.is-good {
	color: var(--sf-signal, #0074A1);
}

.sf-study__statvalue.is-warn {
	color: #B4232A;
}

.sf-trial__num.is-warn {
	color: #B4232A;
}

.sf-study__colhead.is-ule {
	color: var(--sf-signal, #0074A1);
}

.sf-study__statvalue {
	margin: 0.35rem 0 0;
	font-family: var(--sf-display);
	font-size: clamp(2rem, 1rem + 2.2vw, 3rem);
	font-weight: 400;
	line-height: 1;
	color: var(--sf-ink);
}

.sf-study__statnote {
	margin: 0.3rem 0 0;
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

.sf-study__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(1.25rem, 3vw, 1.9rem);
}

.sf-study__colhead {
	margin: 0 0 0.9rem;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-slate);
}

.sf-study__list {
	margin: 0;
	padding-left: 1.1rem;
}

.sf-study__list li {
	margin: 0 0 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.sf-study__list li:last-child {
	margin-bottom: 0;
}

.sf-study__params {
	margin: 0;
}

/* Value left, what it measures right, on a dotted rule that reads as a table. */
.sf-study__param {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px dotted var(--sf-line);
}

.sf-study__param:first-child {
	padding-top: 0;
}

.sf-study__param dt {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--sf-ink);
}

.sf-study__param dd {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

.sf-study__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin: clamp(1.25rem, 3vw, 1.9rem) 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (max-width: 760px) {
	.sf-study__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	/* The left-hand rule only reads as a divider while the row is unbroken. */
	.sf-study__stat + .sf-study__stat {
		padding-left: 0;
		border-left: 0;
	}

	.sf-study__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Investigators grouped by discipline ---------- */

.sf-team-groups {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--sf-line);
}

.sf-team-group {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	border-bottom: 1px solid var(--sf-line);
}

.sf-team-group__count {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
}

.sf-team-group__num {
	font-family: var(--sf-display);
	font-size: clamp(2rem, 1rem + 2vw, 2.75rem);
	font-weight: 400;
	line-height: 1;
	color: var(--sf-fuse);
}

.sf-team-group__label {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--sf-ink);
}

.sf-team-group__people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sf-inv__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	color: var(--sf-ink);
}

.sf-inv__meta {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sf-slate);
}

/* The badge separates running the study from writing it up. */
.sf-inv__badge {
	margin: 0.7rem 0 0;
}

.sf-inv__badge span {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--sf-mist);
	font-size: 0.75rem;
	color: var(--sf-slate);
}

@media (max-width: 700px) {
	.sf-team-group {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The hardware note now reads as a caption under the system graphic. */
.sf-system__note {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sf-slate);
}


/* ---------- Big Ten trial section ---------- */

.sf-trial__row > .wp-block-column {
	align-self: center;
}

.sf-trial__logo {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	display: inline-block;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
	background: #fff;
}

.sf-trial__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 15rem;
	max-height: 4.5rem;
}

.sf-trial__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-fuse);
}

.sf-trial__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sf-trial__num {
	margin: 0;
	font-family: var(--sf-display);
	font-size: clamp(2.25rem, 1rem + 2.6vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	color: var(--sf-fuse);
}

.sf-trial__statlabel {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	color: var(--sf-slate);
}

.sf-trial__link {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
	font-weight: 600;
}

/* ---------- US map ---------- */

.sf-usmap {
	margin: 0;
}

.sf-usmap__svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Fill is set here rather than on each path, so the whole map restyles from
 * two declarations and the markup stays free of colour.
 */
.sf-usmap__state {
	fill: var(--sf-mist);
	stroke: #fff;
	stroke-width: 1.1;
	stroke-linejoin: round;
}

.sf-usmap__state.is-on {
	fill: var(--sf-deep);
}

/* Sites outside the consortium, in their own colour rather than a shade. */
.sf-usmap__state.is-extra {
	fill: #B32820;
}

.sf-usmap__caption {
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sf-slate);
}

/*
 * A highlight that is colour alone disappears in greyscale and for a colour
 * blind reader, so in high contrast the selected states take a dark outline
 * as well. The counts are also stated in text beside the map.
 */
@media (prefers-contrast: more) {
	.sf-usmap__state.is-on,
	.sf-usmap__state.is-extra {
		stroke: var(--sf-ink);
		stroke-width: 1.5;
	}
}

/* ---------- Map key and the named additional sites ---------- */

.sf-usmap__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--sf-line);
	font-size: 0.8125rem;
}

.sf-usmap__key li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.sf-usmap__swatch {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 3px;
	background: var(--sf-deep);
}

.sf-usmap__swatch.is-extra {
	background: #B32820;
}

.sf-usmap__keylabel {
	color: var(--sf-ink);
}

.sf-usmap__keycount {
	color: var(--sf-slate);
}

.sf-sites-extra {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.sf-sites-extra__head {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #B32820;
}

.sf-sites-extra__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.75rem;
}

.sf-sites-extra__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
	background: #fff;
}

/* The state's own outline, cut from the map's path data. */
.sf-sites-extra__shape {
	flex: none;
	width: 2rem;
	height: 2rem;
	overflow: visible;
}

.sf-sites-extra__shape path {
	fill: #B32820;
}

.sf-sites-extra__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sf-sites-extra__name {
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--sf-ink);
}

.sf-sites-extra__place {
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

.sf-sites-extra__note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--sf-slate);
}


/* ---------- Study-site timeline and cards ---------- */

.sf-sitetl {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: 0;
}

.sf-sitetl__step {
	position: relative;
	margin: 0;
	padding-bottom: 1.75rem;
	padding-right: 1rem;
}

/*
 * The connector belongs to the step it leaves, so the run stops at the last
 * marker instead of trailing off past it.
 */
.sf-sitetl__step::after {
	content: "";
	position: absolute;
	left: 0.3rem;
	right: 0;
	bottom: 0.3rem;
	height: 3px;
	background: var(--sf-deep);
}

.sf-sitetl__step:last-child::after {
	right: auto;
	width: 1.75rem;
}

.sf-sitetl__year {
	display: block;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--sf-ink);
}

.sf-sitetl__label {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sf-slate);
}

.sf-sitetl__dot {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 999px;
	background: var(--sf-deep);
	z-index: 1;
}

.sf-sitecards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-sitecard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	background: #fff;
	overflow: hidden;
}

/*
 * One mark or two on a single band. A fixed band height keeps the two cards'
 * names on the same line whatever the logos' own proportions are.
 */
.sf-sitecard__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	height: clamp(7rem, 14vw, 9.5rem);
	padding: 1.25rem;
	border-bottom: 1px solid var(--sf-line);
}

.sf-sitecard__logos img {
	display: block;
	width: auto;
	height: auto;
	max-width: clamp(6rem, 13vw, 9rem);
	max-height: clamp(4rem, 9vw, 6rem);
}

.sf-sitecard__mark {
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--large);
	color: var(--sf-fuse);
}

.sf-sitecard__body {
	flex: 1;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.sf-sitecard__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	color: var(--sf-ink);
}

.sf-sitecard__place {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: var(--sf-slate);
}

.sf-sitecard__label {
	margin: clamp(1.1rem, 2.5vw, 1.5rem) 0 0.6rem;
	padding-top: clamp(1.1rem, 2.5vw, 1.5rem);
	border-top: 1px solid var(--sf-line);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-slate);
}

.sf-sitecard__people {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-sitecard__people li {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sf-ink);
}

.sf-sitecard__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: clamp(1.1rem, 2.5vw, 1.5rem) 0 0;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Four years will not fit across a phone, so the timeline runs downward. */
@media (max-width: 720px) {
	.sf-sitetl {
		grid-template-columns: minmax(0, 1fr);
	}

	.sf-sitetl__step {
		padding: 0 0 1.4rem 1.9rem;
	}

	.sf-sitetl__step::after {
		left: 0.3rem;
		top: 1.1rem;
		bottom: -0.3rem;
		right: auto;
		width: 3px;
		height: auto;
	}

	.sf-sitetl__step:last-child::after {
		display: none;
	}

	.sf-sitetl__dot {
		top: 0.25rem;
		bottom: auto;
	}
}


/* ---------- Tinted elements sitting on a tinted section ---------- */

/*
 * Paper moved close enough to mist that a mist-filled element on a paper
 * section all but disappears (about 1.05:1). On those sections the fill goes
 * white instead, which keeps the same read against the band behind it.
 */
.has-paper-background-color .sf-pullquote,
.has-paper-background-color .sf-system__icon,
.has-paper-background-color .sf-news-item__type,
.has-paper-background-color .sf-site__mark,
.has-paper-background-color .sf-ms__chip-mark {
	background: #fff;
}

/* ---------- Dark bands ---------- */

/*
 * The site footer is the same ink, so a dark band placed last on a page runs
 * into it with no edge between them. Dark bands sit mid-page instead, which is
 * why these rules exist: a section built for a light page needs the few pieces
 * that assume white restated.
 */

/* Bordered comparison cards: the light hairline vanishes on the band. */
.has-ink-background-color .sf-compare__col {
	border-color: rgba(255, 255, 255, 0.22);
}

/*
 * The highlighted column is filled with paper on a light page. Left that way
 * it becomes a pale card holding white text, so on the band it takes a faint
 * light wash and keeps the accent on its border instead.
 */
.has-ink-background-color .sf-compare__col--synerfuse {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--sf-fuse);
}

.has-ink-background-color .wp-block-list.is-style-sf-steps > li {
	color: #fff;
}

/*
 * Investigators on the band. Everything here sets a colour for a light page,
 * so each one is restated rather than left to inherit: an element that names
 * ink explicitly is invisible against ink, not merely low contrast.
 */
.has-ink-background-color .sf-team-groups,
.has-ink-background-color .sf-team-group {
	border-color: rgba(255, 255, 255, 0.2);
}

/*
 * The name itself goes white, but a linked name is left to the band's own link
 * colour: forcing it white would strip the only cue that it opens a bio.
 */
.has-ink-background-color .sf-team-group__label,
.has-ink-background-color .sf-inv__name {
	color: #fff;
}

.has-ink-background-color .sf-inv__meta {
	color: rgba(255, 255, 255, 0.74);
}

/* A solid mist pill would shout on a dark band; a wash of white reads calmer. */
.has-ink-background-color .sf-inv__badge span {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.88);
}

/* A lead paragraph sets ink explicitly, which on the ink band is invisible. */
.has-ink-background-color .is-style-sf-lead,
.has-ink-background-color .sf-lead {
	color: #fff;
}

.has-ink-background-color .sf-cite,
.has-ink-background-color .sf-cite a {
	color: rgba(255, 255, 255, 0.74);
}


/*
 * Only text that sits directly on the band needs restating; anything inside a
 * white card on it already sets its own colour, and blanket overrides here
 * turn those invisible. Scoped to notes that would otherwise stay slate.
 */
.has-ink-background-color > .sf-source-note,
.has-ink-background-color > .sf-context-note,
.has-ink-background-color > * > .sf-source-note,
.has-ink-background-color > * > .sf-context-note {
	color: rgba(255, 255, 255, 0.72);
}


/* ---------- Two paths diagram ---------- */

/*
 * The figure carries its own light panel so it reads identically whether the
 * section band behind it is paper or ink, and so the red and blue keep the
 * contrast they were chosen for either way.
 */
.sf-paths {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	background: #fff;
	color: var(--sf-ink);

	/* Used by both renderings, so the two never drift apart. */
	--sf-paths-red: #B4232A;
	--sf-paths-green: #1F7A3D;
	--sf-paths-blue: var(--sf-signal, #0074A1);
}

.sf-paths__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ----- Strokes. Red is the standard of care, blue is e-Fusion. ----- */

.sf-paths__shared,
.sf-paths__soc line,
.sf-paths__loop,
.sf-paths__fork {
	stroke: var(--sf-paths-red);
	stroke-width: 7;
	stroke-linecap: round;
	fill: none;
}

.sf-paths__efusion line,
.sf-paths__fork.is-efusion {
	stroke: var(--sf-halo);
	stroke-width: 7;
	stroke-linecap: round;
	fill: none;
}

.sf-paths__loop {
	stroke-width: 9;
}

/* The stops are drawn on the loop, so they take the panel's own background. */
.sf-paths__stop {
	fill: #fff;
	stroke: var(--sf-paths-red);
	stroke-width: 3;
}

.sf-paths__dot {
	fill: var(--sf-paths-red);
}

.sf-paths__dot.is-efusion {
	fill: var(--sf-halo);
}

/* The end of the standard path: reached, but twelve years in. */
.sf-paths__end line {
	stroke: var(--sf-paths-green);
	stroke-width: 7;
	stroke-linecap: round;
}

.sf-paths__end circle {
	fill: var(--sf-paths-green);
}

.sf-paths__brace {
	stroke: var(--sf-paths-green);
	stroke-width: 2;
	fill: none;
}

.sf-paths__brace.is-efusion {
	stroke: var(--sf-paths-blue);
}

/* ----- Type inside the drawing. Set in px against the viewBox, not in rem. ----- */

/*
 * The default fill sits on the root rather than on `.sf-paths__svg text`: a
 * class-plus-element selector outranks the single class on every label below
 * it, so the labels all came out ink no matter what colour their own rule
 * asked for. Inheriting from the root leaves each label's own rule to win.
 * Every shape in the drawing sets its own fill, so none of them pick this up.
 */
.sf-paths__svg {
	font-family: var(--sf-display);
	fill: var(--sf-ink);
}

.sf-paths__label {
	font-size: 23px;
	font-weight: 600;
	fill: var(--sf-paths-red);
}

.sf-paths__label.is-efusion {
	fill: var(--sf-deep);
}

.sf-paths__big {
	font-size: 30px;
	font-weight: 600;
}

.sf-paths__loopnum {
	font-size: 40px;
	font-weight: 600;
	fill: var(--sf-paths-red);
}

.sf-paths__loopunit {
	font-size: 15px;
	fill: var(--sf-paths-red);
}

.sf-paths__totalnum {
	font-size: 34px;
	font-weight: 600;
	fill: var(--sf-paths-red);
}

.sf-paths__totalunit {
	font-size: 17px;
	fill: var(--sf-paths-red);
}

.sf-paths__goal {
	font-size: 30px;
	font-weight: 600;
	fill: var(--sf-paths-blue);
}

.sf-paths__goalunit {
	font-size: 14px;
	fill: var(--sf-paths-blue);
}

.sf-paths__svg .sf-paths__goal.is-soc,
.sf-paths__svg .sf-paths__goalunit.is-soc {
	fill: var(--sf-paths-green);
}

.sf-paths__pin {
	font-size: 15px;
	fill: var(--sf-slate);
}

/* The two labels under the green segment are the only pair close enough to touch. */
.sf-paths__pin.is-small {
	font-size: 13px;
}

.sf-paths__note {
	font-size: 14px;
	fill: var(--sf-slate);
}

/* ----- The portrait rendering, for widths the wide drawing cannot serve. ----- */

.sf-paths__tall {
	display: none;
}

/*
 * The spine and the leaders belong only to the portrait drawing, so they are
 * declared here rather than beside the wide drawing's strokes.
 */
.sf-paths__spine {
	stroke: var(--sf-paths-red);
	stroke-width: 6;
	stroke-linecap: round;
	fill: none;
}

/*
 * Both classes, because the leaders are `line` elements inside `.sf-paths__soc`
 * and that group's own `line` rule is a class plus an element: it outranks a
 * single class and would otherwise paint them as seven-unit red bars.
 */
.sf-paths__soc .sf-paths__leader {
	stroke: var(--sf-paths-red);
	stroke-width: 1.25;
	stroke-linecap: butt;
	opacity: 0.5;
}

/*
 * Type in the portrait drawing is set against a 340-unit viewBox rather than a
 * 1000-unit one, so each size is restated for it: the wide drawing's values
 * would render roughly three times too large here.
 */
.sf-paths__svg.is-tall .sf-paths__label {
	font-size: 18px;
}

/*
 * The branch title is the longest string in the portrait drawing and the only
 * one that has to clear the canvas edge, so it is set smaller than the path
 * title above it. It needs both classes to outrank the rule directly above:
 * equal specificity is decided by order, and that one comes first.
 */
.sf-paths__svg.is-tall .sf-paths__label.is-tall {
	font-size: 14px;
}

.sf-paths__svg.is-tall .sf-paths__big {
	font-size: 26px;
}

.sf-paths__svg.is-tall .sf-paths__pin {
	font-size: 15px;
}

.sf-paths__svg.is-tall .sf-paths__note {
	font-size: 14px;
}

.sf-paths__loopnum.is-tall {
	font-size: 28px;
}

.sf-paths__svg.is-tall .sf-paths__loopunit {
	font-size: 13px;
}

.sf-paths__goal.is-tall {
	font-size: 26px;
}

.sf-paths__svg.is-tall .sf-paths__goalunit {
	font-size: 14px;
}

.sf-paths__totalnum.is-tall {
	font-size: 24px;
}

/* ----- The outcomes and the caption, shown at every width. ----- */

.sf-paths__out {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.sf-paths__outhead {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding-bottom: 0.3rem;
	border-bottom: 4px solid var(--sf-halo);
	font-family: var(--sf-display);
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--sf-ink);
}

.sf-paths__out ul {
	margin: 0;
	padding-left: 1.1rem;
}

.sf-paths__out li {
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sf-ink);
}

.sf-paths__out li:last-child {
	margin-bottom: 0;
}

.sf-paths__cap {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.sf-paths__cap p {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sf-slate);
}

.sf-paths__cap p:last-child {
	margin-bottom: 0;
}

/*
 * The drawing's type is set in viewBox units, so it shrinks with the figure.
 * Measured: the 15px pins render at 13.5px when the figure is 897 wide and at
 * 11.5px when it is 764, so anything narrower than roughly a small laptop puts
 * the labels past reading size. Below that the figure swaps to the stacked
 * rendering rather than scrolling sideways, and display:none takes the unused
 * one out of the accessibility tree as well, so a screen reader meets one
 * version rather than both.
 */
@media (max-width: 1040px) {
	.sf-paths__draw {
		display: none;
	}

	.sf-paths__tall {
		display: block;
		/*
		 * Capped and centred: past about 420 the portrait drawing is only
		 * getting bigger, not clearer, and a tall narrow figure pinned to the
		 * left of a wide panel reads as a layout fault.
		 */
		max-width: 380px;
		margin-inline: auto;
	}
}


/* ---------- Study sites: one logo band, details beneath ---------- */

.sf-sitegroup {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	background: #fff;
	overflow: hidden;
}

/*
 * Every mark on one band, so no single institution reads as the study's owner.
 * Wrapping rather than scrolling: three logos fit a phone at this size.
 */
.sf-sitegroup__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-bottom: 1px solid var(--sf-line);
}

.sf-sitegroup__logos img {
	display: block;
	width: auto;
	height: auto;
	max-width: clamp(6rem, 13vw, 9rem);
	max-height: clamp(3.5rem, 8vw, 5.5rem);
}

.sf-sitegroup__detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.sf-sitecol {
	min-width: 0;
}


/* ---------- Patient care continuum ---------- */

.sf-continuum {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-continuum__box {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	background: #fff;
}

/* The e-Fusion side carries the accent; the comparison side stays neutral. */
.sf-continuum__box.is-efusion {
	border-color: var(--sf-fuse);
}

.sf-continuum__label {
	margin: 0 0 0.6rem;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--sf-ink);
}

.sf-continuum__box.is-efusion .sf-continuum__label {
	color: var(--sf-signal);
}

.sf-continuum__text {
	margin: 0;
	line-height: 1.6;
	color: var(--sf-slate);
}

.sf-continuum__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}


/* ---------- Opioid capsules ---------- */

.sf-pills {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.sf-pills__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3rem 1rem;
	margin: 0 0 0.6rem;
}

.sf-pills__label {
	font-weight: 600;
	color: var(--sf-ink);
}

.sf-pills__count {
	font-size: 0.875rem;
	color: var(--sf-slate);
}

.sf-pills__set {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
}

/* One capsule per patient. */
.sf-pill {
	width: 0.7rem;
	height: 1.85rem;
	border-radius: 999px;
	background: currentColor;
}

.sf-pills__set.is-before {
	color: #B32820;
}

.sf-pills__set.is-after {
	color: var(--sf-fuse);
}

/*
 * The patients who stopped stay on the row as outlines, so it still reads out
 * of fifteen rather than silently becoming a row of three.
 */
.sf-pill.is-off {
	background: none;
	border: 1.5px solid var(--sf-line);
}

.sf-pills__share {
	margin-left: 0.5rem;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.sf-pills__drop {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: clamp(1rem, 2.5vw, 1.4rem) 0;
	padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.5vw, 1.4rem);
	border-left: 4px solid #B32820;
	background: var(--sf-paper);
}

.sf-pills__arrow {
	font-size: 1.5rem;
	line-height: 1;
	color: #B32820;
}

.sf-pills__dropnum {
	font-family: var(--sf-display);
	font-size: clamp(2rem, 1rem + 2.2vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	color: #B32820;
}

.sf-pills__droplabel {
	font-size: 0.9375rem;
	line-height: 1.25;
	color: var(--sf-slate);
}

/*
 * The capsules fill in on load, staggered along the row, so the eye follows
 * the count. Decorative only: the numbers beside them never move.
 */
@media (prefers-reduced-motion: no-preference) {
	.sf-pill {
		animation: sf-pill-in 0.3s ease-out backwards;
		animation-delay: calc(var(--sf-pill-i) * 45ms);
	}

	@keyframes sf-pill-in {
		from {
			opacity: 0;
			transform: translateY(0.35rem);
		}
	}
}

/* ---------- Sleep quality bars ---------- */

.sf-stack {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.sf-stack__row + .sf-stack__row {
	margin-top: clamp(1.1rem, 2.5vw, 1.5rem);
}

.sf-stack__label {
	margin: 0 0 0.4rem;
	font-weight: 600;
	color: var(--sf-ink);
}

.sf-stack__bar {
	display: flex;
	overflow: hidden;
	border-radius: 6px;
}

.sf-stack__seg {
	display: grid;
	place-items: center;
	min-width: 0;
	height: 2.1rem;
	font-size: 0.8125rem;
	color: #fff;
}

.sf-stack__pct {
	padding: 0 0.2rem;
}

.sf-stack__caption {
	margin: 0.45rem 0 0;
	font-size: 0.8125rem;
	color: var(--sf-slate);
}

/*
 * Five ordered steps from worst to best. Sequential rather than categorical,
 * so the order is readable without the legend and survives greyscale.
 */
.sf-stack__seg.is-b0,
.sf-stack__swatch.is-b0 {
	background: #9E2A2B;
}

.sf-stack__seg.is-b1,
.sf-stack__swatch.is-b1 {
	background: #D98C8C;
}

.sf-stack__seg.is-b2,
.sf-stack__swatch.is-b2 {
	background: #C8972E;
}

.sf-stack__seg.is-b3,
.sf-stack__swatch.is-b3 {
	background: #6FC2E0;
}

.sf-stack__seg.is-b4,
.sf-stack__swatch.is-b4 {
	background: var(--sf-deep);
}

/* The two mid tones are light enough that white text on them fails. */
.sf-stack__seg.is-b1 .sf-stack__pct,
.sf-stack__seg.is-b2 .sf-stack__pct,
.sf-stack__seg.is-b3 .sf-stack__pct {
	color: var(--sf-ink);
}

.sf-stack__legend {
	margin-top: clamp(1rem, 2.5vw, 1.4rem);
}

.sf-stack__swatch {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 3px;
	margin-right: 0.4rem;
	vertical-align: -1px;
}

/* ---------- Stimulation parameters ---------- */

.sf-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	overflow: hidden;
}

.sf-spec {
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
	border-left: 1px solid var(--sf-line);
}

.sf-spec:first-child {
	border-left: 0;
}

.sf-spec__value {
	margin: 0;
	font-family: var(--sf-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--sf-ink);
}

.sf-spec__label {
	margin: 0.35rem 0 0;
	font-size: 1rem;
	color: var(--sf-slate);
}

@media (max-width: 640px) {
	.sf-specs {
		grid-template-columns: 1fr;
	}

	.sf-spec {
		border-left: 0;
		border-top: 1px solid var(--sf-line);
	}

	.sf-spec:first-child {
		border-top: 0;
	}
}

/* ---------- Hardware-agnostic ---------- */

.sf-hardware {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
}

.sf-hardware__lead {
	margin: 0 0 0.75rem;
	font-family: var(--sf-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--sf-ink);
	line-height: 1.35;
}

.sf-hardware__text p:last-child {
	margin: 0;
}

.sf-hardware__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}

.sf-chip {
	flex: 1 1 10rem;
	padding: 1rem 1.1rem;
	border: 1px dashed var(--sf-field-border);
	border-radius: var(--sf-radius-media);
	text-align: center;
}

.sf-chip.is-synerfuse {
	border-style: solid;
	border-color: var(--sf-fuse);
	background: var(--sf-mist);
}

.sf-chip__name {
	display: block;
	font-family: var(--sf-display);
	font-weight: 600;
	color: var(--sf-ink);
	line-height: 1.3;
}

.sf-chip__note {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--sf-slate);
}

.sf-chip.is-synerfuse .sf-chip__note {
	font-style: normal;
	color: var(--sf-signal);
	font-weight: 600;
}

@media (max-width: 860px) {
	.sf-hardware {
		grid-template-columns: 1fr;
	}

	.sf-hardware__chips {
		justify-content: flex-start;
	}
}

/* ---------- Who it is being studied in ---------- */

.sf-criteria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-criteria__item {
	padding-left: 1.1rem;
	border-left: 3px solid var(--sf-fuse);
}

.sf-criteria__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}

.sf-criteria__text {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
}

@media (max-width: 780px) {
	.sf-criteria {
		grid-template-columns: 1fr;
	}
}

/* ---------- Plain definitions ---------- */

.sf-defs {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	border-top: 1px solid var(--sf-line);
}

.sf-defs__row {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: 0.35rem clamp(1.5rem, 4vw, 3rem);
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--sf-line);
}

.sf-defs dt {
	font-family: var(--sf-display);
	font-weight: 600;
	color: var(--sf-ink);
	line-height: 1.35;
}

.sf-defs dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

@media (max-width: 700px) {
	.sf-defs__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Where to go next ---------- */

.sf-next {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-next__card {
	display: block;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-panel);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.sf-next__card:hover {
	border-color: var(--sf-fuse);
	transform: translateY(-2px);
}

.sf-next__title {
	display: block;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--sf-signal);
	line-height: 1.3;
}

.sf-next__arrow {
	margin-left: 0.4rem;
}

.sf-next__text {
	display: block;
	margin-top: 0.5rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--sf-slate);
}

@media (max-width: 860px) {
	.sf-next {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-next__card {
		transition: none;
	}
}

/* ---------- NeuroFuse System hub ---------- */

.sf-system {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(15rem, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.sf-system__col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(2.25rem, 5vw, 4rem);
}

.sf-system__item {
	margin: 0;
	position: relative;
}

/* Short leader line pointing at the hub. */
.sf-system__item::after {
	content: "";
	position: absolute;
	top: 1.4rem;
	width: 2.25rem;
	height: 1px;
	background: var(--sf-halo);
}

.sf-system__item--left::after {
	right: -2.25rem;
}

.sf-system__item--right::after {
	left: -2.25rem;
}

/*
 * A real button rather than a hover target, so the capability can be opened
 * from the keyboard and is announced as something that expands.
 */
.sf-system__trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.sf-system__item--left .sf-system__trigger {
	flex-direction: row-reverse;
	text-align: right;
}

.sf-system__trigger:focus-visible {
	outline: 2px solid var(--sf-signal);
	outline-offset: 6px;
	border-radius: 10px;
}

.sf-system__icon {
	flex: none;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--sf-mist);
	color: var(--sf-signal);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sf-system__icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.sf-system__title {
	display: block;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.25;
	color: var(--sf-ink);
	transition: color 0.2s ease;
}

/*
 * The description is a card laid over the column, not a block in the flow.
 * Opening one therefore moves nothing: the wheel stays put and the items below
 * stay where the reader last saw them.
 */
.sf-system__text {
	position: absolute;
	top: calc(100% + 0.65rem);
	z-index: 3;
	display: block;
	padding: 0.95rem 1.1rem;
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
	box-shadow: 0 10px 30px rgba(14, 42, 59, 0.1);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--sf-slate);
	/*
	 * Centred so the padding stays even. Once the text wraps, the longest line
	 * falls short of the box, and aligning to one side puts all of that slack
	 * against the other, which is what made the left-hand cards look lopsided.
	 */
	text-align: center;
	text-wrap: pretty;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.4rem);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

/*
 * The card hugs its text rather than filling the column. Stretched to the full
 * width, the longest line still fell short of the far edge, which left visibly
 * more padding on the side the text is ragged against. The max-width keeps it
 * clear of the icon rail so it never covers the next item's icon.
 */
.sf-system__item--left .sf-system__text {
	right: 3.9rem;
	width: max-content;
	max-width: calc(100% - 3.9rem);
}

.sf-system__item--right .sf-system__text {
	left: 3.9rem;
	width: max-content;
	max-width: calc(100% - 3.9rem);
}

/* The open state, set on the wrapper so the wheel and the card stay in step. */
.sf-system__item.is-open {
	z-index: 4;
}

.sf-system__item.is-open .sf-system__text {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.sf-system__item.is-open .sf-system__icon {
	background: var(--sf-fuse);
	color: #fff;
	transform: scale(1.06);
}

.sf-system__item.is-open .sf-system__title {
	color: var(--sf-signal);
}

/* ---------- The wheel ---------- */

.sf-system__hub {
	position: relative;
	display: grid;
	place-items: center;
	text-align: center;
}

.sf-system__hub svg {
	width: 100%;
	max-width: 24rem;
	height: auto;
	display: block;
	overflow: visible;
}

/* Each wedge grows from the wheel's centre when its capability is open. */
.sf-system__seg {
	transform-box: view-box;
	transform-origin: 200px 200px;
	transition: transform 0.4s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.3s ease;
	cursor: pointer;
}

.sf-system.is-engaged .sf-system__seg {
	opacity: 0.55;
}

.sf-system.is-engaged .sf-system__seg.is-active {
	opacity: 1;
	transform: scale(1.07);
}

/*
 * The label sits in the middle of the wheel, which is open now that the inner
 * disc has gone.
 */
.sf-system__hub-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	max-width: 8rem;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
	color: var(--sf-ink);
	pointer-events: none;
}

.sf-system__hub-label span {
	display: block;
	font-weight: 400;
	color: var(--sf-slate);
}

@media (max-width: 900px) {
	.sf-system {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.sf-system__hub {
		order: -1;
	}

	.sf-system__item::after {
		display: none;
	}

	/*
	 * No hover on a touch screen, so every description is shown as plain text
	 * rather than hidden behind an interaction that cannot happen.
	 */
	.sf-system__item,
	.sf-system__item--left {
		text-align: left;
	}

	.sf-system__trigger,
	.sf-system__item--left .sf-system__trigger {
		flex-direction: row;
		text-align: left;
		cursor: default;
	}

	.sf-system__text,
	.sf-system__item--left .sf-system__text,
	.sf-system__item--right .sf-system__text {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		width: auto;
		margin-top: 0.5rem;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		text-align: left;
		transition: none;
	}

	.sf-system__seg {
		cursor: default;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-system__seg,
	.sf-system__text,
	.sf-system__icon,
	.sf-system__title {
		transition: none;
	}

	.sf-system.is-engaged .sf-system__seg.is-active {
		transform: none;
	}
}

/* ---------- Home hero: the client's logo animation ---------- */

.sf-hero-home--video {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Same geometry the ring graphic used, so the mark sits where it always did. */
	--sf-rings-size: clamp(28rem, 56vw, 52rem);
	--sf-rings-right: calc(-1 * clamp(9rem, 17vw, 17rem));
}

/*
 * The wrapper must not become a stacking context, or mix-blend-mode on the
 * video would blend against the wrapper instead of the hero's paper band and
 * the clip's white background would paint over it. That rules out transform,
 * opacity and z-index here: the vertical centring is done with top/calc, and
 * the content group is lifted above the video by paint order instead.
 */
.sf-hero-video {
	position: absolute;
	top: calc(50% - var(--sf-rings-size) / 2);
	right: var(--sf-rings-right);
	width: var(--sf-rings-size);
	aspect-ratio: 1;
	pointer-events: none;
}

.sf-hero-home--video .sf-hero-home__content {
	position: relative;
}

.sf-hero-video__player {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* The source renders on near-white; multiply drops it onto the paper band. */
	mix-blend-mode: multiply;
}

/*
 * Static fallback: the last frame of the clip, i.e. the logo at rest. Used
 * when the visitor prefers reduced motion (CSS only, so there is no flash of
 * animation first) and when the browser refuses the autoplay (JS adds
 * .is-static). The still sits on the wrapper, which is not a stacking
 * context, so it blends onto the paper band the same way the video does.
 */
.sf-hero-video.is-static {
	background: url("../images/hero-logo-still.png") center / contain no-repeat;
	mix-blend-mode: multiply;
}

.sf-hero-video.is-static .sf-hero-video__player {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.sf-hero-video {
		background: url("../images/hero-logo-still.png") center / contain no-repeat;
		mix-blend-mode: multiply;
	}

	.sf-hero-video__player {
		display: none;
	}
}

@media (max-width: 1100px) {
	.sf-hero-home--video {
		--sf-rings-right: -18rem;
	}

	.sf-hero-video__player {
		opacity: 0.6;
	}
}

@media (max-width: 781px) {
	.sf-hero-home--video {
		--sf-rings-size: 30rem;
	}

	.sf-hero-video {
		top: auto;
		bottom: -17rem;
		right: -15rem;
	}

	.sf-hero-video__player {
		opacity: 0.35;
	}
}

/* ---------- Published study results ---------- */

.sf-study-results__notice {
	border-left: 3px solid var(--sf-fuse);
	padding: 0.25rem 0 0.25rem 1.25rem;
	margin: 0 0 2.5rem;
	max-width: 62rem;
	color: var(--sf-slate);
}

.sf-charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.sf-chart {
	margin: 0;
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.has-paper-background-color .sf-chart {
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(14, 42, 59, 0.06), 0 8px 24px rgba(14, 42, 59, 0.05);
}

.sf-chart__head {
	margin: 0;
}

.sf-chart__head h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.sf-chart__sub {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

/*
 * Identity never rests on colour alone: the legend names each series and the
 * lines carry a direct label at their end as well.
 */
.sf-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

.sf-chart__legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.sf-chart__key {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 3px;
	flex: none;
}

/* Holds the legend's line so a chart without one still starts on the same row. */
.sf-chart__legend.is-empty {
	min-height: 1.4375rem;
}

.sf-chart__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sf-chart__grid {
	stroke: var(--sf-line);
	stroke-width: 1;
}

.sf-chart__axis {
	stroke: #c3d4de;
	stroke-width: 1;
}

.sf-chart__line {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The surface ring keeps a marker legible where two lines cross. */
.sf-chart__dot {
	stroke: #fff;
	stroke-width: 2;
}

.has-paper-background-color .sf-chart__dot {
	stroke: #fff;
}

/* Ties a nudged end label back to the line it names. */
.sf-chart__leader {
	fill: none;
	stroke-width: 1;
	opacity: 0.55;
}

.sf-chart__tick {
	font-size: 11px;
	fill: var(--sf-slate);
	font-family: var(--wp--preset--font-family--text);
	font-variant-numeric: tabular-nums;
}

.sf-chart__rowlabel,
.sf-chart__endlabel,
.sf-chart__value {
	font-size: 12px;
	font-family: var(--wp--preset--font-family--text);
	fill: var(--sf-ink);
}

.sf-chart__endlabel {
	font-size: 11px;
	fill: var(--sf-slate);
}

.sf-chart__value {
	font-variant-numeric: tabular-nums;
}

.sf-chart__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

.sf-chart__table {
	border-top: 1px solid var(--sf-line);
	padding-top: 0.85rem;
	margin-top: auto;
}

.sf-chart__table > summary {
	cursor: pointer;
	color: var(--sf-signal);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sf-chart__table > summary::-webkit-details-marker {
	display: none;
}

.sf-chart__table > summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 6px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 0.15s ease;
}

.sf-chart__table[open] > summary::before {
	transform: rotate(90deg);
}

.sf-chart__table > summary:focus-visible {
	outline: 2px solid var(--sf-signal);
	outline-offset: 3px;
}

.sf-chart__table-scroll {
	overflow-x: auto;
	margin-top: 0.85rem;
}

.sf-chart__table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.sf-chart__table th,
.sf-chart__table td {
	text-align: left;
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--sf-line);
}

.sf-chart__table td {
	font-variant-numeric: tabular-nums;
	color: var(--sf-slate);
}

.sf-chart__table thead th {
	color: var(--sf-ink);
	font-weight: 500;
}

.sf-study-results__source {
	margin: 2rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
	max-width: 70rem;
}

/*
 * The SVG scales with the card, so its type has to be set larger in user units
 * on a narrow screen or the labels render at around six pixels.
 */
@media (max-width: 782px) {
	/* Nothing to line up with once the cards stack, so reclaim the row. */
	.sf-chart__legend.is-empty {
		display: none;
	}

	.sf-chart__tick {
		font-size: 16px;
	}

	.sf-chart__rowlabel,
	.sf-chart__value,
	.sf-chart__endlabel {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-chart__table > summary::before {
		transition: none;
	}
}

/* ---------- Study sites ---------- */

.sf-sites {
	display: grid;
	gap: 1rem;
}

.sf-site {
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-media);
	background: #fff;
	overflow: hidden;
}

.sf-site__summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: clamp(1rem, 2.5vw, 1.4rem);
	cursor: pointer;
	list-style: none;
}

.sf-site__summary::-webkit-details-marker {
	display: none;
}

.sf-site__summary:focus-visible {
	outline: 2px solid var(--sf-signal);
	outline-offset: -2px;
}

.sf-site__mark {
	flex: none;
	width: clamp(4.25rem, 11vw, 5.5rem);
	height: clamp(4.25rem, 11vw, 5.5rem);
	border-radius: 50%;
	background: var(--sf-mist);
	color: var(--sf-signal);
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/*
 * A logo gets a plain square tile rather than the tinted circle the letters sit
 * in: a wordmark cropped into a circle loses its ends.
 *
 * The tile is a fixed box, not one that sizes to its image. Sized to the image,
 * a round seal and a 4:1 wordmark produce tiles of very different widths, and
 * every row's name then starts at a different x position. A constant box keeps
 * the column straight and lets each mark find its own fit inside it.
 */
.sf-site__mark.is-logo {
	--sf-tile-w: clamp(7rem, 20vw, 9.5rem);
	--sf-tile-h: clamp(5rem, 13vw, 6.5rem);
	width: var(--sf-tile-w);
	height: var(--sf-tile-h);
	padding: 0;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--sf-line);
}

/*
 * The inset is expressed on the image rather than as padding on the tile, and
 * in the tile's own units rather than as a percentage. A percentage max-height
 * here resolves against the grid area, not the padding box, so the mark paints
 * outside its own tile; subtracting from the stated height cannot.
 */
.sf-site__mark.is-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(var(--sf-tile-w) - 1.1rem);
	max-height: calc(var(--sf-tile-h) - 0.8rem);
}

.sf-site__id {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.sf-site__name {
	font-family: var(--wp--preset--font-family--display);
	color: var(--sf-ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.sf-site__place {
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

/* A plus that becomes a minus, so the control's state is never colour-only. */
.sf-site__toggle {
	flex: none;
	margin-left: auto;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--sf-line);
	border-radius: 50%;
	position: relative;
}

.sf-site__toggle::before,
.sf-site__toggle::after {
	content: "";
	position: absolute;
	inset: 50% 25%;
	border-top: 1.5px solid var(--sf-signal);
	transform: translateY(-50%);
}

.sf-site__toggle::after {
	transform: translateY(-50%) rotate(90deg);
	transition: opacity 0.15s ease;
}

.sf-site[open] .sf-site__toggle::after {
	opacity: 0;
}

.sf-site__body {
	padding: 0 clamp(1rem, 2.5vw, 1.4rem) clamp(1rem, 2.5vw, 1.4rem);
	padding-left: clamp(8rem, 20vw + 1rem, 11.9rem);
}

.sf-site__body > p {
	margin: 0 0 0.85rem;
	max-width: 62rem;
}

/*
 * On a phone a tile this size and the name cannot share a line without the
 * name breaking across four of them, so the row stacks: mark and control on
 * the first line, name and place across the full width underneath.
 */
@media (max-width: 640px) {
	.sf-site__summary {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}

	/* Mark and control share the first line; the name takes the second. */
	.sf-site__mark {
		order: 1;
	}

	.sf-site__toggle {
		order: 2;
	}

	.sf-site__id {
		order: 3;
		flex-basis: 100%;
	}

	.sf-site__body {
		padding-left: clamp(1rem, 2.5vw, 1.4rem);
	}
}

.sf-site__body > p:last-child {
	margin-bottom: 0;
}

.sf-site__links {
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 600px) {
	.sf-site__body {
		padding-left: clamp(1rem, 2.5vw, 1.4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-site__toggle::after {
		transition: none;
	}
}

/* ---------- Published investigators ---------- */

/*
 * Investigators as a real table: name with the study role under it, then
 * affiliation and discipline. A table because that is what three parallel
 * facts about six people is.
 */

.sf-authors__wrap {
	overflow-x: auto;
}

.sf-authors {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.sf-authors th,
.sf-authors td {
	padding: 0.9rem 1.25rem 0.9rem 0;
	border-bottom: 1px solid var(--sf-line);
	vertical-align: top;
	font-weight: 400;
}

.sf-authors thead th {
	border-bottom: 1px solid var(--sf-ink);
	font-family: var(--sf-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sf-ink);
	white-space: nowrap;
}

.sf-authors tbody th {
	min-width: 14rem;
}

.sf-authors__name {
	display: block;
	color: var(--sf-ink);
	font-weight: 600;
}

.sf-authors__role {
	display: block;
	margin-top: 0.15rem;
	color: var(--sf-slate);
	font-size: var(--wp--preset--font-size--small);
}

.sf-authors td {
	color: var(--sf-slate);
}

@media (max-width: 600px) {
	.sf-authors__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Trial partners ---------- */

/*
 * Two partner cards side by side. Equal columns, so the logo tiles and the text
 * measures match across both cards rather than one being squeezed.
 */
.sf-partner-cards--split {
	display: grid;
	/*
	 * Two tracks only while each card can still hold the logo beside a readable
	 * measure; below that they stack full width rather than being squeezed.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: stretch;
}

/*
 * The group block's own child spacing would push the second card down a row's
 * worth, so the cards would start at different heights. Grid gap does the
 * separating here.
 */
.sf-partner-cards--split > *,
.sf-partner-cards--split > :first-child {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Cards fill the row, so their top and bottom edges line up with each other. */
.sf-partner-cards--split .sf-partner-card {
	/*
	 * At least a 9.5rem tile when the cards sit two up, growing with the card
	 * when they stack and run the full width.
	 */
	grid-template-columns: minmax(9.5rem, 0.28fr) minmax(0, 1fr);
	align-items: start;
}

/* A fixed tile, so both logos sit in an identically sized box. */
.sf-partner-cards--split .sf-partner-card__logo {
	min-height: 7rem;
	padding: 1.1rem;
}

.sf-partner-cards--split .sf-partner-card__logo img {
	max-height: 3.75rem;
}

/*
 * The body is a column stretched to the card's full height, so the link can be
 * pushed to the bottom and the two cards finish on the same line whichever has
 * more text. Grid stretch already equalises the cards, so nothing here sets an
 * explicit height: that would open a gap when the cards stack one per row.
 */
.sf-partner-cards--split .sf-partner-card__body {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

/*
 * Only the link takes the free space, so the stats stay with the text they
 * belong to and the two links still finish on the same line.
 */
.sf-partner-cards--split .sf-partner-card__stats {
	gap: 0.75rem 1.75rem;
	margin-top: 1.1rem;
}

.sf-partner-cards--split .sf-partner-card__link {
	margin-top: auto;
	padding-top: 1.25rem;
}

@media (max-width: 700px) {
	/*
	 * The split rules are more specific than the base card's own stacking rule,
	 * so the logo-beside-text layout has to be unwound here too or the text
	 * column collapses to a few words per line.
	 */
	.sf-partner-cards--split .sf-partner-card {
		grid-template-columns: 1fr;
	}

	/* A fixed tile so both logos still sit in the same sized box when stacked. */
	.sf-partner-cards--split .sf-partner-card__logo {
		justify-self: start;
		width: min(100%, 15rem);
	}

	.sf-partner-cards--split .sf-partner-card__body {
		align-self: start;
	}

	.sf-partner-cards--split .sf-partner-card__link {
		margin-top: 1.1rem;
		padding-top: 0;
	}
}

.sf-partner-card__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-signal);
}

.sf-partner-card__stats {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.25rem;
}

.sf-partner-card__stats li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.sf-partner-card__stat-value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--sf-ink);
}

.sf-partner-card__stat-label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

/* ---------- Milestones (About) ---------- */

.sf-eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-signal);
}

.sf-cite {
	font-size: 0.8em;
	color: var(--sf-slate);
	white-space: nowrap;
}

.sf-milestones__list {
	list-style: none;
	margin: 0;
	padding: 0;
	--sf-ms-rail: 0.5rem;
	--sf-ms-dot: 1.125rem;
	--sf-ms-dot-top: 1.35rem;
}

/*
 * The rail is drawn on the list item, not at a fixed height, so it grows with
 * whatever the panel contains and still reaches the next year's marker. The
 * negative bottom is exactly the next marker's offset, so the two meet.
 */
.sf-ms {
	position: relative;
	margin: 0;
	padding-left: 3.25rem;
}

.sf-ms::before {
	content: "";
	position: absolute;
	left: var(--sf-ms-rail);
	top: var(--sf-ms-dot-top);
	width: var(--sf-ms-dot);
	height: var(--sf-ms-dot);
	border: 2px solid var(--sf-fuse);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	z-index: 1;
}

.sf-ms::after {
	content: "";
	position: absolute;
	left: calc(var(--sf-ms-rail) + (var(--sf-ms-dot) / 2) - 1px);
	top: calc(var(--sf-ms-dot-top) + var(--sf-ms-dot));
	bottom: calc(-1 * var(--sf-ms-dot-top));
	width: 2px;
	background: var(--sf-halo);
}

.sf-ms:last-child::after {
	display: none;
}

/* The open year is the one the eye should find first. */
.sf-ms:has(> details[open])::before {
	background: var(--sf-fuse);
	box-shadow: 0 0 0 4px var(--sf-mist);
}

.sf-ms__summary {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) 2rem;
	align-items: start;
	gap: 0.5rem 1.25rem;
	padding: 1rem 0;
	cursor: pointer;
	list-style: none;
	border-bottom: 1px solid var(--sf-line);
}

.sf-ms__summary::-webkit-details-marker {
	display: none;
}

.sf-ms__summary:focus-visible {
	outline: 2px solid var(--sf-signal);
	outline-offset: 2px;
}

.sf-ms__year {
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--sf-signal);
	line-height: 1.3;
}

.sf-ms__lead {
	color: var(--sf-ink);
	line-height: 1.5;
}

/* A plus that loses its upright stroke when open, so state is never colour-only. */
.sf-ms__toggle {
	justify-self: end;
	margin-top: 0.15rem;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--sf-line);
	border-radius: 50%;
	position: relative;
	flex: none;
}

.sf-ms__toggle::before,
.sf-ms__toggle::after {
	content: "";
	position: absolute;
	inset: 50% 26%;
	border-top: 1.5px solid var(--sf-signal);
	transform: translateY(-50%);
}

.sf-ms__toggle::after {
	transform: translateY(-50%) rotate(90deg);
	transition: opacity 0.15s ease;
}

.sf-ms__d[open] .sf-ms__toggle::after {
	opacity: 0;
}

/*
 * No display declaration here on purpose. The browser's own rule hides a closed
 * <details>'s contents, and an unconditional display on the panel would beat it
 * and leave every panel permanently open. The layout is applied only when the
 * panel is actually open, which leaves the collapsing to the element.
 */
.sf-ms__panel {
	grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
	gap: clamp(1.5rem, 4vw, 3rem);
	/* Indented to the summary's text column, so the panel reads as its continuation. */
	padding: 1.5rem 0 2.25rem 6.75rem;
	border-bottom: 1px solid var(--sf-line);
}

.sf-ms__d[open] > .sf-ms__panel {
	display: grid;
}

.sf-ms__body > p {
	margin: 0 0 0.9rem;
	max-width: 60ch;
}

.sf-ms__body > p:last-child {
	margin-bottom: 0;
}

.sf-ms__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.1rem;
	padding: 0;
}

.sf-ms__chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.3rem 0.85rem 0.3rem 0.4rem;
	border: 1px solid var(--sf-line);
	border-radius: 999px;
	background: #fff;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-ink);
}

.sf-ms__chip-mark {
	display: grid;
	place-items: center;
	min-width: 1.75rem;
	height: 1.5rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--sf-mist);
	color: var(--sf-signal);
	font-family: var(--sf-display);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
}

/*
 * A logo needs a plain surface rather than the tinted pill the letters sit on,
 * and a fixed box so chips keep a common height whatever each logo's shape.
 */
.sf-ms__chip-mark.is-logo {
	/* Fixed height, free width: a wide wordmark and a round mark both fit. */
	width: auto;
	min-width: 2.25rem;
	max-width: 5rem;
	height: 1.75rem;
	padding: 0.15rem 0.3rem;
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: 6px;
	overflow: hidden;
}

/* For a logo drawn in white, which would vanish on the light pill. */
.sf-ms__chip-mark.is-logo.is-dark {
	background: var(--sf-ink);
	border-color: var(--sf-ink);
}

/*
 * Bounded on both axes. With a max-width and height:100% the browser recomputes
 * the height from the aspect ratio and a square logo overflows its box, so the
 * size is left to auto and capped in both directions instead.
 */
.sf-ms__chip-mark.is-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 4.4rem;
	/* A concrete cap: a percentage here depends on the grid area resolving. */
	max-height: 1.45rem;
	object-fit: contain;
}

.sf-ms__chip {
	padding-block: 0.25rem;
}

.sf-ms__tablelabel {
	margin: 1.25rem 0 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

.sf-ms__tablewrap {
	overflow-x: auto;
}

.sf-ms__table {
	width: 100%;
	max-width: 32rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.sf-ms__table th,
.sf-ms__table td {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--sf-line);
	text-align: left;
}

.sf-ms__table td,
.sf-ms__table thead th + th {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sf-ms__table thead th {
	color: var(--sf-ink);
	font-weight: 500;
}

.sf-ms__table tbody th {
	font-weight: 400;
	color: var(--sf-slate);
}

.sf-ms__caution {
	margin-top: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

.sf-ms__sources {
	border-top: 2px solid var(--sf-fuse);
	padding-top: 0.9rem;
}

.sf-ms__sources-label {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-ink);
}

.sf-ms__sources ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.sf-ms__sources li {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.sf-ms__source-note {
	display: block;
	color: var(--sf-slate);
	font-size: 0.8125rem;
	margin-top: 0.15rem;
}

/* Clears the sticky header when a /about/#m-2022 link jumps to a year. */
.sf-ms__d {
	scroll-margin-top: 7rem;
}

@media (max-width: 782px) {
	.sf-ms {
		padding-left: 2.5rem;
	}

	/* Year above the sentence, control in the top right corner. */
	.sf-ms__summary {
		grid-template-columns: minmax(0, 1fr) 2rem;
		grid-template-areas:
			"year toggle"
			"lead lead";
		gap: 0.35rem 1rem;
	}

	.sf-ms__year {
		grid-area: year;
	}

	.sf-ms__lead {
		grid-area: lead;
		font-size: var(--wp--preset--font-size--small);
	}

	.sf-ms__toggle {
		grid-area: toggle;
	}

	.sf-ms__panel {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-ms__toggle::after {
		transition: none;
	}
}

/* ---------- About: history and expertise ---------- */

.sf-history {
	align-items: flex-start;
	gap: clamp(1.75rem, 5vw, 4rem);
}

.sf-histline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.75rem;
	position: relative;
}

/* One rule down the strip, drawn on the list so it grows with the content. */
.sf-histline::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.6rem;
	bottom: 0.6rem;
	width: 2px;
	background: var(--sf-halo);
}

.sf-histline__item {
	position: relative;
	margin: 0 0 1.6rem;
}

.sf-histline__item:last-child {
	margin-bottom: 0;
}

.sf-histline__item::before {
	content: "";
	position: absolute;
	left: -1.75rem;
	top: 0.45rem;
	width: 0.85rem;
	height: 0.85rem;
	border: 2px solid var(--sf-fuse);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.sf-histline__item:last-child::before {
	background: var(--sf-fuse);
}

.sf-histline__year {
	margin: 0;
	font-family: var(--sf-display);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--sf-ink);
	line-height: 1.2;
}

.sf-histline__what {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

.sf-histline__tag {
	display: inline-block;
	margin: 0.5rem 0 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--sf-mist);
	color: var(--sf-signal);
	font-size: 0.8125rem;
}

.sf-team-intro {
	align-items: flex-start;
	gap: clamp(1.75rem, 5vw, 4rem);
}

.sf-expertise {
	display: grid;
	gap: 1rem;
}

/* An accent edge rather than a full border, so three stacked cards stay quiet. */
.sf-expertise__card {
	border: 1px solid var(--sf-line);
	border-left: 3px solid var(--sf-fuse);
	border-radius: var(--sf-radius-media);
	background: #fff;
	padding: clamp(1rem, 2.5vw, 1.4rem);
}

.sf-expertise__figure {
	margin: 0;
	font-family: var(--sf-display);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--sf-ink);
	font-weight: 400;
}

.sf-expertise__figure--word {
	font-size: 1.75rem;
}

.sf-expertise__label {
	margin: 0.6rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-signal);
}

.sf-expertise__text {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sf-slate);
}

@media (max-width: 781px) {
	.sf-histline {
		margin-top: 1.5rem;
	}
}