/* ==========================================================================
   Homepage redesign - custom template, no Beaver Builder.
   Token variables live on :root so the sitewide sg-header / sg-footer work
   on every page. body.sg-redesign still scopes page-body typography so
   leftover Beaver Builder content is not restyled.
   ========================================================================== */

:root {
	--sg-primary: #05038c;        /* hsl(241 96% 28%) */
	--sg-primary-hover: #04026b;  /* hsl(241 96% 22%) */
	--sg-orange: #f96f1f;         /* hsl(22 95% 55%) */
	--sg-orange-2: #fa9338;       /* hsl(28 95% 60%) — gradient's second stop */
	--sg-orange-hover: #ef5b06;   /* hsl(22 95% 48%) */
	--sg-foreground: #0c1831;     /* default heading/text navy */
	--sg-muted: #525c6f;          /* hsl(220 15% 38%) */
	--sg-border: #e0e4eb;         /* hsl(220 20% 90%) */
	--sg-surface-soft: #f8f9fc;   /* hsl(220 40% 98%) */
	--sg-surface-navy: #050261;   /* hsl(241 96% 20%) */
	--sg-shadow-lg: 0 18px 40px -12px rgba(15, 18, 74, 0.18);
	--sg-shadow-elevated: 0 10px 30px -8px rgba(15, 18, 74, 0.25);
}

body.sg-redesign {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--sg-foreground);
}

body.sg-redesign h1, body.sg-redesign h2, body.sg-redesign h3, body.sg-redesign h4 {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--sg-foreground);
	letter-spacing: -0.025em;
	line-height: 1.25;
	margin: 0;
}
/* Card/list-item titles (h3) are always primary-blue in the design, regardless
   of page — distinct from h1/h2 section headings, which stay foreground/black
   except where a page-specific rule below overrides them. */
body.sg-redesign h3 { color: var(--sg-primary) !important; }
body.sg-redesign .sg-footer-col h3 { color: #fff !important; }
.sg-front, .sg-front *:not(.fa):not([class*="fa-"]) {
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

body.sg-redesign .sg-front { overflow-x: hidden; }

/* ---- Container ---- */
/* Unscoped (not ".sg-front .sg-container") because the header/footer render
   outside .sg-front but still need the same max-width + side padding. */
.sg-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px) {
	.sg-container { padding: 0 24px; }
}
@media (min-width: 1024px) {
	.sg-container { padding: 0 32px; }
}

/* ---- Header/Footer: hide Beaver Builder / theme chrome sitewide; sg-header/sg-footer replace them.
   Leave them visible inside the BB editor so Themer header/footer layouts can still be edited. ---- */
body:not(.fl-builder-edit) .fl-page-bar,
body:not(.fl-builder-edit) .fl-page-header,
body:not(.fl-builder-edit) .fl-page-header-wrap,
body:not(.fl-builder-edit) .fl-page-nav-wrap,
body:not(.fl-builder-edit) header.fl-page-header,
body:not(.fl-builder-edit) header.fl-builder-content,
body:not(.fl-builder-edit) .fl-theme-builder-header,
body:not(.fl-builder-edit) [class*="fl-builder-content-header"],
body.logged-in:not(.fl-builder-edit) header.fl-builder-content,
body.logged-in:not(.fl-builder-edit) .fl-theme-builder-header,
body.admin-bar:not(.fl-builder-edit) header.fl-builder-content,
body.admin-bar:not(.fl-builder-edit) .fl-theme-builder-header,
body:not(.fl-builder-edit) .fl-page-footer-wrap,
body:not(.fl-builder-edit) footer.fl-page-footer-wrap,
body:not(.fl-builder-edit) footer.fl-builder-content,
body:not(.fl-builder-edit) .fl-theme-builder-footer,
body:not(.fl-builder-edit) [class*="fl-builder-content-footer"],
body:not(.fl-builder-edit) .toastmm-menu,
body:not(.fl-builder-edit) [class*="toastmm"] { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; }
/* Sponsor onsite pages and their sign-up forms: logo only, original BB footer. */
body.sg-logo-only-chrome .sg-nav,
body.sg-logo-only-chrome .sg-header-actions,
body.sg-logo-only-chrome .sg-nav-toggle,
body.sg-logo-only-chrome .sg-mobile-panel,
body.sg-logo-only-chrome .sg-footer { display: none !important; }
body.sg-logo-only-chrome:not(.fl-builder-edit) .fl-page-footer-wrap,
body.sg-logo-only-chrome:not(.fl-builder-edit) footer.fl-page-footer-wrap,
body.sg-logo-only-chrome:not(.fl-builder-edit) footer.fl-builder-content,
body.sg-logo-only-chrome:not(.fl-builder-edit) .fl-theme-builder-footer,
body.sg-logo-only-chrome:not(.fl-builder-edit) [class*="fl-builder-content-footer"] {
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}
body.sg-redesign #fl-main-content { padding: 0; }
/* Fixed sg-header sits over leftover BB pages; redesign heroes already pad for it. */
body:not(.sg-redesign):not(.fl-builder-edit) #fl-main-content { padding-top: 64px; }
@media (min-width: 1024px) {
	body:not(.sg-redesign):not(.fl-builder-edit) #fl-main-content { padding-top: 80px; }
}
.sg-header,
.sg-header *:not(.fa):not([class*="fa-"]),
.sg-footer,
.sg-footer *:not(.fa):not([class*="fa-"]) {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.sg-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 500;
	background: #fff;
	border-bottom: 1px solid transparent;
}
/* WP admin bar is 32px (46px on small screens). Keep the fixed header below it
   so logged-in views do not cover the hero or leave a blank strip. */
.admin-bar .sg-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .sg-header { top: 46px; }
}
.sg-header-inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 64px;
	gap: 24px;
}
@media (min-width: 1024px) {
	.sg-header-inner { height: 80px; }
}
.sg-logo img { height: 36px; width: auto; display: block; }
.sg-nav { flex: 1; display: flex; justify-content: center; }
.sg-nav-list {
	display: flex; align-items: center; gap: 8px;
	list-style: none; margin: 0; padding: 0;
}
.sg-nav-item { position: relative; font-size: 16px; line-height: 24px; }
.sg-nav-top {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 14px;
	color: var(--sg-foreground);
	font-size: 15px; font-weight: 500;
	text-decoration: none;
	border-radius: 8px;
	transition: background .15s ease;
}
.sg-nav-top:hover { background: var(--sg-surface-soft); }
.sg-nav-caret { font-size: 10px; transition: transform .15s ease; }
.sg-nav-item:hover .sg-nav-caret { transform: rotate(180deg); }
/* Padding (not margin) closes the gap between the link and its dropdown, so
   the LI's own hoverable box extends through it - no dead zone, no premature close. */
.sg-nav-item { padding-bottom: 10px; margin-bottom: -10px; }
.sg-mega-panel {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 0;
	background: #fff; border: 1px solid var(--sg-border); border-radius: 16px;
	box-shadow: var(--sg-shadow-lg);
	padding: 8px;
	width: 26rem;
	display: none;
	z-index: 10;
}
.sg-nav-item:hover .sg-mega-panel { display: block; }
.sg-mega-panel-inner { display: flex; flex-direction: column; gap: 2px; }
.sg-mega-item {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 10px; border-radius: 10px;
	text-decoration: none; transition: background .15s ease;
}
.sg-mega-item:hover { background: var(--sg-surface-soft); }
.sg-mega-item-icon {
	flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
	background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2));
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 14px; margin-top: 1px;
}
.sg-mega-item-text { display: flex; flex-direction: column; gap: 2px; }
.sg-mega-item-title { font-size: 14px; font-weight: 600; color: var(--sg-primary); white-space: nowrap; }
.sg-mega-item-desc { font-size: 12px; line-height: 1.4; color: var(--sg-muted); }
.sg-header-actions { display: flex; align-items: center; gap: 10px; }
/* Design gives both header CTAs h-10 (40px). Without an explicit height the
   outline variant's 2px border made it 40px while the borderless solid one
   came out 36px, so the two buttons sat at different heights/baselines. */
.sg-hdr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	box-sizing: border-box; height: 40px;
	font-size: 14px; font-weight: 500;
	padding: 8px 20px; border-radius: 999px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sg-hdr-btn i { font-size: 13px; }
.sg-hdr-btn-outline { background: #fff; border: 2px solid rgba(12,24,49,.2); color: var(--sg-foreground); --sg-btn-bg: #fff; --sg-btn-border: 2px solid rgba(12,24,49,.2); --sg-btn-color: var(--sg-foreground); }
.sg-hdr-btn-outline:hover,
.sg-hdr-btn-outline:focus {
	border-color: var(--sg-orange);
	color: var(--sg-orange);
	--sg-btn-border: 2px solid var(--sg-orange);
	--sg-btn-color: var(--sg-orange);
}
.sg-hdr-btn-solid { background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)); color: #fff; border: none; --sg-btn-bg: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)); --sg-btn-color: #fff; --sg-btn-border: 0 solid transparent; }
.sg-nav-toggle {
	display: none;
	width: 40px; height: 40px; border-radius: 8px !important; border: 1px solid var(--sg-border) !important;
	background: #fff !important; align-items: center; justify-content: center;
	font-size: 16px; color: var(--sg-foreground) !important;
	box-shadow: none !important;
	--sg-btn-bg: #fff;
	--sg-btn-border: 1px solid var(--sg-border);
	--sg-btn-color: var(--sg-foreground);
}
.sg-mobile-panel { display: none; }
@media (max-width: 1023px) {
	.sg-nav, .sg-header-actions:not(.sg-mobile-actions) { display: none; }
	.sg-nav-toggle { display: flex; }
	.sg-header.sg-mobile-open .sg-mobile-panel {
		display: block;
		background: #fff;
		border-top: 1px solid var(--sg-border);
		padding: 16px 24px 24px;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}
	.sg-mobile-nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
	.sg-mobile-nav-list .sg-mega-panel {
		position: static; transform: none; box-shadow: none; border: none; width: auto;
		margin: 0 0 4px 16px; padding: 0; display: block;
	}
	.sg-mobile-nav-list .sg-mega-item-desc { display: none; }
	.sg-mobile-nav-list .sg-mega-item-icon { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
	.sg-mobile-nav-list .sg-nav-caret { display: none; }
	.sg-mobile-actions { flex-direction: column; align-items: stretch; margin-top: 16px; }
	.sg-mobile-actions .sg-hdr-btn { justify-content: center; padding: 12px 20px; }
}

/* ---- Eyebrow label ---- */
/* Design: text-sm font-semibold uppercase tracking-[0.18em] text-secondary */
.sg-eyebrow {
	display: block;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--sg-orange);
	margin: 0 0 8px;
}
.sg-eyebrow--tag {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; text-transform: uppercase; letter-spacing: .22em;
	color: var(--sg-muted); font-weight: 600;
}
.sg-eyebrow--tag i { font-size: 14px; }

/* ---- Buttons ---- */
.sg-btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.sg-btn-row:first-child { margin-top: 0; }
.sg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 999px;
	font-weight: 500;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	white-space: nowrap;
	border: 0;
	--sg-btn-bg: transparent;
	--sg-btn-border: 0 solid transparent;
	--sg-btn-color: inherit;
	--sg-btn-shadow: none;
}
.sg-btn:hover { transform: translateY(-1px); }
.sg-btn-lg { height: 48px; padding: 0 32px; font-size: 16px; }
body.home .sg-hero .sg-btn-lg { height: 56px; padding: 0 40px; }
.sg-btn-md { height: 48px; padding: 0 32px; font-size: 16px; }
.sg-btn-primary {
	background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2));
	color: #fff;
	box-shadow: 0 8px 20px -6px rgba(249,111,31,.45);
	--sg-btn-bg: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2));
	--sg-btn-color: #fff;
	--sg-btn-border: 0 solid transparent;
	--sg-btn-shadow: 0 8px 20px -6px rgba(249,111,31,.45);
}
.sg-btn-outline-light {
	background: rgba(255,255,255,.1);
	border: 2px solid rgba(255,255,255,.4);
	color: #fff;
	--sg-btn-bg: rgba(255,255,255,.1);
	--sg-btn-border: 2px solid rgba(255,255,255,.4);
	--sg-btn-color: #fff;
}
.sg-btn-outline-light:hover { background: rgba(255,255,255,.12); --sg-btn-bg: rgba(255,255,255,.12); }
.sg-btn-outline-navy {
	background: #fff;
	border: 2px solid rgba(5,3,140,.15);
	color: var(--sg-primary);
	--sg-btn-bg: #fff;
	--sg-btn-border: 2px solid rgba(5,3,140,.15);
	--sg-btn-color: var(--sg-primary);
}
.sg-btn-outline-navy:hover,
.sg-btn-outline-navy:focus {
	background: #fff;
	border-color: var(--sg-orange);
	color: var(--sg-orange);
	--sg-btn-bg: #fff;
	--sg-btn-border: 2px solid var(--sg-orange);
	--sg-btn-color: var(--sg-orange);
}

/* ---- Sections ---- */
.sg-section { padding: 112px 0; }
.sg-section--stats { padding: 96px 0; }
.sg-section--partners { padding: 64px 0; }
.sg-section--soft { background: var(--sg-surface-soft); }
#apheresis { position: relative; overflow: hidden; }
#apheresis::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to bottom right, rgba(5,3,140,.05), transparent 50%, rgba(249,111,31,.10));
}
#apheresis > .sg-container { position: relative; }
.sg-section--white { background: #fff; }
.sg-section--bordertop { border-top: 1px solid var(--sg-border); }

@media (max-width: 991px) {
	.sg-section { padding: 80px 0; }
	.sg-section--stats { padding: 80px 0; }
}

/* ---- Hero ---- */
.sg-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 144px 0 112px;
	background: linear-gradient(135deg, hsl(241 96% 22%) 0%, hsl(241 96% 28%) 60%, hsl(241 85% 40%) 100%) !important;
	color: #fff;
}
.sg-hero-bg {
	position: absolute; inset: 0; z-index: -1;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .25;
	mix-blend-mode: luminosity;
}
.sg-hero-mask {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to bottom, hsl(241 96% 20% / .65) 0%, hsl(241 96% 20% / .55) 50%, hsl(241 96% 20% / .8) 100%);
}
.sg-hero-inner { position: relative; max-width: 692px; padding-top: 40px; }
.sg-hero h1 {
	color: #fff !important;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.111 !important;
	letter-spacing: -.025em;
	margin: 0 !important;
}
/* Hero h1 sizes mirror the design's Tailwind ramps exactly (text-4xl ->
   text-5xl -> text-6xl at sm/md/lg). The text-* utilities carry their own
   line-height, so 5xl/6xl resolve to 1.0 and only the 4xl step is 1.111. */
@media (min-width: 768px) {
	.sg-hero h1 { font-size: 48px; line-height: 1 !important; }
}
@media (min-width: 1024px) {
	.sg-hero h1 { font-size: 60px; }
}
/* Design hero h1 top margins: index mt-8, condition mt-3, others 0. */
body.home .sg-hero h1 { margin-top: 32px !important; }
.single-condition .sg-hero h1, body.single-condition .sg-hero h1 { margin-top: 12px !important; }

/* Homepage steps up at sm (640) rather than md - matches index.html. */
@media (min-width: 640px) and (max-width: 767px) {
	body.home .sg-hero h1 { font-size: 48px; line-height: 1 !important; }
}
/* Sign-up: text-3xl -> md:text-5xl */
.sg-hero h1.sg-hero-h1--signup { font-size: 30px; }
@media (min-width: 768px) {
	.sg-hero h1.sg-hero-h1--signup { font-size: 48px; }
}
/* Community: text-3xl -> sm:text-4xl -> md:text-5xl */
.sg-hero h1.sg-hero-h1--community { font-size: 30px; line-height: 1.15 !important; }
@media (min-width: 640px) {
	.sg-hero h1.sg-hero-h1--community { font-size: 36px; line-height: 1.111 !important; }
}
@media (min-width: 768px) {
	.sg-hero h1.sg-hero-h1--community { font-size: 48px; line-height: 1 !important; }
}
.sg-hero h1 .sg-accent { color: #ffad66 !important; }
.sg-hero--lede-lg p { font-size: 20px !important; line-height: 28px !important; }
.sg-hero p {
	color: rgba(255,255,255,.85) !important;
	font-size: 18px;
	line-height: 1.625;
	max-width: 672px;
	margin: 24px 0 0;
}
.sg-hero .sg-btn-row { margin-top: 32px; }

/* Plain hero variant — solid navy, no photo/mask, shorter, left-aligned
   (Sign Up / other utility pages that aren't primarily marketing landers) */
.sg-hero.sg-hero--plain { padding: 152px 0 48px; }
.sg-hero--plain .sg-hero-inner { padding-top: 0; max-width: 720px; }
.sg-hero--plain h1 { margin-top: 12px !important; }

/* Contact Us form card — design is "rounded-2xl border border-border bg-card
   p-8 shadow-sm", where shadow-sm is Tailwind's default, not this project's
   --shadow-* token scale. */
.sg-contact-card {
	border: 1px solid var(--sg-border); border-radius: 16px; padding: 32px;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

/* 2-col layout: form (wide) + trust sidebar card (narrow) */
.sg-form-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
/* Design (signup.html) is a peach-tinted bordered card with the icon BESIDE the
   text block, not stacked above it, and it sticks on lg. */
.sg-trust-card {
	display: flex; align-items: flex-start; gap: 12px;
	background: rgba(249, 111, 31, .05);
	border: 1px solid rgba(224, 228, 235, .7);
	border-radius: 16px; padding: 24px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.sg-trust-card .sg-trust-icon {
	display: grid; place-items: center;
	/* flex-basis, not just width: in a flex row flex-basis wins on the main axis */
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 999px;
	background: rgba(249, 111, 31, .15); color: var(--sg-orange); font-size: 20px;
}
/* FA's circle glyph advance is wider than 1em; box it to the design's 20x20. */
.sg-trust-card .sg-trust-icon i { display: block; width: 20px; height: 20px; line-height: 20px; text-align: center; }
.sg-trust-card h3 { font-size: 16px; font-weight: 700; color: var(--sg-primary) !important; margin: 0; }
.sg-trust-card p { font-size: 14px; color: var(--sg-muted); line-height: 20px; margin-top: 8px; }
.sg-trust-card p + p { margin-top: 12px; }
.sg-trust-card a { color: var(--sg-orange); font-weight: 500; text-decoration: underline; }
@media (min-width: 1024px) {
	.sg-trust-card { position: sticky; top: 112px; }
}
@media (max-width: 900px) {
	.sg-form-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.sg-hero { padding: 112px 0 80px; }
}

/* ---- About ---- */
.sg-about { text-align: center; max-width: 768px; margin: 0 auto; }
.sg-about h2 { font-size: 36px; font-weight: 700; line-height: 40px !important; margin-top: 12px !important; }
.sg-about h2:first-child { margin-top: 0 !important; }
.sg-about p { color: var(--sg-muted); font-size: 18px; line-height: 1.625; margin-top: 24px; }
.sg-about .sg-btn-row { justify-content: center; margin-top: 32px; }
/* Study/condition detail: design places this block as the first column of a
   1.2fr/1fr grid inside the normal centered 1280px container, so the text
   column lands at the container's left edge - NOT flush to the viewport. */
.sg-about--split { text-align: left; max-width: 1280px; margin: 0 auto; }
.sg-about--split .sg-btn-row { justify-content: flex-start; }
/* !important: the base "body.sg-redesign h1..h4 { margin: 0 }" reset is (0,1,2)
   and outranks any ".class h2" rule, silently dropping heading top margins. */
.sg-about--split h2 { font-size: 30px; margin-top: 16px !important; }
.sg-about--split p { margin-top: 16px; }
/* Design: lede is "text-lg" (18/28) and the aside is base "text-base" (16/24),
   not the shared .sg-about 1.625 ratio. */
.sg-about--split p { line-height: 28px; }
.sg-about--split .sg-about-aside { font-size: 16px; line-height: 24px; }
.sg-about-badge {
	display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
	background: #eff3fb; color: #0e1962; padding: 2px 10px;
	font-size: 12px; line-height: 16px; font-weight: 600;
}
.sg-about-badge #sg-apheresis-visible-count { margin-right: 4px; }
@media (min-width: 768px) {
	.sg-about--split h2 { font-size: 36px; }
}
/* INTENTIONAL DEVIATION FROM THE DESIGN EXPORT (client-directed).
   study-*.html puts this block in the first column of a 1.2fr/1fr grid whose
   SECOND COLUMN IS EMPTY, so the text sits left of centre with ~531px of dead
   space beside it. Implemented faithfully, that measured identical to the
   design - and was still reported as "About Sanguine section is not centered"
   three separate times. So the empty second column is dropped and the text
   column is centred instead, keeping the design's ~637px measure.
   Centring only the column (text still left-aligned) was QC-rejected again on
   2026-09-15 ("Not centered"): a left-ragged block in the middle of the page
   still reads as off-centre. So the text is centred too.
   To revert to the literal design: restore
   "grid-template-columns: 1.2fr 1fr", remove justify-content and text-align. */
.sg-about--split { text-align: center; }
@media (min-width: 1024px) {
	.sg-about--split {
		display: grid; grid-template-columns: minmax(0, 637px); justify-content: center;
		gap: 48px; align-items: center;
	}
}
/* Community variant: design uses a genuinely centered max-w-3xl prose box. */
.sg-about--compact { text-align: left; max-width: 768px; margin: 0 auto; }
.sg-about--compact h2 { font-size: 24px !important; line-height: 1.3 !important; margin-top: 0; color: var(--sg-primary) !important; }

/* ---- Two-column grid (donors / apheresis / community) ---- */
.sg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 991px) {
	.sg-grid-2 { grid-template-columns: 1fr; }
}

/* ---- Process card (How At-Home Collection Works) ---- */
.sg-process-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--sg-shadow-lg);
	border: 1px solid var(--sg-border);
	padding: 24px;
}
.sg-process-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sg-process-card-head .sg-eyebrow { margin: 0; font-size: 12px; }
/* Design uses one badge treatment for both of these (identical class list:
   rounded-full bg-accent px-3 py-1 text-[10px] font-semibold uppercase
   tracking-wider text-accent-foreground) - keep them in one rule so they
   can't drift apart again. */
.sg-process-visit-tag,
.sg-apheresis-tag {
	font-size: 10px; line-height: 15px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em;
	color: #0e1962; background: #eff3fb;
	padding: 4px 12px; border-radius: 999px;
}
.sg-steps { list-style: none; margin: 0; padding: 0; }
.sg-step { position: relative; display: flex; gap: 16px; padding-bottom: 24px; }
.sg-step:last-child { padding-bottom: 0; }
.sg-step-icon {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	background: var(--sg-orange); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; position: relative; z-index: 1;
}
.sg-step-icon--navy { background: var(--sg-primary); }
.sg-step-icon--outline {
	background: #fff; color: var(--sg-primary); border: 2px solid var(--sg-primary);
}
.sg-step-line {
	position: absolute; left: 19px; top: 40px; bottom: -8px; width: 1px;
	background: var(--sg-primary);
}
.sg-step:last-child .sg-step-line { display: none; }
.sg-step-body { flex: 1; padding-top: 3px; }
.sg-step-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* Design: h3.text-sm font-bold tracking-tight text-primary sm:text-base */
.sg-step-title { font-weight: 700; font-size: 14px; line-height: 20px !important; letter-spacing: -.025em; color: var(--sg-primary) !important; margin: 0 !important; }
@media (min-width: 640px) {
	.sg-step-title { font-size: 16px; line-height: 24px !important; }
}
/* Design: span.font-mono text-xs font-semibold text-secondary (orange) */
.sg-step-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--sg-orange); }
.sg-step-text { color: var(--sg-muted); font-size: 14px; line-height: 20px; margin: 4px 0 0; }
.sg-mini-stats { display: flex; border-top: 1px solid var(--sg-border); margin-top: 20px; padding-top: 16px; }
.sg-mini-stat { flex: 1; text-align: center; }
.sg-mini-stat b { display: block; font-size: 18px; color: var(--sg-primary); font-weight: 700; }
.sg-mini-stat span { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--sg-muted); }

/* ---- For Donors text column ---- */
.sg-col-eyebrow-head h2 { font-size: 36px; font-weight: 700; line-height: 40px !important; margin-top: 12px !important; }
.sg-col-body-text { color: var(--sg-muted); font-size: 18px; line-height: 1.625; margin-top: 24px; }
.sg-checklist { list-style: none; margin: 24px 0 32px; padding: 0; display: grid; gap: 12px; }
.sg-checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--sg-foreground); font-size: 16px; line-height: 24px; }
.sg-checklist li:before {
	content: "\2713";
	flex: 0 0 20px; height: 20px; width: 20px; border-radius: 50%;
	background: #eff3fb; color: var(--sg-orange); font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ---- Apheresis grid card ---- */
.sg-apheresis-card {
	background: #fff; border-radius: 20px; box-shadow: var(--sg-shadow-lg);
	border: 1px solid var(--sg-border); padding: 24px;
}
.sg-apheresis-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sg-apheresis-card-head .sg-eyebrow { margin: 0; font-size: 12px; }
.sg-apheresis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.sg-apheresis-item .sg-step-icon { background: #eceafa; color: var(--sg-orange); border-radius: 50%; width: 32px; height: 32px; font-size: 13px; margin-bottom: 8px; }
.sg-apheresis-item { display: flex; flex-direction: column; }
.sg-apheresis-item h3 { font-size: 14px; font-weight: 700; line-height: 20px !important; margin-top: 12px !important; color: var(--sg-primary) !important; }
.sg-apheresis-item p { font-size: 12px; color: var(--sg-muted); line-height: 19.5px; margin: 8px 0 0; }

/* ---- City chips ---- */
.sg-city-list { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--sg-muted); font-size: 14px; margin: 24px 0 32px; align-items: center; }
/* Design: each city is span.font-medium.text-foreground; only the separator is muted. */
.sg-city-list span { font-weight: 500; line-height: 20px; color: var(--sg-foreground); }
.sg-city-list .sg-dot { color: var(--sg-border); font-weight: 400; }

/* ---- Stats ---- */
.sg-stats-head { text-align: center; margin-bottom: 48px; max-width: 672px; margin-left: auto; margin-right: auto; }
.sg-stats-head h2 { color: var(--sg-primary) !important; font-size: 36px; font-weight: 700; line-height: 40px !important; margin-top: 12px !important; }
.sg-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sg-stats-grid > div {
	background: #fff; border: 1px solid var(--sg-border); border-radius: 16px;
	padding: 32px 24px; text-align: left; transition: box-shadow .15s ease;
}
.sg-stats-grid > div:hover { box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08)); }
.sg-stat-num { font-size: 48px; font-weight: 700; color: var(--sg-primary) !important; margin: 0; letter-spacing: -.02em; line-height: 1; }
.sg-stat-label {
	font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--sg-muted);
	margin-top: 12px; border-top: 1px solid var(--sg-border); padding-top: 12px;
}
@media (max-width: 767px) {
	.sg-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ---- Community / video card ---- */
.sg-grid-2 iframe {
	aspect-ratio: 16/9; width: 100%; border-radius: 20px; box-shadow: var(--sg-shadow-elevated);
}
.sg-video-card {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(135deg, hsl(241 96% 22%) 0%, hsl(241 96% 28%) 60%, hsl(241 85% 40%) 100%);
	box-shadow: var(--sg-shadow-elevated);
	border: none; padding: 0; font: inherit; text-align: inherit; display: block;
	--sg-btn-bg: linear-gradient(135deg, hsl(241 96% 22%) 0%, hsl(241 96% 28%) 60%, hsl(241 85% 40%) 100%);
	--sg-btn-border: 0 solid transparent;
	--sg-btn-color: inherit;
	--sg-btn-shadow: var(--sg-shadow-elevated);
}
	cursor: pointer;
}
/* The play handler swaps the poster button out for an iframe; the iframe must
   carry its own box metrics or it falls back to the UA default 300x150. */
.sg-video-frame {
	display: block; width: 100%; aspect-ratio: 16/9;
	border: 0; border-radius: 20px; overflow: hidden;
	box-shadow: var(--sg-shadow-elevated);
}
.sg-video-card:before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 30% 30%, hsl(184 70% 50% / .4), transparent 60%);
}
.sg-video-play {
	position: absolute; inset: 0;
	display: grid; place-items: center;
}
.sg-video-play span {
	width: 80px; height: 80px; border-radius: 50%;
	background: rgba(255,255,255,.95);
	color: var(--sg-primary);
	display: grid; place-items: center;
	box-shadow: var(--sg-shadow-elevated);
	transition: transform .2s ease;
}
.sg-video-card:hover .sg-video-play span { transform: scale(1.1); }
.sg-video-caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 24px;
	background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
.sg-video-caption p { margin: 0; }
.sg-video-caption .sg-vc-eyebrow { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); }
.sg-video-caption .sg-vc-title { font-size: 20px; line-height: 28px; font-weight: 600; color: #fff; margin-top: 2px; }

/* ---- Partners ---- */
.sg-partners-head { text-align: center; }
.sg-partners-head h2 {
	font-size: 14px; font-weight: 600; letter-spacing: .18em !important; line-height: 20px !important;
	text-transform: uppercase; color: var(--sg-muted) !important; text-align: center;
}
/* Design: grid-cols-2 -> sm:grid-cols-3 -> lg:grid-cols-6, gap-x-8 gap-y-6 */
.sg-partners-list {
	list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 24px 32px; margin: 40px 0 0; padding: 0;
}
@media (min-width: 640px) { .sg-partners-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sg-partners-list { grid-template-columns: repeat(6, 1fr); } }
.sg-partners-list li {
	height: 64px; display: grid; place-items: center; overflow: hidden;
	border: 1px solid var(--sg-border); border-radius: 999px; background: #fff;
	padding: 0 16px; text-align: center; font-size: 14px; font-weight: 600;
	line-height: 20px; color: rgba(5, 3, 140, .7);
	transition: border-color .15s, color .15s;
}
.sg-partners-list li:hover { border-color: var(--sg-orange); color: var(--sg-primary); }
.sg-partners-list li.sg-partner-logo { padding: 10px 16px; }
/* Cap width so wide-format marks (Vasculitis, IPPF) don't dominate the row;
   object-fit keeps aspect ratio, so they scale down rather than distort. */
.sg-partners-list li.sg-partner-logo img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }

/* ---- Footer ----
   Keep background/color on the SAME .sg-footer rule as padding. WP Rocket
   minify merges duplicate selectors and was dropping the navy fill, which
   left white footer text on leftover BB pages (signup/onsite) looking faded. */
.fl-page .sg-footer,
.sg-footer {
	background: var(--sg-surface-navy, #050261) !important;
	color: rgba(255, 255, 255, .85) !important;
	padding: 64px 0;
}
.sg-footer-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; }
.sg-footer-brand { grid-column: span 4; }
.sg-footer-logo { height: 32px; width: auto; filter: brightness(0) invert(1); margin-bottom: 20px; }
.sg-footer-brand p { font-size: 14px; line-height: 1.625; color: rgba(255,255,255,.7); max-width: 384px; }
.sg-footer-col { grid-column: span 2; }
.sg-footer-col h3 {
	color: #fff !important; font-size: 14px; font-weight: 600; line-height: 20px !important;
	letter-spacing: .05em !important; text-transform: uppercase; margin: 0 0 16px;
}
.sg-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sg-footer-col a { color: rgba(255,255,255,.7); font-size: 14px; text-decoration: none; }
.sg-footer-col a:hover { color: #fff; }
.sg-footer-bottom {
	margin-top: 48px; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.15);
	display: flex; flex-direction: column; align-items: flex-start;
	justify-content: space-between; gap: 12px;
}
@media (min-width: 640px) {
	.sg-footer-bottom { flex-direction: row; align-items: center; }
}
.sg-footer-bottom p { font-size: 12px; line-height: 16px; color: rgba(255,255,255,.6); margin: 0; }
@media (max-width: 991px) {
	.sg-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.sg-footer-brand { grid-column: span 2; }
	.sg-footer-col { grid-column: span 1; }
}
@media (max-width: 480px) {
	.sg-footer-grid { grid-template-columns: 1fr; }
	.sg-footer-brand, .sg-footer-col { grid-column: span 1; }
}

/* ==========================================================================
   Interior page components — reused across the subpages (about, why-sanguine,
   partnerships, publications, blog, press, strategic-partnerships, contact,
   apheresis, at-home-studies, sign-up).
   ========================================================================== */

/* Soft (light) hero used on interior pages, as opposed to the bold navy
   homepage hero. Text stays dark navy since the background is light. */
.sg-hero-soft {
	position: relative;
	overflow: hidden;
	padding: 160px 0 72px;
	background: linear-gradient(135deg, rgba(5,3,140,.10), var(--sg-surface-soft) 50%, hsla(184,75%,70%,.18));
	border-bottom: 1px solid var(--sg-border);
}
.sg-hero-soft::before,
.sg-hero-soft::after {
	content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0;
}
.sg-hero-soft::before { top: -20px; right: -40px; width: 320px; height: 320px; background: rgba(5,3,140,.15); }
.sg-hero-soft::after { bottom: -60px; left: -80px; width: 288px; height: 288px; background: rgba(249,111,31,.10); }
.sg-hero-soft .sg-container { position: relative; z-index: 1; max-width: 860px; }
/* Soft-hero page eyebrows are text-xs tracking-[0.22em] with no bottom gap in
   the design (the h1's own mt-6 provides the spacing) - measured identical on
   all 7 soft-hero pages. Only the colour varies per page. */
.sg-hero-soft .sg-eyebrow { text-align: center; font-size: 12px; line-height: 16px; letter-spacing: .22em; margin-bottom: 0; }
.sg-hero-soft .sg-eyebrow--muted { color: var(--sg-muted); }
.sg-hero-soft h1 {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.111 !important;
	text-align: center;
	/* !important: the body.sg-redesign h1..h4 { margin: 0 } reset is (0,1,2) and
	   outranks this (0,1,1) rule, which is why the design's mt-6 gap above every
	   soft-hero h1 was rendering as 0. */
	margin: 24px 0 0 !important;
	color: var(--sg-primary) !important;
}
/* Design caps these h1s (max-w-3xl / max-w-4xl on why-sanguine) so they wrap
   earlier than the container width. */
.sg-hero-soft--left h1 { max-width: 768px; }
.sg-hero-soft h1.sg-hero-h1--why { max-width: 896px; }
/* Research-partnerships is the one soft hero using mt-5 rather than mt-6. */
.sg-hero-soft h1.sg-hero-h1--tight { margin-top: 20px !important; }
/* text-4xl -> sm:text-5xl -> lg:text-6xl */
@media (min-width: 640px) {
	.sg-hero-soft h1 { font-size: 48px; line-height: 1 !important; }
}
@media (min-width: 1024px) {
	.sg-hero-soft h1 { font-size: 60px; }
}
/* Why Sanguine: text-5xl -> sm:text-6xl -> lg:text-7xl */
.sg-hero-soft h1.sg-hero-h1--why { font-size: 48px; line-height: 1 !important; }
@media (min-width: 640px) {
	.sg-hero-soft h1.sg-hero-h1--why { font-size: 60px; }
}
@media (min-width: 1024px) {
	.sg-hero-soft h1.sg-hero-h1--why { font-size: 72px; }
}
.sg-hero-soft p.sg-lede {
	color: var(--sg-muted);
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
	max-width: 640px;
	margin: 20px auto 0;
}
.sg-hero-soft .sg-btn-row { justify-content: center; }
.sg-hero-soft .sg-quote {
	margin: 32px auto 0; max-width: 640px; text-align: center;
	font-size: 17px; font-style: italic; color: var(--sg-foreground);
}
.sg-quote-icon { display: block; margin-bottom: 12px; font-size: 22px; color: var(--sg-orange); }
.sg-hero-soft--split .sg-quote-icon { margin-bottom: 8px; }
.sg-hero-soft .sg-quote cite {
	display: block; margin-top: 12px; font-style: normal; font-size: 12px;
	font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sg-orange);
}
@media (max-width: 767px) {
	.sg-hero-soft { padding: 128px 0 56px; }
}

/* Left-aligned single-column variant (Why Sanguine hero) */
.sg-hero-soft--left .sg-container { max-width: 900px; }
.sg-hero-soft--left .sg-eyebrow,
.sg-hero-soft--left h1,
.sg-hero-soft--left p.sg-lede { text-align: left; margin-left: 0; }
/* Contact hero (plain white section, not a .sg-hero*): text-4xl -> sm:text-5xl */
.sg-hero-h1--contact { font-size: 36px; line-height: 1.111 !important; color: var(--sg-primary) !important; }
@media (min-width: 640px) {
	.sg-hero-h1--contact { font-size: 48px; line-height: 1 !important; }
}
.sg-hero-soft--left p.sg-lede { margin: 24px 0 0; max-width: 640px; }
.sg-hero-soft--left .sg-accent-italic { font-style: italic; color: var(--sg-orange); }

/* Value-prop cards: wide horizontal rows, 2-col grid, alternating tint bg
   (Why Sanguine "why it matters" grid) */
.sg-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sg-value-card {
	display: flex; gap: 20px; align-items: flex-start;
	border: 1px solid var(--sg-border); border-radius: 20px; padding: 32px;
	background: #fff;
}
.sg-value-card.is-tinted { background: rgba(5,3,140,.04); }
.sg-value-card .sg-step-icon { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; flex-shrink: 0; margin-bottom: 0; background: var(--sg-primary); }
.sg-value-card h2 { font-size: 24px; font-weight: 700; line-height: 32px !important; color: var(--sg-primary) !important; }
.sg-value-card p { margin-top: 10px; font-size: 15px; color: var(--sg-muted); line-height: 1.6; }
@media (max-width: 767px) {
	.sg-value-grid { grid-template-columns: 1fr; }
}

/* Split variant — left-aligned text + quote card side by side (About Us hero) */
.sg-hero-soft.sg-hero-soft--split .sg-container { max-width: 1280px; }
.sg-hero-soft--split .sg-grid-2 { align-items: start; gap: 56px; }
.sg-hero-soft--split .sg-eyebrow,
.sg-hero-soft--split h1,
.sg-hero-soft--split p.sg-lede { text-align: left; margin-left: 0; }
.sg-hero-soft--split p.sg-lede { margin-top: 20px; max-width: none; }
.sg-hero-soft--split .sg-quote {
	margin: 0; max-width: none; text-align: left; font-size: 16px;
	background: #fff; border-left: 3px solid var(--sg-orange); border-radius: 12px;
	padding: 28px; box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08));
}
@media (max-width: 900px) {
	.sg-hero-soft--split .sg-grid-2 { grid-template-columns: 1fr; }
}
/* Publications hero quote uses a plainer, non-uppercase citation style */
.sg-quote--pub { color: var(--sg-primary); }
.sg-quote--pub cite {
	font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--sg-muted);
}

/* Boxed 2x2 stat cards (About Us mission stats) */
.sg-stat-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sg-stat-box {
	background: #fff; border: 1px solid var(--sg-border); border-radius: 14px;
	padding: 24px 20px; text-align: center;
	box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08));
}
.sg-stat-box .sg-stat-num { font-size: 30px; }
.sg-stat-box .sg-stat-label { margin-top: 6px; }

/* Boxed vertical stat list with an eyebrow header (partnerships "by the numbers") */
.sg-stat-list-box {
	background: var(--sg-surface-soft); border: 1px solid var(--sg-border); border-radius: 16px;
	padding: 28px;
}
.sg-stat-list-box .sg-eyebrow { margin-bottom: 18px; }
.sg-stat-list-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--sg-border); }
.sg-stat-list-row:first-of-type { border-top: 0; padding-top: 0; }
.sg-stat-list-row .sg-stat-num { font-size: 24px; margin: 0; }
/* Strategic's inline stat list uses tracking-wider (.05em), unlike the
   homepage stat grid which the design sets to tracking-[0.15em]. */
.sg-stat-list-row .sg-stat-label { margin: 0; white-space: nowrap; letter-spacing: .05em; }

/* Case study / spotlight layout: main card + gradient spotlight card */
.sg-case-study-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
/* Case-study body copy is "text-lg leading-relaxed" in the design. */
.sg-case-study-grid .sg-card p { font-size: 18px; line-height: 29.25px; }
.sg-spotlight-card {
	background: linear-gradient(160deg, var(--sg-primary), var(--sg-orange) 130%);
	border-radius: 16px; padding: 28px; color: #fff;
}
.sg-spotlight-card .sg-spotlight-label {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255,255,255,.75); margin-bottom: 14px;
}
.sg-spotlight-card .sg-spotlight-name { font-size: 22px; font-weight: 700; margin: 0; }
.sg-spotlight-card .sg-spotlight-sub { font-size: 14px; color: rgba(255,255,255,.85); margin-top: 4px; }
.sg-spotlight-card .sg-spotlight-divider { height: 1px; background: rgba(255,255,255,.25); margin: 20px 0; }
.sg-spotlight-card .sg-stat-num { color: #fff !important; font-size: 30px; }
.sg-spotlight-card .sg-stat-label { color: rgba(255,255,255,.75); }
@media (max-width: 900px) {
	.sg-case-study-grid { grid-template-columns: 1fr; }
}

/* Centered gradient CTA card (community "Ready to make an impact?" section,
   study-detail equivalents) — same navy hero gradient as .sg-hero, in a
   rounded card, all content centered. Distinct from .sg-cta-banner below,
   which is a left/right split layout with the orange diagonal gradient. */
.sg-cta-card {
	background: linear-gradient(135deg, hsl(241 96% 22%) 0%, hsl(241 96% 28%) 60%, hsl(241 85% 40%) 100%);
	border-radius: 24px; padding: 64px 40px; text-align: center; color: #fff;
}
.sg-cta-card h2 { color: #fff !important; font-size: 36px; line-height: 40px !important; }
.sg-cta-card p { color: rgba(255,255,255,.85); font-size: 18px; line-height: 28px; max-width: 640px; margin: 16px auto 0; }
.sg-cta-card .sg-btn-row { justify-content: center; margin-top: 32px; }
/* community-*.html: lede is "mx-auto max-w-2xl" (672px) - at the shared 640px it
   wrapped to three lines with an orphaned last line under the button, which QC
   kept reading as "button off center". */
.sg-page-community .sg-cta-card p { max-width: 672px; }
/* community-*.html: both "Create Your Health Profile" buttons are "h-14 px-10"
   (56px tall, 40px sides) - one size up from the shared 48px .sg-btn-lg. */
.sg-page-community .sg-btn-lg { height: 56px; min-height: 56px; padding-left: 40px; padding-right: 40px; }
@media (max-width: 640px) {
	.sg-cta-card { padding: 40px 24px; }
}

/* Solid-navy split CTA card: design uses bg-primary (not a gradient) with a
   12-col grid - copy on the left (span 8), button right-aligned (span 4).
   Used by the partnerships "Tell us about your project" section. */
.sg-cta-split {
	background: var(--sg-primary);
	border-radius: 24px;
	padding: 56px 32px;
	color: #fff;
	display: grid; gap: 32px; align-items: center;
}
.sg-cta-split h2 { color: #fff !important; font-size: 30px; line-height: 36px !important; font-weight: 700; letter-spacing: -.025em; margin-top: 0 !important; }
.sg-cta-split p { color: rgba(255,255,255,.8); font-size: 16px; max-width: 672px; margin-top: 16px; }
.sg-cta-split .sg-btn-row { margin-top: 0; }
@media (min-width: 640px) {
	.sg-cta-split h2 { font-size: 36px; line-height: 40px !important; }
}
@media (min-width: 1024px) {
	.sg-cta-split { grid-template-columns: repeat(12, 1fr); padding: 80px 64px; }
	.sg-cta-split > :first-child { grid-column: span 8; }
	.sg-cta-split > :last-child { grid-column: span 4; justify-self: end; }
}

/* Full-bleed gradient CTA banner (contained card, not full section width) */
.sg-cta-banner {
	background: linear-gradient(120deg, var(--sg-primary), var(--sg-orange) 140%);
	border-radius: 20px; padding: 48px; color: #fff;
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
/* Design: text-3xl sm:text-4xl (30/36 -> 36/40). */
.sg-cta-banner h2 { color: #fff !important; font-size: 30px; line-height: 36px !important; }
@media (min-width: 640px) {
	.sg-cta-banner h2 { font-size: 36px; line-height: 40px !important; }
}
/* Corporate pages (about/press/strategic/partnerships) use text-primary for
   section headings; donor pages (home/studies/apheresis) use foreground. */
.sg-head-primary h2 { color: var(--sg-primary) !important; }
.sg-cta-banner p { color: rgba(255,255,255,.85); margin-top: 8px; font-size: 16px; line-height: 24px; max-width: 520px; }
.sg-cta-banner .sg-btn-row { margin-top: 0; }

/* Generic section heading (eyebrow + h2 + optional lede), centered */
.sg-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sg-section-head h2 { font-size: 36px; font-weight: 700; line-height: 40px !important; margin-top: 16px !important; }
.sg-section-head h2:first-child { margin-top: 0 !important; }
.sg-section-head p { color: var(--sg-muted); font-size: 18px; line-height: 28px; margin-top: 12px; }
.sg-section-head.sg-align-left { text-align: left; margin-left: 0; }
/* Some section heads are left-aligned with the HEADING capped (max-w-2xl /
   max-w-xl) inside a full-width container, rather than the shared centered
   720px box. --sg-head-cap lets each page set its own cap. */
.sg-section-head--left-narrow { max-width: none; text-align: left; margin-left: 0; margin-right: 0; }
.sg-section-head--left-narrow h2,
.sg-section-head--left-narrow p { text-align: left; max-width: var(--sg-head-cap, 672px); }

/* Simple 3-4up feature/info card grid */
.sg-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sg-card-grid.sg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sg-card-grid.sg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sg-card {
	background: #fff; border: 1px solid var(--sg-border); border-radius: 16px;
	padding: 28px; box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08));
}
.sg-card .sg-step-icon { margin-bottom: 14px; }
.sg-card h3 { font-size: 18px; font-weight: 600; line-height: 28px !important; margin-top: 16px !important; }
.sg-card p { font-size: 14px; color: var(--sg-muted); line-height: 1.6; margin: 8px 0 0; }
@media (max-width: 991px) {
	.sg-card-grid, .sg-card-grid.sg-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.sg-card-grid, .sg-card-grid.sg-cols-3, .sg-card-grid.sg-cols-2 { grid-template-columns: 1fr; }
}

/* Numbered step row (How it works — 3 or 4 steps, horizontal on desktop) */
.sg-step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sg-step-row.sg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sg-step-row .sg-step-num-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--sg-primary); color: #fff; font-weight: 700; font-size: 14px;
	margin-bottom: 14px;
}
.sg-step-row h3 { font-size: 20px; font-weight: 600; line-height: 28px !important; margin-top: 20px !important; }
.sg-step-row p { font-size: 14px; color: var(--sg-muted); line-height: 1.6; margin: 6px 0 0; }
.sg-step-eyebrow {
	display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .025em;
	text-transform: uppercase; color: var(--sg-muted); margin: 10px 0 4px;
}
.sg-step-row .sg-step-icon { margin-bottom: 0; }

/* Minimal variant: accent top-border + plain number label instead of a circle badge */
.sg-step-row.sg-step-row--minimal > div { border-top: 2px solid var(--sg-orange); padding-top: 18px; }
.sg-step-row--minimal .sg-step-num-plain {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--sg-orange); margin-bottom: 10px;
}
.sg-step-row--minimal h3 { font-size: 18px; margin-top: 12px !important; }
@media (max-width: 767px) {
	.sg-step-row, .sg-step-row.sg-cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.sg-step-row, .sg-step-row.sg-cols-3 { grid-template-columns: 1fr; }
}

/* Stat row (simple, no card chrome — used inline in heroes/sections) */
.sg-inline-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.sg-inline-stats .sg-stat-num { font-size: 32px; }

/* 2x2 checkerboard stat tile grid (hero side column) */
.sg-stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }
.sg-stat-tile { border-radius: 14px; padding: 22px 18px; background: #fff; border: 1px solid var(--sg-border); text-align: center; }
.sg-stat-tile--dark { background: var(--sg-primary); border-color: var(--sg-primary); }
.sg-stat-tile-num { font-size: 26px; font-weight: 700; margin: 0; color: var(--sg-primary); }
.sg-stat-tile--dark .sg-stat-tile-num { color: #fff; }
.sg-stat-tile-label { font-size: 13px; color: var(--sg-muted); margin-top: 4px; }
.sg-stat-tile--dark .sg-stat-tile-label { color: rgba(255,255,255,.75); }
@media (max-width: 600px) {
	.sg-stat-tiles { max-width: 320px; }
}

/* Testimonial / person card */
.sg-person-card { background: #fff; border: 1px solid var(--sg-border); border-radius: 16px; padding: 24px; }
.sg-person-avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--sg-surface-soft); color: var(--sg-primary);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 15px; margin-bottom: 14px;
}
.sg-person-card blockquote { font-size: 15px; line-height: 1.6; color: var(--sg-foreground); margin: 0 0 14px; }
.sg-person-card .sg-person-name { font-weight: 700; font-size: 14px; color: var(--sg-primary); }
.sg-person-card .sg-person-role { font-size: 12px; color: var(--sg-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Leadership variant — avatar beside name/role, bio below (About Us) */
.sg-person-card--leadership { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
/* Design: grid h-14 w-14 rounded-full bg-gradient-teal text-secondary-foreground
   font-semibold - i.e. 56px, orange gradient, WHITE initials (this design
   system's "teal" token is the orange gradient). Scoped to the leadership
   variant because why-sanguine's testimonial avatars already match their own
   design at the soft-surface/navy treatment. */
.sg-person-card--leadership .sg-person-avatar {
	margin-bottom: 0; flex-shrink: 0;
	width: 56px; height: 56px;
	background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2));
	color: #fff; font-weight: 600; font-size: 16px; line-height: 24px;
}
.sg-person-card--leadership .sg-person-head { padding-top: 4px; }
.sg-person-card--leadership .sg-person-name { font-size: 16px; }
.sg-person-card--leadership .sg-person-role { color: var(--sg-orange); margin-top: 2px; }
.sg-person-card--leadership p { flex-basis: 100%; margin-top: 4px !important; font-size: 14px; color: var(--sg-muted); line-height: 1.6; }

/* FAQ accordion — each question is its own bordered/shadowed card (not a
   flat divided list), matching the design exactly. */
.sg-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sg-faq-item {
	border: 1px solid var(--sg-border); border-radius: 16px; background: #fff;
	padding: 0 24px; box-shadow: 0 1px 2px 0 rgba(15,18,74,.04);
	transition: box-shadow .15s ease;
}
.sg-faq-item:hover, .sg-faq-item[open] { box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08)); }
.sg-faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 0; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--sg-primary);
	list-style: none;
}
.sg-faq-item summary::-webkit-details-marker { display: none; }
.sg-faq-item summary:after {
	content: ""; width: 9px; height: 9px; flex-shrink: 0;
	border-right: 2px solid var(--sg-primary); border-bottom: 2px solid var(--sg-primary);
	transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px;
}
.sg-faq-item[open] summary:after { transform: rotate(225deg); margin-top: 4px; }
.sg-faq-item p { padding: 0 0 16px; margin: 0; color: var(--sg-muted); font-size: 15px; line-height: 1.6; }

/* 2-column FAQ variant (at-home-studies) — fills top-to-bottom in the left
   column first, then the right column, matching the design (not row-major
   grid auto-placement). */
.sg-faq.sg-faq-2col {
	max-width: 980px; display: grid; grid-template-columns: 1fr 1fr;
	grid-auto-flow: column; grid-template-rows: repeat(var(--sg-faq-rows, 4), auto);
	align-items: start;
	gap: 16px 24px;
}
@media (max-width: 700px) {
	.sg-faq.sg-faq-2col { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}

/* Study detail quick-facts card (icon left, text right) */
.sg-quickfact { display: flex; align-items: flex-start; gap: 16px; }
/* flex-basis must be overridden too: the base .sg-step-icon sets
   "flex: 0 0 40px", and inside this flex container that basis beats `width`,
   so the badge rendered 40x44 (an ellipse) despite the 44px width below. */
.sg-quickfact .sg-step-icon { margin-bottom: 0; flex: 0 0 44px; width: 44px; height: 44px; }
.sg-quickfact .sg-list-eyebrow { color: var(--sg-muted); }
.sg-quickfact h3 { margin-top: 4px; font-size: 16px; font-weight: 600; }

/* Study detail hero breadcrumb row */
.sg-breadcrumb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sg-breadcrumb-back {
	display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7);
	font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; text-decoration: none;
}
.sg-breadcrumb-back:hover { color: #fff; }
.sg-breadcrumb-sep { color: rgba(255,255,255,.35); }
.sg-category-pill {
	display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 12px;
	font-size: 12px; font-weight: 600; background: rgba(255,255,255,.15); color: #fff;
}

/* Participation requirements — two accordion cards (inclusion/exclusion) */
.sg-req-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; margin-top: 48px; }
.sg-req-card {
	background: #fff; border: 1px solid var(--sg-border); border-radius: 16px;
	box-shadow: 0 1px 2px 0 rgba(15,18,74,.04); overflow: hidden;
	transition: box-shadow .15s ease;
}
.sg-req-card:hover, .sg-req-card[open] {
	box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08));
}
.sg-req-card summary {
	display: flex; align-items: center; gap: 14px; padding: 16px 24px; cursor: pointer; list-style: none;
}
.sg-req-card summary::-webkit-details-marker { display: none; }
.sg-req-icon {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 36px; height: 36px; border-radius: 50%; font-size: 15px;
}
.sg-req-icon.is-yes { background: #25935f; color: #fff; }
.sg-req-icon.is-no { background: #c91d1d; color: #fff; }
/* Design: h3 is text-lg (18/28) and the hint is text-xs (12/16) inheriting
   weight 500 from the summary. Neither declared a line-height here, so both
   inherited the wrong ratio (22.5px / 17.4px). Only reachable on environments
   whose conditions actually have criteria data, which is why it stayed hidden. */
.sg-req-card h3 { font-size: 18px; font-weight: 600; line-height: 28px !important; margin: 0; }
.sg-req-card .sg-req-sub { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--sg-muted); margin: 2px 0 0; }
.sg-req-card summary:after {
	content: "\25BE"; margin-left: auto; color: var(--sg-primary); font-size: 14px; flex-shrink: 0;
	transition: transform .15s ease;
}
.sg-req-card[open] summary:after { transform: rotate(180deg); }
.sg-req-card ul { margin: 0; padding: 0 24px 22px 66px; list-style: disc; }
.sg-req-card li { font-size: 14px; color: var(--sg-muted); line-height: 1.7; }
@media (max-width: 767px) {
	.sg-req-grid { grid-template-columns: 1fr; }
}

/* Simple form */
.sg-form { max-width: 640px; margin: 0 auto; }
.sg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.sg-form-row.sg-full { grid-template-columns: 1fr; }
/* Field metrics come from the design's shadcn input: h-10 (40px),
   rounded-[0.5rem] (8px), px-3 py-2 (8px/12px), text-base (16px);
   labels are text-sm (14px) with space-y-2 (8px) above the control. */
.sg-form label { display: block; font-size: 14px; font-weight: 600; color: var(--sg-foreground); margin-bottom: 8px; }
/* Only text-entry controls get the full-width box treatment. Checkboxes and
   radios must keep their intrinsic size, and submit buttons own their own
   width/padding/border - an earlier version of this rule applied width, padding
   and borders to every input, which stretched consent checkboxes across the
   whole column and forced submit buttons to full width. */
.sg-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ff-btn-submit),
.sg-form select, .sg-form textarea {
	width: 100% !important; padding: 8px 12px !important; border: 1px solid var(--sg-border) !important; border-radius: 8px !important;
	font-size: 16px !important; font-family: inherit !important; color: var(--sg-foreground) !important; background: #fff !important;
}
.sg-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ff-btn-submit),
.sg-form select { height: 40px !important; }
/* Design's controls are "text-base md:text-sm": 16px below the md breakpoint
   (which also avoids iOS zoom-on-focus) and 14px from 768px up. */
@media (min-width: 768px) {
	.sg-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ff-btn-submit),
	.sg-form select { font-size: 14px !important; }
}
.sg-form input:focus, .sg-form select:focus, .sg-form textarea:focus { outline: 2px solid var(--sg-primary); outline-offset: 1px; }
/* Design's textarea is text-sm (14px) at every width, unlike the inputs. */
.sg-form textarea { resize: vertical; min-height: 80px; font-size: 14px !important; }
.sg-form .sg-btn { margin-top: 8px; border: 0; cursor: pointer; }
@media (max-width: 600px) {
	.sg-form-row { grid-template-columns: 1fr; }
}

/* Blog / publication list cards */
.sg-list-card {
	display: block; background: #fff; border: 1px solid var(--sg-border); border-radius: 16px;
	padding: 24px; text-decoration: none; color: inherit; margin-bottom: 16px;
}
.sg-list-card:hover { border-color: var(--sg-primary); }
.sg-list-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sg-orange); }
/* Apheresis donation-list rows show this as a pill badge, matching the design
   (distinct from the plain-text eyebrow used in quickfacts/blog/press cards). */
.sg-cond-row .sg-list-eyebrow {
	display: inline-flex; background: #eff3fb; color: #0e1962; border-radius: 999px;
	padding: 2px 10px; font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none;
}
.sg-list-card h3 { font-size: 18px; line-height: 1.35 !important; font-weight: 700; margin: 8px 0 0; }
.sg-list-card p { font-size: 14px; color: var(--sg-muted); margin: 8px 0 0; line-height: 1.6; }
.sg-list-card .sg-list-meta { font-size: 13px; color: var(--sg-muted); margin-top: 12px; }

/* Rounded pill tag (press page category badges) */
.sg-tag-pill {
	display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px;
	font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
	background: #eff3fb; color: #0e1962;
}

/* Featured press item — split card: text left, gradient image right */
.sg-press-feature {
	border: 1px solid var(--sg-border); border-radius: 20px; padding: 40px;
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
	box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08));
}
.sg-press-feature .sg-tag-pill { background: rgba(249, 111, 31, .15); color: var(--sg-orange); }
.sg-press-feature .sg-press-date { font-size: 13px; color: var(--sg-muted); margin-top: 14px; }
.sg-press-feature h2 { font-size: 36px; line-height: 40px !important; margin-top: 12px !important; color: var(--sg-primary) !important; }
.sg-press-feature p { color: var(--sg-muted); font-size: 18px; line-height: 28px; margin-top: 14px; }
.sg-press-feature-img {
	background: linear-gradient(160deg, var(--sg-primary), var(--sg-orange) 130%);
	border-radius: 16px; aspect-ratio: 4 / 3; width: 100%; overflow: hidden;
}
.sg-press-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-press-card-media {
	aspect-ratio: 16/10; overflow: hidden; border-radius: 12px; margin: 0 0 16px;
}
.sg-press-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sg-press-card:hover .sg-press-card-media img { transform: scale(1.04); }
@media (max-width: 800px) {
	.sg-press-feature { grid-template-columns: 1fr; }
	.sg-press-feature-img { order: -1; aspect-ratio: 16 / 9; }
}

/* More-coverage grid card — hover matches .sg-blog-card */
.sg-press-card {
	display: flex; flex-direction: column; overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sg-press-card:hover {
	transform: translateY(-3px); box-shadow: var(--sg-shadow-lg);
	border-color: var(--sg-border);
}
.sg-press-card .sg-press-card-top { display: flex; align-items: center; justify-content: space-between; }
.sg-press-card .sg-press-date { font-size: 13px; color: var(--sg-muted); margin-top: 14px; }
.sg-press-card h3 { margin-top: 8px !important; font-weight: 600; transition: color .15s ease; }
.sg-press-card:hover h3 { color: var(--sg-orange) !important; }

/* Blog featured post (split card) + essay cards */
.sg-blog-featured {
	display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center;
	background: #fff; border: 1px solid var(--sg-border); border-radius: 24px;
	padding: 48px; box-shadow: var(--sg-shadow-md, 0 4px 12px -2px rgba(15,18,74,.08));
}
/* Design: text-3xl sm:text-4xl (30/36 -> 36/40). */
.sg-blog-featured h2 { font-size: 30px; font-weight: 700; line-height: 36px !important; margin-top: 16px !important; color: var(--sg-primary) !important; }
@media (min-width: 640px) {
	.sg-blog-featured h2 { font-size: 36px; line-height: 40px !important; }
}
.sg-blog-featured p { color: var(--sg-muted); font-size: 18px; line-height: 28px; margin-top: 14px; }
.sg-blog-featured-media {
	width: 100%; border-radius: 16px; overflow: hidden;
	background: linear-gradient(135deg, var(--sg-primary), var(--sg-orange));
}
.sg-blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-blog-tag {
	display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 13px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	background: #fdece4; color: var(--sg-orange);
	align-self: flex-start; width: max-content;
}
.sg-blog-tag--blue { background: rgba(5,3,140,.1); color: var(--sg-primary); }
.sg-blog-tag--green { background: #d1fae5; color: #047857; }
.sg-blog-tag--amber { background: #fef3c7; color: #92400e; }
.sg-blog-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sg-muted); margin-top: 20px; }
.sg-blog-card {
	display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sg-border); border-radius: 16px;
	padding: 24px; text-decoration: none; color: inherit; overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sg-blog-card:hover { transform: translateY(-3px); box-shadow: var(--sg-shadow-lg); }
.sg-blog-card h3 { transition: color .15s ease; }
.sg-blog-card:hover h3 { color: var(--sg-orange) !important; }
.sg-blog-card-media {
	aspect-ratio: 16/10; overflow: hidden; border-radius: 12px;
	margin: 0 0 16px;
}
.sg-blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sg-blog-card:hover .sg-blog-card-media img { transform: scale(1.04); }
.sg-blog-card h3 { font-size: 18px; line-height: 1.35 !important; font-weight: 700; margin: 14px 0 0; }
.sg-blog-card p { font-size: 14px; color: var(--sg-muted); margin: 10px 0 0; line-height: 1.6; flex: 1; }
.sg-blog-card .sg-blog-meta { justify-content: space-between; margin-top: 18px; }
@media (max-width: 900px) {
	.sg-blog-featured { grid-template-columns: 1fr; padding: 32px; }
	.sg-blog-featured-media { order: -1; aspect-ratio: 16/9; }
}

/* Single blog post ("Why I keep coming back" template) */
.sg-post-hero {
	position: relative;
	padding: 160px 0 56px;
	background: linear-gradient(135deg, rgba(249,111,31,.12), var(--sg-surface-soft) 55%, rgba(5,3,140,.08));
	border-bottom: 1px solid var(--sg-border);
}
.sg-post-hero .sg-container { max-width: 860px; }
.sg-post-back {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 500; color: var(--sg-muted);
	text-decoration: none !important;
}
.sg-post-back:hover { color: var(--sg-orange); }
.sg-post-badge {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 32px;
	border-radius: 999px; padding: 5px 14px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	background: #fdece4; color: var(--sg-orange);
}
.sg-post-hero h1 {
	margin-top: 20px;
	font-size: clamp(30px, 2.8vw + 20px, 48px);
	font-weight: 700;
	line-height: 1.1 !important;
	color: var(--sg-primary) !important;
}
.sg-post-lede { margin-top: 20px; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--sg-muted); }
.sg-post-meta-row {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-top: 28px; font-size: 14px; color: var(--sg-muted);
}
.sg-post-author { font-weight: 600; color: var(--sg-primary); }
.sg-post-readtime { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767px) {
	.sg-post-hero { padding: 128px 0 40px; }
}

/* Narrow prose column (figure / body), matching the design's max-w-4xl (figure)
   and max-w-3xl (body/CTA) - the related-posts grid stays full width. */
.sg-post-narrow { max-width: 720px; }
.sg-post-narrow--wide { max-width: 860px; }
.sg-post-figure-section { padding-top: 48px; }
.sg-post-figure { margin: 0; }
.sg-post-figure img { width: 100%; border-radius: 24px; box-shadow: var(--sg-shadow-lg); display: block; aspect-ratio: 16/9; object-fit: cover; }
.sg-post-figure figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--sg-muted); }

.sg-post-body-section { padding: 56px 0 96px; }
/* Normalize typography inside post content regardless of the markup a given
   post was authored/imported with (Gutenberg <p> blocks vs. legacy scraped
   markup that uses bare <div>/text nodes with no <p> wrapper at all, e.g.
   old SoundCloud-embed transcript posts) — otherwise older posts render with
   browser-default font size/spacing instead of the design's type scale. */
.sg-post-body { font-size: 18px; line-height: 1.75; color: var(--sg-muted); font-family: inherit; }
.sg-post-body p,
.sg-post-body > div,
.sg-post-body li { font-size: 18px !important; line-height: 1.75 !important; color: var(--sg-muted) !important; font-family: inherit !important; margin: 22px 0 0; }
.sg-post-body p:first-child,
.sg-post-body > div:first-child { margin-top: 0; }
/* In-content "On this page" nav from imported articles sits flush against
   the figure/caption above it. Give it space without changing the copy. */
.sg-post-body nav.toc {
	display: block;
	margin-top: 48px;
}
.sg-post-body nav.toc p:empty { display: none; margin: 0; }
.sg-post-body nav.toc ol { margin-top: 12px; }
.sg-post-body nav.toc li { margin-top: 8px !important; }
.sg-post-body h2 { font-size: 26px; font-weight: 700; line-height: 1.3 !important; color: var(--sg-primary) !important; margin-top: 44px !important; }
.sg-post-body h3, .sg-post-body h4 { font-size: 21px; font-weight: 700; line-height: 1.35 !important; color: var(--sg-primary) !important; margin-top: 36px !important; }
.sg-post-body ul, .sg-post-body ol { font-size: 18px; line-height: 1.75; color: var(--sg-muted); margin: 22px 0 0; padding-left: 24px; }
.sg-post-body a { color: var(--sg-primary); text-decoration: underline; }
.sg-post-body strong, .sg-post-body b { color: inherit; font-weight: 700; }
.sg-post-body blockquote { margin: 32px 0; padding-left: 20px; border-left: 3px solid var(--sg-border); font-style: italic; color: var(--sg-foreground); }
.sg-post-body img { max-width: 100%; height: auto; border-radius: 16px; margin: 24px 0; }
.sg-post-cta {
	margin-top: 56px; border-radius: 24px; border: 1px solid var(--sg-border);
	background: var(--sg-surface-soft); padding: 40px;
}
.sg-post-cta h2 { font-size: 24px; font-weight: 700; color: var(--sg-primary) !important; margin: 0; }
.sg-post-cta p { color: var(--sg-muted); margin: 12px 0 0; }
.sg-post-cta .sg-btn-row { margin-top: 24px; }
.sg-post-cta .sg-btn-outline-navy:hover,
.sg-post-cta .sg-btn-outline-navy:focus {
	background: #fff;
	border-color: var(--sg-orange);
	color: var(--sg-orange) !important;
}
@media (max-width: 640px) {
	.sg-post-cta { padding: 28px; }
}

.sg-post-related-label { text-align: left; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; margin-bottom: 32px; }
.sg-related-card {
	display: flex; flex-direction: column; overflow: hidden; background: #fff;
	border: 1px solid var(--sg-border); border-radius: 16px; text-decoration: none; color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sg-related-card:hover { transform: translateY(-3px); box-shadow: var(--sg-shadow-lg); }
.sg-related-card h3 { transition: color .15s ease; }
.sg-related-card:hover h3 { color: var(--sg-orange) !important; }
.sg-related-card-media { aspect-ratio: 16/10; overflow: hidden; }
.sg-related-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sg-related-card:hover .sg-related-card-media img { transform: scale(1.04); }
.sg-related-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
/* .sg-related-tag reuses .sg-blog-tag's base/color-variant styles - only
   needs the flex alignment tweak for its flex-column card layout. */
.sg-related-tag { align-self: flex-start; }
.sg-related-card h3 { font-size: 18px; line-height: 1.35 !important; font-weight: 700; margin: 14px 0 0; }
.sg-related-card p { font-size: 14px; color: var(--sg-muted); margin: 10px 0 0; line-height: 1.6; flex: 1; }
.sg-related-card .sg-blog-meta { justify-content: space-between; margin-top: 18px; }

/* Publications: year sidebar + divided list (not cards) */
.sg-pub-year-block { display: grid; grid-template-columns: 220px 1fr; gap: 32px; margin-bottom: 64px; }
.sg-pub-year-block:last-child { margin-bottom: 0; }
.sg-pub-year-num { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; color: rgba(5,3,140,.15); margin: 0; line-height: 1; }
.sg-pub-count { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-muted); margin: 4px 0 0; }
.sg-pub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sg-border); }
.sg-pub-row { padding: 24px 0; border-bottom: 1px solid var(--sg-border); }
.sg-pub-row-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Scoped past ".sg-pub-row p" (0,1,1), which otherwise wins over a bare class. */
.sg-pub-row p.sg-pub-journal {
	font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; color: var(--sg-orange); margin: 0;
}
.sg-pub-tag { flex-shrink: 0; display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 10px; line-height: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: #eff3fb; color: #0e1962; }
.sg-pub-row h3 { font-size: 20px; line-height: 27.5px !important; font-weight: 600; margin-top: 8px !important; }
.sg-pub-row h3 a { color: inherit; text-decoration: none; }
.sg-pub-row h3 a:hover { color: var(--sg-orange); }
.sg-pub-ext-icon { font-size: 13px; opacity: 0; transition: opacity .15s ease; }
.sg-pub-row:hover .sg-pub-ext-icon { opacity: 1; }
.sg-pub-row p { font-size: 14px; font-style: italic; color: var(--sg-muted); margin: 8px 0 0; }
@media (max-width: 700px) {
	.sg-pub-year-block { grid-template-columns: 1fr; gap: 8px; }
}

/* Logo wall (partner/trust logos as text pills, reusing partners list look) */
.sg-logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 767px) { .sg-logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* Contact Form 7 — restyle the plugin's default markup to match the redesign,
   without touching the form/back end itself. */
/* Design's form is "space-y-6" => 24px between fields. */
.sg-cf7-wrap .wpcf7-form p { margin: 0 0 24px; }
/* Design's contact labels are text-sm font-medium (14px/500); !important
   because the parent BB theme sets a competing 16px label size. */
.sg-cf7-wrap .wpcf7-form label { display: block; font-size: 14px !important; font-weight: 500 !important; line-height: 14px !important; color: var(--sg-foreground); margin-bottom: 0; }
/* CF7 nests the control inside its <label>, so the design's "space-y-2" (8px)
   label-to-control gap has to come from the control wrapper, not label margin. */
.sg-cf7-wrap .wpcf7-form label .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
/* The design's markup says "container-prose max-w-2xl", but container-prose
   wins in the rendered export, so the approved card spans the full container. */
.sg-contact-card { max-width: none; }
.sg-cf7-wrap .wpcf7-form input[type="text"],
.sg-cf7-wrap .wpcf7-form input[type="email"],
.sg-cf7-wrap .wpcf7-form input[type="tel"],
.sg-cf7-wrap .wpcf7-form select,
.sg-cf7-wrap .wpcf7-form textarea {
	width: 100%; padding: 8px 12px; border: 1px solid var(--sg-border) !important; border-radius: 8px !important;
	font-family: inherit; color: var(--sg-foreground); background: #fff;
	/* font-size comes from the shared .sg-form control rule (16px / md:14px). */
}
.sg-cf7-wrap .wpcf7-form input[type="text"],
.sg-cf7-wrap .wpcf7-form input[type="email"],
.sg-cf7-wrap .wpcf7-form input[type="tel"],
.sg-cf7-wrap .wpcf7-form select { height: 40px; }
.sg-cf7-wrap .wpcf7-form input:focus, .sg-cf7-wrap .wpcf7-form select:focus, .sg-cf7-wrap .wpcf7-form textarea:focus {
	outline: 2px solid var(--sg-primary); outline-offset: 1px;
}
/* Design's Comments box is rows="6" on top of min-h-[80px], which renders 138px. */
/* !important: the site's inline custom CSS has ".wpcf7-form .wpcf7-textarea
   { height: 80px !important }", which otherwise pins this to 80px. */
.sg-cf7-wrap .wpcf7-form textarea { resize: vertical; min-height: 80px; height: 138px !important; font-size: 14px; }
/* Design's submit is "h-12 rounded-md px-8 text-base w-full sm:w-auto" with
   bg-gradient-teal (orange, despite the name) and Tailwind's shadow-md. */
.sg-cf7-wrap .wpcf7-form input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; height: 48px; padding: 0 32px; border-radius: 999px !important; border: 0 !important;
	background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)) !important;
	color: #fff !important; font-weight: 500; font-size: 16px; cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}
@media (max-width: 639px) {
	.sg-cf7-wrap .wpcf7-form input[type="submit"] { width: 100%; }
}
.sg-cf7-wrap .wpcf7-spinner { display: none; }

/* Formstack-hosted sign-up form — soften its own injected chrome (light-blue
   panel, default blue submit button) to sit better inside the redesign,
   without touching its markup/behavior. Targets Formstack's real classes
   (.ff-form-main / .ff-btn-submit), confirmed via the rendered DOM. */
.sg-form .ff-form-main {
	background: #fff !important; border-radius: 24px; border: 1px solid var(--sg-border); padding: 24px !important;
	box-shadow: var(--sg-shadow-lg);
}
@media (min-width: 640px) {
	/* design card is rounded-3xl (24px) + shadow-elevated, p-6 -> sm:p-8 */
	.sg-form .ff-form-main { padding: 32px !important; }
}
/* Formstack's own script asserts border:0 on its inputs after our stylesheet
   loads, so these need !important to actually win. */
.sg-form .ff-form-main input:not([type="checkbox"]):not([type="radio"]):not(.ff-btn-submit),
.sg-form .ff-form-main select,
.sg-form .ff-form-main textarea {
	border: 1px solid var(--sg-border) !important; border-radius: 8px !important;
	background: #fff !important; font-size: 16px !important; padding: 8px 12px !important;
}
@media (min-width: 768px) {
	/* design controls are text-base -> md:text-sm; 16px is kept below 768 so iOS
	   doesn't zoom the viewport on focus, which is why the design steps it too */
	.sg-form .ff-form-main input:not([type="checkbox"]):not([type="radio"]):not(.ff-btn-submit),
	.sg-form .ff-form-main select,
	.sg-form .ff-form-main textarea { font-size: 14px !important; }
}
.sg-form .ff-form-main input:not([type="checkbox"]):not([type="radio"]):not(.ff-btn-submit),
.sg-form .ff-form-main select { height: 40px !important; }
/* Design section header: text-xl -> md:text-2xl, bold, primary, border-b pb-4. */
.sg-form .ff-section-header {
	font-size: 20px !important; font-weight: 700 !important; color: var(--sg-primary) !important;
	border-bottom: 1px solid var(--sg-border); padding-bottom: 16px !important; margin: 8px 0 20px !important;
}
@media (min-width: 768px) {
	.sg-form .ff-section-header { font-size: 24px !important; }
}
.sg-form .ff-label, .sg-form .ff-general-text-label {
	font-size: 14px !important; font-weight: 600 !important; color: var(--sg-foreground) !important;
}
/* Formstack marks required fields with a sibling <span>*</span> after the
   <label>. The generic ".sg-form label { display:block }" pushed that span
   onto its own line; keep them on one line as the design has them. */
.sg-form .ff-label { display: inline-block !important; }
/* design uses --destructive (#c91d1d) for the required mark; Formstack ships #e83030 */
.sg-form .ff-required-mark { display: inline; margin-left: 3px; color: #c91d1d !important; }
.sg-form .fw-row { margin-bottom: 16px !important; }
.sg-form .ff-checkbox-li, .sg-form .ff-radio-li { font-size: 14px !important; }
/* (Checkbox/radio sizing is handled by the shared .sg-form control rule above,
   which now excludes them from the full-width treatment entirely.) */

/* Condition detail, "How the donation process works": the design's step badges
   are "h-11 w-11 rounded-full bg-gradient-teal shadow-md" - 44px with the
   orange gradient (bg-gradient-teal is a misnomer; --secondary is orange) and
   Tailwind's shadow-md. Scoped to the .sg-step-row--process modifier rather
   than .sg-step-icon, which is shared by six templates - the homepage timeline
   deliberately fills only step 1 and outlines steps 2-4, and apheresis,
   at-home-studies, research-partnerships and the community view reuse it too. */
.sg-step-row--process .sg-step-icon {
	width: 44px; height: 44px;
	background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2));
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}
.sg-step-row--process .sg-step-icon i { font-size: 20px; }
/* Each step is a card in the design ("rounded-2xl border bg-card shadow-sm p-6")
   with the badge and the "Step N" label side by side ("flex items-center gap-3"),
   then the title "mt-5". Without this the steps rendered as bare stacked text
   (QC: "how the donation process works icon"). */
.sg-step-row--process > div {
	display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: start; align-items: center;
	background: #fff; border: 1px solid rgba(224, 228, 235, .7); border-radius: 16px; padding: 24px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.sg-step-row--process > div > .sg-step-icon { grid-column: 1; margin: 0; }
.sg-step-row--process > div > .sg-step-eyebrow { grid-column: 2; margin: 0; }
.sg-step-row--process > div > h3,
.sg-step-row--process > div > p { grid-column: 1 / -1; }

/* Formstack field layout -> signup.html.
   Formstack emits one .ff-item-row per field inside .ff-group-row, stacked in a
   single column. The design pairs related fields two-up, and City/State/ZIP
   three-up, so the group row becomes a 6-column grid: full-width rows span 6,
   halves span 3, thirds span 2.

   Fields are selected by their Formstack/Salesforce control name via :has(), so
   the DOM is never reordered - only adjacent siblings share a visual row, and
   tab order stays in source order. That matters here: this is a medical intake
   form, and grid-placement reordering would desync keyboard order from what a
   donor sees. It also means a Formstack field rename degrades to full width
   rather than scrambling the layout. */
.sg-form .ff-group-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	align-items: start;
	margin-bottom: 16px !important;
}
.sg-form .ff-group-row > * { grid-column: span 6; min-width: 0; margin-bottom: 0 !important; }
/* label sits above its control, each filling the grid cell */
.sg-form .ff-col-1, .sg-form .ff-col-2 { width: 100% !important; float: none !important; display: block !important; }
.sg-form .ff-label-col { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* halves: First/Last name, Email, Date of birth/Sex.
   Phone stays full-width (condition signup forms do not share the generic
   FSGFNumber734 name, so they already span 6; keep /sign-up/ matching). */
.sg-form .ff-item-row:has(input[name="Contact.FirstName"]),
.sg-form .ff-item-row:has(input[name="Contact.LastName"]),
.sg-form .ff-item-row:has(input[name="Contact.Email"]),
.sg-form .ff-item-row:has(input[name="Contact.Birthdate"]),
.sg-form .ff-item-row:has(select[name="Contact.Gender__c"]) { grid-column: span 3; }
.sg-form .ff-item-row:has(input[name="FSGFNumber734"]) { grid-column: span 6; }

/* thirds: City / State / ZIP */
.sg-form .ff-item-row:has(input[name="Contact.MailingCity"]),
.sg-form .ff-item-row:has(select[name="Contact.State_New__c"]),
.sg-form .ff-item-row:has(input[name="Contact.MailingPostalCode"]) { grid-column: span 2; }

@media (max-width: 639px) {
	/* design collapses these grids to one column below sm */
	.sg-form .ff-group-row { grid-template-columns: 1fr; }
	.sg-form .ff-group-row > * { grid-column: span 1 !important; }
}
.sg-form input[type="submit"],
.sg-form button[type="submit"],
.sg-form input.submit,
.sg-form .ff-btn-submit {
	background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)) !important;
	border: 0 !important; border-radius: 999px !important;
	color: #fff !important; font-weight: 600;
}

/* A-Z letter filter (at-home-studies condition browser) */
.sg-letter-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-letter-btn {
	min-width: 30px; height: 28px; padding: 4px 10px; border-radius: 999px;
	border: 0; background: #eff3fb; color: #0e1962;
	font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer;
	--sg-btn-bg: #eff3fb;
	--sg-btn-border: 0 solid transparent;
	--sg-btn-color: #0e1962;
}
.sg-letter-btn:hover { background: var(--sg-border); --sg-btn-bg: var(--sg-border); }
.sg-letter-btn.is-active { background: var(--sg-primary); color: #fff; --sg-btn-bg: var(--sg-primary); --sg-btn-color: #fff; }

/* Split section head: text on the left, a 2x2 icon-card grid on the right (apheresis "why it matters") */
.sg-split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.sg-split-head-text .sg-eyebrow { display: block; }
.sg-split-head-text h2 { font-size: 36px; font-weight: 700; line-height: 40px !important; margin-top: 16px !important; }
.sg-split-head-text p { color: var(--sg-muted); font-size: 18px; line-height: 28px; margin-top: 14px; }
.sg-split-head .sg-card-grid.sg-cols-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) {
	.sg-split-head { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
	.sg-split-head .sg-card-grid.sg-cols-2 { grid-template-columns: 1fr; }
}

/* City picker (apheresis locations) */
.sg-city-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sg-city-btn {
	display: inline-flex; align-items: center; border-radius: 999px;
	border: 1px solid var(--sg-border); background: #fff; color: var(--sg-primary);
	font-size: 14px; line-height: 20px; font-weight: 600; padding: 10px 20px; cursor: pointer;
	--sg-btn-bg: #fff;
	--sg-btn-border: 1px solid var(--sg-border);
	--sg-btn-color: var(--sg-primary);
}
.sg-city-btn i {
	font-size: 16px; width: 16px; height: 16px;
	display: inline-flex; align-items: center; justify-content: center; color: var(--sg-muted);
}
/* Design keeps the light border on the active pill - only bg + text change. */
.sg-city-btn.is-active { background: var(--sg-primary); color: #fff; --sg-btn-bg: var(--sg-primary); --sg-btn-color: #fff; }
.sg-city-btn.is-active i { color: rgba(255,255,255,.7); }

/* Conditions browser: tabs + search + letter-grouped table/list rows (not cards) */
.sg-cond-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px; margin-top: 32px;
}
.sg-cond-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--sg-border); border-radius: 999px; background: #fff; }
/* line-height 24px (not the inherited 1.2 ratio) is what gives the design's
   44px tab height at 16px/10px padding; without it the tabs render 39px. */
.sg-cond-tab {
	border: 0; background: transparent; color: var(--sg-muted); font-size: 16px; font-weight: 500;
	line-height: 24px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
	--sg-btn-bg: transparent;
	--sg-btn-border: 0 solid transparent;
	--sg-btn-color: var(--sg-muted);
}
.sg-cond-tab.is-active { background: var(--sg-primary); color: #fff; --sg-btn-bg: var(--sg-primary); --sg-btn-color: #fff; }
.sg-cond-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sg-cond-count { font-size: 14px; color: var(--sg-muted); white-space: nowrap; }
.sg-cond-search { position: relative; width: 320px; }
.sg-cond-search input {
	width: 100%; height: 44px; padding: 0 14px 0 38px !important; border: 1px solid var(--sg-border); border-radius: 8px;
	font-size: 15px; font-family: inherit; color: var(--sg-foreground); background: #fff;
}
.sg-cond-search input:focus { outline: 2px solid var(--sg-primary); outline-offset: 1px; }
.sg-cond-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sg-muted); font-size: 14px; }

.sg-cond-groups { margin-top: 24px; }
.sg-cond-group { margin-bottom: 24px; }
.sg-cond-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sg-cond-group-letter {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 32px; height: 32px; border-radius: 999px; background: var(--sg-primary); color: #fff;
	font-size: 14px; font-weight: 700;
}
.sg-cond-group-line { flex: 1; height: 1px; background: var(--sg-border); }
.sg-cond-card {
	background: #fff; border: 1px solid var(--sg-border); border-radius: 16px;
	box-shadow: 0 1px 2px 0 rgba(15,18,74,.04); overflow: hidden;
}
.sg-cond-list { margin: 0; padding: 0; list-style: none; }
.sg-cond-row {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 20px 24px; border-bottom: 1px solid var(--sg-border);
}
.sg-cond-row:last-child { border-bottom: 0; }
.sg-cond-row:hover { background: var(--sg-surface-soft); }
.sg-cond-info { flex: 1; min-width: 0; }
.sg-cond-name { font-size: 18px; font-weight: 600; line-height: 28px !important; color: var(--sg-primary) !important; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-cond-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--sg-muted); }
/* Design: rounded-full px-2.5 py-0.5 text-xs font-semibold bg-accent. */
.sg-cond-badge {
	display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px;
	font-size: 12px; line-height: 16px; font-weight: 600; background: #eff3fb; color: #0e1962; white-space: nowrap;
}
.sg-cond-row-meta .sg-cond-loc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* Apheresis rows put the "Apheresis (WBC)" badge BESIDE the condition name
   (design: flex items-center gap-4 min-w-0, h4 text-base sm:text-lg). The
   at-home studies rows stack their name above a meta row instead, so this
   layout is scoped to the apheresis page rather than applied to .sg-cond-info. */
/* flex: 0 1 auto (not the shared flex: 1) because the design's wrapper is
   "min-w-0" with no flex-1 - it is content-sized, so the name sits hard against
   the badge instead of leaving slack to its right. */
.sg-page-apheresis .sg-cond-info { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; }
.sg-page-apheresis .sg-cond-name { font-size: 16px; }
.sg-page-apheresis .sg-cond-row .sg-list-eyebrow { flex-shrink: 0; display: none; line-height: 16px; }
@media (min-width: 640px) {
	.sg-page-apheresis .sg-cond-name { font-size: 18px; }
	.sg-page-apheresis .sg-cond-row .sg-list-eyebrow { display: inline-flex; }
}
.sg-cond-row-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sg-cond-comp-badge {
	display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px;
	font-size: 12px; font-weight: 600; background: #eff3fb; color: #0e1962; white-space: nowrap;
}
.sg-cond-comp-text { font-size: 14px; color: var(--sg-muted); margin: 0; white-space: nowrap; }
.sg-cond-comp-text span { font-weight: 600; color: var(--sg-orange); }
.sg-cond-row .sg-btn { height: 36px; padding: 0 12px; font-size: 14px; white-space: nowrap; border-radius: 999px; }
.sg-cond-empty { text-align: center; padding: 48px 24px; color: var(--sg-muted); }
.sg-cond-loadmore { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 700px) {
	.sg-cond-toolbar { flex-direction: column; align-items: stretch; }
	.sg-cond-tabs { justify-content: space-between; }
	.sg-cond-meta { justify-content: space-between; }
	.sg-cond-search { width: 100%; }
	.sg-cond-row { flex-direction: column; align-items: flex-start; gap: 14px; }
	.sg-cond-row-actions { width: 100%; justify-content: flex-start; }
}

/* Full-bleed gradient CTA section (design: bg-gradient-hero text-primary-foreground). */
.sg-section--cta-dark {
	background: linear-gradient(120deg, var(--sg-surface-navy), var(--sg-primary) 60%, #1b1a9e 140%);
	padding: 80px 0;
}
.sg-section--cta-dark .sg-about h2 { color: #fff !important; }
.sg-section--cta-dark .sg-about p { color: rgba(255,255,255,.85) !important; }

/* studies.html/apheresis.html hero CTAs are h-12/px-8 in the design, unlike the
   homepage hero which is h-14/px-10. Scope to those templates only. */
body.page-template-page-at-home-studies .sg-hero .sg-btn-outline-light,
body.page-template-page-apheresis-donate-white-blood-cells .sg-hero .sg-btn-outline-light {
	background: rgba(255,255,255,.1);
}

/* study-*.html step titles are text-lg (18px); apheresis.html uses text-xl (20px). */
body.single-condition .sg-step-row h3 { font-size: 18px; }
/* why-sanguine value-card body copy: design text-base/1.625 */
.sg-value-card p { font-size: 16px !important; line-height: 26px !important; }

/* Condition hero lede is text-xl (20/28) in study-*.html. */
body.single-condition .sg-hero p { font-size: 20px; line-height: 28px; }
/* Minimal step body copy: text-sm/1.625 */
.sg-step-row--minimal p { line-height: 22.75px; }

/* ---- Apheresis page overrides ----
   The design intentionally differs from other pages here: step copy is
   text-base/leading-6 (others are text-sm), card copy is leading-5 (others
   leading-relaxed), and the ghost button sits at 10% white (homepage is 5%).
   Scoped via a template-set class - NOT a page-id body class, since post IDs
   differ per environment. */
.sg-page-apheresis .sg-card p { line-height: 20px; }
.sg-page-apheresis .sg-step-row p { font-size: 16px; line-height: 24px; }
.sg-page-apheresis .sg-step-eyebrow { font-size: 14px; line-height: 20px; }

/* Homepage's ghost hero button is the 5% variant; every other dark hero is 10%. */
.sg-page-home .sg-btn-outline-light { background: rgba(255,255,255,.05); }
/* Inside the navy CTA card the design uses the translucent-on-dark button,
   not the white-on-light one. */
.sg-cta-card .sg-btn-outline-navy {
	background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4);
}
/* Ghost buttons on dark/blue sections keep the original hover — do not use the orange outline. */
.sg-hero .sg-btn-outline-light:hover,
.sg-hero .sg-btn-outline-light:focus,
.sg-cta-card .sg-btn-outline-light:hover,
.sg-cta-card .sg-btn-outline-light:focus,
.sg-cta-card .sg-btn-outline-navy:hover,
.sg-cta-card .sg-btn-outline-navy:focus {
	background: rgba(255,255,255,.12) !important;
	border-color: rgba(255,255,255,.4) !important;
	color: #fff !important;
}
/* Community landing variant: card/step titles are text-xl, body copy text-base,
   and its hero lede is text-lg (the study-detail view uses text-xl). */
/* Community design gives every step/card heading "mt-5 text-xl" (20px/20px).
   The body.single-condition prefix is needed because
   "body.single-condition .sg-step-row h3" (0,2,2) outranks a plain
   ".sg-page-community .sg-step-row h3" (0,2,1) and was forcing 18px. */
body.single-condition .sg-page-community .sg-step-row h3,
.sg-page-community .sg-step-row h3,
.sg-page-community .sg-card h3 { font-size: 20px; margin-top: 20px !important; }
.sg-page-community .sg-step-eyebrow { font-size: 14px; line-height: 20px; }
/* Research-partnerships cards also use mt-5. */
.sg-page-partnerships .sg-card h3 { margin-top: 20px !important; }
/* Study-detail steps: "text-xs tracking-wider" labels (0.05em) and "text-sm"
   descriptions at leading-5, vs the community page's text-sm/tracking-wide. */
.sg-page-condition .sg-step-eyebrow { letter-spacing: .05em; }
.sg-page-condition .sg-step-row p { line-height: 20px; }
.sg-page-community .sg-step-row p,
.sg-page-community .sg-card p { font-size: 16px; line-height: 24px; }
.sg-page-community .sg-about p { font-size: 16px; line-height: 24px; }
body.single-condition .sg-page-community .sg-hero p { font-size: 18px !important; line-height: 28px !important; }
/* Studies + community step copy is text-base/leading-6. */
.sg-page-community .sg-step-row p { font-size: 16px; line-height: 24px; }

/* Dark-hero eyebrow. Design (studies/apheresis/condition/signup heroes) is
   text-sm font-semibold uppercase tracking-[0.2em] text-primary-foreground/70
   - i.e. translucent WHITE, not the peach that was hardcoded inline. */
.sg-eyebrow--on-dark {
	color: rgba(255,255,255,.7) !important;
	font-size: 14px; letter-spacing: .2em;
}

/* Studies listing: step copy is text-base/leading-6 like the other donor pages. */
.sg-page-studies .sg-step-row p { font-size: 16px; line-height: 24px; }
/* The two 18px paragraphs on this page use DIFFERENT leading in the design:
   the browser intro is "text-lg leading-relaxed max-w-3xl" (29.25/768px) while
   the "Honest answer" block is plain "text-lg" (28px). Scoped per block rather
   than changed on the shared .sg-section-head / .sg-about rules. */
/* Design wraps this head in a full-width div and caps only the paragraph at
   max-w-3xl; the shared .sg-section-head 720px cap would make the p fill it.
   !important because a wider p max-width (820px) is set outside this file. */
.sg-page-studies .sg-section-head.sg-align-left { max-width: none; }
.sg-page-studies .sg-section-head.sg-align-left p { line-height: 29.25px; max-width: 768px !important; }
.sg-page-studies .sg-section--soft .sg-about p { line-height: 28px; }

/* ---- Final design-parity corrections (QC harness, measured at 1440) ---- */
/* Sign-up hero: design h1 has no top margin and the lede is md:text-lg (28px). */
h1.sg-hero-h1--signup { margin-top: 0 !important; }
.sg-hero--plain p { line-height: 28px; }
/* Sign-up trust card: h3 is text-base/leading-6, body copy text-sm/leading-5. */
.sg-trust-card h3 { line-height: 24px; }
.sg-trust-card p { line-height: 20px; }
/* Blog: card meta is text-xs (12/16); tag pills are font-semibold/leading-4, and
   the featured card's tag is the orange bg-secondary/15 treatment regardless of
   which category-colour variant sg_blog_tag_class() picked. */
.sg-blog-meta { font-size: 12px; line-height: 16px; }
.sg-blog-tag { font-weight: 600; line-height: 16px; }
.sg-blog-featured .sg-blog-tag { background: #fdece4; color: var(--sg-orange); }
/* Community hero category pill is text-xs/leading-4. */
.sg-category-pill { line-height: 16px; }
/* Left-capped section heads sit tight under their eyebrow (design mt-0). */
.sg-section-head--left-narrow h2 { margin-top: 0 !important; }
/* The Beaver Builder skin sets ".fl-page button { font-size:16px; line-height:1.2 }"
   inside @media (max-width: 991px) at specificity (0,1,1), which outranks these
   (0,1,0) component rules and silently resized every filter pill below 992px.
   !important per this file's existing convention for fighting the BB skin. */
.sg-letter-btn { font-size: 14px !important; line-height: 20px !important; }
.sg-city-btn { font-size: 14px !important; line-height: 20px !important; }
.sg-cond-tab { font-size: 16px !important; line-height: 24px !important; }
@media (max-width: 639px) {
	/* Design drops these tabs to text-sm / px-2 below the sm breakpoint. */
	.sg-cond-tab { font-size: 14px !important; padding-left: 8px; padding-right: 8px; }
}
/* Split soft-hero ledes are capped at max-w-2xl in the design, so they leave
   slack to the right of the text column instead of filling it. */
.sg-hero-soft--split p.sg-lede { max-width: 672px; }
/* Trust-card h3 needs !important to clear a competing h3 line-height. */
.sg-trust-card h3 { line-height: 24px !important; }


/* Why Sanguine "Voices from the community" -> why-sanguine.html:
   header "flex items-end justify-between" + lucide users h-10 w-10 text-secondary (hidden < sm);
   cards "rounded-3xl bg-surface-soft p-8", quote "text-lg leading-relaxed text-primary"
   with a "text-3xl text-secondary" opening mark; caption "mt-6 border-t pt-4". */
.sg-voices-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sg-voices-head h2 { max-width: 576px; color: var(--sg-primary) !important; font-size: 30px; line-height: 36px !important; font-weight: 700; letter-spacing: -.025em; margin: 0 !important; }
.sg-voices-icon { width: 40px; height: 40px; color: var(--sg-orange); flex-shrink: 0; }
.sg-voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.sg-voice { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 32px; border-radius: 24px; background: var(--sg-surface-soft); }
.sg-voice blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 29.25px; color: var(--sg-primary); font-style: normal; }
.sg-voice-mark { font-size: 30px; line-height: 1; color: var(--sg-orange); }
.sg-voice figcaption { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sg-border); }
.sg-voice-name { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sg-primary); }
.sg-voice-role { margin: 0; font-size: 12px; line-height: 16px; color: var(--sg-muted); text-transform: none; letter-spacing: 0; }
@media (min-width: 640px) { .sg-voices-head h2 { font-size: 36px; line-height: 40px !important; } }
@media (max-width: 1023px) { .sg-voices-grid { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .sg-voices-icon { display: none; } }


/* =============================================================================
   DESIGN-PARITY AUDIT 2026-09-21 (3 auditors, computed-style diffs vs the
   rendered export + Lovable source). Every rule is scoped by the page wrapper
   class unless marked GLOBAL. Where a rule sets an h1-h4 margin it carries
   !important because "body.sg-redesign h1..h4 { margin:0 }" (0,1,2) outranks
   plain ".page .class h2" rules (HANDOFF trap #2).
   ============================================================================= */

/* ---------- GLOBAL: buttons - design is Tailwind shadow-md, not an orange glow */
.sg-btn-primary { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.sg-btn i.fa-arrow-right { font-size: 14px; }

/* ---------- GLOBAL: header / desktop nav (Navbar.tsx) */
.sg-header .sg-nav-item,
.sg-header .sg-nav-item a { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.sg-nav-list:not(.sg-mobile-nav-list) { gap: 4px; }
.sg-nav-list:not(.sg-mobile-nav-list) .sg-nav-top { gap: 4px; padding: 8px 16px; font-size: 14px; line-height: 20px; color: rgba(12,24,49,.8); border-radius: 999px; }
.sg-nav-list:not(.sg-mobile-nav-list) .sg-nav-item:hover > .sg-nav-top { background: #eff3fb; color: var(--sg-foreground); }
.sg-nav-caret { font-size: 12px; width: 16px; text-align: center; }
.sg-nav-list:not(.sg-mobile-nav-list) .sg-nav-item { padding-bottom: 12px; margin-bottom: -12px; }
.sg-nav-list:not(.sg-mobile-nav-list) .sg-mega-panel { width: 352px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.sg-nav-list:not(.sg-mobile-nav-list) .sg-mega-item { padding: 12px; border-radius: 12px; }
.sg-nav-list:not(.sg-mobile-nav-list) .sg-mega-item:hover { background: #eff3fb; }
.sg-nav-list:not(.sg-mobile-nav-list) .sg-mega-item-icon { border-radius: 999px; margin-top: 2px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.sg-mega-item-title { line-height: 20px; }
.sg-mega-item-desc { line-height: 16.5px; }
.sg-header-actions { gap: 12px; }
.sg-hdr-btn i { font-size: 16px; }
.sg-hdr-btn-solid { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.sg-header.is-scrolled { border-bottom-color: var(--sg-border); box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }

/* ---------- GLOBAL: mobile menu - collapsed text-only accordions, X toggle */
@media (max-width: 1023px) {
	.sg-logo img { height: 32px; }
	.sg-nav-toggle { border-radius: 999px !important; background: transparent !important; color: var(--sg-primary) !important; }
	.sg-mobile-nav-list .sg-nav-top { font-size: 16px; line-height: 24px; padding: 12px; border-radius: 999px; justify-content: space-between; }
	.sg-mobile-nav-list .sg-nav-caret { display: inline-block; font-size: 12px; width: 16px; transition: transform .15s; }
	.sg-mobile-nav-list .sg-nav-item.is-open .sg-nav-caret { transform: rotate(180deg); }
	.sg-mobile-nav-list .sg-mega-panel { display: none !important; margin: 0 0 4px 12px; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--sg-border); border-radius: 0; box-shadow: none; }
	.sg-mobile-nav-list .sg-nav-item.is-open .sg-mega-panel { display: block !important; }
	.sg-mobile-nav-list .sg-mega-item-icon { display: none; }
	.sg-mobile-nav-list .sg-mega-item { padding: 8px 12px; border-radius: 999px; }
	.sg-mobile-nav-list .sg-mega-item-title { font-size: 14px; font-weight: 500; color: rgba(12,24,49,.85); }
	.sg-header.sg-mobile-open .sg-mobile-panel { padding: 16px 16px 24px; }
	.sg-mobile-actions { margin-top: 12px; gap: 8px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
	.sg-header.sg-mobile-open .sg-mobile-panel { padding: 16px 24px 24px; }
	.sg-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- GLOBAL: footer (Footer.tsx) */
body.sg-redesign .sg-footer-col h3 { margin: 0 0 16px !important; }
.sg-footer-col ul { gap: 12px; }
.sg-footer-logo { height: 36px; }
.sg-footer-bottom { margin-top: 56px; border-top-color: rgba(255,255,255,.1); }
@media (max-width: 1023px) {
	.sg-footer-grid { grid-template-columns: repeat(4, 1fr); gap: 48px 32px; }
	.sg-footer-brand { grid-column: 1 / -1; }
	.sg-footer-col { grid-column: span 1; }
}
@media (max-width: 639px) {
	.sg-footer-grid { grid-template-columns: repeat(2, 1fr); }
	.sg-footer-brand, .sg-footer-col { grid-column: auto; }
	.sg-footer-brand { grid-column: 1 / -1; }
}

/* ---------- GLOBAL: section h2 is "text-3xl sm:text-4xl" - 30/36 on phones */
@media (max-width: 639px) {
	body.sg-redesign .sg-front .sg-section h2,
	body.sg-redesign .sg-front .sg-cta-card h2 { font-size: 30px !important; line-height: 36px !important; }
}

/* =============================== HOMEPAGE (.sg-page-home) */
@media (max-width: 1023px) {
	.sg-page-home .sg-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.sg-page-home .sg-process-card { order: 2; }
	.sg-page-home .sg-hero-inner { max-width: none; }
}
@media (max-width: 639px) { .sg-page-home .sg-stat-num { font-size: 36px; } .sg-page-home .sg-step-text { font-size: 12px; } }
@media (min-width: 1024px) { .sg-page-home .sg-hero-inner { max-width: calc((100% - 440px) * 7 / 12 + 240px); } }
.sg-page-home .sg-about { max-width: 1280px; }
.sg-page-home .sg-process-card { border-radius: 24px; padding: 32px; }
.sg-page-home .sg-process-card-head { margin-bottom: 24px; }
.sg-page-home .sg-step { padding-bottom: 20px; }
.sg-page-home .sg-step-body { background: #f8f9fc; border: 1px solid #e0e4eb; border-radius: 16px; padding: 16px; }
.sg-page-home .sg-steps .sg-step-icon { flex: 0 0 44px; width: 44px; height: 44px; border: 2px solid var(--sg-orange); }
.sg-page-home .sg-steps .sg-step-icon--outline { border-color: var(--sg-primary); }
.sg-page-home .sg-step-line { left: 21px; top: 44px; }
.sg-page-home .sg-step-title-row span.sg-step-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
.sg-page-home .sg-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; padding-top: 24px; }
.sg-page-home .sg-mini-stat b { font-size: 20px; line-height: 28px; }
.sg-page-home .sg-mini-stat span { display: block; font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: .05em; }
.sg-page-home .sg-process-card-head .sg-eyebrow,
.sg-page-home .sg-apheresis-card-head .sg-eyebrow { letter-spacing: .2em; line-height: 16px; }
.sg-page-home .sg-apheresis-card { border-radius: 24px; padding: 32px; }
.sg-page-home .sg-aph-head-title { display: inline-flex; align-items: center; gap: 12px; }
.sg-page-home .sg-aph-head-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #f96f1f, #fa9338); color: #fff; display: grid; place-items: center; flex: 0 0 44px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.sg-page-home .sg-apheresis-grid { gap: 12px; }
.sg-page-home .sg-apheresis-item { background: #f8f9fc; border: 1px solid #e0e4eb; border-radius: 16px; padding: 16px; }
.sg-page-home .sg-apheresis-item .sg-step-icon { flex: 0 0 36px; width: 36px; height: 36px; background: #eff3fb; margin: 0; }
.sg-page-home .sg-apheresis-item p { margin-top: 4px; }
@media (max-width: 639px) { .sg-page-home .sg-apheresis-grid { grid-template-columns: 1fr; } }
.sg-page-home .sg-city-list { gap: 8px 0; margin-top: 28px; }
.sg-page-home .sg-city-list .sg-city { display: inline-flex; align-items: center; }
.sg-page-home .sg-city-list .sg-dot { margin: 0 8px; }
.sg-page-home .sg-city-pin { color: var(--sg-orange); font-size: 14px; margin-right: 8px; }
.sg-page-home .sg-btn-row { gap: 12px; }
.sg-page-home .sg-col-eyebrow-head .sg-btn-row { margin-top: 36px; }
.sg-page-home .sg-checklist { margin-top: 32px; }
.sg-page-home .sg-checklist li { gap: 12px; }
.sg-page-home .sg-col-body-text { margin-top: 20px; }
@media (max-width: 991px) { .sg-section.sg-section--partners { padding: 64px 0; } }

/* =============================== STUDIES LIST (.sg-page-studies) */
.sg-page-studies .sg-section { padding: 80px 0; }
.sg-page-studies .sg-hero { padding: 160px 0 96px; }
@media (max-width: 1023px) { .sg-page-studies .sg-hero { padding: 128px 0 80px; } }
.sg-page-studies .sg-hero-inner { padding-top: 0; max-width: 768px; }
.sg-page-studies .sg-eyebrow--on-dark { margin-bottom: 16px; }
@media (min-width: 768px) { .sg-page-studies .sg-hero p { font-size: 20px; line-height: 28px; } }
body.sg-redesign .sg-page-studies .sg-about h2 { margin-top: 16px !important; }
.sg-page-studies .sg-about p { margin-top: 16px; }
.sg-page-studies .sg-btn-row { gap: 12px; }
.sg-page-studies .sg-step-row--process > div { padding: 32px; column-gap: 16px; }
.sg-page-studies .sg-step-row--process .sg-step-icon { width: 48px; height: 48px; flex-basis: 48px; }
.sg-page-studies .sg-step-eyebrow { font-size: 14px; line-height: 20px; }
.sg-page-studies .sg-step-row--process { column-gap: 24px; }
.sg-page-studies .sg-faq.sg-faq-2col { max-width: none; }
.sg-page-studies .sg-cta-card { padding: 64px; box-shadow: 0 18px 40px -12px rgba(8,14,54,.18); }
@media (max-width: 767px) { .sg-page-studies .sg-cta-card { padding: 64px 32px; } }
.sg-page-studies .sg-cta-card p { max-width: 672px; }
@media (max-width: 767px) { .sg-page-studies .sg-hero h1, .sg-page-apheresis .sg-hero h1 { line-height: 1.25 !important; } }
@media (max-width: 700px) {
	.sg-page-studies .sg-cond-tabs { display: flex; width: 100%; }
	.sg-page-studies .sg-cond-tab { flex: 1 1 0; }
	.sg-page-studies .sg-cond-row-actions { justify-content: flex-end; }
	.sg-page-studies .sg-letter-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.sg-page-studies .sg-letter-btn { flex-shrink: 0; }
}

/* =============================== APHERESIS LANDING (.sg-page-apheresis) */
.sg-page-apheresis .sg-section { padding: 80px 0; }
.sg-page-apheresis .sg-hero { padding: 160px 0 96px; }
@media (max-width: 1023px) { .sg-page-apheresis .sg-hero { padding: 128px 0 80px; } }
.sg-page-apheresis .sg-hero-inner { padding-top: 0; max-width: 768px; }
.sg-page-apheresis .sg-eyebrow--on-dark { margin-bottom: 16px; }
.sg-page-apheresis .sg-btn-row { gap: 12px; }
@media (min-width: 992px) { .sg-page-apheresis .sg-split-head { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.sg-page-apheresis .sg-split-head-text p { margin-top: 16px; }
.sg-page-apheresis .sg-split-head-text p + p { font-size: 16px; line-height: 24px; }
.sg-page-apheresis .sg-split-head .sg-card-grid { gap: 16px; }
.sg-page-apheresis .sg-split-head .sg-card { padding: 24px; border-color: rgba(224,228,235,.7); box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.sg-page-apheresis .sg-split-head .sg-step-icon { width: 44px; height: 44px; flex-basis: 44px; background: linear-gradient(135deg, #f96f1f, #fa9338); }
.sg-page-apheresis .sg-step-row--process > div { padding: 28px; }
.sg-page-apheresis .sg-step-row--process .sg-step-icon { width: 48px; height: 48px; flex-basis: 48px; }
/* design: pin icon carries "mr-2" (8px) - inline-flex drops the whitespace text node */
.sg-city-btn i { margin-right: 8px; }
.sg-page-apheresis .sg-cond-row { padding: 20px; }
.sg-page-apheresis .sg-faq.sg-faq-2col { max-width: none; }
.sg-page-apheresis .sg-cta-card { box-shadow: 0 18px 40px -12px rgba(8,14,54,.18); }
@media (min-width: 768px) { .sg-page-apheresis .sg-cta-card { padding: 64px; } }
.sg-page-apheresis .sg-city-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 24px; }
body.sg-redesign .sg-page-apheresis .sg-city-head h3 { font-size: 24px; line-height: 32px !important; font-weight: 700; color: var(--sg-primary) !important; margin: 0 !important; }

/* =============================== WHY SANGUINE (.sg-page-whysanguine) */
.sg-page-whysanguine .sg-section { padding: 80px 0; }
.sg-page-whysanguine .sg-hero-soft--left .sg-container { max-width: 1280px; }
.sg-page-whysanguine .sg-hero-soft { padding: 176px 0 112px; }
@media (max-width: 1023px) { .sg-page-whysanguine .sg-hero-soft { padding: 128px 0 80px; } }
.sg-page-whysanguine .sg-hero-soft--left p.sg-lede { margin-top: 32px; max-width: 672px; line-height: 1.625; }
.sg-page-whysanguine .sg-eyebrow--tag { display: inline-flex; align-items: center; gap: 8px; }
.sg-page-whysanguine .sg-value-card .sg-step-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.sg-page-whysanguine .sg-value-card { border-radius: 24px; gap: 24px; }
.sg-page-whysanguine .sg-value-grid { gap: 32px; }
.sg-page-whysanguine .sg-why-steps { border-bottom: 1px solid var(--sg-border); }
.sg-page-whysanguine .sg-step-row--minimal { margin-top: 48px; gap: 32px; }
.sg-page-whysanguine .sg-step-row--minimal > div { padding-top: 20px; }
.sg-page-whysanguine .sg-step-num-plain { letter-spacing: .2em; margin-bottom: 0; }
.sg-page-whysanguine .sg-why-cta { padding: 0 0 96px; background: #fff; }
.sg-why-cta-card { border: 2px solid #05038c; border-radius: 24px; background: #fff; padding: 64px; text-align: center; }
@media (max-width: 1023px) { .sg-why-cta-card { padding: 40px; } }
body.sg-redesign .sg-why-cta-card h2 { color: var(--sg-primary) !important; font-size: 36px; line-height: 40px !important; font-weight: 700; letter-spacing: -.025em; margin: 0 !important; }
.sg-why-cta-card p { font-size: 16px; line-height: 24px; margin: 16px auto 0; max-width: 576px; color: var(--sg-muted); }
.sg-why-cta-card .sg-btn-row { justify-content: center; margin-top: 32px; }
.sg-why-cta-card .sg-btn { height: 56px; padding: 0 40px; }

/* =============================== SIGN UP (.sg-page-signup - generic + per-condition) */
.sg-page-signup .sg-hero .sg-eyebrow--on-dark { color: #f96f1f !important; margin-bottom: 12px; }
.sg-page-signup .sg-hero--plain { padding: 160px 0 64px; }
@media (max-width: 1023px) { .sg-page-signup .sg-hero--plain { padding: 128px 0 48px; } }
.sg-page-signup .sg-hero p { margin-top: 16px; }
.sg-page-signup .sg-section { padding: 64px 0; }
.sg-page-signup .sg-form-layout > .sg-form { max-width: none; margin: 0; }
.sg-page-signup .ff-group-row { max-width: none; }

/* =============================== STUDY DETAIL - in-home + apheresis mode (.sg-page-condition) */
.sg-page-condition .sg-section { padding: 80px 0; }
.sg-page-condition .sg-hero { padding: 128px 0 80px; }
@media (min-width: 1024px) { .sg-page-condition .sg-hero { padding: 160px 0 96px; } }
.sg-page-condition .sg-hero-inner { padding-top: 0; max-width: 768px; }
.sg-page-condition .sg-hero::after { content: ""; position: absolute; right: -96px; top: -96px; width: 384px; height: 384px; border-radius: 50%; background: rgba(249,111,31,.2); filter: blur(64px); z-index: -1; pointer-events: none; }
.sg-page-condition .sg-quickfacts-section { position: relative; z-index: 10; margin-top: -40px; padding: 0 0 16px; }
.sg-page-condition .sg-quickfacts-section .sg-card-grid.sg-cols-3 { gap: 16px; }
@media (min-width: 640px) { .sg-page-condition .sg-quickfacts-section .sg-card-grid.sg-cols-3 { grid-template-columns: repeat(3, 1fr); } }
/* Referral pages show two cards (no "Study" card); let them fill the row. */
@media (min-width: 640px) { .sg-page-condition .sg-quickfacts-section .sg-card-grid.sg-cols-3.sg-quickfacts--2 { grid-template-columns: repeat(2, 1fr); } }
.sg-page-condition .sg-quickfact { padding: 24px; border-color: rgba(224,228,235,.7); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
body.sg-redesign .sg-page-condition .sg-quickfact h3 { margin-top: 4px !important; line-height: 24px !important; letter-spacing: normal; }
.sg-page-condition .sg-quickfact .sg-list-eyebrow { font-weight: 600; letter-spacing: .05em; line-height: 16px; }
.sg-page-condition .sg-quickfact .sg-step-icon { background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.sg-page-condition .sg-quickfact .sg-step-icon i { font-size: 20px; }
/* requirement lists: check-circle / x-circle bullets, 16/24 foreground text (StudyDetail.tsx) */
.sg-page-condition .sg-req-card ul { list-style: none; margin: 0; padding: 8px 24px 24px; }
.sg-page-condition .sg-req-card li { position: relative; padding-left: 32px; font-size: 16px; line-height: 24px; color: var(--sg-foreground); }
.sg-page-condition .sg-req-card li + li { margin-top: 12px; }
.sg-page-condition .sg-req-card li::before { position: absolute; left: 0; top: 2px; font: 400 20px/20px "Font Awesome 5 Free"; content: "\f058"; color: #25935f; }
.sg-page-condition .sg-req-card--no li::before { content: "\f057"; color: #c91d1d; }
.sg-page-condition .sg-req-card[open] summary { background: var(--sg-surface-soft); }
@media (max-width: 1023px) { .sg-page-condition .sg-req-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px) { .sg-page-condition .sg-step-row--process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .sg-page-condition .sg-step-row--process { grid-template-columns: 1fr; } }
.sg-page-condition .sg-faq.sg-faq-2col { max-width: none; }
@media (max-width: 1023px) { .sg-page-condition .sg-faq.sg-faq-2col { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }
.sg-page-condition .sg-faq-item p { font-size: 14px; line-height: 20px; }
.sg-page-condition .sg-cta-card { padding: 64px 32px; box-shadow: 0 18px 40px -12px rgba(8,14,54,.18); }
@media (min-width: 768px) { .sg-page-condition .sg-cta-card { padding: 64px; } }
.sg-page-condition .sg-btn-outline-light,
.sg-page-condition .sg-cta-card .sg-btn-outline-navy { border-color: rgba(255,255,255,.3); }
.sg-page-condition .sg-about-badge { border: 1px solid transparent; }
@media (max-width: 767px) {
	body.sg-redesign .sg-page-condition .sg-section-head h2,
	body.sg-redesign .sg-page-condition .sg-about h2,
	body.sg-redesign .sg-page-condition .sg-cta-card h2 { font-size: 30px !important; line-height: 36px !important; }
	body.single-condition .sg-page-condition .sg-hero p { font-size: 18px; line-height: 28px; }
	.sg-page-condition .sg-hero h1 { line-height: 1.25 !important; }
}

/* =============================== COMMUNITY (.sg-page-community) */
.sg-page-community .sg-section { padding: 80px 0; }
.sg-page-community .sg-community-about { padding: 64px 0; }
.sg-page-community .sg-step-row > div { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: start; align-items: center; background: #fff; border: 1px solid rgba(224,228,235,.7); border-radius: 16px; padding: 32px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.sg-page-community .sg-step-row > div > .sg-step-icon { grid-column: 1; margin: 0; }
.sg-page-community .sg-step-row > div > .sg-step-eyebrow { grid-column: 2; margin: 0; }
.sg-page-community .sg-step-row > div > h3,
.sg-page-community .sg-step-row > div > p { grid-column: 1 / -1; }
.sg-page-community .sg-step-row p { margin-top: 8px; }
.sg-page-community .sg-step-icon { flex: 0 0 48px; width: 48px; height: 48px; background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.sg-page-community .sg-step-icon--navy { background: var(--sg-primary); }
.sg-page-community .sg-step-icon i { font-size: 20px; }
.sg-page-community .sg-card { padding: 32px; border-color: rgba(224,228,235,.7); box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
@media (min-width: 768px) { .sg-page-community .sg-card-grid.sg-cols-3, .sg-page-community .sg-step-row.sg-cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .sg-page-community .sg-step-row.sg-cols-3 { grid-template-columns: 1fr; } }
.sg-page-community .sg-about--compact { max-width: 1280px; }
body.sg-redesign .sg-page-community .sg-about--compact h2 { line-height: 32px !important; }
.sg-page-community .sg-about--compact p { margin-top: 16px; }
.sg-page-community .sg-category-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); padding: 2px 10px; margin-bottom: 24px; }
@media (max-width: 767px) {
	body.single-condition .sg-page-community .sg-hero p { font-size: 16px !important; line-height: 26px !important; }
	body.sg-redesign .sg-page-community .sg-section-head h2,
	body.sg-redesign .sg-page-community .sg-cta-card h2 { font-size: 30px !important; line-height: 36px !important; }
}
.sg-page-community .sg-cta-card,
.sg-page-partner .sg-cta-card { padding: 40px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
@media (min-width: 768px) { .sg-page-community .sg-cta-card, .sg-page-partner .sg-cta-card { padding: 64px; } }
.sg-page-partner .sg-btn-lg { height: 56px; min-height: 56px; padding-left: 40px; padding-right: 40px; }

/* =============================== PARTNER REFERRAL PAGES (.sg-page-partner) */
.sg-page-partner .sg-post-body a[role="button"] { display: inline-flex; align-items: center; height: 48px; padding: 0 32px; border-radius: 999px; background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)); color: #fff !important; font-size: 16px; font-weight: 500; text-decoration: none; }

/* =============================== BLOG INDEX (.sg-page-blog) */
.sg-page-blog .sg-hero-soft--left .sg-container { max-width: 1280px; }
.sg-page-blog .sg-hero-soft { padding-bottom: 80px; }
.sg-page-blog .sg-hero-soft--left p.sg-lede { max-width: 672px; line-height: 28px; }
.sg-page-blog .sg-section { padding: 80px 0; }
.sg-page-blog .sg-blog-latest { padding: 0 0 96px; }
.sg-page-blog .sg-blog-latest--paged { padding-top: 48px; }
body.sg-redesign .sg-page-blog .sg-blog-latest-label { font-size: 14px; line-height: 20px !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sg-muted) !important; margin: 0 0 24px !important; }
.sg-page-blog .sg-card-grid { gap: 32px; }
.sg-page-blog .sg-blog-featured .sg-blog-meta { font-size: 14px; line-height: 20px; gap: 16px; margin-top: 24px; }
.sg-page-blog .sg-btn-sm { height: 40px; padding: 0 20px; font-size: 14px; margin-top: 32px !important; }
body.sg-redesign .sg-page-blog .sg-blog-card h3 { font-size: 20px; font-weight: 600; line-height: 27.5px !important; margin-top: 16px !important; }
.sg-page-blog .sg-blog-card p { margin-top: 12px; line-height: 22.75px; }
.sg-pagination { display: flex; justify-content: center; margin-top: 48px; }
.sg-pagination-list {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 8px; list-style: none; margin: 0; padding: 0;
}
.sg-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	box-sizing: border-box; min-width: 42px; height: 42px; padding: 0 0px;
	border: 1px solid var(--sg-border); border-radius: 50%;
	color: var(--sg-primary); background: #fff;
	font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
}
.sg-pagination .page-numbers.prev,
.sg-pagination .page-numbers.next {
	width: 42px; min-width: 42px; padding: 0; border-radius: 50%;
}
.sg-pagination a.page-numbers:hover,
.sg-pagination a.page-numbers:focus {
	border-color: var(--sg-orange); color: var(--sg-orange) !important;
	background: #fff; text-decoration: none !important;
}
.sg-pagination .page-numbers.current {
	background: var(--sg-primary); border-color: var(--sg-primary); color: #fff;
}
.sg-pagination .page-numbers.dots,
.sg-pagination-item.is-dots .page-numbers {
	border: 0; background: transparent; min-width: 1.5em; padding: 0; color: var(--sg-muted);
}

.sg-pagination-item i {
	display: none
}
#listing { scroll-margin-top: 110px; }

/* =============================== BLOG POSTS (.sg-post, single.php) */
.sg-post .sg-post-hero .sg-container { max-width: 1280px; }
body.sg-redesign .sg-post .sg-post-hero h1 { margin-top: 20px !important; max-width: 896px; font-size: 36px; line-height: 1.1 !important; }
@media (min-width: 640px) { body.sg-redesign .sg-post .sg-post-hero h1 { font-size: 48px; } }
.sg-post .sg-post-lede { margin-top: 24px; max-width: 672px; line-height: 28px; }
.sg-post .sg-post-meta-row { margin-top: 32px; gap: 16px; }
.sg-post .sg-post-badge { padding: 4px 12px; font-weight: 600; letter-spacing: .05em; }
.sg-post .sg-post-hero { padding: 128px 0 56px; }
@media (min-width: 1024px) { .sg-post .sg-post-hero { padding: 160px 0 80px; } }
.sg-post .sg-post-narrow { max-width: 832px; }
.sg-post .sg-post-narrow--wide { max-width: 960px; }
.sg-post .sg-post-figure-section { padding-top: 40px; }
@media (min-width: 1024px) { .sg-post .sg-post-figure-section { padding-top: 56px; } }
.sg-post .sg-post-body-section { padding: 64px 0; }
@media (min-width: 1024px) { .sg-post .sg-post-body-section { padding: 80px 0; } }
.sg-post .sg-post-body p, .sg-post .sg-post-body li { line-height: 29.25px !important; }
body.sg-redesign .sg-post .sg-post-body h2 { font-size: 24px; line-height: 33px !important; margin-top: 40px !important; }
.sg-post .sg-post-body h2 + p { margin-top: 16px; }
.sg-post .sg-post-related { padding: 64px 0; }
@media (min-width: 1024px) { .sg-post .sg-post-related { padding: 80px 0; } }
.sg-post .sg-post-related-label { font-size: 14px; line-height: 20px; color: var(--sg-muted) !important; }
body.sg-redesign .sg-post .sg-related-card h3 { margin-top: 16px !important; font-weight: 600; line-height: 1.375 !important; }

/* =============================== PUBLICATIONS (.sg-page-publications) */
@media (min-width: 1024px) {
	.sg-page-publications .sg-hero-soft--split .sg-grid-2 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; }
	.sg-page-publications .sg-hero-soft--split .sg-grid-2 > div { grid-column: span 8; }
	.sg-page-publications .sg-hero-soft--split .sg-quote { grid-column: span 4; }
	.sg-page-publications .sg-pub-year-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
	.sg-page-publications .sg-pub-year-block > div:first-child { grid-column: span 3; }
	.sg-page-publications .sg-pub-list { grid-column: span 9; }
}
.sg-page-publications .sg-section { padding: 80px 0; }
.sg-page-publications .sg-hero-soft { padding-bottom: 96px; }
.sg-page-publications .sg-quote--pub { background: var(--sg-surface-soft); border-left: 4px solid var(--sg-orange); border-radius: 16px; padding: 24px; box-shadow: none; color: var(--sg-primary); font-style: italic; line-height: 26px; }
.sg-page-publications .sg-hero-soft .sg-quote cite { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sg-muted); margin-top: 16px; font-style: normal; }
.sg-page-publications .sg-pub-year-num { font-size: 60px; letter-spacing: -3px; }
.sg-page-publications .sg-pub-count { font-size: 14px; font-weight: 600; letter-spacing: .2em; margin-top: -8px; }

/* =============================== ABOUT (.sg-page-about) */
.sg-page-about .sg-eyebrow--tag,
.sg-page-press .sg-eyebrow--tag,
.sg-page-strategic .sg-eyebrow--tag { display: inline-flex; align-items: center; gap: 8px; }
.sg-page-about .sg-hero-soft { padding: 128px 0 64px; }
@media (min-width: 1024px) {
	.sg-page-about .sg-hero-soft { padding: 160px 0 96px; }
	.sg-page-about .sg-hero-soft--split .sg-grid-2 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
	.sg-page-about .sg-hero-soft--split .sg-grid-2 > :first-child { grid-column: span 8; }
	.sg-page-about .sg-hero-soft--split .sg-grid-2 > :last-child { grid-column: span 4; }
}
@media (max-width: 1023px) { .sg-page-about .sg-hero-soft--split .sg-grid-2 { grid-template-columns: 1fr; gap: 48px; } }
.sg-page-about .sg-hero-soft--split p.sg-lede { max-width: 672px; margin-top: 24px; }
.sg-page-about .sg-hero-soft--split .sg-quote { background: #f8f9fc; border-left: 4px solid var(--sg-orange); border-radius: 16px; padding: 24px; box-shadow: none; font-size: 14px; line-height: 22.75px; }
.sg-page-about .sg-hero-soft .sg-quote cite { letter-spacing: .05em; line-height: 16px; }
.sg-page-about .sg-section { padding: 64px 0; }
@media (min-width: 1024px) { .sg-page-about .sg-section { padding: 80px 0; } }
.sg-page-about .sg-section--bordertop { border-top: 0; }
@media (min-width: 1024px) {
	.sg-page-about .sg-section .sg-grid-2 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; }
	.sg-page-about .sg-section .sg-grid-2 > :first-child { grid-column: span 7; }
	.sg-page-about .sg-section .sg-grid-2 > :last-child { grid-column: span 5; }
}
@media (max-width: 1023px) { .sg-page-about .sg-section .sg-grid-2 { grid-template-columns: 1fr; gap: 40px; } }
.sg-page-about .sg-stat-box { border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.sg-page-about .sg-stat-box .sg-stat-num { font-size: 24px; line-height: 32px; letter-spacing: normal; }
.sg-page-about .sg-stat-box .sg-stat-label { margin-top: 4px; border-top: 0; padding-top: 0; letter-spacing: .05em; }
.sg-page-about .sg-section-head { margin-bottom: 40px; }
.sg-page-about .sg-person-card--leadership { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 0; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.sg-page-about .sg-person-card--leadership .sg-person-head { padding-top: 0; }
.sg-page-about .sg-person-card--leadership .sg-person-name { font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: -.025em; }
.sg-page-about .sg-person-card--leadership .sg-person-role { font-weight: 600; letter-spacing: .05em; line-height: 16px; }
body.sg-redesign .sg-page-about .sg-person-card--leadership p { grid-column: 1 / -1; margin-top: 16px !important; line-height: 22.75px; }
.sg-page-about .sg-card-grid.sg-cols-3 { gap: 16px; }
.sg-page-about .sg-board-card { background: #fff; border: 1px solid var(--sg-border); border-radius: 12px; padding: 20px; }
body.sg-redesign .sg-page-about .sg-board-card .sg-person-name { font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -.025em; color: var(--sg-primary) !important; margin: 0 !important; }
.sg-page-about .sg-board-card .sg-person-role { margin: 4px 0 0; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sg-muted); }

/* =============================== PRESS + STRATEGIC heroes (.sg-page-press / .sg-page-strategic) */
.sg-page-press .sg-hero-soft--left .sg-container,
.sg-page-strategic .sg-hero-soft--left .sg-container { max-width: 1280px; }
.sg-page-press .sg-hero-soft p.sg-lede,
.sg-page-strategic .sg-hero-soft p.sg-lede { max-width: 672px; }
.sg-page-press .sg-hero-soft,
.sg-page-strategic .sg-hero-soft { padding: 128px 0 64px; }
@media (min-width: 1024px) { .sg-page-press .sg-hero-soft, .sg-page-strategic .sg-hero-soft { padding: 160px 0 96px; } }
.sg-page-strategic .sg-hero-soft { background: linear-gradient(to bottom right, hsla(22,95%,55%,.12), var(--sg-surface-soft), hsla(241,96%,28%,.08)); }
.sg-page-strategic .sg-hero-soft h1,
.sg-page-partnerships .sg-hero-soft h1 { line-height: 1.05 !important; }

/* Press body */
.sg-page-press .sg-section { padding: 64px 0 96px; }
@media (min-width: 1024px) { .sg-page-press .sg-section { padding: 80px 0 96px; } }
.sg-page-press .sg-press-feature { background: #fff; border-radius: 24px; padding: 32px; gap: 40px; align-items: start; grid-template-columns: 1fr; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); margin-bottom: 64px; }
@media (min-width: 1024px) {
	.sg-page-press .sg-press-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 48px; margin-bottom: 80px; }
	.sg-page-press .sg-press-feature > :first-child { grid-column: span 7; }
	.sg-page-press .sg-press-feature > :last-child { grid-column: span 5; }
}
.sg-page-press .sg-press-feature-img { order: 0; background: linear-gradient(to bottom right, var(--sg-primary), rgba(5,3,140,.8), var(--sg-orange)); overflow: hidden; }
.sg-page-press .sg-press-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-page-press .sg-press-feature .sg-press-date { font-size: 14px; font-weight: 500; line-height: 20px; margin-top: 16px; }
.sg-page-press .sg-press-feature .sg-btn-row { margin-top: 32px; }
.sg-page-press .sg-press-feature .sg-btn { height: 40px; padding: 8px 20px; font-size: 14px; }
.sg-page-press .sg-section-head .sg-eyebrow { color: var(--sg-muted); font-size: 14px; line-height: 20px; letter-spacing: .2em; margin: 0; }
.sg-page-press .sg-press-card { margin-bottom: 0; }
.sg-page-press .sg-press-card .sg-press-date { font-size: 12px; font-weight: 500; line-height: 16px; margin-top: 16px; }
.sg-page-press .sg-press-card p { margin-top: 12px; line-height: 22.75px; }

/* Strategic body */
.sg-page-strategic .sg-section { padding: 64px 0; }
@media (min-width: 1024px) { .sg-page-strategic .sg-section { padding: 80px 0; } .sg-page-strategic .sg-section.sp { padding: 80px 0 0px; } .sg-page-strategic .sg-section.bsp { padding: 0px 0 80px; } }
.sg-page-strategic .sg-section--bordertop { border-top: 0; }
.sg-page-strategic .sg-section-head { margin-bottom: 40px; }
@media (min-width: 1024px) {
	.sg-page-strategic .sg-section .sg-grid-2 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; }
	.sg-page-strategic .sg-section .sg-grid-2 > :first-child { grid-column: span 8; }
	.sg-page-strategic .sg-section .sg-grid-2 > :last-child { grid-column: span 4; }
}
@media (max-width: 1023px) { .sg-page-strategic .sg-section .sg-grid-2 { grid-template-columns: 1fr; gap: 40px; } }
.sg-page-strategic .sg-stat-list-box { padding: 24px; }
.sg-page-strategic .sg-stat-list-box .sg-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .2em; margin: 0 0 16px; }
.sg-page-strategic .sg-stat-list-row { border-top: 0; padding: 0 0 12px; margin-top: 16px; border-bottom: 1px solid rgba(224,228,235,.6); }
.sg-page-strategic .sg-stat-list-row:first-of-type { margin-top: 0; }
.sg-page-strategic .sg-stat-list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sg-page-strategic .sg-stat-list-row .sg-stat-num { line-height: 32px; letter-spacing: normal; }
.sg-page-strategic .sg-stat-list-row .sg-stat-label { border-top: 0; padding-top: 0; }
.sg-page-strategic .sg-case-study-card { display: grid; gap: 32px; border-radius: 24px; padding: 32px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
@media (min-width: 1024px) {
	.sg-page-strategic .sg-case-study-card { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 40px; }
	.sg-page-strategic .sg-case-study-card > :first-child { grid-column: span 8; }
	.sg-page-strategic .sg-case-study-card > :last-child { grid-column: span 4; align-self: start; }
}
.sg-page-strategic .sg-case-study-card > div:first-child p { font-size: 18px; line-height: 29.25px; color: var(--sg-muted); }
.sg-page-strategic .sg-spotlight-card { padding: 24px; background: linear-gradient(to bottom right, var(--sg-primary), rgba(5,3,140,.8), var(--sg-orange)); }
.sg-page-strategic .sg-spotlight-card .sg-spotlight-label { font-weight: 600; letter-spacing: .2em; line-height: 16px; color: rgba(255,255,255,.8); margin-bottom: 12px; }
.sg-page-strategic .sg-spotlight-card .sg-spotlight-name { font-size: 24px; line-height: 30px; }
.sg-page-strategic .sg-spotlight-card .sg-spotlight-sub { margin-top: 8px; }
.sg-page-strategic .sg-spotlight-card .sg-spotlight-divider { background: rgba(255,255,255,.2); margin: 24px 0 16px; }
.sg-page-strategic .sg-spotlight-card .sg-stat-num { line-height: 36px; letter-spacing: normal; }
.sg-page-strategic .sg-spotlight-card .sg-stat-label { border-top: 0; padding-top: 0; margin-top: 0; font-weight: 400; letter-spacing: .05em; color: rgba(255,255,255,.8); }
.sg-page-strategic .sg-card-grid.sg-cols-3 .sg-card { padding: 24px; box-shadow: none; }
.sg-page-strategic .sg-card-grid.sg-cols-3 .sg-step-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 18px; background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); margin-bottom: 0; }
@media (min-width: 768px) { .sg-page-strategic .sg-card-grid.sg-cols-3 { grid-template-columns: repeat(3, 1fr); } }
.sg-page-strategic .sg-cta-banner { border-radius: 24px; padding: 40px; background: linear-gradient(to bottom right, var(--sg-primary), var(--sg-orange)); box-shadow: 0 18px 40px -12px rgba(8,14,54,.18); }
@media (min-width: 1024px) { .sg-page-strategic .sg-cta-banner { padding: 56px; } }
.sg-page-strategic .sg-cta-banner p { max-width: 672px; margin-top: 12px; }
.sg-page-strategic .sg-partner-logos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.sg-page-strategic .sg-partner-logos { grid-template-columns: repeat(5, 1fr); gap: 24px; }
}
.sg-page-strategic .sg-partner-logos li {
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 120px;
	margin: 0;
	background: #fff;
	border: 1px solid var(--sg-border);
	border-radius: 16px;
}
.sg-page-strategic .sg-partner-logos li.is-empty { background: var(--sg-surface-soft); }
.sg-page-strategic .sg-partner-logos a {
	/* display: flex;
	align-items: center;
	justify-content: center; */
	width: 100%;
	text-align: center;
}
.sg-page-strategic .sg-partner-logos img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 120px;
	padding: 15px;
	object-fit: contain;
}

/* =============================== RESEARCH PARTNERSHIPS (.sg-page-partnerships) */
.sg-page-partnerships .sg-hero-soft { border-bottom: 0; padding: 128px 0 80px; background: linear-gradient(to bottom right, hsla(22,95%,55%,.12), var(--sg-surface-soft), hsla(241,96%,28%,.08)); }
@media (min-width: 1024px) {
	.sg-page-partnerships .sg-hero-soft { padding: 160px 0 112px; }
	.sg-page-partnerships .sg-hero-soft--split .sg-grid-2 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: center; }
	.sg-page-partnerships .sg-hero-soft--split .sg-grid-2 > :first-child { grid-column: span 7; }
	.sg-page-partnerships .sg-hero-soft--split .sg-grid-2 > :last-child { grid-column: span 5; }
}
.sg-page-partnerships .sg-hero-soft .sg-btn-row { justify-content: flex-start; gap: 12px; margin-top: 32px; }
.sg-page-partnerships .sg-stat-tiles { gap: 12px; max-width: none; }
.sg-page-partnerships .sg-stat-tile { border-radius: 16px; padding: 24px; border-color: var(--sg-border); }
.sg-page-partnerships .sg-stat-tile-num { font-size: 24px; line-height: 32px; letter-spacing: -.025em; }
.sg-page-partnerships .sg-stat-tile-label { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.sg-page-partnerships .sg-stat-tile--dark .sg-stat-tile-label { color: rgba(255,255,255,.7); }
.sg-page-partnerships #capabilities { padding: 80px 0; border-bottom: 1px solid var(--sg-border); }
.sg-page-partnerships #capabilities .sg-card-grid { gap: 1px; background: var(--sg-border); border: 1px solid var(--sg-border); border-radius: 24px; overflow: hidden; }
.sg-page-partnerships #capabilities .sg-card { border: 0; border-radius: 0; box-shadow: none; padding: 32px; }
.sg-page-partnerships #capabilities .sg-step-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 12px; font-size: 18px; margin-bottom: 0; background: linear-gradient(135deg, var(--sg-orange), var(--sg-orange-2)); box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
body.sg-redesign .sg-page-partnerships #capabilities .sg-card h3 { margin-top: 20px !important; }
.sg-page-partnerships .sg-section--soft { background: #fff; padding: 80px 0; }
.sg-page-partnerships .sg-section--soft .sg-section-head { max-width: none; margin-bottom: 40px; }
.sg-page-partnerships .sg-section--soft .sg-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .22em; color: var(--sg-muted); margin: 0; }
.sg-page-partnerships .sg-logo-wall { gap: 24px 32px; margin-top: 0; }
@media (min-width: 640px) { .sg-page-partnerships .sg-logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sg-page-partnerships .sg-logo-wall { grid-template-columns: repeat(4, 1fr); } }
.sg-page-partnerships .sg-logo-wall li { height: auto; border: 1px dashed var(--sg-border); border-radius: 12px; background: transparent; padding: 24px 20px; color: var(--sg-muted); letter-spacing: -.025em; }
.sg-page-partnerships .sg-section--white:last-of-type { padding: 0 0 96px; }
.sg-page-partnerships .sg-cta-split .sg-btn { height: 56px; padding: 0 40px; }

/* ---- post-audit re-measure fixes (harness, 2026-09-21) */
.sg-page-apheresis .sg-city-head > h3 { flex: 1 1 auto; }
.sg-page-studies .sg-about p { line-height: 28px; }
@media (min-width: 768px) { .sg-page-strategic .sg-hero-soft h1 { line-height: 1 !important; } }
.sg-page-strategic .sg-spotlight-card .sg-spotlight-sub { line-height: 20px; }
.sg-page-whysanguine .sg-hero-soft .sg-eyebrow { color: var(--sg-orange) !important; }
.sg-page-whysanguine .sg-why-steps h2 { max-width: 672px; }
@media (max-width: 1023px) { .sg-page-partnerships .sg-hero-soft .sg-btn-row { justify-content: flex-start !important; } }
/* Stat numbers ("90,000+") must never break mid-number: in Inter they are ~6px wider than the
   export's fallback font at 36px, which wrapped "90,00 / 0+" in the 2-column phone grid. */
.sg-page-home .sg-stat-num { white-space: nowrap; letter-spacing: -.025em; }
/* Mobile menu: the legacy theme's a:hover/a:focus (dark red + underline) leaked onto the
   accordion triggers once tapped. */
.sg-mobile-nav-list .sg-nav-top,
.sg-mobile-nav-list .sg-nav-top:hover,
.sg-mobile-nav-list .sg-nav-top:focus,
.sg-mobile-nav-list .sg-mega-item,
.sg-mobile-nav-list .sg-mega-item:hover,
.sg-mobile-nav-list .sg-mega-item:focus { color: var(--sg-foreground) !important; text-decoration: none !important; }
.sg-mobile-nav-list .sg-nav-item.is-open > .sg-nav-top { background: #eff3fb; }

/* Beaver Builder parent `.fl-page a:hover` (dark red + underline) beats most
   redesign link rules. Neutralize it on header/footer/page chrome; keep the
   few places the design actually underlines (article body, trust/privacy links). */
.fl-page .sg-header a:hover,
.fl-page .sg-header a:focus,
.fl-page .sg-footer a:hover,
.fl-page .sg-footer a:focus,
.fl-page .sg-front a:hover,
.fl-page .sg-front a:focus {
	text-decoration: none !important;
}
/* Strip UA / Beaver Builder default focus rings sitewide. Form fields keep
   their existing custom rings below. */
.fl-page a:focus,
.fl-page a:focus-visible,
.fl-page button:focus,
.fl-page button:focus-visible,
.fl-page [type="button"]:focus,
.fl-page [type="submit"]:focus,
.fl-page [type="reset"]:focus,
.fl-page summary:focus,
.fl-page [tabindex]:focus {
	outline: none !important;
}
.fl-page button::-moz-focus-inner,
.fl-page [type="button"]::-moz-focus-inner,
.fl-page [type="submit"]::-moz-focus-inner {
	border: 0;
}
/* BB Customizer `button:hover` paints the old accent fill/border (#840e06).
   Keep redesign buttons on their own tokens instead. */
.fl-page .sg-front button:hover,
.fl-page .sg-front button:focus,
.fl-page .sg-header button:hover,
.fl-page .sg-header button:focus,
.fl-page .sg-footer button:hover,
.fl-page .sg-footer button:focus,
.fl-page .sg-header a.sg-hdr-btn:hover,
.fl-page .sg-header a.sg-hdr-btn:focus {
	background: var(--sg-btn-bg) !important;
	border: var(--sg-btn-border) !important;
	color: var(--sg-btn-color) !important;
	box-shadow: var(--sg-btn-shadow) !important;
}
.fl-page .sg-btn-primary:hover,
.fl-page .sg-btn-primary:focus,
.fl-page .sg-hdr-btn-solid:hover,
.fl-page .sg-hdr-btn-solid:focus {
	color: #fff !important;
}
.fl-page .sg-btn-outline-light:hover,
.fl-page .sg-btn-outline-light:focus,
.fl-page .sg-hero .sg-btn-outline-light:hover,
.fl-page .sg-hero .sg-btn-outline-light:focus,
.fl-page .sg-cta-card .sg-btn-outline-light:hover,
.fl-page .sg-cta-card .sg-btn-outline-light:focus,
.fl-page .sg-cta-card .sg-btn-outline-navy:hover,
.fl-page .sg-cta-card .sg-btn-outline-navy:focus {
	color: #fff !important;
	border-color: rgba(255,255,255,.4) !important;
}
.fl-page .sg-btn-outline-navy:hover,
.fl-page .sg-btn-outline-navy:focus {
	color: var(--sg-orange) !important;
}
.fl-page .sg-cta-card .sg-btn-outline-navy:hover,
.fl-page .sg-cta-card .sg-btn-outline-navy:focus {
	color: #fff !important;
}
.fl-page .sg-hdr-btn-outline:hover,
.fl-page .sg-hdr-btn-outline:focus {
	color: var(--sg-orange) !important;
}
.fl-page .sg-nav-top:hover,
.fl-page .sg-nav-top:focus {
	color: var(--sg-foreground) !important;
}
.fl-page .sg-mega-item:hover,
.fl-page .sg-mega-item:focus,
.fl-page .sg-mega-item:hover .sg-mega-item-title,
.fl-page .sg-mega-item:focus .sg-mega-item-title {
	color: var(--sg-primary) !important;
}
.fl-page .sg-mega-item:hover .sg-mega-item-desc,
.fl-page .sg-mega-item:focus .sg-mega-item-desc {
	color: var(--sg-muted) !important;
}
.fl-page .sg-footer a:hover,
.fl-page .sg-footer a:focus {
	color: #fff !important;
}
.fl-page .sg-breadcrumb-back:hover,
.fl-page .sg-breadcrumb-back:focus,
.fl-page .sg-post-back:hover,
.fl-page .sg-post-back:focus {
	color: #fff !important;
}
.fl-page a.sg-blog-card:hover,
.fl-page a.sg-blog-card:focus,
.fl-page a.sg-press-card:hover,
.fl-page a.sg-press-card:focus,
.fl-page a.sg-related-card:hover,
.fl-page a.sg-related-card:focus {
	color: inherit !important;
}
.fl-page .sg-pagination a.page-numbers:hover,
.fl-page .sg-pagination a.page-numbers:focus {
	color: var(--sg-orange) !important;
	background: #fff !important;
	border-color: var(--sg-orange) !important;
	text-decoration: none !important;
}
.fl-page a.sg-blog-card:hover h3,
.fl-page a.sg-blog-card:focus h3,
.fl-page a.sg-press-card:hover h3,
.fl-page a.sg-press-card:focus h3,
.fl-page a.sg-related-card:hover h3,
.fl-page a.sg-related-card:focus h3 {
	color: var(--sg-orange) !important;
}
.fl-page a.sg-blog-card:hover p,
.fl-page a.sg-blog-card:focus p,
.fl-page a.sg-press-card:hover p,
.fl-page a.sg-press-card:focus p,
.fl-page a.sg-press-card:hover .sg-press-date,
.fl-page a.sg-press-card:focus .sg-press-date,
.fl-page a.sg-related-card:hover p,
.fl-page a.sg-related-card:focus p,
.fl-page a.sg-blog-card:hover .sg-blog-meta,
.fl-page a.sg-blog-card:hover .sg-blog-meta span,
.fl-page a.sg-blog-card:focus .sg-blog-meta,
.fl-page a.sg-blog-card:focus .sg-blog-meta span,
.fl-page a.sg-related-card:hover .sg-blog-meta,
.fl-page a.sg-related-card:hover .sg-blog-meta span,
.fl-page a.sg-related-card:focus .sg-blog-meta,
.fl-page a.sg-related-card:focus .sg-blog-meta span {
	color: var(--sg-muted) !important;
}
.fl-page .sg-pub-row h3 a:hover,
.fl-page .sg-pub-row h3 a:focus {
	color: var(--sg-orange) !important;
}
.fl-page .sg-post-body a:hover,
.fl-page .sg-post-body a:focus {
	color: var(--sg-primary) !important;
	text-decoration: underline !important;
}
.fl-page .sg-trust-card a:hover,
.fl-page .sg-trust-card a:focus,
.fl-page .sg-page-signup .sg-form .ff-label a:hover,
.fl-page .sg-page-signup .sg-form .ff-label a:focus {
	color: var(--sg-orange) !important;
	text-decoration: underline !important;
}

/* Apheresis city header: "City, State" over the design's centre line (Apheresis.tsx address, text-sm muted mt-1). */
.sg-page-apheresis .sg-city-head > div { flex: 1 1 auto; }
.sg-page-apheresis #sg-city-addr { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--sg-muted); }

/* Publications: Bioz citation widget in the design's year-block grid (Publications.tsx).
   The label column echoes the year heading (60px faint primary + small-caps count), sticky
   as in the design ("sticky top-28"); the list column keeps the design's top rule and py-6. */
.sg-bioz-aside { position: sticky; top: 112px; }
.sg-bioz-note { margin: 16px 0 0; max-width: 240px; font-size: 14px; line-height: 20px; color: var(--sg-muted); }
.sg-bioz-list { padding-top: 24px; }
/* Initial height until bioz-w-api sets it from the widget's content; border-style none keeps
   the API's inline "border-width:1px" invisible - the design list has no box around it. */
.sg-bioz-widget { display: block; width: 100%; height: 640px; border: 0 none; background: #fff; }
.sg-bioz-credit { margin-top: 16px; }
.sg-bioz-credit a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--sg-muted); text-decoration: none; }
.sg-bioz-credit a:hover { color: var(--sg-primary); }
@media (max-width: 1023px) { .sg-bioz-aside { position: static; } .sg-bioz-note { max-width: none; } }


/* =============================================================================
   FORMSTACK SIGN-UP FORM  ->  signup.html / Signup.tsx  (2026-09-21)
   Formstack for Salesforce injects the form into this page's DOM (#dvFastForms >
   .ff-form-main), so it is styled here. Field TYPES and LABELS are Formstack-side
   config and are deliberately untouched (no copy is injected with CSS or JS);
   this block only restyles what Formstack renders. Scoped to .sg-page-signup,
   which the generic /sign-up/ page and every per-condition sign-up landing share.
   Formstack's own script re-asserts styles after load, hence the !important.
   The existing two-up/three-up field grid (".sg-form .ff-group-row" above) is kept.
   ============================================================================= */

/* ---- labels: 14/20 semibold, 6px above the control (design "space-y-1.5") */
.sg-page-signup .sg-form .ff-label-col { margin: 0 0 6px !important; line-height: 20px; }
.sg-page-signup .sg-form .ff-label { margin: 0 !important; line-height: 20px !important; }
.sg-page-signup .sg-form .ff-label br { display: none; }

/* ---- Phone: Formstack's inline hint (<font color="RoyalBlue">) wrapped the label to
   three lines and pushed Phone below Email. It becomes muted helper text under the
   control, so the label is one line and the pair lines up. */
.sg-page-signup .sg-form .ff-item-row:has(input[name="FSGFNumber734"]) { position: relative; padding-bottom: 22px !important; }
.sg-page-signup .sg-form .ff-label font {
	left: 0; bottom: 0;
	font-size: 12px; line-height: 16px; font-weight: 400; color: var(--sg-muted) !important; margin-left: 5px	;
}

/* ---- text controls: design Input is h-10 / rounded-lg / px-3 */
.sg-page-signup .sg-form .ff-form-main .ff-input-type,
.sg-page-signup .sg-form .ff-form-main select,
.sg-page-signup .sg-form .ff-form-main textarea {
	border-color: var(--sg-border) !important; color: var(--sg-foreground) !important;
	transition: border-color .15s, box-shadow .15s;
}
/* Address and "other conditions" are Formstack textareas; the design draws both as
   single-line inputs. Same 40px box, still resizable for longer answers. */
.sg-page-signup .sg-form .ff-form-main textarea.ff-textarea {
	height: 40px !important; min-height: 40px !important; line-height: 22px; resize: vertical; overflow-y: auto;
}
/* selects: design SelectTrigger with a chevron-down */
.sg-page-signup .sg-form .ff-form-main select {
	-webkit-appearance: none; appearance: none; padding-right: 36px !important; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525c6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important;
}
/* focus: design "focus-visible:ring-2 ring-offset-2" in primary */
.sg-page-signup .sg-form .ff-form-main .ff-input-type:focus,
.sg-page-signup .sg-form .ff-form-main select:focus,
.sg-page-signup .sg-form .ff-form-main textarea:focus {
	outline: none !important; border-color: var(--sg-primary) !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(5, 3, 140, .35) !important;
}

/* ---- Ethnicity: Formstack's checkbox list (<span role="checkbox">) as the design's
   Checkbox - 16px, rounded, primary border, filled + tick when checked */
.sg-page-signup .sg-form .ff-select-to-checkbox-ul {
	display: flex !important; flex-wrap: wrap; gap: 12px 24px; margin: 4px 0 0 !important; padding: 0 !important; list-style: none;
}
.sg-page-signup .sg-form .ff-checkbox-li {
	display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; float: none !important;
}
.sg-page-signup .sg-form .ff-checkbox-li label {
	margin: 0 !important; font-size: 14px !important; line-height: 20px; font-weight: 400 !important;
	color: var(--sg-foreground) !important; cursor: pointer;
}
.sg-page-signup .sg-form .ff-ext-checkbox-css {
	position: relative; display: inline-block; flex: 0 0 16px; width: 16px !important; height: 16px !important; margin: 0 !important;
	border: 1px solid var(--sg-primary) !important; border-radius: 4px !important; background: #fff !important; cursor: pointer;
}
.sg-page-signup .sg-form .ff-ext-checkbox-css::before { display: none !important; }
.sg-page-signup .sg-form .ff-ext-checkbox-css[aria-checked="true"] { background: var(--sg-primary) !important; }
.sg-page-signup .sg-form .ff-ext-checkbox-css[aria-checked="true"]::after {
	content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sg-page-signup .sg-form .ff-ext-checkbox-css:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }

/* ---- consent block: the design groups the three consents in one soft, bordered box
   ("rounded-xl border bg-surface-soft p-4 space-y-4"), checkbox left of its text.
   Formstack emits one row per consent (label, then checkbox), so each row becomes a
   2-column grid and the rows join into one box: first row carries the top edge, the
   group's last row the bottom edge, negative margins close the 16px grid gap. */
.sg-page-signup .sg-form .ff-item-row:has(> .ff-field-col > input.ff-checkbox) {
	display: grid !important; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; align-items: start;
	background: var(--sg-surface-soft); border: 1px solid var(--sg-border); border-top: 0; border-bottom: 0;
	padding: 8px 16px !important; margin: -16px 0 0 !important;
}
.sg-page-signup .sg-form .ff-item-row:not(:has(input.ff-checkbox)) + .ff-item-row:has(> .ff-field-col > input.ff-checkbox) {
	border-top: 1px solid var(--sg-border); border-radius: 12px 12px 0 0; padding-top: 16px !important; margin-top: 8px !important;
}
.sg-page-signup .sg-form .ff-item-row:has(> .ff-field-col > input.ff-checkbox):last-child {
	border-bottom: 1px solid var(--sg-border); border-radius: 0 0 12px 12px; padding-bottom: 16px !important;
}
.sg-page-signup .sg-form .ff-item-row:has(> .ff-field-col > input.ff-checkbox) > .ff-field-col { grid-column: 1; grid-row: 1; width: auto !important; }
.sg-page-signup .sg-form .ff-item-row:has(> .ff-field-col > input.ff-checkbox) > .ff-label-col { grid-column: 2; grid-row: 1; margin: 0 !important; }
.sg-page-signup .sg-form .ff-item-row:has(> .ff-field-col > input.ff-checkbox) .ff-label {
	display: inline !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: var(--sg-muted) !important;
}
/* the Privacy/Terms acceptance reads in foreground, the two opt-ins muted (design) */
.sg-page-signup .sg-form .ff-item-row:has(input[name="Contact.Privacy_Policy__c"]) .ff-label { color: var(--sg-foreground) !important; }
.sg-page-signup .sg-form .ff-item-row:has(> .ff-field-col > input.ff-checkbox) .ff-label a {
	color: var(--sg-orange) !important; font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
}
.sg-page-signup .sg-form input.ff-checkbox {
	width: 16px !important; height: 16px !important; margin: 2px 0 0 !important; accent-color: var(--sg-primary); cursor: pointer;
}

/* ---- validation: Formstack paints its messages pale pink (#ffadb7) - illegible on
   white. Design uses --destructive (#c91d1d) for errors, as for the required mark. */
.sg-page-signup .sg-form .ff-form-main .ff-input-type-invalid:not(.custom-flex-control-container):not(.ff-checkbox) { border-color: #c91d1d !important; }
.sg-page-signup .sg-form .ff-form-main .custom-flex-control-container.ff-input-type-invalid { border: 0 !important; }
.sg-page-signup .sg-form .ff-form-main .ff-invalid-msg {
	margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	font-size: 12px !important; line-height: 16px !important; font-weight: 500; color: #c91d1d !important;
}

/* ---- the <hr> Formstack puts between its two sections: the design separates
   sections by space only (each header already has its own rule) */
.sg-page-signup .sg-form .ff-item-row:has(.ff-general-text-label hr) { display: none !important; }
.sg-page-signup .sg-form .ff-group-row + .ff-group-row { margin-top: 16px !important; }

/* ---- footer: "* Required fields" note (12px muted, red mark) above a full-width
   submit (design Button size lg = h-11, cta gradient, shadow-md) */
.sg-page-signup .sg-form .ff-footer-group { margin-top: 20px !important; }
.sg-page-signup .sg-form .ff-submit-btn { display: flex !important; flex-direction: column; gap: 20px; float: none !important; width: 100% !important; }
.sg-page-signup .sg-form .footnoteDiv { float: none !important; margin: 0 !important; line-height: 16px; }
.sg-page-signup .sg-form .footnoteDiv .ff-label,
.sg-page-signup .sg-form .footnoteDiv .ff-footnote { font-size: 12px !important; line-height: 16px !important; font-weight: 400 !important; }
.sg-page-signup .sg-form .footnoteDiv .ff-label { color: var(--sg-muted) !important; }
.sg-page-signup .sg-form .btnDiv { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.sg-page-signup .sg-form .ff-form-main .ff-btn-submit {
	display: block; width: 100% !important; height: 44px !important; margin: 0 !important; padding: 0 32px !important;
	font-size: 16px !important; line-height: 44px !important; font-weight: 600 !important; letter-spacing: 0;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) !important; cursor: pointer;
}
.sg-page-signup .sg-form .ff-form-main .ff-btn-submit:hover { opacity: .95; box-shadow: 0 10px 30px -8px rgba(15, 18, 74, .25) !important; }
.sg-page-signup .sg-form .ff-form-main .ff-btn-submit:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }
/* card width: Formstack sets its own "margin: 0 32px" on .ff-form-main, and the design
   grid is [1fr_320px] with gap-6 (24px) - together the card was 800px against ~870 */
.sg-page-signup .sg-form .ff-form-main { margin: 0 !important; }
.sg-page-signup .sg-form-layout { gap: 24px; }
/* The generic ".sg-form input:not(...)x5" rule is (0,6,1) and outranked the invalid /
   focus borders on text inputs (selects and textareas were fine) - body-prefixed here. */
body.sg-redesign .sg-page-signup .sg-form .ff-form-main .ff-input-type.ff-input-type-invalid:not(.ff-checkbox),
body.sg-redesign .sg-page-signup .sg-form .ff-form-main textarea.ff-input-type-invalid,
body.sg-redesign .sg-page-signup .sg-form .ff-form-main select.ff-input-type-invalid { border-color: #c91d1d !important; }
body.sg-redesign .sg-page-signup .sg-form .ff-form-main .ff-input-type:focus,
body.sg-redesign .sg-page-signup .sg-form .ff-form-main textarea:focus,
body.sg-redesign .sg-page-signup .sg-form .ff-form-main select:focus { border-color: var(--sg-primary) !important; }
/* footer row/button were 4-5px wider than the field grid (Formstack's own offsets) */
.sg-page-signup .sg-form .ff-footer-row,
.sg-page-signup .sg-form .ff-submit-btn,
.sg-page-signup .sg-form .btnDiv { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Formstack's own box model: ".ff-form-main {max-width:800px}", 18px side margins on each
   .ff-group-row and 14px padding on the footer group - so fields sat 18px inside the card
   and the submit 4px wider than them. The design puts both on the card's content edge. */
.sg-page-signup .sg-form .ff-form-main { max-width: none !important; width: auto !important; }
.sg-page-signup .sg-form .ff-group-row { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.sg-page-signup .sg-form .ff-footer-group { padding: 0 !important; }
.sg-page-signup .sg-form .ff-page-row { border: 0 !important; }