/* SanBrick — supplemental styles beyond theme.json */

/* ── Global resets ─────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	overflow-x: clip;
	/* clip, not hidden — hidden makes body the scroll container and breaks position:sticky */
}

/* Lock page scroll while the mobile nav overlay is open — core doesn't do this itself,
   so the page underneath was scrollable behind the fixed, translucent menu */
html:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow-y: hidden;
}

/* Every top-level section on these templates manages its own vertical
   spacing internally (padding-block on .sb-section, etc.), so core's
   default blockGap margin between .wp-site-blocks children only adds
   an unstyled gap between sections — invisible on white-on-white, but
   a visible seam wherever adjacent sections have different bg colors. */
.wp-site-blocks>* {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ── Utility: accent text span ─────────────────────────── */
.text-accent {
	color: var(--wp--preset--color--accent-primary);
}

/* ── Buttons ───────────────────────────────────────────── */
.wp-block-button__link {
	border-radius: 6px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	padding: 14px 28px;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

/* .wp-block-button.is-style-outline base + hover rules live further down,
   next to .sb-hero's colour override, to keep the whole variant together. */

/* ── Section padding ───────────────────────────────────── */
.sb-section {
	padding-block: var(--wp--preset--spacing--section-y, clamp(72px, 10vw, 120px));
}

/* ── Shared hero + section 03 background ──────────────── */
/* Layer order (bottom to top), matching test_home_hero/dev.html:
   1. ::before  — header image
   2. canvas    — animated starfield
   3. __tint    — gradient tint overlay
   4. ::after   — astronaut decoration
   5. > *       — real content                                    */
.sb-header-bg {
	position: relative;
	margin-top: 0;
	padding-top: 80px;
	/* clear the fixed nav */
	background: #101820;
	/* solid fallback before the image/gradient paint */
}

.sb-header-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/header.avif') center / cover no-repeat;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
}

/* Animated starfield — driven by the "Home hero starfield background"
   block in interactions.js. If canvas/JS isn't available the image +
   gradient tint behind/above it still read fine on their own. */
#sb-hero-starfield {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0.4;
	pointer-events: none;
	z-index: 1;
}

.sb-header-bg>.sb-header-bg__tint {
	position: absolute;
	inset: 0;
	top: -40px;
	background: linear-gradient(180deg, #db4524 -20%, #622717 60%, #101820 120%);
	opacity: 0.65;
	pointer-events: none;
	z-index: 2;
}

.sb-header-bg::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: max(24px, calc((100vw - 1280px) / 2));
	width: clamp(300px, 75vw, 960px);
	height: 100%;
	background: url('../images/header-astronaut.avif') bottom right / contain no-repeat;
	pointer-events: none;
	z-index: 3;
}

.sb-header-bg>* {
	position: relative;
	z-index: 4;
}

/* ── Hero (Section 02) ─────────────────────────────────── */
.sb-hero {
	min-height: 100svh;
	display: flex;
	align-items: center;
	margin-block-start: 0;
}

.sb-hero__inner {
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
}

/* Narrows just the headline column, keeping the outer container's left
   edge aligned with every other section's .sb-*__inner box. */
.sb-eyebrow,
.sb-hero__heading {
	max-width: 1150px;
}

.sb-eyebrow {
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(16px, 1.67vw, 27px);
	font-weight: 400;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 20px;
}

.sb-hero__heading {
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(55px, 5.71vw, 91px);
	font-weight: 900;
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 24px;
}

.sb-hero__body {
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(15px, 1.375vw, 22px);
	font-weight: 400;
	line-height: 1.5;
	max-width: 750px;
	margin-top: 0;
	margin-bottom: clamp(14px, 1.25vw, 20px);
}

.sb-hero__body--last {
	margin-bottom: 40px;
}

/* Hero buttons */
.sb-btn-primary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	border-radius: 40px;
	padding: 25px 40px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-btn-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-primary);
	color: var(--wp--preset--color--text-primary);
}

.sb-btn-primary .wp-block-button__link:hover {
	background-color: #a74227;
	filter: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--accent-primary);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-primary);
	border-color: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

.sb-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--text-primary);
}

.sb-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #101820;
}

/* Entrance animation on hero text */
.sb-hero .wp-block-heading,
.sb-hero .sb-eyebrow,
.sb-hero .wp-block-paragraph,
.sb-hero .wp-block-buttons {
	animation: hero-fade-up 0.7s ease both;
}

.sb-hero .sb-eyebrow {
	animation-delay: 0.05s;
}

.sb-hero .wp-block-heading {
	animation-delay: 0.15s;
}

.sb-hero .wp-block-paragraph {
	animation-delay: 0.25s;
}

.sb-hero .wp-block-buttons {
	animation-delay: 0.35s;
}

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

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

@media (max-width: 767px) {
	.sb-hero {
		min-height: auto;
	}
}

/* ── Data Without Compromise (Section 03) ─────────────── */
.sb-dwc__header,
.sb-dwc__grid,
.sb-dwc__buttons {
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	box-sizing: border-box;
}

.sb-dwc__header {
	margin-bottom: 64px;
}

.sb-dwc__heading {
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.2;
	max-width: 750px;
	margin: 0;
}

.sb-dwc__card-title {
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.sb-dwc__card-body {
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.sb-dwc__grid {
	margin-bottom: 64px;
}

/* DWC CTA button — white pill */
.sb-btn-cta-white .wp-block-button__link {
	background-color: #ffffff;
	color: #101820;
	border-radius: 40px;
	padding: 25px 40px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sb-btn-cta-white .wp-block-button__link:hover {
	background-color: #838383;
	color: #ffffff;
	filter: none;
}

.sb-dwc__icon {
	display: inline-flex;
	flex-shrink: 0;
}

.sb-dwc__card {
	display: flex !important;
	padding: 60px 30px !important;
	flex-direction: column !important;
	justify-content: flex-start;
	align-items: flex-start !important;
	gap: 30px;
	flex-shrink: 0;
	align-self: stretch;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.20);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	box-shadow: inset 0em 0em 0px 1px rgb(255 255 255 / 20%);
}

/* Tablet: 2-col wrap */
@media (min-width: 768px) and (max-width: 1023px) {
	.sb-dwc__grid {
		flex-wrap: wrap;
	}

	.sb-dwc__grid .wp-block-column {
		flex-basis: calc(50% - 16px) !important;
	}
}

/* ── Navigation bar (Section 01) ──────────────────────── */
.sb-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(90deg, rgba(47, 29, 27, 0.95) 0%, rgba(167, 66, 39, 0.95) 100%);
}

/* Homepage: nav stays transparent so .sb-header-bg's own gradient shows through */
.home .sb-nav {
	background: transparent;
}

.sb-nav__inner {
	height: 80px;
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	box-sizing: border-box;
}

/* Tighten nav gap on mid-size screens */
@media (max-width: 1100px) {
	.sb-nav__right {
		gap: 1.5rem !important;
	}
}

/* Logo */
.sb-nav__logo {
	display: block;
	flex-shrink: 0;
	width: 140px;
	height: 32px;
	color: #ffffff;
	transition: color 0.15s ease;
	position: relative;
	z-index: 200;
	outline: none;
	box-shadow: none;
}

.sb-nav__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Wordmark letters use fill="currentColor" (set via .sb-nav__logo's own
   color above); the "S" mark's two paths keep their own #FF5C39 fill and
   are unaffected. Homepage only (not width-restricted — applies on mobile
   homepage too), matching the light scrolled background that only shows
   up there. */
.home header.is-scrolled .sb-nav__logo {
	color: #101820;
}

.sb-nav__logo:focus,
.sb-nav__logo:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Nav links */
.sb-nav__menu .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(14px, 1.5vw, 18px);
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	transition: color 0.2s ease;
	padding: 0 !important;
}

.sb-nav__menu .wp-block-navigation-item__content:hover,
.sb-nav__menu .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent-primary);
	outline: none;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	backdrop-filter: blur(8px);
	background-color: rgba(16, 24, 32, 0.85) !important;
}

/* Overlay had no explicit z-index, so the fixed .sb-nav (z-index: 100) rendered on top of it once open */
.sb-nav__menu .wp-block-navigation__responsive-container.is-menu-open {
	z-index: 150;
}

/* CTA button — pill style */
.sb-nav__cta-wrap {
	flex-shrink: 0;
}

.is-style-nav-cta .wp-block-button__link {
	background-color: #ffffff;
	color: #101820 !important;
	border-radius: 40px;
	padding: 15px 20px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	border: none;
	transform: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.is-style-nav-cta .wp-block-button__link:hover {
	background-color: #838383;
	color: #ffffff !important;
	filter: none;
	transform: none;
}

/* Mobile nav — hamburger / close icon, custom bars with morph + colour transition */
.sb-nav__menu .wp-block-navigation__responsive-container-open,
.sb-nav__menu .wp-block-navigation__responsive-container-close {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none;
	background: transparent;
	outline: none;
	box-shadow: none;
}

.sb-nav__menu .wp-block-navigation__responsive-container-open:focus,
.sb-nav__menu .wp-block-navigation__responsive-container-open:focus-visible,
.sb-nav__menu .wp-block-navigation__responsive-container-close:focus,
.sb-nav__menu .wp-block-navigation__responsive-container-close:focus-visible {
	outline: none;
	box-shadow: none;
}

.sb-nav__menu .wp-block-navigation__responsive-container-open svg path,
.sb-nav__menu .wp-block-navigation__responsive-container-close svg path {
	display: none;
}

.sb-nav__menu .wp-block-navigation__responsive-container-open svg,
.sb-nav__menu .wp-block-navigation__responsive-container-open::before,
.sb-nav__menu .wp-block-navigation__responsive-container-open::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 37px;
	height: 2px;
	border-radius: 1px;
	background-color: #ffffff;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

/* Resting — three horizontal bars, 10px apart */
.sb-nav__menu .wp-block-navigation__responsive-container-open::before {
	transform: translate(-50%, calc(-50% - 10px));
}

.sb-nav__menu .wp-block-navigation__responsive-container-open svg {
	transform: translate(-50%, -50%);
}

.sb-nav__menu .wp-block-navigation__responsive-container-open::after {
	transform: translate(-50%, calc(-50% + 10px));
}

/* Once open, the close button underneath needs the click — the open button sits at the same
   fixed coordinates with a higher z-index than the container, so it was silently swallowing clicks
   meant for close (openMenuOnClick fired instead of closeMenuOnClick). Its own visibility doesn't
   otherwise matter: a descendant's z-index only competes with siblings inside the same stacking
   context, so the close button (however styled) has always rendered underneath the open button —
   the container's own z-index (150) loses to the open button's (200) regardless. The open button
   is what the user actually sees and animates; the close button just needs to be there for clicks. */
.sb-nav__menu .wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open) {
	pointer-events: none;
}

/* Active — sibling menu container is open: bars rotate into an X, middle bar fades, colour shifts to accent */
.sb-nav__menu .wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open)::before,
.sb-nav__menu .wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open)::after {
	background-color: var(--wp--preset--color--accent-primary);
}

.sb-nav__menu .wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open)::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.sb-nav__menu .wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open) svg {
	transform: translate(-50%, -50%);
	opacity: 0;
}

.sb-nav__menu .wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open)::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Close button stays fully invisible — it's a real click target only, never meant to be seen.
   The open button is the one that visibly animates; this one just sits underneath it. */
.sb-nav__menu .wp-block-navigation__responsive-container-close {
	opacity: 0;
}

/* Close button — always the X shape; never actually visible (always behind the open button per
   the note above), it just needs to exist for the real click target. */
.sb-nav__menu .wp-block-navigation__responsive-container-close svg,
.sb-nav__menu .wp-block-navigation__responsive-container-close::before,
.sb-nav__menu .wp-block-navigation__responsive-container-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 37px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--wp--preset--color--accent-primary);
}

.sb-nav__menu .wp-block-navigation__responsive-container-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.sb-nav__menu .wp-block-navigation__responsive-container-close svg {
	transform: translate(-50%, -50%);
	opacity: 0;
}

.sb-nav__menu .wp-block-navigation__responsive-container-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* CTA inside the mobile drawer — hidden on desktop, shown only in the open overlay */
.sb-nav__mobile-cta {
	display: none !important;
}

/* Core only switches the nav block into its hamburger/overlay mode below 600px
   (wp-includes/blocks/navigation/style.css); everything from 600–768px otherwise
   renders the inline desktop menu, which doesn't fit at tablet width. Force the
   mobile toggle + overlay to take over through 768px instead. */
@media (min-width: 600px) and (max-width: 768px) {
	.sb-nav__menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sb-nav__menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 768px) {
	.sb-header-bg {
		padding-top: 64px;
	}

	.sb-nav__inner {
		height: 64px;
	}

	.wp-block-buttons.sb-nav__cta-wrap {
		display: none;
	}

	/* Pin both toggle buttons to the exact same viewport position so the icon never jumps on open/close */
	.sb-nav__menu .wp-block-navigation__responsive-container-open,
	.sb-nav__menu .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 11px;
		right: clamp(24px, 4vw, 50px);
		z-index: 200;
	}

	/* Homepage, mobile, on scroll only: hamburger bars match the logo/nav-
	   link switch to dark, since the bar behind them is now light/glass
	   instead of the sitewide dark bar. :not(:has(...)) keeps this from
	   outranking the "menu open" rule below (orange X) — this selector is
	   one type-selector more specific (header) despite coming later, so
	   without the guard it would win even while the drawer is open. */
	.home header.is-scrolled .sb-nav__menu .wp-block-navigation__responsive-container-open:not(:has(~ .wp-block-navigation__responsive-container.is-menu-open)) svg,
	.home header.is-scrolled .sb-nav__menu .wp-block-navigation__responsive-container-open:not(:has(~ .wp-block-navigation__responsive-container.is-menu-open))::before,
	.home header.is-scrolled .sb-nav__menu .wp-block-navigation__responsive-container-open:not(:has(~ .wp-block-navigation__responsive-container.is-menu-open))::after {
		background-color: #101820;
	}

	.sb-nav__menu .wp-block-navigation-item__content {
		font-size: 22px;
		font-family: var(--wp--preset--font-family--lato);
		font-weight: 600;
		color: var(--wp--preset--color--text-primary) !important;
	}

	.sb-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		padding: 1.8rem;
		gap: 2rem;
		align-items: flex-start;
	}

	.sb-nav__mobile-cta {
		display: flex !important;
		flex: 1 0 0;
		align-items: flex-end;
		width: 100%;
		margin-top: 0;
		transition: opacity 0.2s ease;
	}

	/* Higher specificity than core's .is-menu-open .wp-block-navigation-item background/colour resets */
	.wp-block-navigation__responsive-container.is-menu-open .sb-nav__mobile-cta {
		background-color: var(--wp--preset--color--accent-primary) !important;
		border-radius: 40px;
	}

	.sb-nav__mobile-cta:hover {
		opacity: 0.85;
	}

	.wp-block-navigation__responsive-container.is-menu-open .sb-nav__mobile-cta .wp-block-navigation-item__content {
		display: flex;
		width: 100%;
		justify-content: center;
		padding: 15px 20px !important;
		font-family: var(--wp--preset--font-family--poppins);
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1;
		color: #ffffff;
		text-decoration: none;
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		box-sizing: border-box;
	}

	.wp-block-navigation__responsive-container.is-menu-open .sb-nav__mobile-cta .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .sb-nav__mobile-cta .wp-block-navigation-item__content:focus {
		color: #ffffff;
	}
}

/* ── Sticky header scroll state ────────────────────────── */
header.is-scrolled .sb-nav {
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(24px);
}

/* Homepage, desktop only (Figma node 269:3859): on scroll the whole bar
   drops 20px and a glass pill appears behind it; nav links and the CTA
   button invert to dark-on-light. Other pages and all mobile/tablet
   widths keep the standard always-fixed scrolled state above untouched.

   Single mechanism, not two: the 20px drop is ONE transform on .sb-nav
   itself. Real content (.sb-nav__inner) and the decorative ::before pill
   both move with it automatically, since they're simply part of .sb-nav's
   own rendered box — no separate animation/transition is declared on
   .sb-nav__inner at all. (Previously each had its own keyframe animation,
   one gated on is-scrolled and the other on is-scrolled + is-nav-visible,
   which fired 20ms apart and visibly desynced; a keyframe declared
   unconditionally on .sb-nav__inner's resting rule also replayed on every
   page load, causing a flash.) Giving .sb-nav a transform makes it the
   containing block for its position:fixed pill, which is why the pill's
   own top/left/right below resolve against .sb-nav's box rather than the
   viewport directly — same visual result, but it's what lets the pill
   ride along with this one shared transform instead of needing its own
   vertical offset. */
@media (min-width: 769px) {
	.home .sb-nav {
		transform: translateY(0);
		transition: transform 0.3s ease;
	}

	.home header.is-scrolled .sb-nav {
		transform: translateY(20px);
		background: transparent !important;
		backdrop-filter: none;
	}

	.home .sb-nav::before {
		content: '';
		position: fixed;
		top: 0;
		left: 20px;
		right: 20px;
		height: 80px;
		pointer-events: none;
		z-index: -1;
		display: flex;
		align-items: center;
		max-width: calc(1440px - 40px);
		margin-inline: auto;
		padding-inline: 50px;
		width: calc(100% - 40px);
		background-color: transparent;
		border-radius: 10px;
		box-shadow: inset 0em 0em 0px 1px transparent;
		transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
	}

	.home header.is-scrolled .sb-nav::before {
		background-color: rgb(255 255 255 / 47%);
		backdrop-filter: saturate(1.8) blur(20px);
		box-shadow: inset 0em 0em 0px 1px rgb(214 214 214 / 50%);
	}

	.home header.is-scrolled .sb-nav__menu .wp-block-navigation-item__content {
		color: #101820;
	}

	.home header.is-scrolled .sb-nav__menu .wp-block-navigation-item__content:hover,
	.home header.is-scrolled .sb-nav__menu .wp-block-navigation-item__content:focus {
		color: var(--wp--preset--color--accent-primary);
	}

	.home header.is-scrolled .is-style-nav-cta .wp-block-button__link {
		background-color: #101820;
		color: #ffffff !important;
	}

	.home header.is-scrolled .is-style-nav-cta .wp-block-button__link:hover {
		background-color: #525252;
		color: #ffffff !important;
	}
}

/* backdrop-filter on .sb-nav creates a new containing block for its position:fixed descendants —
   with the mobile menu open, that confines the "full-viewport" overlay to .sb-nav's own ~64px
   header-height box instead of the real viewport. Drop the filter while open; the header sits
   underneath the (higher z-index) overlay anyway, so nothing is visibly lost. */
.sb-nav:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none !important;
	/* .sb-nav transitions backdrop-filter over 0.3s — any non-zero value mid-interpolation
	   still traps the overlay's fixed positioning (see note above). Snap instantly instead. */
	transition: none !important;
}

/* The open drawer's overlay is always dark (rgba(16,24,32,.85)), regardless
   of page or scroll state — so the logo must stay white while it's open,
   overriding the homepage-scrolled dark-logo rule (which otherwise wins:
   more classes than .home header.is-scrolled .sb-nav__logo). Harmless
   elsewhere, since the logo is already white on every other page/state. */
.sb-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .sb-nav__logo {
	color: #ffffff;
}

/* ── AtlantisOS — The Cloud Trap (Section 04) ─────────── */
.sb-cloud-trap {
	margin-top: 0;
	padding-block: clamp(72px, 10vw, 120px);
}

.sb-atlantis__inner {
	display: flex;
	gap: 60px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

/* Left column */
.sb-atlantis__left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* Progress bar */
.sb-atlantis__progress {
	display: flex;
	width: 100%;
	height: 10px;
	background: #d9d9d9;
	border-radius: 10px;
}

.sb-atlantis__progress-segment {
	flex: 1;
	height: 100%;
	background: var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.sb-atlantis__progress-segment.is-active {
	opacity: 1;
}

/* Slides — stacked via CSS grid, only active is visible */
.sb-atlantis__slides {
	display: grid;
}

.sb-atlantis__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 60px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.sb-atlantis__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.sb-atlantis__slide-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-atlantis__slide-heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	margin: 0;
}

.sb-atlantis__slide-body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--lead-fluid);
	font-weight: 400;
	line-height: 1.5;
	color: #101820;
	margin: 0;
}

.sb-atlantis__slide-solution {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sb-atlantis__slide-solution h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.75vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: #101820;
	margin: 0;
}

.sb-atlantis__slide-solution ul {
	list-style: disc;
	padding-left: 30px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-atlantis__slide-solution li {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #212121;
}

/* Prev / Next controls */
.sb-atlantis__controls {
	display: flex;
	gap: 30px;
	align-items: center;
	justify-content: center;
}

.sb-atlantis__prev,
.sb-atlantis__next {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.sb-atlantis__prev:hover,
.sb-atlantis__next:hover {
	opacity: 0.6;
}

.sb-atlantis__prev:focus,
.sb-atlantis__next:focus {
	outline: none;
}

/* Right column — image with teal overlay */
.sb-atlantis__image {
	position: relative;
	flex-shrink: 0;
	width: 500px;
}

.sb-atlantis__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.sb-atlantis__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #59cbe8;
	border-radius: 10px;
	mix-blend-mode: multiply;
	pointer-events: none;
}

@media (max-width: 1023px) {
	.sb-atlantis__inner {
		gap: 40px;
	}

	.sb-atlantis__image {
		width: 380px;
	}
}

@media (max-width: 767px) {
	.sb-atlantis__inner {
		flex-direction: column;
	}

	.sb-atlantis__image {
		width: 100%;
	}
}

/* ── Meet AtlantisOS (Section 04 — part 2) ────────────── */
.sb-meet-atlantis {
	padding-top: 200px;
	display: flex;
	flex-direction: column;
	gap: 100px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

/* Intro block */
.sb-meet-atlantis__intro {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	width: 100%;
}

.sb-meet-atlantis__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	text-align: center;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-meet-atlantis__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	max-width: 1056px;
}

.sb-meet-atlantis__lead,
.sb-meet-atlantis__lead--bold,
.sb-meet-atlantis__lead--accent {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	line-height: 1.5;
	margin: 0;
}

.sb-meet-atlantis__lead {
	font-weight: 400;
	color: #101820;
}

.sb-meet-atlantis__lead--bold {
	font-weight: 700;
	color: #101820;
}

.sb-meet-atlantis__lead--accent {
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
}

/* Shared pill button base */
.sb-btn-pill {
	display: inline-block;
	border-radius: 40px;
	padding: 25px 40px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
	border: 2px solid transparent;
	text-align: center;
	width: fit-content;
}

/* ── Pill button colour variants — rest + hover, per Figma node 212:3420 ──
   Solid variants mute/darken on hover; outline variants fill with their
   own colour on hover. Font-size, padding, and weight live on the base
   .sb-btn-pill rule above and are untouched here — only colour varies. */

/* Dark family */
.sb-btn-pill--dark {
	background: #101820;
	color: #ffffff;
}

.sb-btn-pill--dark:hover {
	background: #525252;
	color: #ffffff;
}

.sb-btn-pill--dark-outline,
.sb-btn-pill--ink-outline {
	background: transparent;
	border-color: #101820;
	color: #101820;
}

.sb-btn-pill--dark-outline:hover,
.sb-btn-pill--ink-outline:hover {
	background: #101820;
	border-color: #101820;
	color: #ffffff;
}

/* Light / white family */
.sb-btn-pill--white-fill {
	background: #ffffff;
	color: #101820;
}

.sb-btn-pill--white-fill:hover {
	background: #838383;
	border-color: #838383;
	color: #ffffff;
}

.sb-btn-pill--white-outline {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

.sb-btn-pill--white-outline:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #101820;
}

/* Red / accent family */
.sb-btn-pill--red-fill,
.sb-btn-pill--accent-fill {
	background: var(--wp--preset--color--accent-primary);
	border-color: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

.sb-btn-pill--red-fill:hover,
.sb-btn-pill--accent-fill:hover {
	background: #a74227;
	border-color: #a74227;
	color: #ffffff;
}

.sb-btn-pill--accent-outline {
	background: transparent;
	border-color: var(--wp--preset--color--accent-primary);
	color: var(--wp--preset--color--accent-primary);
}

.sb-btn-pill--accent-outline:hover {
	background: var(--wp--preset--color--accent-primary);
	border-color: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

/* Muted / disabled state — NAS Selector "Next" button before an option is picked */
.sb-btn-pill--muted {
	background: var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--text-gray);
	cursor: not-allowed;
}

.sb-meet-atlantis__buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.sb-meet-atlantis__buttons .sb-btn-pill {
	display: inline-block;
	text-align: center;
}

/* BUTTON-PARITY-SPEC.md: wp:button equivalents of the two rules above —
   this section isn't converted yet, added proactively so the homepage
   migration doesn't rediscover this gap. */
.sb-meet-atlantis__buttons .wp-block-button {
	display: inline-block;
}

.sb-meet-atlantis__buttons .wp-block-button__link {
	text-align: center;
}

/* Video placeholder */
.sb-meet-atlantis__video-wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	width: 100%;
}

.sb-meet-atlantis__video-wrap .sb-btn-pill {
	display: inline-block;
	text-align: center;
}

.sb-meet-atlantis__video-wrap .wp-block-button {
	display: inline-block;
}

.sb-meet-atlantis__video-wrap .wp-block-button__link {
	text-align: center;
}

.sb-meet-atlantis__video {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #e5e5e5;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-meet-atlantis__play-icon {
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.sb-meet-atlantis {
		padding-top: 80px;
		gap: 60px;
	}
}

/* ── Enterprise Features Grid (Section 06) ────────────── */
.sb-enterprise {
	padding-block: 100px 300px;
}

.sb-enterprise__inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

.sb-enterprise__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	text-align: center;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-enterprise__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	width: 100%;
}

.sb-enterprise__card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 60px 30px;
	background: #ffffff;
	border: 2px solid var(--wp--preset--color--accent-primary);
	border-radius: 10px;
}

.sb-enterprise__card img {
	display: block;
	width: 62px;
	height: 50px;
	flex-shrink: 0;
}

.sb-enterprise__card h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.75vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-enterprise__card p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #101820;
	margin: 0;
}

.sb-enterprise__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sb-enterprise__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Icon beside title+body instead of stacked above it (sector cards) */
.sb-enterprise__card--horizontal {
	flex-direction: row;
	align-items: flex-start;
	gap: 24px;
}

.sb-enterprise__card--horizontal>div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sb-enterprise__card--horizontal img {
	margin-top: 4px;
}

@media (max-width: 1023px) {
	.sb-enterprise__card--horizontal {
		flex-direction: column;
	}
}

@media (max-width: 1300px) {
	.sb-enterprise__grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {

	.sb-enterprise__grid,
	.sb-enterprise__grid--4,
	.sb-enterprise__grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.sb-enterprise__grid--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {

	.sb-enterprise__grid,
	.sb-enterprise__grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-enterprise {
		padding-block: 60px 80px;
	}
}

/* ── Series Section Wrapper (Sections 07 + 08) ────────── */
.sb-series-bg {
	position: relative;
	margin-top: 0;
	background-color: #101820;
	overflow: visible;
}

/* Dark bg image at 30% opacity */
.sb-series-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') top no-repeat;
	opacity: 0.3;
	pointer-events: none;
	z-index: 0;
}

/* All direct block children sit above the bg */
.sb-series-bg>.wp-block-group,
.sb-series-bg>.wp-block-html {
	position: relative;
	z-index: 1;
}

/* Astronaut — absolutely positioned inside .sb-ready, bleeds upward */
.sb-series__astronaut {
	position: absolute;
	left: 0;
	top: -249px;
	width: clamp(520px, calc(330px + 24.7vw), 686px);
	pointer-events: none;
	z-index: -1;
}

/* ── Section 07 — Ready-to-Deploy ─────────────────────── */
.sb-ready {
	padding-top: 200px;
	padding-bottom: 100px;
	position: relative;
}

.sb-ready__inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

.sb-ready__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	text-align: center;
}

.sb-ready__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-ready__subtitle {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
}

/* 3-column card grid */
.sb-ready__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	width: 100%;
}

.sb-ready__card {
	display: flex;
	flex-direction: column;
}

/* Card top — white bg */
.sb-ready__card-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 40px 20px 30px;
	background: white;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.sb-ready__card-logo {
	display: block;
	height: 150px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	flex-shrink: 0;
}

.sb-ready__card-product {
	display: block;
	height: 140px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Segment + price stacked with 5px gap */
.sb-ready__card-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
}

.sb-ready__card-segment {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-primary);
}

.sb-ready__card-price {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: #212121;
}

/* Card bottom — warm off-white bg */
.sb-ready__card-bottom {
	background: #fff9f8;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 30px 40px 40px;
	border-radius: 0 0 10px 10px;
}

/* "Show More" row: lines flanking centred icon+label */
.sb-ready__show-more {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	cursor: pointer;
	width: 100%;
	padding: 0;
	transition: opacity 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-ready__show-more:hover {
	opacity: 0.7;
}

.sb-ready__show-more:focus {
	outline: none;
}

.sb-ready__show-more-line {
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--accent-primary);
	display: block;
}

.sb-ready__show-more-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #101820;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	width: 100px;
}

.sb-ready__show-more-group img {
	flex-shrink: 0;
}

/* Expandable detail list — collapsed via grid-rows until "Show More"
   is triggered. The 0fr/1fr row-track trick animates smoothly without
   needing to know the content's height ahead of time. */
.sb-ready__card-details-wrap {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	transition: grid-template-rows 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-ready__card-details-wrap.is-open {
	grid-template-rows: 1fr;
}

.sb-ready__card-details {
	overflow: hidden;
	min-height: 0;
	list-style: disc;
	margin: 40px 0 0;
	padding-inline-start: 30px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #212121;
}

.sb-ready__card-details li {
	margin-bottom: 10px;
}

.sb-ready__card-details li:last-child {
	margin-bottom: 50px;
}

/* Explore CTA — full-width dark pill */
.sb-ready__cta {
	display: block;
	width: 100%;
	padding: 25px 40px;
	text-align: center;
	background: #101820;
	color: #ffffff;
	border-radius: 40px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	transition: background-color 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-ready__cta:hover,
.sb-ready__card.is-expanded .sb-ready__cta {
	background-color: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

@media (max-width: 1023px) {
	.sb-ready__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.sb-ready {
		padding-top: 80px;
		padding-bottom: 60px;
	}

	.sb-ready__grid {
		grid-template-columns: 1fr;
	}

	.sb-series__astronaut {
		display: none;
	}
}

/* ── Section 08 — Trusted by European Institutions ────── */
.sb-trusted {
	padding-block: 100px;
	position: relative;
}

.sb-trusted__inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

.sb-trusted__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	text-align: center;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-trusted__grid {
	display: grid;
	grid-template-columns: 1fr 444px;
	gap: 40px;
	width: 100%;
	align-items: start;
}

/* Left: glassmorphism case study card */
.sb-trusted__case {
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.20);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	box-shadow: inset 0em 0em 0px 1px rgb(255 255 255 / 20%);
}

.sb-trusted__divider {
	border: none;
	border-top: 2px solid var(--wp--preset--color--accent-primary);
	margin: 0;
	width: 100%;
}

.sb-trusted__case-text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-trusted__logo {
	display: block;
	width: 300px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.sb-trusted__case-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	margin: 0;
	padding-top: 20px;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-trusted__quote {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 32px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
	padding: 0;
	border: none;
}

.sb-trusted__attribution {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
}

.sb-trusted__attribution strong {
	font-weight: 700;
}

/* Right: Quick Facts */
.sb-trusted__facts {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sb-trusted__facts-heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-trusted__facts-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-trusted__fact {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 30px;
	background: #59cbe8;
	border: none;
	border-radius: 10px;
	min-height: 131px;
}

.sb-trusted__fact img {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
}

.sb-trusted__fact span {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: #101820;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* .sb-btn-pill--white-outline lives with the rest of the pill button
   colour variants near the top of this file, next to .sb-btn-pill. */

@media (max-width: 1023px) {
	.sb-trusted__grid {
		grid-template-columns: 1fr;
	}

	.sb-trusted__facts {
		width: 100%;
	}

	.sb-trusted__facts-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.sb-trusted__facts-list {
		display: flex;
		grid-template-columns: unset;
	}
}

@media (max-width: 599px) {
	.sb-trusted {
		padding-block: 60px;
	}

	.sb-trusted__case {
		padding: 32px 24px;
	}

	.sb-trusted__facts-list {
		grid-template-columns: 1fr;
	}
}

/* ── Section 09 — Pricing / Year 5 ────────────────────── */
.sb-pricing {
	margin-top: 0;
	background: #ffffff;
	padding-top: 200px;
	padding-bottom: 100px;
}

.sb-pricing__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

/* Top row: text + chart */
.sb-pricing__top {
	display: flex;
	gap: 20px;
	align-items: center;
	width: 100%;
}

.sb-pricing__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 60px;
	min-width: 0;
}

.sb-pricing__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	margin: 0;
}

.sb-pricing__costs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-pricing__cost-cloud {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: #212121;
	margin: 0;
}

.sb-pricing__cost-sanbrick {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.5;
	color: #212121;
	margin: 0;
}

/* Chart mockup placeholder */
.sb-pricing__chart {
	flex: 1;
	aspect-ratio: 16 / 9;
	background: #d9d9d9;
	border-radius: 10px;
	min-width: 0;
}

/* Accordions */
.sb-pricing__accordions {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

.sb-accordion {
	width: 100%;
}

.sb-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 20px;
	background: none;
	border: none;
	border-bottom: 2px solid var(--wp--preset--color--accent-primary);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.5vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: #101820;
	text-align: left;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	transition: color 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-accordion__trigger:focus {
	outline: none;
}

.sb-accordion__trigger:hover {
	color: var(--wp--preset--color--accent-primary);
}

.sb-accordion__icon {
	flex-shrink: 0;
	transition: transform 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-accordion__trigger[aria-expanded="true"] .sb-accordion__icon {
	transform: rotate(180deg);
}

.sb-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	transition: grid-template-rows 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-accordion__panel.is-open {
	grid-template-rows: 1fr;
}

.sb-accordion__panel-inner {
	overflow: hidden;
	min-height: 0;
	padding-top: 30px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 1.5vw, 20px);
	font-weight: 400;
	line-height: 1.6;
	color: #212121;
	transition: padding-top 0.4s cubic-bezier(.61, 1, .88, 1), padding 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-accordion__panel-inner p {
	margin: 0;
}

.sb-accordion__trigger[aria-expanded="false"]+.sb-accordion__panel .sb-accordion__panel-inner {
	padding-top: 0;
}

/* "The math that matters" stat grid — plain white cards, no border,
   soft drop shadow (Figma node 149:1951, "Card Facts Small"). */
.sb-pricing__stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
	padding: 20px 10px;
}

.sb-pricing__stat-card {
	display: flex;
	align-items: center;
	min-height: clamp(100px, 10vw, 130px);
	padding: clamp(20px, 2.5vw, 30px);
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.sb-pricing__stat-card p {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 600;
	line-height: 1.3;
	color: #101820;
}

@media (max-width: 767px) {
	.sb-pricing__stat-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 599px) {
	.sb-pricing__stat-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.sb-pricing {
		padding-top: 80px;
		padding-bottom: 60px;
	}

	.sb-pricing__top {
		flex-direction: column;
	}

	.sb-pricing__chart {
		width: 100%;
	}
}

/* ── Section 10 — Solve Your Data Challenges ──────────── */
.sb-challenges {
	background: #ffffff;
	padding-block: 100px;
}

.sb-challenges__inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

.sb-challenges__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	text-align: center;
}

.sb-challenges__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-challenges__subtitle {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: #101820;
	margin: 0;
}

/* 2-col grid, 5 rows */
.sb-challenges__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, auto);
	column-gap: 150px;
	row-gap: 60px;
	position: relative;
}

/* Vertical dashed centre line */
.sb-challenges__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 10px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3csvg width='10' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='5' y1='0' x2='5' y2='100%25' stroke='%23f26440' stroke-width='6' stroke-dasharray='6%2c 20' stroke-linecap='round'/%3e%3c%2fsvg%3e");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 10px 100%;
}

/* Sticky floating astronaut on the centre line */
.sb-challenges__astronaut-wrap {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

@keyframes float {
	0% {
		filter: drop-shadow(0 4px 6px rgba(10, 13, 18, 0.20));
		transform: translatey(0px);
	}

	50% {
		filter: drop-shadow(0 10px 6px rgba(10, 13, 18, 0.15));
		transform: translatey(-15px);
	}

	100% {
		filter: drop-shadow(0 4px 6px rgba(10, 13, 18, 0.20));
		transform: translatey(0px);
	}
}

.sb-challenges__astronaut {
	position: sticky;
	top: 50vh;
	display: block;
	width: 121px;
	height: 121px;
	object-fit: contain;
	transform: translatey(0px);
	animation: float 3.4s ease-in-out infinite;
}

/* Text block */
.sb-challenges__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px;
	justify-content: center;
	position: relative;
	z-index: 1;
}

/* Odd rows: text is right-aligned in col 1 */
.sb-challenges__text--right {
	text-align: right;
	align-items: flex-end;
}

.sb-challenges__number {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent-primary);
	display: block;
}

.sb-challenges__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.5vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: #101820;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-challenges__body {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sb-challenges__body p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: #101820;
	margin: 0 0 10px;
}

.sb-challenges__body p:last-child {
	margin-bottom: 0;
}

.sb-challenges__body--bold {
	font-weight: 700 !important;
}

/* Image placeholder with green tint */
.sb-challenges__image {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.sb-challenges__image-inner {
	width: 100%;
	height: 100%;
	background: #d9d9d9;
	border-radius: 10px;
	position: relative;
}

.sb-challenges__image-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* Grid column/row placement via data attributes */
.sb-challenges__text[data-col="1"] {
	grid-column: 1;
}

.sb-challenges__text[data-col="2"] {
	grid-column: 2;
}

.sb-challenges__image[data-col="1"] {
	grid-column: 1;
}

.sb-challenges__image[data-col="2"] {
	grid-column: 2;
}

.sb-challenges__text[data-row="1"],
.sb-challenges__image[data-row="1"] {
	grid-row: 1;
}

.sb-challenges__text[data-row="2"],
.sb-challenges__image[data-row="2"] {
	grid-row: 2;
}

.sb-challenges__text[data-row="3"],
.sb-challenges__image[data-row="3"] {
	grid-row: 3;
}

.sb-challenges__text[data-row="4"],
.sb-challenges__image[data-row="4"] {
	grid-row: 4;
}

.sb-challenges__text[data-row="5"],
.sb-challenges__image[data-row="5"] {
	grid-row: 5;
}

@media (max-width: 767px) {
	.sb-challenges__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 30px;
	}

	.sb-challenges__line,
	.sb-challenges__astronaut-wrap {
		display: none;
	}

	.sb-challenges__text[data-col],
	.sb-challenges__image[data-col] {
		grid-column: 1 !important;
	}

	.sb-challenges__text {
		padding: 0;
		margin-top: 30px;
		text-align: left;
		align-items: start;
	}

	/* reorder so each text block is immediately followed by its own image */
	.sb-challenges__text[data-row="1"] {
		grid-row: 1;
	}

	.sb-challenges__image[data-row="1"] {
		grid-row: 2;
	}

	.sb-challenges__text[data-row="2"] {
		grid-row: 3;
	}

	.sb-challenges__image[data-row="2"] {
		grid-row: 4;
	}

	.sb-challenges__text[data-row="3"] {
		grid-row: 5;
	}

	.sb-challenges__image[data-row="3"] {
		grid-row: 6;
	}

	.sb-challenges__text[data-row="4"] {
		grid-row: 7;
	}

	.sb-challenges__image[data-row="4"] {
		grid-row: 8;
	}

	.sb-challenges__text[data-row="5"] {
		grid-row: 9;
	}

	.sb-challenges__image[data-row="5"] {
		grid-row: 10;
	}
}

/* ── Section 11 — Validate Before You Commit ──────────── */
.sb-validate {
	background: #ffffff;
	padding-block: 100px;
}

.sb-validate__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

.sb-validate__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	text-align: center;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-validate__slider {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

/* Progress bar */
.sb-validate__progress {
	display: flex;
	width: 100%;
	height: 10px;
	background: #d9d9d9;
	border-radius: 10px;
}

.sb-validate__progress-segment {
	flex: 1;
	height: 100%;
	background: var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.sb-validate__progress-segment.is-active {
	opacity: 1;
}

/* Slides stack */
.sb-validate__slides-wrap {
	display: grid;
	padding: 40px;
}

.sb-validate__slide {
	grid-area: 1 / 1;
	display: flex;
	gap: 80px;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.sb-validate__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Image placeholder */
.sb-validate__image {
	flex: 1;
	aspect-ratio: 4 / 3;
	background: #d9d9d9;
	border-radius: 10px;
	min-width: 0;
	flex-shrink: 0;
}

/* Text + button */
.sb-validate__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.sb-validate__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-validate__text h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.5vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: #101820;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-validate__text ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.sb-validate__text li {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: #101820;
}

.sb-validate__timeline {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.5;
	color: #101820;
	margin: 0;
}

/* Prev / Next controls */
.sb-validate__controls {
	display: flex;
	gap: 30px;
	align-items: center;
	justify-content: center;
}

.sb-validate__prev,
.sb-validate__next {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.sb-validate__prev:hover,
.sb-validate__next:hover {
	opacity: 0.6;
}

.sb-validate__prev:focus,
.sb-validate__next:focus {
	outline: none;
}

@media (max-width: 767px) {
	.sb-validate__slide {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.sb-validate__image {
		flex: none;
		width: 100%;
	}

	.sb-validate__content {
		flex: none;
	}

	.sb-validate__slides-wrap {
		padding: 0;
	}
}

/* ── Section 12 — Value Proposition Marquee ───────────── */
.sb-marquee-section {
	background: #ffffff;
	padding-top: 100px;
	padding-bottom: 200px;
	overflow: hidden;
}

.sb-marquee-section__inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
	align-items: center;
}

.sb-marquee-section__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	text-align: center;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	padding-inline: clamp(24px, 4vw, 50px);
}

.sb-marquee-section__rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.sb-marquee__row {
	overflow: hidden;
	line-height: 1;
}

.sb-marquee__track {
	display: inline-flex;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(64px, 9vw, 128px);
	font-weight: 300;
	line-height: 1.35;
	font-synthesis: none;
}

.sb-marquee__row--accent .sb-marquee__track {
	color: var(--wp--preset--color--accent-primary);
}

.sb-marquee__row--dark .sb-marquee__track {
	color: #101820;
}

/* Scroll animations */
@keyframes marquee-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes marquee-right {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}

.sb-marquee__track--left {
	animation: marquee-left 45s linear infinite;
}

.sb-marquee__track--right {
	animation: marquee-right 45s linear infinite;
}

/* Pause on reduced motion */
@media (prefers-reduced-motion: reduce) {

	.sb-marquee__track--left,
	.sb-marquee__track--right {
		animation: none;
	}
}

/* ── Section 13 — Final CTA ───────────────────────────── */
.sb-final-cta {
	/* two-tone split: light panel left, dark strip right */
	background: linear-gradient(to right,
			#fff9f8 calc(100% - clamp(200px, 10vw, 400px)),
			#101820 calc(100% - clamp(200px, 10vw, 400px)));
	position: relative;
	overflow-x: clip;
}

/* Hard cut: dark overlay on the right strip sits above the astronaut,
   cutting his body exactly at the panel boundary                      */
.sb-final-cta::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(200px, 10vw, 400px);
	background: #101820;
	z-index: 1;
	pointer-events: none;
}

/* Panel is now a pure content wrapper — same pattern as every other section */
.sb-final-cta__panel {
	background: none;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(80px, 10vw, 150px) clamp(24px, 5vw, 80px);
	position: relative;
	z-index: 1;
}

.sb-final-cta__content {
	display: flex;
	flex-direction: column;
	gap: 80px;
	max-width: calc(100% - 200px);
}

.sb-final-cta__text {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sb-final-cta__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #101820;
	margin: 0 0 20px;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-final-cta__lead {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.5;
	color: #212121;
	margin: 0;
}

.sb-final-cta__trust {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sb-final-cta__trust-label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #212121;
	margin: 0;
}

.sb-final-cta__trust-list {
	list-style: disc;
	padding-left: 24px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sb-final-cta__trust-list li {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #212121;
}

.sb-software-final-cta__block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sb-software-final-cta__intro {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #212121;
	margin: 0;
}

.sb-software-final-cta__list {
	list-style: disc;
	padding-left: 24px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sb-software-final-cta__list li {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #212121;
}

.sb-final-cta__buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.sb-final-cta__buttons a,
.sb-final-cta__buttons .wp-block-button {
	flex: initial;
}

/* Planet decoration */
.sb-final-cta__planet {
	position: absolute;
	right: -281px;
	top: 320px;
	transform: translateY(-50%);
	width: 692px;
	pointer-events: none;
	z-index: 2;
}

.sb-final-cta__planet img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1023px) {
	.sb-final-cta {
		background: #fff9f8;
	}

	.sb-final-cta__planet {
		display: none;
	}

	.sb-final-cta::after {
		display: none;
	}

	.sb-final-cta__content {
		max-width: 100%;
	}
}

/* ── Footer ─────────────────────────────────────────────── */
.sb-footer {
	background: #101820;
}

.sb-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px clamp(24px, 4vw, 50px) 40px;
}

/* ── PreFooter: logo/blurb + newsletter card (Figma node 265:3753) ── */
.sb-footer__prefooter {
	position: relative;
	display: flex;
	align-items: center;
	gap: 80px;
	padding-block: 0 80px;
}

.sb-footer__prefooter::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #525252;
}

.sb-footer__prefooter-brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 0;
	max-width: 734px;
}

.sb-footer__prefooter-brand svg {
	display: block;
	margin-bottom: 40px;
}

.sb-footer__prefooter-heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-primary);
	margin: 0;
}

.sb-footer__prefooter-body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.sb-footer__newsletter {
	position: relative;
	overflow: hidden;
	flex: 1 1 0;
	max-width: 598px;
	background: #ffffff;
	border-radius: 10px;
	padding: 40px;
}

.sb-footer__newsletter::after {
	content: '';
	position: absolute;
	bottom: -20px;
	right: -20px;
	width: 200px;
	height: 165px;
	background: url('../images/subscribe.png') bottom right / contain no-repeat;
	pointer-events: none;
}

.sb-footer__newsletter-heading {
	position: relative;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 4px;
}

.sb-footer__newsletter-sub {
	position: relative;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}

.sb-footer__newsletter-disclaimer {
	position: relative;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 600;
	color: #525252;
	margin: 0 0 20px;
}

.sb-footer__newsletter-form {
	position: relative;
	display: flex;
	gap: 12px;
	max-width: 375px;
}

.sb-footer__newsletter-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sb-footer__newsletter-input {
	flex: 1 1 0;
	min-width: 0;
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 8px;
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	color: var(--wp--preset--color--text-black);
}

.sb-footer__newsletter-input::placeholder {
	color: var(--wp--preset--color--text-gray);
}

.sb-footer__newsletter-form .sb-btn-pill {
	flex-shrink: 0;
}

.sb-footer__newsletter-confirm {
	position: relative;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

@media (max-width: 1023px) {
	.sb-footer__prefooter {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.sb-footer__newsletter,
	.sb-footer__prefooter-brand {
		flex: initial;
	}
}

/* Four-column grid */
.sb-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding-block: 60px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Column headings */
.sb-footer__col-heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 28px;
	line-height: 1.3;
}

/* Column link list */
.sb-footer__col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sb-footer__col-list a {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sb-footer__col-list a:hover {
	color: var(--wp--preset--color--text-primary);
}

.sb-footer__col-list a:focus {
	outline: none;
}

/* ── SubFooter: copyright/legal + compliance badges (Figma node 265:3825) ── */
.sb-footer__subfooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	flex-wrap: wrap;
}

.sb-footer__subfooter-legal {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.sb-footer__copy {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.sb-footer__subfooter-legal a {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sb-footer__subfooter-legal a:hover {
	color: var(--wp--preset--color--text-primary);
}

.sb-footer__subfooter-legal a:focus {
	outline: none;
}

.sb-footer__badges {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.sb-footer__badge {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
}

.sb-footer__badge-dot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-primary);
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1023px) {
	.sb-footer__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 40px;
	}
}

@media (max-width: 599px) {
	.sb-footer__cols {
		grid-template-columns: 1fr;
	}

	.sb-footer__subfooter {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-footer__newsletter-form {
		flex-direction: column;
		max-width: none;
	}

	.sb-footer__newsletter-form .sb-btn-pill {
		width: 100%;
	}
}

/* ══════════════════════════════════════════════════════
   Light Pages (About / Contact / PRR) — shared components
   ══════════════════════════════════════════════════════ */

/* ── Light page section scaffolding ───────────────────── */
.sb-light-section {
	background: var(--wp--preset--color--bg-white);
}

/* Bottom-divider decoration for light-page heroes — a helper class, not
   part of .sb-light-section itself, since that base class is shared by
   every section on these pages (not just heroes). Add sb-hero-divider
   alongside sb-light-section on whichever hero wrapper needs the line. */
.sb-hero-divider {
	position: relative;
}

.sb-hero-divider::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--border-light);
}

.sb-light-section__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	width: 100%;
}

/* .sb-btn-pill--ink-outline and .sb-btn-pill--red-fill live with the rest
   of the pill button colour variants near the top of this file. */

/* A converted wp:button carries the pill variant class on its wrapper <div>,
   not on the <a>. Those variant rules (.sb-btn-pill--red-fill etc., ~line 1100)
   were written for anchors: they set background/border-color but take their
   border-radius from the .sb-btn-pill base class, which a wrapper never has.
   Result: a square block of colour painted behind the correctly-rounded link.
   Only the filled variants show it — the outline ones set border-color with no
   border-width, so they paint nothing. The wrapper must stay inert; the rules
   below are what actually style the button. */
.wp-block-button[class*="sb-btn-pill--"] {
	background: none;
	border-color: transparent;
	padding: 0;
	font-size: inherit;
}

/* ── Native wp:button wrapper equivalents of the light-page pill variants ──
   Content-migration convention: native wp:button puts the className on the
   wrapper <div>, not the <a>, same problem .sb-btn-primary/.is-style-outline
   already solve for the dark homepage hero. Same rest/hover matrix as the
   .sb-btn-pill family above — only the selector differs. Watch the
   currentColor border trap: outline variants set border via currentColor,
   so color changes on hover must also pin border-color.
   BUTTON-PARITY-SPEC.md 2026-08-11: extended from the 4 variants the pilot
   used to all 9 (plus --sm), since the base .sb-btn-pill class is absent
   from every converted button and none of the 19 rules targeting it can
   match — see that spec for the full inventory. --dark-outline/--ink-outline
   and --accent-fill/--red-fill stay comma-aliased here exactly as their
   non-block source rules already are (~line 1110, ~line 1149). */
.wp-block-button.sb-btn-pill--dark .wp-block-button__link,
.wp-block-button.sb-btn-pill--dark-outline .wp-block-button__link,
.wp-block-button.sb-btn-pill--ink-outline .wp-block-button__link,
.wp-block-button.sb-btn-pill--red-fill .wp-block-button__link,
.wp-block-button.sb-btn-pill--accent-fill .wp-block-button__link,
.wp-block-button.sb-btn-pill--accent-outline .wp-block-button__link,
.wp-block-button.sb-btn-pill--white-fill .wp-block-button__link,
.wp-block-button.sb-btn-pill--white-outline .wp-block-button__link,
.wp-block-button.sb-btn-pill--muted .wp-block-button__link {
	display: inline-block;
	border-radius: 40px;
	padding: 25px 40px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	border: 2px solid transparent;
}

/* main.css:49 applies filter:brightness(0.9);transform:translateY(-1px) to every
   .wp-block-button__link on hover — the pill variants below only intend to
   change colour, so reset both here or they lift/dim on top of that. */
.wp-block-button.sb-btn-pill--dark .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--dark-outline .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--ink-outline .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--red-fill .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--accent-fill .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--accent-outline .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--white-fill .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--white-outline .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--muted .wp-block-button__link:hover {
	filter: none;
	transform: none;
}

.wp-block-button.sb-btn-pill--dark .wp-block-button__link {
	background: #101820;
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--dark .wp-block-button__link:hover {
	background: #525252;
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--dark-outline .wp-block-button__link,
.wp-block-button.sb-btn-pill--ink-outline .wp-block-button__link {
	background: transparent;
	border-color: #101820;
	color: #101820;
}

.wp-block-button.sb-btn-pill--dark-outline .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--ink-outline .wp-block-button__link:hover {
	background: #101820;
	border-color: #101820;
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--red-fill .wp-block-button__link,
.wp-block-button.sb-btn-pill--accent-fill .wp-block-button__link {
	background: var(--wp--preset--color--accent-primary);
	border-color: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--red-fill .wp-block-button__link:hover,
.wp-block-button.sb-btn-pill--accent-fill .wp-block-button__link:hover {
	background: #a74227;
	border-color: #a74227;
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--accent-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--accent-primary);
	color: var(--wp--preset--color--accent-primary);
}

.wp-block-button.sb-btn-pill--accent-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-primary);
	border-color: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--white-fill .wp-block-button__link {
	background: #ffffff;
	color: #101820;
}

.wp-block-button.sb-btn-pill--white-fill .wp-block-button__link:hover {
	background: #838383;
	border-color: #838383;
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--white-outline .wp-block-button__link {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

.wp-block-button.sb-btn-pill--white-outline .wp-block-button__link:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #101820;
}

/* Disabled state — no :hover companion in the source rule (~line 1176)
   either, so none is added here. */
.wp-block-button.sb-btn-pill--muted .wp-block-button__link {
	background: var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--text-gray);
	cursor: not-allowed;
}

/* Size modifier only — always paired with one of the colour variants above,
   which already supply the base geometry this overrides. */
.wp-block-button.sb-btn-pill--sm .wp-block-button__link {
	padding: 12px 24px;
	font-size: 16px;
}

/* ── Sticky "On This Page" side nav ────────────────────── */
.sb-side-nav {
	position: sticky;
	top: 104px;
	/* header height (80px) + 24px breathing room */
	align-self: start;
}

.sb-side-nav__label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-gray);
	margin: 0 0 16px;
}

.sb-side-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-side-nav__link {
	display: flex;
	align-items: center;
	min-height: 34px;
	padding-left: 20px;
	position: relative;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	font-weight: 700;
	color: #525252;
	text-decoration: none;
	border-left: 2px solid var(--wp--preset--color--border-light);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sb-side-nav__link:hover,
.sb-side-nav__link.is-active {
	color: var(--wp--preset--color--ink);
	border-left-color: var(--wp--preset--color--accent-primary);
}

.sb-side-nav__link:focus {
	outline: none;
}

.sb-side-nav__link.is-active {
	font-weight: 700;
}

@media (max-width: 1023px) {
	.sb-side-nav {
		position: static;
		display: flex;
		flex-direction: column;
	}

	.sb-side-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 24px;
	}

	.sb-side-nav__link {
		min-height: auto;
		padding: 4px 0 4px 12px;
	}
}

/* ── Icon-chip card (About team / PRR features) ───────── */
.sb-icon-card {
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid var(--wp--preset--color--border-card-light);
	border-radius: 10px;
	padding: 40px;
}

@media (max-width: 599px) {
	.sb-icon-card {
		padding: 30px;
	}
}

.sb-icon-card__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 55px;
	height: 55px;
	background: var(--wp--preset--color--bg-peach);
	border-radius: 10px;
}

.sb-icon-card__chip img {
	width: 29px;
	height: 23px;
	object-fit: contain;
}

.sb-icon-card__title {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(20px, 2.75vw, 32px);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-icon-card__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #101820;
}

/* Vertical variant — icon on top, stacked (About "multifaceted team") */
.sb-icon-card--vertical {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 40px 30px;
	background: #ffffff;
	border: 2px solid var(--wp--preset--color--accent-primary);
	border-radius: 10px;
}

/* Horizontal variant — icon + text side by side (PRR "key features") */
.sb-icon-card--horizontal {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.sb-icon-card--horizontal .sb-icon-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-icon-card--horizontal .sb-icon-card__desc {
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--ink);
}

/* ── Editor-only: locked decorative-icon wp:html blocks ───
   Content-migration convention §6b. Gutenberg previews a Custom HTML block's
   content inside a sandboxed <iframe class="components-sandbox"> — real only
   in the editor, never in the rendered page. That iframe has no width of its
   own, so it falls back to the browser's ~300px default replaced-element
   size, completely ignoring .sb-icon-card__chip's real 55px (or the bare
   <img>'s real size in the vertical variant). Next to a flex sibling sharing
   the same row, the oversized iframe eats most of the width and shoves the
   real text sideways — exactly what "text drifting right" in the editor is.
   Confirmed via computed styles read inside the editor-canvas iframe: the
   sandbox iframe itself measures ~294px with no inline style forcing it —
   that's the UA default, not a max-width/auto-margin rule from core.
   Scoped to the specific shared components that hold a locked icon (not
   every .wp-block-html — the sticky side-nav is also a locked wp:html block,
   sits in a CSS-grid column, and doesn't have this problem; capping it too
   would visibly shrink it for no reason). Add a new component here if a
   future page locks an icon inside a container this list doesn't cover. */
.editor-styles-wrapper .sb-icon-card--horizontal > .wp-block-html,
.editor-styles-wrapper .sb-icon-card--vertical > .wp-block-html,
.editor-styles-wrapper .sb-check-sentence > .wp-block-html,
.editor-styles-wrapper .sb-callout > .wp-block-html,
.editor-styles-wrapper .sb-pulsar-sectors__header > .wp-block-html {
	flex-shrink: 0;
	width: fit-content;
}

.editor-styles-wrapper .sb-icon-card--horizontal > .wp-block-html iframe.components-sandbox,
.editor-styles-wrapper .sb-icon-card--vertical > .wp-block-html iframe.components-sandbox,
.editor-styles-wrapper .sb-check-sentence > .wp-block-html iframe.components-sandbox,
.editor-styles-wrapper .sb-callout > .wp-block-html iframe.components-sandbox,
.editor-styles-wrapper .sb-pulsar-sectors__header > .wp-block-html iframe.components-sandbox {
	width: auto;
	max-width: 120px;
}

/* Same sandbox-iframe mechanism, opposite symptom. RAID Calculator/NAS
   Selector batch, 2026-08-11: .sb-nas-tool-wrap is display:flex with the
   locked wizard as its only child, so — unlike the icon cases above, which
   need shrinking — the wp:html flex item sizes to auto content instead of
   stretching, and the sandboxed iframe can't report the wizard's real width
   back out, so it falls back to the same ~300px UA default, rendering the
   whole tool squeezed into a narrow column instead of the full row. Confirmed
   via computed styles in the editor-canvas iframe: stuck at exactly 300px
   regardless of the 730px container. Fix is the mirror image: force the
   flex item to fill instead of capping it. */
.editor-styles-wrapper .sb-nas-tool-wrap > .wp-block-html {
	flex: 1;
}

.editor-styles-wrapper .sb-nas-tool-wrap > .wp-block-html iframe.components-sandbox {
	width: 100%;
}

/* Same mechanism again, Software batch 2026-08-12: .sb-software-ceo__row's
   locked logo card (.sb-software-ceo__card, real width 636px on the front
   end) is a flex row sibling next to a flex:1 text column, so the sandboxed
   iframe's ~300px UA default squeezed the text column instead of holding its
   real card width. Pin the wrapper and iframe to the card's actual width
   instead of either capping or growing it. */
.editor-styles-wrapper .sb-software-ceo__row > .wp-block-html {
	flex-shrink: 0;
	width: 636px;
}

.editor-styles-wrapper .sb-software-ceo__row > .wp-block-html iframe.components-sandbox {
	width: 636px;
}

/* Different mechanism, same family: content-migration batch 6 (homepage),
   2026-08-12. The dark homepage sections' white text relies on the dark
   backdrop painted by .sb-header-bg (texture image, canvas starfield,
   gradient tint, astronaut) — all template-level chrome that wraps
   post_content on the front end but doesn't exist around the isolated
   post-content iframe in the block editor. Converting a dark section into
   editable post_content moves its markup out from under that backdrop,
   so the editor canvas falls back to its default white body — white text
   on white, fully illegible, confirmed via computed styles inside the
   editor-canvas iframe (body background rgb(255,255,255), heading color
   rgb(255,255,255)). Fix is a flat dark fallback, editor-only, matching
   .sb-header-bg's own solid fallback colour — not a recreation of the full
   five-layer stack, just enough for text to read while editing. Add the
   next converted dark section's class here as Stage 2 proceeds. */
.editor-styles-wrapper .sb-data-without-compromise {
	background: #101820;
}

/* ── Stat card (About "the measure of it") ────────────── */
.sb-stat-card {
	background: var(--wp--preset--color--bg-white);
	border: 1px solid var(--wp--preset--color--border-card-light);
	border-radius: 10px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-stat-card__number {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.75vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
	text-box-trim: trim-both;
}

.sb-stat-card__label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
	margin: 0;
}

/* ── Check-sentence (icon + text line) ────────────────── */
.sb-check-sentence {
	display: flex;
	align-items: self-start;
	gap: 16px;
}

.sb-check-sentence svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 6px;
}

.sb-check-sentence span,
.sb-check-sentence p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-check-sentence span {
	font-weight: 600;
}

.sb-check-sentence p {
	font-weight: 400;
}

/* Callout / alert banner variant (tinted background box) */
.sb-callout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--wp--preset--color--bg-pink);
	border-radius: 10px;
	padding: 30px;
	border-left: 3px solid var(--wp--preset--color--accent-primary);
	margin: 34px 0 36px;
}

.sb-callout img,
.sb-callout svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	color: var(--wp--preset--color--accent-primary);
}

.sb-callout p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* Neutral (informational, non-urgent) variant — gray instead of pink */
.sb-callout--neutral {
	background: var(--wp--preset--color--bg-offwhite);
	border-left-color: var(--wp--preset--color--text-gray);
}

.sb-callout--neutral img,
.sb-callout--neutral svg {
	color: var(--wp--preset--color--text-gray);
}

/* ── Light CTA Band (About / PRR) ─────────────────────── */
.sb-light-cta {
	background: var(--wp--preset--color--bg-pink);
	padding-block: 80px;
}

.sb-light-cta__inner {
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.sb-light-cta__mascot {
	width: 194px;
	height: 191px;
	object-fit: contain;
}

/* Content-migration convention: same wp:image scoping trick as .sb-about-hero__image
   above. A converted wp:image puts the class on the <figure>, not the <img>, so the
   rule above (still authoritative for the 6 pages using the raw PHP <img>) can't reach
   it — this re-targets sizing at the figure and lets the inner img fill it. */
.sb-light-cta__mascot.wp-block-image {
	width: 194px;
	height: 191px;
	margin: 0;
}

.sb-light-cta__mascot.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.sb-light-cta__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-light-cta__body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
	max-width: 681px;
	margin: 0;
}

.sb-light-cta__buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	margin-inline: auto;
	width: 768px;
}

.sb-light-cta__buttons .sb-btn-pill:first-child:not(:only-child) {
	flex: 1;
}

/* BUTTON-PARITY-SPEC.md: PRR/Support CTA band first-button stretch,
   converted markup only carries a modifier on .wp-block-button. */
.sb-light-cta__buttons .wp-block-button:first-child:not(:only-child) {
	flex: 1;
}

@media (max-width: 1023px) {
	.sb-light-cta__buttons {
		width: 100%;
		max-width: 768px;
	}
}

@media (max-width: 768px) {
	.sb-light-cta__buttons .sb-btn-pill {
		flex: initial !important;
	}

	.sb-light-cta__buttons .wp-block-button {
		flex: initial !important;
	}
}

@media (max-width: 599px) {
	.sb-light-cta {
		padding-block: 60px;
	}
}

/* ── In-page headings (About / Contact / PRR content blocks) ── */
.sb-light-body__h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	text-align: left;
	margin: 0 0 40px;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-light-body__h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.75vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0 0 20px;
}

.sb-light-body__p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text-black);
	margin: 0 0 24px;
	max-width: 855px;
}

/* ── Shared light-page Hero (About / Contact / PRR) ───── */
.sb-light-hero__inner {
	display: flex;
	gap: 80px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding: 180px clamp(24px, 4vw, 50px) clamp(50px, 4vw, 100px);
}

.sb-light-hero__text {
	flex: 1;
	min-width: 0;
}

.sb-light-hero__text--narrow {
	max-width: 803px;
}

.sb-light-hero__eyebrow {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--eyebrow-light);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-align: left;
	margin: 0 0 16px;
}

.sb-light-hero__eyebrow--center {
	text-align: center;
}

/* Scaled down by the 1440/1512 ratio (~4.76%), scoped to hero contexts
   only — .sb-light-hero__eyebrow is also reused standalone (e.g. the
   About page's "Where we are" section), which must keep the full-size
   eyebrow-light preset. */
.sb-light-hero__inner .sb-light-hero__eyebrow,
.sb-contact-hero__inner .sb-light-hero__eyebrow,
.sb-support-hero__inner .sb-light-hero__eyebrow {
	font-size: clamp(17px, 1.67vw, 27px);
}

.sb-light-hero__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(36px, 5.71vw, 61px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--accent-primary);
	margin: 0 0 40px;
}

.sb-light-hero__lead {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--lead-fluid);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0 0 16px;
}

.sb-light-hero__lead--bold {
	font-weight: 700;
}

.sb-software-hero .sb-light-hero__inner {
	border-bottom: none;
}

.sb-software-hero .sb-light-hero__lead {
	font-size: clamp(18px, 2vw, 22px);
}

.sb-appliances-hero .sb-light-hero__inner {
	border-bottom: none;
}

.sb-appliances-hero .sb-light-hero__lead {
	font-size: clamp(16px, 1.75vw, 20px);
	margin: 0 0 40px;
}

.sb-pulsar-hero .sb-light-hero__lead {
	font-size: clamp(16px, 1.75vw, 20px);
	margin: 0 0 40px;
}

.sb-software-hero__visual {
	position: relative;
	flex-shrink: 0;
	width: 529px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	overflow: visible;
}

.sb-software-hero__visual-img {
	position: absolute;
	top: -40px;
	left: 0;
	width: 150%;
	height: 150%;
	object-fit: contain;
	object-position: top left;
	pointer-events: none;
}

@media (max-width: 1023px) {
	.sb-software-hero__visual-img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* ── Software — CEO Section (light, two-column) ──────────────────── */
.sb-software-ceo__row {
	display: flex;
	align-items: center;
	gap: 29px;
}

.sb-software-ceo__content {
	flex: 1 0 0;
	min-width: 0;
}

.sb-software-ceo__content .sb-pp-header {
	margin-bottom: 0px;
}

.sb-software-ceo__card {
	flex-shrink: 0;
	width: 636px;
	max-width: 100%;
	height: 410px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 80px;
	border: 2px solid var(--wp--preset--color--accent-primary);
	border-radius: 20px;
	overflow: hidden;
}

.sb-software-ceo__card img {
	width: 100%;
	height: auto;
	aspect-ratio: 500.725 / 80;
}

@media (max-width: 1023px) {
	.sb-software-ceo__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-software-ceo__card {
		width: 100%;
	}
}

/* ── Software — Architecture and Technical Capabilities (light) ──── */
.sb-software-architecture .sb-pp-h2 {
	color: var(--wp--preset--color--ink);
}

.sb-software-architecture__subheading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	text-align: center;
	margin: 0 0 40px;
}

@media (max-width: 1023px) {
	.sb-light-hero__inner {
		flex-direction: column;
		padding-top: 120px;
	}

	.sb-light-hero__text {
		max-width: 100%;
	}
}

/* ── About — Hero (Section 01) unique bits ────────────── */
.sb-about-hero__subline {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--subline-fluid);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-gray);
	margin: 0 0 40px;
}

/* Bold declarative subline variant — Appliances / Pulsar heroes */
.sb-about-hero__subline--bold {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--eyebrow-light);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-align: left;
	margin: 0 0 10px;
}

.sb-about-hero__buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 20px;
}

.sb-about-hero__btn-flex {
	flex: initial;
	justify-content: center;
}

.sb-about-hero__image {
	flex-shrink: 0;
	width: 529px;
	max-width: 100%;
	aspect-ratio: 529 / 480;
	background: #d9d9d9;
	border-radius: 10px;
}

/* Content-migration convention: a real wp:image conversion of this slot carries
   the "wp-block-image" class alongside .sb-about-hero__image, which the raw
   role="img" placeholder div never does — so this only ever affects converted
   instances (About hero, About location) and leaves every other page's grey
   placeholder box (Appliances, EU) untouched. */
.sb-about-hero__image.wp-block-image {
	background: transparent;
	overflow: hidden;
	margin: 0;
}

.sb-about-hero__image.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sb-appliances-hero .sb-about-hero__image {
	width: 400px;
	aspect-ratio: 400 / 480;
}

@media (max-width: 1023px) {
	.sb-about-hero__image {
		width: 100%;
	}
}

@media (max-width: 599px) {
	.sb-about-hero__buttons {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Software Hero — same template as About Hero, buttons stacked
      and left-aligned (fit-content) instead of a side-by-side row ─── */
.sb-software-hero__buttons {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-top: 40px;
}

/* ── Shared light-page Body scaffolding (About / PRR) ─── */
.sb-light-body__inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 80px;
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
	align-items: start;
}

.sb-light-body__content {
	max-width: 855px;
	min-width: 0;
}

.sb-light-body__block {
	margin-bottom: 64px;
	scroll-margin-top: 104px;
}

.sb-light-body__block:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.sb-light-body__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sb-light-body__content {
		max-width: 100%;
	}
}

/* ── About — Body (Section 02) unique bits ────────────── */
.sb-about-body__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 599px) {
	.sb-about-body__stats {
		grid-template-columns: 1fr;
	}
}

/* ── About — Founders (Section 03) ────────────────────── */
.sb-founders {
	position: relative;
	margin-top: 0;
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
	padding-block: 100px;
}

.sb-about-team {
	margin-top: 0;
}

.sb-founders::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') center / cover no-repeat;
	opacity: 0.3;
	pointer-events: none;
	z-index: 0;
}

.sb-founders::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(89, 203, 232, 0.5);
	mix-blend-mode: color;
	pointer-events: none;
	z-index: 1;
}

.sb-founders__inner {
	position: relative;
	z-index: 2;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
}

.sb-founders__eyebrow {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--eyebrow-light);
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
	text-align: left;
	margin: 0 0 16px;
}

.sb-founders__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	text-align: left;
	max-width: 900px;
	margin: 0 0 60px;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-founders__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.sb-founders__card {
	padding: 60px 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.20);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	box-shadow: inset 0em 0em 0px 1px rgb(255 255 255 / 20%);
}

.sb-founders__name {
	margin: 0 0 8px;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.5vw, 38px);
	font-weight: 600;
}

.sb-founders__title {
	margin: 0 0 32px;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
}

.sb-founders__bio {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0 0 24px;
}

.sb-founders__linkedin {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
	color: var(--wp--preset--color--accent-blue);
	text-decoration: none;
}

.sb-founders__linkedin:hover {
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.sb-founders__grid {
		grid-template-columns: 1fr;
	}
}

/* ── About — Team (Section 04) ────────────────────────── */
.sb-about-team__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
}

.sb-about-team__header {
	margin-bottom: 60px;
}

.sb-about-team__header .sb-founders__heading {
	max-width: none;
	color: var(--wp--preset--color--ink);
}

.sb-about-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 1300px) {
	.sb-about-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.sb-about-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.sb-about-team__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── About — Location (Section 05) ────────────────────── */
.sb-about-location {
	background: var(--wp--preset--color--bg-offwhite);
}

.sb-about-location .sb-light-hero__eyebrow {
	color: var(--wp--preset--color--accent-primary);
}

.sb-about-location__inner {
	display: flex;
	gap: 80px;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
}

.sb-about-location__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	text-align: left;
	max-width: 900px;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0 0 60px;
}

@media (max-width: 1023px) {
	.sb-about-location__inner {
		flex-direction: column;
	}

	.sb-about-location__inner .sb-about-hero__image {
		width: 100%;
	}
}

/* ── Contact — Hero (Section 01) ──────────────────────── */
.sb-contact-hero__inner {
	text-align: center;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding: 180px clamp(24px, 4vw, 50px) clamp(50px, 4vw, 100px);
}

.sb-contact-hero__body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	max-width: 780px;
	margin-inline: auto;
}

@media (max-width: 599px) {
	.sb-contact-hero__inner {
		padding-top: 120px;
	}
}

/* ── Contact — Details + Form (Section 02) ────────────── */
.sb-contact-details__inner {
	display: flex;
	gap: 80px;
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
	align-items: flex-start;
}

.sb-contact-details__info {
	flex: 1;
	min-width: 0;
}

.sb-contact-details__facts {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-contact-fact {
	background: none;
	border: none;
	align-items: flex-start;
	padding: 0;
}

.sb-contact-fact .sb-icon-card__body {
	gap: 0;
}

.sb-contact-fact__label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-contact-fact__value {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-contact-details__form-card {
	flex: 1;
	min-width: 0;
	background: var(--wp--preset--color--bg-white);
	padding: 60px 40px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border-card-light) 25%, transparent);
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

.sb-contact-form__heading {
	margin: 0 0 30px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.75vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: #101820;
}

@media (max-width: 1023px) {
	.sb-contact-details__inner {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ── Contact Form 7 field chrome ───────────────────────── */
.sb-contact-details__form-card .wpcf7-form p {
	margin: 0;
}

.sb-contact-details__form-card .sb-form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.sb-contact-details__form-card .sb-form-row .sb-form-field {
	flex: 1;
	min-width: 0;
}

.sb-contact-details__form-card .sb-form-field label {
	display: block;
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--annotation);
	font-weight: 700;
	color: var(--wp--preset--color--text-gray);
	margin-bottom: 8px;
}

.sb-form-required {
	color: var(--wp--preset--color--accent-primary);
}

.sb-contact-details__form-card .wpcf7-form-control {
	width: 100%;
	height: 50px;
	padding: 0 20px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 5px;
	background: #ffffff;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.sb-contact-details__form-card select.wpcf7-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3e%3cpath d='M1 1L7 7L13 1' stroke='%23838383' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 20px center;
}

.sb-contact-details__form-card textarea.wpcf7-form-control {
	height: 124px;
	padding: 16px 20px;
	resize: vertical;
}

.sb-contact-details__form-card .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-primary);
}

.sb-contact-details__form-card input[type="submit"] {
	width: 100%;
	background: var(--wp--preset--color--accent-primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 40px;
	padding: 15px 20px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.sb-contact-details__form-card input[type="submit"]:hover {
	opacity: 0.85;
}

.sb-contact-details__form-card .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--accent-primary);
	font-size: 13px;
	font-weight: 400;
	margin-top: 4px;
}

.sb-contact-details__form-card .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 400;
}

@media (max-width: 599px) {

	.sb-contact-details__form-card .sb-form-row,
	.sb-contact-details__form-card .sb-form-row--half {
		flex-direction: column;
		gap: 20px;
	}
}

/* ── Download Demo — Form (Section 02) ─────────────────
   Reuses .sb-contact-details__form-card as-is (same card
   chrome + CF7 field styling as the Contact page) inside a
   narrower, single-column centered wrapper. */
.sb-download-form__inner {
	max-width: 840px;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
}

.sb-download-form__type-row {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

/* CF7 gives the radio group's own wrapper span the shared
   .wpcf7-form-control class (border/height/padding meant for text
   inputs) -- strip that back off here, it's just a layout wrapper. */
.sb-download-form__type-row .wpcf7-form-control.wpcf7-radio {
	display: flex;
	gap: 8px;
	height: auto;
	padding: 0;
	border: none;
	background: none;
}

.sb-download-form__type-row .wpcf7-list-item {
	position: relative;
	margin: 0;
}

.sb-download-form__type-row .wpcf7-list-item-label {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 24px;
	background: var(--wp--preset--color--bg-offwhite);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sb-download-form__type-row input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sb-download-form__type-row input[type="radio"]:checked + .wpcf7-list-item-label {
	background: var(--wp--preset--color--accent-primary);
	border-color: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

.sb-download-form__consent {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--annotation);
	font-weight: 400;
	color: var(--wp--preset--color--text-gray);
	margin: 4px 0 20px;
}

.sb-download-form__consent a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* ── PRR — Hero (Section 01) unique bits ──────────────── */
.sb-prr-hero__programme {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	margin: 16px 0 0;
}

.sb-prr-hero__funding-wrap {
	flex-shrink: 0;
	width: 491px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-self: stretch;
}

.sb-prr-hero__funding {
	flex: 1 0 0;
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 10px;
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-prr-hero__funding-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
}

.sb-prr-hero__funding-lockup img {
	height: 40px;
	width: auto;
}

.sb-prr-hero__funding-caption {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--annotation);
	font-weight: 400;
	text-align: center;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

@media (max-width: 1023px) {
	.sb-prr-hero__funding-wrap {
		width: 100%;
	}
}

/* ── PRR — Body (Sections 02-06) unique bits ──────────── */
.sb-prr-features {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-prr-features .sb-icon-card {
	max-width: 855px;
}

.sb-prr-checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 40px;
	row-gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 599px) {
	.sb-prr-checklist {
		grid-template-columns: 1fr;
	}
}

/* ── Utility: visually hidden ──────────────────────────── */
.sb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Small pill button variant (Support tables) ───────── */
.sb-btn-pill--sm {
	padding: 12px 24px;
	font-size: 16px;
}

/* ══════════════════════════════════════════════════════
   Support Plans (templates/page-support.html)
   ══════════════════════════════════════════════════════ */

/* ── Support — Hero (Section 01) ──────────────────────── */
.sb-support-hero__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 180px clamp(24px, 4vw, 50px) clamp(50px, 4vw, 100px);
	text-align: center;
}

/* Content-migration convention: the raw pattern hard-coded
   style="text-align:center;max-width:1132px;margin-inline:auto" on the h1
   and lead directly. The centering was already redundant (this container
   inherits it), so only the lead's width constraint needed a real home —
   moved here rather than reintroducing inline style on a converted block,
   which a WP save() round-trip has nothing to reproduce it from and would
   flag as invalid. */
.sb-support-hero__inner .sb-light-hero__lead {
	max-width: 1132px;
	margin-inline: auto;
}

.sb-support-hero__buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 40px;
	margin-inline: auto;
	width: 768px;
}

.sb-support-hero__buttons .sb-btn-pill:first-child:not(:only-child) {
	flex: 1;
}

/* BUTTON-PARITY-SPEC.md: wp:button equivalents, Support hero buttons */
.sb-support-hero__buttons .wp-block-button:first-child:not(:only-child) {
	flex: 1;
}

@media (max-width: 1023px) {
	.sb-support-hero__buttons {
		width: 100%;
		max-width: 768px;
	}
}

@media (max-width: 768px) {
	.sb-support-hero__buttons .sb-btn-pill:first-child {
		flex: initial !important;
	}

	.sb-support-hero__buttons .wp-block-button:first-child {
		flex: initial !important;
	}
}

@media (max-width: 599px) {
	.sb-support-hero__inner {
		padding-top: 120px;
	}

	.sb-support-hero__buttons {
		flex-direction: column;
		align-items: center;
	}

	.sb-support-hero__buttons .sb-btn-pill {
		width: fit-content;
		text-align: center;
		justify-content: center;
	}

	.sb-support-hero__buttons .wp-block-button {
		width: fit-content;
		justify-content: center;
	}

	.sb-support-hero__buttons .wp-block-button__link {
		text-align: center;
	}
}

/* ── Support — shared section scaffolding ─────────────── */
.sb-support-section__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
}

.sb-support-section__header {
	max-width: 900px;
	margin-bottom: 60px;
}

.sb-support-appliance {
	background: var(--wp--preset--color--bg-offwhite);
}

.sb-support-section__buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 40px;
}

.sb-support-section__buttons .sb-btn-pill {
	font-weight: 400;
	width: fit-content !important;
}

/* BUTTON-PARITY-SPEC.md issue 2: the two Support table button pairs render
   small — split across wrapper (width) and link (weight). The colour-variant
   compound rules above (~line 3195) target .wp-block-button.sb-btn-pill--X
   .wp-block-button__link — 3 classes — so this needs the wrapper class
   repeated in the chain to tie that specificity and win on source order,
   or font-weight:700 from the compound wins instead. */
.sb-support-section__buttons .wp-block-button {
	width: fit-content !important;
}

.sb-support-section__buttons .wp-block-button .wp-block-button__link {
	font-weight: 400;
}

@media (max-width: 599px) {
	.sb-support-section__buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-support-section__buttons .sb-btn-pill {
		text-align: center;
	}

	.sb-support-section__buttons .wp-block-button__link {
		text-align: center;
	}
}

/* ── Support — comparison table ───────────────────────── */
.sb-plan-table__wrap {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border-card-light) 25%, transparent);
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

/* Round the actual corner cells instead of clipping the wrap with overflow:hidden —
   that was also clipping tooltips that extend past the wrapper on lower rows. */
.sb-plan-table thead tr:first-child th:first-child {
	border-top-left-radius: 10px;
}

.sb-plan-table thead tr:first-child th:last-child {
	border-top-right-radius: 10px;
}

.sb-plan-table tbody tr:last-child th:first-child {
	border-bottom-left-radius: 10px;
}

.sb-plan-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

.sb-plan-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.sb-plan-table th,
.sb-plan-table td {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding: 20px 16px;
}

.sb-plan-table tr:last-child th,
.sb-plan-table tr:last-child td {
	border-bottom: none;
}

.sb-plan-table th:first-child,
.sb-plan-table td:first-child {
	width: 42%;
	text-align: left;
	padding-left: 20px;
}

.sb-plan-table th:not(:first-child),
.sb-plan-table td:not(:first-child) {
	text-align: center;
}

.sb-plan-table thead th {
	background: var(--wp--preset--color--ink);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 21px;
	font-weight: 600;
	border-bottom: none;
}

.sb-plan-table thead th:first-child {
	background: #101820;
}

.sb-plan-table thead th.is-highlighted {
	background: var(--wp--preset--color--accent-primary);
}

.sb-plan-table__included {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
}

.sb-plan-table tbody tr:nth-child(even) {
	background: var(--wp--preset--color--bg-offwhite);
}

.sb-plan-table tbody th[scope='row'] {
	position: relative;
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.sb-plan-table td.is-highlighted {
	background: var(--wp--preset--color--bg-pink);
}

.sb-plan-table__value {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 17px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.sb-plan-table__dash {
	color: var(--wp--preset--color--text-gray);
}

.sb-plan-table svg {
	display: inline-block;
	vertical-align: middle;
}

/* Info tooltip trigger + bubble */
.sb-tooltip-wrap {
	position: relative;
	display: inline-block;
}

.sb-tooltip-trigger {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	margin-left: 8px;
	cursor: pointer;
	color: #525252;
	line-height: 1;
	vertical-align: middle;
	outline: none;
	box-shadow: none;
}

.sb-tooltip-trigger:hover,
.sb-tooltip-trigger:focus {
	color: var(--wp--preset--color--accent-primary);
}

.sb-tooltip-trigger:focus,
.sb-tooltip-trigger:focus-visible {
	outline: none;
	box-shadow: none;
}

.sb-tooltip {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 100%;
	margin-top: 10px;
	margin-left: 10px;
	width: 280px;
	max-width: calc(100vw - 48px);
	background: var(--wp--preset--color--ink);
	backdrop-filter: blur(8px);
	background-color: rgba(16, 24, 32, 0.85) !important;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	padding: 12px 16px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.sb-tooltip-trigger:hover+.sb-tooltip,
.sb-tooltip-trigger:focus+.sb-tooltip,
.sb-tooltip.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Mobile stacked-card fallback (hidden on desktop) */
.sb-plan-table__mobile {
	display: none;
}

@media (max-width: 767px) {
	.sb-plan-table__wrap {
		display: none;
	}

	.sb-plan-table {
		display: none;
	}

	.sb-plan-table__mobile {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
}

.sb-plan-table__card {
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid var(--wp--preset--color--border-card-light);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

.sb-plan-table__card.is-highlighted {
	background: var(--wp--preset--color--bg-pink);
	border-color: var(--wp--preset--color--accent-primary);
}

.sb-plan-table__card-header {
	background: var(--wp--preset--color--ink);
	padding: 20px 16px;
}

.sb-plan-table__card.is-highlighted .sb-plan-table__card-header {
	background: var(--wp--preset--color--accent-primary);
}

.sb-plan-table__card-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 21px;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
}

.sb-plan-table__card-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	padding: 20px 16px;
}

.sb-plan-table__card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.sb-plan-table__card-row:last-child {
	border-bottom: none;
}

.sb-plan-table__card-row dt {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.sb-plan-table__card-row dd {
	margin: 0;
	flex-shrink: 0;
}

/* ── Support — service definitions grid ───────────────── */
.sb-support-definitions__subline {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	color: var(--wp--preset--color--text-gray);
	max-width: 706px;
	margin: 16px 0 0;
}

.sb-support-definitions__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

@media (max-width: 768px) {
	.sb-support-definitions__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 1023px) {
	.sb-support-section__inner .sb-icon-card--horizontal {
		flex-direction: column;
	}
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT / SOLUTION PAGES (dark theme) — shared components
   SanbrickOS Software · Appliances · Pulsar Series · European Data Storage
   Namespaced `sb-pp-*` (Product Pages). Homepage markup/JS conventions
   (accordion toggle, RAF slider, numbered-grid layout, table corner
   rounding) are reused, but recoloured here against the dark theme.json
   tokens — the homepage's own component CSS (.sb-enterprise, .sb-ready,
   .sb-challenges, .sb-validate, .sb-final-cta) is light-toned (white
   cards/sections) despite living on the homepage, so it could not be
   reused unmodified for genuinely dark pages. See PROGRESS.md → "Status
   Overview — Product / Solution Pages".
   ══════════════════════════════════════════════════════════════════ */

/* .sb-btn-pill--accent-fill and .sb-btn-pill--white-fill (dark pages need
   solid variants the block-scoped .sb-btn-primary / .sb-btn-cta-white can't
   provide on a plain <a>) live with the rest of the pill button colour
   variants near the top of this file. */

/* ── Page base + alternating section bands ────────────────────────── */
.sb-pp-page {
	background: var(--wp--preset--color--bg-primary);
}

/* WP core's default wp-block-group margin-bottom leaves a hairline gap
   between adjacent full-width sections; on a white <body> (the theme's
   default) that gap shows as a bright seam between two dark sections.
   Painting the body itself dark on these pages closes the gap. */
body:has(.sb-pp-section) {
	background: var(--wp--preset--color--bg-primary);
}

.sb-pp-section {
	padding-block: clamp(72px, 10vw, 120px);
	background: var(--wp--preset--color--bg-primary);
	position: relative;
}

.sb-pp-section--alt {
	background: var(--wp--preset--color--bg-section);
}

.sb-pp-inner {
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
	align-items: start;
}

/* ── Standard section header block: eyebrow → H2 → optional lead ─── */
.sb-pp-header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}

.sb-pp-header--center {
	align-items: center;
	text-align: center;
}

/* Content-migration convention: a converted wp:paragraph can't carry an
   arbitrary inline max-width style and still pass block validation (save()
   has nothing in its declared attributes to reproduce it from — same
   constraint that moved the Support hero lead's max-width into CSS).
   Every sb-pp-header intro paragraph in the source PHP used this exact
   706px value via inline style (RAID Calculator, NAS Selector, Appliances
   Software), so it's a real convention, not a one-off. */
.sb-pp-header .sb-light-body__p {
	max-width: 706px;
}

.sb-pp-header--center .sb-light-body__p {
	margin-inline: auto;
}

.sb-pp-eyebrow {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(17px, 1.75vw, 28px);
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

.sb-pp-h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 40px;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-pp-lead {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(15px, 1.375vw, 22px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
	max-width: 706px;
	margin: 20px 0 0;
}

.sb-pp-header--center .sb-pp-lead {
	margin-inline: auto;
}

@media (max-width: 599px) {
	.sb-pp-header {
		margin-bottom: 40px;
	}
}

/* ── Card Facts grid (icon + title + body) ────────────────────────── */
.sb-pp-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.sb-pp-cards--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sb-pp-cards--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sb-pp-cards--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

/* Card Series (Minimum Hardware Requirements) — white card, 3px accent
   border, centred icon + title, "Show More" affordance row (matches
   the existing homepage .sb-ready__show-more treatment). Figma node 118:1067. */
.sb-series-card {
	background: #ffffff;
	border: 3px solid var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 23px;
	overflow: hidden;
}

.sb-series-card__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 40px 20px 0;
}

.sb-series-card__icon {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
}

.sb-series-card__title {
	font-family: var(--wp--preset--font-family--lato);
	font-weight: 700;
	font-size: 26px;
	color: var(--wp--preset--color--accent-primary);
	text-align: center;
	margin: 0;
}

@media (min-width: 1023px) and (max-width: 1300px) {
	.sb-series-card__title {
		font-size: clamp(17px, 1.75vw, 26px);
	}
}

.sb-series-card__bottom {
	padding: 0 40px 40px;
	display: flex;
	flex-direction: column;
}

/* Expandable detail panel — collapsed via grid-rows until "Show More"
   is triggered. Same 0fr/1fr row-track trick as .sb-ready__card-details-wrap,
   so it animates smoothly instead of hard show/hide via [hidden]. */
.sb-series-card__details {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	transition: grid-template-rows 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-series-card__details.is-open {
	grid-template-rows: 1fr;
}

.sb-series-card__details-inner {
	overflow: hidden;
	min-height: 0;
	padding-top: 30px;
	transition: padding-top 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-series-card__toggle[aria-expanded="false"]+.sb-series-card__details .sb-series-card__details-inner {
	padding-top: 0;
}

.sb-series-card__details-label {
	font-family: var(--wp--preset--font-family--lato);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}

.sb-series-card__details-list {
	margin: 0 0 20px;
	padding-left: 20px;
	list-style: disc;
}

.sb-series-card__details-list:last-child {
	margin-bottom: 0;
}

.sb-series-card__details-list li {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-gray);
}

.sb-pp-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px;
	background: var(--wp--preset--color--bg-card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.sb-pp-card--sm {
	padding: 30px;
	gap: 16px;
}

.sb-pp-card__icon {
	display: block;
	width: 48px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
}

.sb-pp-card__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-primary);
	margin: 0;
}

.sb-pp-card__body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.sb-pp-card__body strong {
	color: var(--wp--preset--color--text-primary);
}

.sb-pp-card__sub {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}

.sb-pp-card__sub-label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sb-pp-card__link {
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
	text-decoration: none;
}

.sb-pp-card__link:hover {
	text-decoration: underline;
}

.sb-pp-card__link:focus {
	outline: none;
}

@media (max-width: 1023px) {

	.sb-pp-cards,
	.sb-pp-cards--4,
	.sb-pp-cards--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {

	.sb-pp-cards,
	.sb-pp-cards--2,
	.sb-pp-cards--4,
	.sb-pp-cards--5 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── CheckSentence — dark variant ─────────────────────────────────── */
.sb-pp-check {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sb-pp-check svg {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

.sb-pp-check span,
.sb-pp-check p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--text-primary);
	margin: 0;
}

/* ── Callout / alert banner — dark variant ────────────────────────── */
.sb-pp-callout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--wp--preset--color--bg-section);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	padding: 24px 30px;
	margin-top: 30px;
}

.sb-pp-callout--info {
	border-left-color: var(--wp--preset--color--accent-teal);
}

.sb-pp-callout svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	color: var(--wp--preset--color--accent-primary);
}

.sb-pp-callout--info svg {
	color: var(--wp--preset--color--accent-teal);
}

.sb-pp-callout p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--text-primary);
	margin: 0;
}

/* ── Series / Neutron card grid ───────────────────────────────────── */
/* minmax(0, 1fr), not plain 1fr — plain 1fr has an implicit min-width:
   auto, so a track won't shrink below its content's min-content size.
   That caused real horizontal overflow in the ~1024-1200px band (still
   full column count, but not yet enough width for equal 1fr shares). */
.sb-pp-series {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.sb-pp-series--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Series card — white card, 2px accent border, matches every real
   Neutron/Pulsar/Magnetar/Quasar card in Figma (node 118:1772 etc.) */
.sb-pp-series__card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 2px solid var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	padding: 40px;
	gap: 40px;
}

.sb-pp-series__top {
	display: flex;
	align-items: center;
	gap: 40px;
}

.sb-pp-series__branding {
	display: flex;
	align-items: center;
	gap: 13px;
	flex: 1 0 0;
	min-width: 0;
}

.sb-pp-series__logotype {
	display: block;
	height: 45px;
	width: auto;
	max-width: 298px;
	object-fit: contain;
}

.sb-pp-series__symbol--placeholder {
	width: 56px;
	height: 46px;
	border-radius: 6px;
	background: #d9d9d9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 10px;
	color: #101820;
	text-align: center;
	line-height: 1.1;
}

.sb-pp-series__image {
	width: 150px;
	height: 150px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-pp-series__image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sb-pp-series__image--placeholder {
	width: 100%;
	height: 100%;
	background: #d9d9d9;
	border-radius: 8px;
}

.sb-pp-series__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-pp-series__title {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(24px, 2.75vw, 26px);
	font-weight: 600;
	line-height: 1.3;
	color: #212121;
	margin: 0;
}

.sb-pp-series__desc {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-pp-series__checks {
	display: flex;
	flex-direction: column;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}


.sb-pp-series__checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.sb-pp-series__checks svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 8px;
}

.sb-pp-series__bottom {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.sb-pp-series__price {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 24px;
	font-weight: 700;
	color: #212121;
	margin: 0;
}

.sb-pp-series__cta {
	flex-shrink: 0;
}

.sb-pp-series__cta.sb-btn-pill:focus {
	outline: none;
}

/* BUTTON-PARITY-SPEC.md: wp:button equivalent — not on a converted page yet
   (Product pages are batch 4/5), added proactively for parity. Pre-existing
   behaviour, unchanged here: this removes the focus outline with no
   replacement indicator, on both the original and this mirror. */
.sb-pp-series__cta.wp-block-button .wp-block-button__link:focus {
	outline: none;
}

@media (max-width: 1023px) {

	.sb-pp-series,
	.sb-pp-series--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.sb-pp-series {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {

	.sb-pp-series,
	.sb-pp-series--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Series grid — Storage Advisor prompt ─────────────────────────── */
.sb-pp-advisor {
	max-width: 480px;
	margin: 50px auto 0;
	text-align: center;
}

.sb-pp-advisor__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 28px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}

.sb-pp-advisor__text {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--text-gray);
	margin: 0 0 20px;
}

@media (max-width: 1300px) {
	.sb-pp-series__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.sb-pp-series__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-pp-series__image {
		width: 80%;
		margin: 30px auto 0px auto;
	}

	.sb-pp-series__cta {
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 960px) {
	.sb-pp-series__top {
		display: flex;
		align-items: center;
		gap: 40px;
		flex-direction: row;
	}

	.sb-pp-series__bottom {
		margin-top: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-direction: row;
	}

	.sb-pp-series__image {
		width: 150px !important;
		margin: 0 !important;
	}

	.sb-pp-series__cta {
		width: unset;
	}
}

/* ── Appliances — "Not a Closed Product" (dark, Figma node 149:3644) ── */
.sb-appliances-trust {
	position: relative;
	margin-top: 0;
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
}

.sb-appliances-trust::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') center / cover no-repeat;
	opacity: 0.3;
	pointer-events: none;
	z-index: 0;
}

.sb-appliances-trust::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(89, 203, 232, 0.5);
	mix-blend-mode: color;
	pointer-events: none;
	z-index: 1;
}

.sb-appliances-trust .sb-pp-inner {
	position: relative;
	z-index: 2;
}

.sb-appliances-trust .sb-pp-header {
	margin-bottom: 20px;
}

.sb-appliances-trust__lead {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	max-width: 706px;
	margin: 0;
}

.sb-appliances-trust__cards {
	display: flex;
	gap: 40px;
	padding: 50px 0;
}

.sb-appliances-trust__card {
	flex: 1 0 0;
	background: #ffffff;
	border-radius: 10px;
	padding: 60px 30px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.sb-appliances-trust__card h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

.sb-appliances-trust__card p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-appliances-trust__statement {
	border-top: 2px solid var(--wp--preset--color--accent-primary);
	padding-top: 40px;
	text-align: center;
}

.sb-appliances-trust__statement p {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	font-style: italic;
	line-height: 1.3;
	color: #ffffff;
	max-width: 958px;
	margin: 0 auto;
}

/* ── Pulsar — Architecture, three layers (dark, Figma node 149:3953) ─ */
.sb-pulsar-architecture {
	position: relative;
	margin-top: 0;
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
}

.sb-pulsar-hardware {
	margin-top: 0;
}

.sb-pulsar-architecture::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') center / cover no-repeat;
	opacity: 0.3;
	pointer-events: none;
	z-index: 0;
}

.sb-pulsar-architecture::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(89, 203, 232, 0.5);
	mix-blend-mode: color;
	pointer-events: none;
	z-index: 1;
}

.sb-pulsar-architecture .sb-pp-inner {
	position: relative;
	z-index: 2;
}

.sb-pulsar-architecture .sb-pp-lead {
	color: #ffffff;
}

.sb-pulsar-architecture__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.sb-pulsar-architecture__card {
	background: transparent;
	border: 2px solid var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.sb-pulsar-architecture__number {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent-primary);
}

.sb-pulsar-architecture__card h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 20px;
}

.sb-pulsar-architecture__card p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
}

.sb-pulsar-architecture__badge {
	display: inline-block;
	background: var(--wp--preset--color--accent-primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px;
	border-radius: 5px;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-decoration: none;
}

@media (max-width: 1023px) {
	.sb-pulsar-architecture__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Pulsar — Business Impact card facts (Figma node 149:3898) ────── */
.sb-pulsar-impact__card {
	background: #ffffff;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	padding: 40px;
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

.sb-pulsar-impact__card h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0 0 30px;
}

.sb-pulsar-impact__card p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

@media (max-width: 1023px) {
	.sb-pulsar-impact__card {
		flex-direction: column;
	}
}

.sb-pulsar-hardware__cta,
.sb-software-hardware__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* ── Pulsar — By sector (Figma node 149:4001) ─────────────────────── */
.sb-pulsar-sectors__card {
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.sb-pulsar-sectors__header {
	display: flex;
	align-items: center;
	gap: 30px;
}

.sb-pulsar-sectors__header h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-pulsar-sectors__block {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-pulsar-sectors__block--outcome {
	border-top: 1px solid #c8c8c8;
	padding-top: 30px;
}

.sb-pulsar-sectors__label {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-pulsar-sectors__card .sb-pulsar-sectors__block:not(.sb-pulsar-sectors__block--outcome) .sb-pulsar-sectors__label {
	color: #525252;
}

.sb-pulsar-sectors__need {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #525252;
	margin: 0;
}

.sb-pulsar-sectors__outcome {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* ── Pulsar — Four Reasons (Figma node 149:4146) ──────────────────── */
.sb-pulsar-why .sb-pp-eyebrow,
.sb-pulsar-why .sb-pp-h2 {
	text-align: center;
}

.sb-pulsar-why .sb-enterprise__grid--4 {
	gap: 20px;
}

.sb-pulsar-why .sb-enterprise__card {
	padding: 40px;
}

.sb-pulsar-why .sb-enterprise__card img {
	width: 35.615px;
	height: 28.492px;
}

.sb-pulsar-why .sb-enterprise__card h3 {
	font-size: 32px;
	color: var(--wp--preset--color--ink);
}

.sb-pulsar-why .sb-enterprise__card p {
	font-size: 20px;
	font-weight: 400;
}

/* ── Pulsar — Technical Specifications (Figma node 149:4188) ──────── */
.sb-pulsar-specs__card {
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	padding: 40px;
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

@media (max-width: 1023px) {
	.sb-pulsar-specs__card {
		flex-direction: column;
	}
}

.sb-pulsar-specs__card h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0 0 30px;
}

.sb-pulsar-specs__card p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-pulsar-specs__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 60px 0 24px;
}

.sb-pulsar-specs__heading--sm {
	font-size: 30px;
	margin: 0 0 12px;
}

/* ── Pulsar — Support & Services (Figma node 149:4399) ────────────── */
.sb-pulsar-support .sb-pp-eyebrow,
.sb-pulsar-support .sb-pp-h2 {
	text-align: center;
}

.sb-pulsar-support__grid {
	gap: 20px;
}

.sb-pulsar-support__card {
	border: 1px solid #c8c8c8;
}

.sb-pulsar-support__card h3 {
	font-size: 38px;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-pulsar-support__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-pulsar-support__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* ── Pulsar — Final CTA (Figma node 149:4565) ─────────────────────── */
.sb-pulsar-final-cta {
	position: relative;
	margin-top: 0;
	overflow: hidden;
	background: linear-gradient(146deg, #ff5c39 37%, #101820 116%);
}

.sb-pulsar-final-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') center / cover no-repeat;
	opacity: 0.5;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.sb-pulsar-final-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #0d1621 2%, transparent 100%);
	pointer-events: none;
}

.sb-pulsar-final-cta .sb-pp-inner {
	position: relative;
	z-index: 1;
}

.sb-pulsar-final-cta__eyebrow {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(17px, 1.75vw, 28px);
	font-weight: 700;
	color: #ffe3dd;
	margin: 0;
}

.sb-pulsar-final-cta .sb-pp-h2 {
	color: #ffffff;
}

.sb-pulsar-final-cta__panels {
	display: flex;
	gap: 40px;
	width: 100%;
}

.sb-pulsar-final-cta__panel {
	flex: 1 0 0;
	border-radius: 10px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
}

.sb-pulsar-final-cta__panel-head {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sb-pulsar-final-cta__panel--light {
	background: #ffffff;
}

.sb-pulsar-final-cta__panel--dark {
	background: var(--wp--preset--color--ink);
}

.sb-pulsar-final-cta__panel-eyebrow {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 28px;
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

.sb-pulsar-final-cta__panel h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.sb-pulsar-final-cta__panel--light h3 {
	color: #212121;
}

.sb-pulsar-final-cta__panel--dark h3 {
	color: #ffffff;
}

.sb-pulsar-final-cta__panel-body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.sb-pulsar-final-cta__panel--light .sb-pulsar-final-cta__panel-body {
	color: #212121;
}

.sb-pulsar-final-cta__panel--dark .sb-pulsar-final-cta__panel-body {
	color: #ffffff;
}

.sb-pulsar-final-cta__steps {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #212121;
	margin: 0;
	padding-left: 20px;
}

.sb-pulsar-final-cta__steps li {
	margin-bottom: 8px;
}

.sb-pulsar-final-cta__steps li:last-child {
	margin-bottom: 0;
}

.sb-pulsar-final-cta__btn-flex {
	width: 100%;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 600;
}

/* BATCH5-FIXES.md, 2026-08-12: on a converted button the class above lands
   on the wrapper <div>, not the <a> it was written for (still true in
   patterns/pulsar-final-cta.php's raw markup — left untouched above). Real
   computed styles confirmed the mechanism: text-box-trim collapses a block
   with no text of its own to ~11.5px tall (measured via getBoundingClientRect
   with and without the property — 11.57px vs 68.1px), and with the wrapper's
   own overflow:visible, its full-height link renders un-clipped but
   positioned by that collapsed flow, so two buttons in the same row end up
   with overlapping visible boxes instead of sitting side by side. width
   stays on the wrapper — it's the real flex item; everything that has to
   apply to the text itself moves to the link. */
.wp-block-button.sb-pulsar-final-cta__btn-flex {
	text-box-trim: none;
}

.wp-block-button.sb-pulsar-final-cta__btn-flex .wp-block-button__link {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 600;
}

.sb-pulsar-final-cta__buttons {
	display: flex;
	gap: 10px;
	/* A real wp:buttons block carries WP core's own .is-layout-flex class,
	   whose default flex-wrap:wrap this container never had before
	   conversion (the original was a plain, non-block <div>). Combined with
	   both children's width:100%, that wrap default put each button on its
	   own line instead of shrinking them to share the row — confirmed
	   empirically by toggling flex-wrap on the live container and reading
	   the resulting getBoundingClientRect() on both buttons before deciding
	   this was the fix, not by reading the wrap default off a spec page. */
	flex-wrap: nowrap;
}

.sb-pulsar-final-cta__checks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px;
	border-top: 1px solid #ffe3dd;
	margin-top: 40px;
	padding-top: 40px;
}

.sb-pulsar-final-cta__checks .sb-check-sentence span,
.sb-pulsar-final-cta__checks .sb-check-sentence p {
	color: #ffffff;
}

@media (max-width: 1023px) {
	.sb-pulsar-final-cta__panels {
		flex-direction: column;
	}
}

.sb-pulsar-otherseries {
	background: var(--wp--preset--color--bg-pink);
}

.sb-pulsar-otherseries__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 40px;
}

.sb-pulsar-otherseries__footer .sb-light-body__p {
	margin: 0;
}

.sb-pulsar-support__note {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

.sb-pulsar-hero .sb-pp-hero__checks {
	border-top: none;
	max-width: 1440px;
	margin: 0 auto;
	padding: 40px clamp(24px, 4vw, 50px) 100px;
	position: relative;
}

.sb-pulsar-impact {
	margin-top: 0;
}

.sb-pulsar-hero .sb-light-hero__inner {
	padding-bottom: 50px;
}

.sb-pulsar-hero .sb-pp-series__logotype {
	height: 60px;
	max-width: none;
}

.sb-pulsar-impact {
	background: var(--wp--preset--color--bg-offwhite);
}

/* .sb-callout--neutral's own bg-offwhite blends into this section's
   own offwhite background -- needs to stay white here to read as a
   distinct card, same as the 4 fact cards above it. */
.sb-pulsar-impact .sb-callout--neutral {
	background: var(--wp--preset--color--bg-white);
}

@media (max-width: 767px) {
	.sb-appliances-trust__cards {
		flex-direction: column;
	}
}

/* ── Appliances — SanbrickOS Capabilities (Figma node 149:3656) ────
   Off-white bg, borderless shadowed cards, smaller icon, ink titles —
   distinct from the shared .sb-enterprise__card default (white bg,
   orange border/title) used by appliances-what.php and others, so
   these overrides are scoped to this section only. ────────────── */
.sb-appliances-os {
	margin-top: 0;
	background: var(--wp--preset--color--bg-offwhite);
}

.sb-appliances-os .sb-enterprise__grid--4 {
	gap: 20px;
}

.sb-appliances-os .sb-enterprise__card {
	border: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	padding: 40px;
}

.sb-appliances-os .sb-enterprise__card img {
	width: 35.615px;
	height: 28.492px;
}

.sb-appliances-os .sb-enterprise__card h3 {
	font-size: 32px;
	color: var(--wp--preset--color--ink);
}

.sb-appliances-os .sb-enterprise__card p {
	font-size: 20px;
	font-weight: 400;
}

/* ── Appliances — Solutions for Every Sector (Figma node 149:3736) ─
   Off-white/thin-border cards with a peach icon badge, instead of
   the shared .sb-enterprise__card default (white bg, orange border,
   bare icon). Scoped to this section only. ─────────────────────── */
.sb-appliances-sectors .sb-enterprise__card {
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid var(--wp--preset--color--border-card-light);
}

.sb-appliances-sectors .sb-enterprise__card--horizontal {
	gap: 30px;
}

.sb-appliances-sectors .sb-enterprise__card h3 {
	font-size: 32px;
	color: var(--wp--preset--color--ink);
}

.sb-appliances-sectors .sb-enterprise__card p {
	font-weight: 400;
}

.sb-appliances-sectors .sb-pp-card__link {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 20px;
	font-weight: 600;
}

.sb-appliances-sectors__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 55px;
	height: 54.392px;
	padding: 10px;
	border-radius: 10px;
	background: var(--wp--preset--color--bg-peach);
}

.sb-appliances-sectors__icon img {
	width: 28.678px;
	height: 22.942px;
	margin: 0;
}

/* ── Accordion — dark variant (Licensing models + all FAQs) ───────── */
/* Matches the original homepage .sb-pricing__accordions / .sb-accordion
   treatment: 40px gap between items, coloured underline directly on the
   trigger (not a separate item wrapper border), Card-H3-scale title. */
.sb-pp-accordion {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

.sb-pp-accordion-item {
	width: 100%;
}

.sb-pp-accordion-item .sb-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 20px;
	background: none;
	border: none;
	border-bottom: 2px solid var(--wp--preset--color--accent-primary);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.5vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-primary);
	text-align: left;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	transition: color 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-pp-accordion-item .sb-accordion__trigger:hover,
.sb-pp-accordion-item .sb-accordion__trigger[aria-expanded='true'] {
	color: var(--wp--preset--color--accent-primary);
}

.sb-pp-accordion-item .sb-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	transition: grid-template-rows 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-pp-accordion-item .sb-accordion__panel.is-open {
	grid-template-rows: 1fr;
}

.sb-pp-accordion-item .sb-accordion__panel-inner {
	overflow: hidden;
	min-height: 0;
	padding-top: 30px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

.sb-pp-accordion-item .sb-accordion__panel-inner p {
	margin: 0;
}

/* Light variant — Licensing Models / FAQs on light-templated pages */
.sb-pp-accordion--light .sb-pp-accordion-item .sb-accordion__trigger {
	color: var(--wp--preset--color--ink);
}

.sb-pp-accordion--light .sb-pp-accordion-item .sb-accordion__panel-inner {
	color: var(--wp--preset--color--text-gray);
}

/* ── Software — Licensing Models panel content (Figma 149:2922-2924) ─
   Each accordion panel is a tagline/body/price "Card Facts" grid,
   not a plain paragraph. ──────────────────────────────────────────── */
.sb-software-licensing__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding: 20px 10px;
}

.sb-software-licensing__tagline,
.sb-software-licensing__body,
.sb-software-licensing__price {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
}

.sb-software-licensing__tagline {
	grid-column: 1 / span 2;
	padding: 30px;
}

.sb-software-licensing__body,
.sb-software-licensing__price {
	align-items: flex-start;
	padding: 50px 30px;
}

.sb-software-licensing__tagline p {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-software-licensing__body p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-software-licensing__price p {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

@media (max-width: 767px) {
	.sb-software-licensing__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-software-licensing__tagline {
		grid-column: 1;
	}
}

/* ── Appliances / Software FAQ — boxed variant (Figma node 149:3796) ─
   Each item is its own bordered, rounded box (bg-pink when open,
   white when closed) rather than the underline-style .sb-pp-accordion
   used elsewhere. Reuses the shared .sb-accordion easing/JS as-is —
   only the box chrome around it is new. Shared by both FAQ sections;
   .sb-software-faq keeps its own centered header (.sb-pp-header--center)
   while .sb-appliances-faq's header stays left-aligned. ─────────── */
.sb-appliances-faq .sb-pp-accordion,
.sb-software-faq .sb-pp-accordion {
	gap: 10px;
}

.sb-appliances-faq .sb-accordion,
.sb-software-faq .sb-accordion {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 20px 40px;
	transition: background-color 0.4s cubic-bezier(.61, 1, .88, 1), padding 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-appliances-faq .sb-accordion:has(.sb-accordion__trigger[aria-expanded='true']),
.sb-software-faq .sb-accordion:has(.sb-accordion__trigger[aria-expanded='true']) {
	background: var(--wp--preset--color--bg-pink);
	padding: 40px;
}

.sb-appliances-faq .sb-accordion__trigger,
.sb-software-faq .sb-accordion__trigger {
	padding: 0;
	border-bottom: none;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(20px, 2.75vw, 24px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.sb-appliances-faq .sb-accordion__trigger:hover,
.sb-appliances-faq .sb-accordion__trigger[aria-expanded='true'],
.sb-software-faq .sb-accordion__trigger:hover,
.sb-software-faq .sb-accordion__trigger[aria-expanded='true'] {
	color: var(--wp--preset--color--ink);
}

.sb-appliances-faq .sb-accordion__panel-inner,
.sb-software-faq .sb-accordion__panel-inner {
	padding-top: 20px;
	color: var(--wp--preset--color--ink);
}

.sb-appliances-faq .sb-accordion__panel-inner p+p,
.sb-software-faq .sb-accordion__panel-inner p+p {
	margin-top: 10px;
}

/* ── Software — Partners Program banner (Figma node 149:3330) ─────── */
.sb-software-partners .sb-pp-inner {
	padding: 50px clamp(24px, 4vw, 50px) 150px;
}

.sb-software-partners__banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	width: 100%;
	padding: 47px 60px 44px;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(183deg, #ff5c39 51%, #a74227 81%, #101820 149%);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sb-software-partners__banner:hover {
	opacity: 0.9;
}

.sb-software-partners__banner:focus {
	outline: none;
}

.sb-software-partners__banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') center / cover no-repeat;
	opacity: 0.5;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.sb-software-partners__banner h3,
.sb-software-partners__banner p {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: 0;
}

.sb-software-partners__banner h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

.sb-software-partners__banner p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #b4b4b4;
}

@media (max-width: 599px) {
	.sb-software-partners__banner {
		padding: 30px;
	}
}

/* ── Appliances — Final CTA (Figma node 149:3809) ──────────────────
   Two columns: gradient "request a proposal" panel + bordered dark
   "still evaluating" panel. Reuses the .sb-founders starfield-tint
   recipe for both panels' background texture. ───────────────────── */
.sb-appliances-final-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ff5c39 15%, #211e1e 100%);
}

.sb-appliances-final-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') center / cover no-repeat;
	opacity: 0.5;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.sb-appliances-final-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(50px, 4vw, 100px) clamp(24px, 4vw, 50px);
	display: flex;
	gap: 80px;
	align-items: center;
}

.sb-appliances-final-cta__primary {
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.sb-appliances-final-cta__primary h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
}

.sb-appliances-final-cta__primary p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
}

.sb-appliances-final-cta__secondary {
	flex: 1 0 0;
	position: relative;
	overflow: hidden;
	min-height: 535px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	border: 3px solid var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	padding: 40px;
	background-color: var(--wp--preset--color--ink);
}

.sb-appliances-final-cta__secondary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/seriesbg.avif') center / cover no-repeat;
	opacity: 0.3;
	pointer-events: none;
}

.sb-appliances-final-cta__secondary::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 32, 0.7);
	pointer-events: none;
}

.sb-appliances-final-cta__secondary>* {
	position: relative;
	z-index: 1;
}

.sb-appliances-final-cta__secondary h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	margin: 0;
}

.sb-appliances-final-cta__secondary p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
}

.sb-appliances-final-cta__buttons {
	display: flex;
	gap: 10px;
	width: 100%;
}

.sb-appliances-final-cta__buttons .sb-btn-pill {
	flex: 1 0 0;
	padding: 15px 20px;
	font-size: 16px;
}

/* BUTTON-PARITY-SPEC.md: wp:button equivalent, not converted yet (batch 4),
   added proactively — split flex (wrapper) from size (link). Chain repeats
   .wp-block-button so this ties (and wins on source order against) the
   colour-variant compound rules above, which also set padding/font-size
   at 3-class specificity. */
.sb-appliances-final-cta__buttons .wp-block-button {
	flex: 1 0 0;
}

.sb-appliances-final-cta__buttons .wp-block-button .wp-block-button__link {
	padding: 15px 20px;
	font-size: 16px;
}

@media (max-width: 1023px) {
	.sb-appliances-final-cta__inner {
		flex-direction: column;
		gap: 40px;
	}
}

@media (max-width: 599px) {
	.sb-appliances-final-cta__buttons {
		flex-direction: column;
		/* Once the axis flips, align-items controls width instead of height —
		   without this the buttons stretch full-width. Fourth time this exact
		   omission has caused a bug here; see CONTENT-CONVENTION-DRAFT.md §6b. */
		align-items: flex-start;
	}
}

/* ── Numbered Path Grid — dark variant (Advantages / 5 CEO questions) */
.sb-pp-challenges {
	position: relative;
}

.sb-pp-challenges__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 150px;
	row-gap: 60px;
	position: relative;
}

.sb-pp-challenges__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 10px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3csvg width='10' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='5' y1='0' x2='5' y2='100%25' stroke='%23f26440' stroke-width='6' stroke-dasharray='6%2c 20' stroke-linecap='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 10px 100%;
}

.sb-pp-challenges__image {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.sb-pp-challenges__image-inner {
	width: 100%;
	height: 100%;
	background: #d9d9d9;
	border-radius: 10px;
	position: relative;
}

.sb-pp-challenges__image-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.sb-pp-challenges__astronaut-wrap {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.sb-pp-challenges__astronaut {
	position: sticky;
	top: 50vh;
	display: block;
	width: 100px;
	height: 100px;
	object-fit: contain;
	transform: translatey(0px);
	animation: float 3.4s ease-in-out infinite;
}

.sb-pp-challenges__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 30px;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.sb-pp-challenges__item--right {
	text-align: right;
	align-items: flex-end;
}

.sb-pp-challenges__number {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent-primary);
	display: block;
}

.sb-pp-challenges__q {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(24px, 2.5vw, 38px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-primary);
	margin: 0;
}

.sb-pp-challenges__a {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 10px;
}

.sb-pp-challenges__a strong {
	color: var(--wp--preset--color--accent-teal);
	font-weight: 700;
}

/* Light variant — Software Advantages / EU Questions on light-templated pages */
.sb-software-advantages .sb-pp-challenges__q {
	color: var(--wp--preset--color--ink);
}

.sb-software-advantages .sb-pp-challenges__a {
	color: var(--wp--preset--color--ink);
}

.sb-software-advantages .sb-pp-challenges__a strong {
	color: var(--wp--preset--color--accent-primary);
}

.sb-eu-questions .sb-pp-challenges__q {
	color: var(--wp--preset--color--ink);
}

.sb-eu-questions .sb-pp-challenges__a {
	color: var(--wp--preset--color--text-gray);
}

.sb-pp-challenges__item[data-col='1'],
.sb-pp-challenges__image[data-col='1'] {
	grid-column: 1;
}

.sb-pp-challenges__item[data-col='2'],
.sb-pp-challenges__image[data-col='2'] {
	grid-column: 2;
}

.sb-pp-challenges__item[data-row='1'],
.sb-pp-challenges__image[data-row='1'] {
	grid-row: 1;
}

.sb-pp-challenges__item[data-row='2'],
.sb-pp-challenges__image[data-row='2'] {
	grid-row: 2;
}

.sb-pp-challenges__item[data-row='3'],
.sb-pp-challenges__image[data-row='3'] {
	grid-row: 3;
}

.sb-pp-challenges__item[data-row='4'],
.sb-pp-challenges__image[data-row='4'] {
	grid-row: 4;
}

.sb-pp-challenges__item[data-row='5'],
.sb-pp-challenges__image[data-row='5'] {
	grid-row: 5;
}

@media (max-width: 767px) {
	.sb-pp-challenges__grid {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}

	.sb-pp-challenges__item,
	.sb-pp-challenges__item--right {
		grid-column: 1 !important;
		text-align: left;
		align-items: flex-start;
		padding: 0;
		margin-top: 30px;
	}

	.sb-pp-challenges__image {
		grid-column: 1 !important;
	}

	.sb-pp-challenges__line,
	.sb-pp-challenges__astronaut-wrap {
		display: none;
	}

	/* reorder so each text block is immediately followed by its own image,
	   matching the .sb-challenges mobile fix */
	.sb-pp-challenges__item[data-row='1'] {
		grid-row: 1;
	}

	.sb-pp-challenges__image[data-row='1'] {
		grid-row: 2;
	}

	.sb-pp-challenges__item[data-row='2'] {
		grid-row: 3;
	}

	.sb-pp-challenges__image[data-row='2'] {
		grid-row: 4;
	}

	.sb-pp-challenges__item[data-row='3'] {
		grid-row: 5;
	}

	.sb-pp-challenges__image[data-row='3'] {
		grid-row: 6;
	}

	.sb-pp-challenges__item[data-row='4'] {
		grid-row: 7;
	}

	.sb-pp-challenges__image[data-row='4'] {
		grid-row: 8;
	}

	.sb-pp-challenges__item[data-row='5'] {
		grid-row: 9;
	}

	.sb-pp-challenges__image[data-row='5'] {
		grid-row: 10;
	}
}

/* ── Slider — dark variant (Storage Capabilities) ─────────────────── */
.sb-pp-slider {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sb-pp-slider__progress {
	display: flex;
	width: 100%;
	height: 10px;
	background: #d9d9d9;
	border-radius: 10px;
}

.sb-pp-slider__progress-segment {
	flex: 1;
	height: 100%;
	background: var(--wp--preset--color--accent-primary);
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.sb-pp-slider__progress-segment.is-active {
	opacity: 1;
}

.sb-pp-slider__slides-wrap {
	display: grid;
}

.sb-pp-slider__slide {
	grid-area: 1 / 1;
	display: flex;
	gap: 60px;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.sb-pp-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.sb-pp-slider__image {
	flex: 1;
	aspect-ratio: 4 / 3;
	background: #d9d9d9;
	border-radius: 10px;
	min-width: 0;
}

.sb-pp-slider__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.sb-pp-slider__content h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	margin: 0;
}

.sb-pp-slider__content p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* Light variant — Storage Capabilities slider on light-templated pages */
.sb-software-capabilities .sb-pp-slider__content h3 {
	color: var(--wp--preset--color--ink);
}

.sb-software-capabilities h2 {
	margin: 0;
}

/* Pulsar hero — light price card (About-hero template) */
.sb-pulsar-hero__price-card {
	flex-shrink: 0;
	width: 629px;
	max-width: 100%;
	background: var(--wp--preset--color--bg-pink);
	border: 1px solid #ffe3dd;
	border-radius: 10px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.sb-pulsar-hero__price-card-label-wrap {
	display: flex;
	width: 100%;
}

.sb-pulsar-hero__price-card-label {
	display: inline-block;
	background: var(--wp--preset--color--accent-primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 700;
	padding: 12px;
	border-radius: 5px;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-decoration: none;
}

.sb-pulsar-hero__price-card-image {
	width: 100%;
	max-height: 300px;
	object-fit: contain;
}

.sb-pulsar-hero__price-card-price {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.sb-pulsar-hero__price-card-from,
.sb-pulsar-hero__price-card-note {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.sb-pulsar-hero__price-card-amount {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.sb-pp-slider__controls {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
}

.sb-pp-slider__prev,
.sb-pp-slider__next {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 44px;
	height: 44px;
	transition: opacity 0.2s ease;
}

.sb-pp-slider__prev:hover,
.sb-pp-slider__next:hover {
	opacity: 0.6;
}

@media (max-width: 767px) {
	.sb-pp-slider__slide {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}

	.sb-pp-slider__image {
		flex: none;
		width: 100%;
	}

	.sb-pp-slider__content {
		flex: none;
	}
}

/* ── Hero — two-column variant (product image / price card at right) */
.sb-pp-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 60px;
	align-items: center;
}

.sb-pp-hero__visual {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #d9d9d9;
	border-radius: 16px;
}

.sb-pp-hero__badge {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--wp--preset--color--accent-primary);
	border-radius: 40px;
	color: var(--wp--preset--color--accent-primary);
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

.sb-pp-hero__subeyebrow {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 16px;
}

.sb-pp-hero__price-card {
	background: var(--wp--preset--color--bg-card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	text-align: center;
}

.sb-pp-hero__price-card-label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-primary);
}

.sb-pp-hero__price-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #d9d9d9;
	border-radius: 10px;
}

.sb-pp-hero__price-card-price {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 32px;
	font-weight: 700;
	color: var(--wp--preset--color--text-primary);
	margin: 0;
}

.sb-pp-hero__price-card-note {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.sb-pp-hero__checks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 40px;
	margin-top: 60px;
	padding-top: 40px;
	max-width: 900px;
}

/* Content-migration convention: a converted wp:group can't carry an
   arbitrary inline max-width style and still pass block validation (same
   constraint as the .sb-pp-header .sb-light-body__p rule above). Scoped to
   Appliances only — Pulsar's hero already has its own separate override
   (.sb-pulsar-hero .sb-pp-hero__checks, ~line 6286, max-width:1440px),
   unrelated to this migration and unaffected by this rule. */
.sb-appliances-hero .sb-pp-hero__checks {
	max-width: none;
}

/* Same block-validation constraint, batch 4 (Appliances/EU): each of these
   was a bare inline-styled <div> in the source PHP with no class of its
   own — a converted wp:group can't carry that inline style and still pass
   validation, so each gets a real, named class instead. */
.sb-appliances-what__intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	margin-bottom: 60px;
}

.sb-eu-regulatory__cards {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.sb-pp-closing-line {
	margin-top: 40px;
}

.sb-pp-inline-cta {
	margin-top: 20px;
}

@media (max-width: 1023px) {
	.sb-pp-hero__grid {
		grid-template-columns: 1fr;
	}

	.sb-pp-hero__checks {
		grid-template-columns: 1fr;
	}
}

/* ── Dark CTA band (mid-page + final, all 4 product pages) ───────── */
.sb-pp-cta {
	position: relative;
	background: linear-gradient(183deg, #ff5c39 -20.88%, #a74227 60.54%, #101820 124.09%);
	overflow: hidden;
}

.sb-pp-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/header.avif') center / cover no-repeat;
	opacity: 0.25;
	pointer-events: none;
}

.sb-pp-cta__inner {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(60px, 8vw, 100px) clamp(24px, 4vw, 50px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.sb-pp-cta__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 600;
	color: #ffffff;
	margin: 0;
}

.sb-pp-cta__lead {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 400;
	color: #ffffff;
	max-width: 706px;
	margin: 0;
}

.sb-pp-cta__buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 16px;
	position: relative;
	z-index: 1;
}

.sb-pp-cta__astronaut {
	position: absolute;
	right: clamp(0px, 4vw, 60px);
	bottom: 0;
	width: clamp(200px, 20vw, 320px);
	pointer-events: none;
	opacity: 0.9;
}

@media (max-width: 767px) {
	.sb-pp-cta__astronaut {
		display: none;
	}
}

/* ── Dark comparison / data table (sb-dtable) ─────────────────────── */
.sb-dtable__wrap {
	position: relative;
}

.sb-dtable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--bg-card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

/* Round the actual corner cells instead of clipping the wrap with
   overflow:hidden — that would also clip the info-note / callout that
   can sit just below the table (see Support-Plans tooltip-clipping bug
   in PROGRESS.md — same fix applied here from the start). */
.sb-dtable thead tr:first-child th:first-child {
	border-top-left-radius: 10px;
}

.sb-dtable thead tr:first-child th:last-child {
	border-top-right-radius: 10px;
}

.sb-dtable tbody tr:last-child th:first-child,
.sb-dtable tbody tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}

.sb-dtable tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

.sb-dtable th,
.sb-dtable td {
	padding: 20px 24px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--lato);
	font-size: 16px;
	font-weight: 400;
	text-align: center;
}

.sb-dtable tr:last-child th,
.sb-dtable tr:last-child td {
	border-bottom: none;
}

.sb-dtable th:first-child,
.sb-dtable td:first-child {
	text-align: left;
}

.sb-dtable thead th {
	background: var(--wp--preset--color--bg-section);
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 16px;
}

.sb-dtable thead th.is-highlighted {
	background: var(--wp--preset--color--accent-primary);
	color: #ffffff;
}

.sb-dtable tbody th[scope='row'] {
	text-align: left;
	color: var(--wp--preset--color--text-primary);
	font-weight: 700;
	background: none;
}

.sb-dtable td {
	color: var(--wp--preset--color--text-secondary);
}

.sb-dtable td.is-highlighted {
	background: color-mix(in srgb, var(--wp--preset--color--accent-primary) 12%, transparent);
	color: var(--wp--preset--color--text-primary);
	font-weight: 600;
}

.sb-dtable tbody tr:nth-child(even) td:not(.is-highlighted) {
	background: color-mix(in srgb, var(--wp--preset--color--bg-section) 60%, transparent);
}

.sb-dtable__note {
	margin-top: 20px;
}

/* Mobile — stacked cards, real <table> hidden ≤767px (re-grouping
   row-major → column-major markup isn't possible with CSS alone) */
.sb-dtable__mobile {
	display: none;
}

@media (max-width: 767px) {
	.sb-dtable__wrap {
		display: none;
	}

	.sb-dtable__mobile {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
}

.sb-dtable__card {
	background: var(--wp--preset--color--bg-card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
}

.sb-dtable__card.is-highlighted {
	border-color: var(--wp--preset--color--accent-primary);
	border-width: 2px;
}

.sb-dtable__card-header {
	background: var(--wp--preset--color--bg-section);
	padding: 16px 20px;
}

.sb-dtable__card.is-highlighted .sb-dtable__card-header {
	background: var(--wp--preset--color--accent-primary);
}

.sb-dtable__card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 18px;
	color: var(--wp--preset--color--text-primary);
}

.sb-dtable__card-list {
	margin: 0;
	padding: 0 20px;
}

.sb-dtable__card-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.sb-dtable__card-row:last-child {
	border-bottom: none;
}

.sb-dtable__card-row dt {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
}

.sb-dtable__card-row dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--text-primary);
	text-align: right;
}

/* ── Regulatory split card (sb-reg-card) — EU Data Storage only ───── */
.sb-reg-card {
	display: flex;
	align-items: stretch;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

.sb-reg-card__left {
	flex: 0 0 clamp(240px, 26vw, 376px);
	padding: 40px 30px;
	background: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: center;
}

.sb-reg-card__left-top {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-reg-card__acronym {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(28px, 3.5vw, 38px);
	font-weight: 600;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

.sb-reg-card__status {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--bg-offwhite);
	text-transform: uppercase;
}

.sb-reg-card__fullname {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	margin: 0;
}

.sb-reg-card__right {
	flex: 1;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 50px;
	min-width: 0;
	justify-content: center;
}

.sb-reg-card__intro {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 22px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
	font-weight: 400;
}

.sb-reg-card__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.sb-reg-card__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.sb-reg-card__item svg {
	flex-shrink: 0;
	margin-top: 4px;
}

.sb-reg-card__item-text {
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 0;
}

.sb-reg-card__item-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.sb-reg-card__item-body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
	font-weight: 400;
}

/* .sb-callout normally carries its own vertical margin for prose
   contexts; here .sb-reg-card__right's flex gap already spaces it */
.sb-reg-card__right .sb-callout {
	margin: 0;
}

@media (max-width: 1023px) {
	.sb-reg-card {
		flex-direction: column;
	}

	.sb-reg-card__left {
		flex: none;
	}
}

@media (max-width: 599px) {
	.sb-reg-card__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Software — Meet SanbrickOS datasheet CTA (genuinely dark band,
      independent section, Figma node 118:1583) ─────────────────────── */
.sb-software-meet {
	margin-top: 0;
	background: #101820;
	padding-block: 100px;
}

.sb-software-ceo,
.sb-software-faq {
	margin-top: 0;
}

.sb-software-meet__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(24px, 4vw, 50px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
}

.sb-software-meet__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
}

.sb-software-meet__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 1055px;
}

.sb-software-meet__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	margin: 0;
}

.sb-software-meet__body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
}

.sb-software-meet__tagline {
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

/* ── RAID Calculator page (Figma node 149:5099) ───────────────────── */

.sb-raid-hero__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 180px clamp(24px, 4vw, 50px) clamp(50px, 4vw, 100px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.sb-raid-hero__eyebrow {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 27px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-raid-hero__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(34px, 4.76vw, 61px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--accent-primary);
	margin: 0;
}

.sb-raid-hero__lead {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* Calculator widget shell */
.sb-raid-calc {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	margin-top: 50px;
}

.sb-raid-calc__form {
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sb-raid-calc__fields {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.sb-raid-calc__field {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-raid-calc__field label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--text-gray);
}

.sb-raid-calc__field input {
	height: 50px;
	border: 1px solid var(--wp--preset--color--border-card-light);
	border-radius: 5px;
	padding: 0 20px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: #ffffff;
}

.sb-raid-calc__select {
	appearance: none;
	height: 50px;
	border: 1px solid var(--wp--preset--color--border-card-light);
	border-radius: 5px;
	padding: 0 44px 0 20px;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5' fill='none'%3e%3cpath d='M1 1l4 3 4-3' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 20px center;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	width: 100%;
}

.sb-raid-calc__tags-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-raid-calc__tags-label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--text-gray);
	margin: 0;
}

.sb-raid-calc__tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.sb-raid-calc__tag {
	padding: 12px 20px;
	border-radius: 40px;
	border: 1px solid var(--wp--preset--color--text-gray);
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--text-gray);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-decoration: none;
	transition: background-color 0.4s cubic-bezier(.61, 1, .88, 1), border-color 0.4s cubic-bezier(.61, 1, .88, 1), color 0.4s cubic-bezier(.61, 1, .88, 1);
}

.sb-raid-calc__tag:focus {
	outline: none;
}

.sb-raid-calc__tag.is-active {
	background: var(--wp--preset--color--bg-pink);
	border: 2px solid var(--wp--preset--color--accent-primary);
	color: #a74227;
	padding: 11px 19px;
}

/* Results table */
.sb-raid-calc__table-header,
.sb-raid-calc__table-row {
	display: grid;
	grid-template-columns: 0.5fr 1fr 1fr 1fr 0.75fr;
}

.sb-raid-calc__table-header {
	background: var(--wp--preset--color--ink);
}

.sb-raid-calc__table-header span {
	padding: 30px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 22px;
	font-weight: 600;
	color: #ffffff;
}

.sb-raid-calc__table-row {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.sb-raid-calc__table-row>span {
	padding: 30px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
}

.sb-raid-calc__cell--bold {
	font-weight: 700 !important;
}

.sb-raid-calc__cell--muted {
	font-style: italic;
	color: var(--wp--preset--color--text-gray);
}

.sb-raid-calc__table-row[hidden] {
	display: none;
}

.sb-raid-calc__table-empty {
	margin: 0;
	padding: 40px 30px;
	text-align: center;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--text-gray);
}

.sb-raid-calc__table-empty[hidden] {
	display: none;
}

.sb-raid-calc__efficiency {
	gap: 20px;
}

.sb-raid-calc__efficiency-bar {
	display: block;
	width: 100px;
	height: 10px;
	border-radius: 10px;
	background: #d9d9d9;
	overflow: hidden;
	flex-shrink: 0;
}

.sb-raid-calc__efficiency-fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent-primary);
	border-radius: 10px;
}

/* Recommendation + assumptions */
.sb-raid-calc__results {
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sb-raid-calc__recommendation {
	background: var(--wp--preset--color--bg-offwhite);
	border-left: 5px solid var(--wp--preset--color--ink);
	border-radius: 10px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-raid-calc__recommendation--pending {
	background: #ffe3dd;
	border-left-color: var(--wp--preset--color--accent-primary);
}

.sb-raid-calc__recommendation-label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	color: #525252;
	margin: 0;
}

.sb-raid-calc__recommendation-title {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 14px;
}

.sb-raid-calc__recommendation h3 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-raid-calc__recommendation-badge {
	background: var(--wp--preset--color--accent-primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px;
	border-radius: 5px;
	line-height: 1;
}

.sb-raid-calc__recommendation p {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	color: #525252;
	margin: 0;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sb-raid-calc__assumptions {
	background: var(--wp--preset--color--bg-offwhite);
	border: 0.5px solid var(--wp--preset--color--border-card-light);
	border-radius: 10px;
	padding: 30px;
}

.sb-raid-calc__assumptions-trigger {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.sb-raid-calc__assumptions-trigger span {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.sb-raid-calc__assumptions-trigger svg {
	flex-shrink: 0;
	width: 23px;
	height: 23px;
}

.sb-raid-calc__assumptions .sb-accordion__panel-inner {
	padding-top: 30px;
}

.sb-raid-calc__assumptions .sb-accordion__panel-inner ul {
	margin: 0;
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sb-raid-calc__assumptions .sb-check-sentence {
	gap: 10px;
}

.sb-raid-calc__assumptions .sb-check-sentence svg {
	width: 15px;
	height: 15px;
	margin-top: 3px;
}

.sb-raid-calc__assumptions .sb-check-sentence span {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 767px) {

	.sb-raid-calc__table-header,
	.sb-raid-calc__table-row {
		grid-template-columns: 1fr 1fr;
	}

	.sb-raid-calc__table-header span:nth-child(4),
	.sb-raid-calc__table-header span:nth-child(5),
	.sb-raid-calc__table-row span:nth-child(4),
	.sb-raid-calc__table-row span:nth-child(5) {
		display: none;
	}
}

/* ── NAS Selector page (Figma node 230:6875) ──────────────────────── */

.sb-nas-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

@media (max-width: 767px) {
	.sb-nas-why__grid {
		grid-template-columns: 1fr;
	}
}

.sb-nas-tool-wrap {
	display: flex;
	justify-content: center;
}

.sb-nas-card {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	max-width: 1000px;
	width: 100%;
}

.sb-nas-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 40px;
	border-bottom: 0.5px solid var(--wp--preset--color--border-light);
}

.sb-nas-card__step {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--text-gray);
	margin: 0;
}

.sb-nas-progress {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sb-nas-dot {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 15px;
	background: var(--wp--preset--color--border-light);
	transition: width 0.3s ease, background-color 0.3s ease;
}

.sb-nas-dot.is-active {
	width: 35px;
	background: var(--wp--preset--color--accent-primary);
}

.sb-nas-card__body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 40px 40px 0;
}

.sb-nas-question__text {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-nas-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-nas-option {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
	padding: 19px 28px;
	background: #ffffff;
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: 15px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.sb-nas-option.is-selected {
	background: var(--wp--preset--color--bg-pink);
	border: 3px solid var(--wp--preset--color--accent-primary);
	padding: 18px 29px;
}

.sb-nas-option__radio {
	flex-shrink: 0;
	display: block;
	width: 25px;
	height: 25px;
	margin-top: 3px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--border-light);
	box-sizing: border-box;
	position: relative;
}

.sb-nas-option.is-selected .sb-nas-option__radio {
	border: 7px solid var(--wp--preset--color--accent-primary);
}

.sb-nas-option__text {
	display: flex;
	flex-direction: column;
	gap: 0px;
	flex: 1 0 0;
}

.sb-nas-option__label {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.sb-nas-option__sub {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-gray);
}

.sb-nas-card__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	padding: 30px 40px;
}

.sb-nas-card__footer.is-final {
	justify-content: flex-start;
}

.sb-nas-card__footer.has-back {
	justify-content: space-between;
}

/* Recommendation link — reuses .sb-raid-calc__recommendation for the box
   itself (identical bg/border-left/label/title/body treatment); this is
   the one addition the NAS Selector needs, a bold link inside that box. */
.sb-nas-reco__link {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.sb-nas-reco__link:hover {
	text-decoration: underline;
}

.sb-nas-tech {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding: 40px;
	background: var(--wp--preset--color--bg-offwhite);
	border: 1px solid var(--wp--preset--color--border-card-light);
	border-radius: 10px;
}

.sb-nas-tech__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 0 0;
}

.sb-nas-tech__label {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	color: #525252;
	margin: 0;
}

.sb-nas-tech__name {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-nas-tech__body {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 20px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

@media (max-width: 599px) {

	.sb-nas-card__header,
	.sb-nas-card__body,
	.sb-nas-card__footer {
		padding-inline: 24px;
	}

	.sb-nas-option {
		padding: 20px;
	}

	.sb-nas-option.is-selected {
		padding: 19px;
	}

	.sb-nas-tech {
		flex-direction: column;
		padding: 24px;
	}

	.sb-nas-card__footer {
		flex-wrap: wrap;
	}

	.sb-nas-card__footer .sb-btn-pill {
		width: 100%;
	}

	/* BUTTON-PARITY-SPEC.md: wp:button equivalent, not converted yet
	   (batch 3, NAS Selector), added proactively. */
	.sb-nas-card__footer .wp-block-button {
		width: 100%;
	}
}

/* ══════════════════════════════════════════════════════
   Dev Reference (templates/page-dev-reference.html) —
   internal-only pattern index, not part of the public site
   ══════════════════════════════════════════════════════ */
/* This page mixes patterns from every product page, some of which flip
   body background dark via body:has(.sb-pp-section) — force it back to
   white here regardless of which patterns happen to be present. */
body:has(.sb-devref__content) {
	background: #ffffff !important;
}

.sb-devref__toc {
	position: fixed;
	top: 80px;
	left: 0;
	width: 280px;
	height: calc(100vh - 80px);
	overflow-y: auto;
	background: #101820;
	color: #f9f9f9;
	padding: 24px 20px 60px;
	box-sizing: border-box;
	z-index: 50;
	font-family: var(--wp--preset--font-family--lato);
}

.sb-devref__toc-heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 6px;
}

.sb-devref__toc-progress {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
	margin: 0 0 20px;
}

.sb-devref__toc-group {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--accent-primary);
	margin: 20px 0 8px;
}

.sb-devref__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sb-devref__toc-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sb-devref__toc-check-wrap {
	display: flex;
	flex-shrink: 0;
	cursor: pointer;
}

.sb-devref__toc-check {
	width: 15px;
	height: 15px;
	accent-color: var(--wp--preset--color--accent-primary);
	cursor: pointer;
}

.sb-devref__toc-list a {
	display: flex;
	flex: 1;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: #d8d8d8;
	text-decoration: none;
	padding: 4px 6px;
	border-radius: 4px;
}

.sb-devref__toc-list a:hover,
.sb-devref__toc-list a:focus {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	outline: none;
}

.sb-devref__toc-item.is-done a {
	color: #6b6b6b;
	text-decoration: line-through;
}

.sb-devref__toc-badge {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--wp--preset--color--accent-primary);
}

.sb-devref__content {
	margin-left: 280px;
	padding: 40px;
	box-sizing: border-box;
}

.sb-devref__group-heading {
	margin: 60px 0 20px;
	padding-top: 40px;
	border-top: 3px solid var(--wp--preset--color--ink);
}

.sb-devref__group-heading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.sb-devref__group-heading h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 28px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sb-devref__meta {
	background: #f9f9f9;
	border: 1px dashed #c8c8c8;
	border-radius: 6px;
	padding: 14px 18px;
	margin: 32px 0 12px;
}

.sb-devref__meta-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 4px;
}

.sb-devref__meta-title code {
	font-family: monospace;
	font-size: 13px;
	font-weight: 400;
	color: #525252;
	background: #ffffff;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	padding: 2px 6px;
	margin-left: 8px;
}

.sb-devref__meta-loc {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	color: #525252;
	margin: 0;
}

.sb-devref__meta.is-done {
	background: #eafaf0;
	border: 1px solid #4caf7d;
	border-style: solid;
}

.sb-devref__meta--empty {
	background: #fff8e1;
	border: 1px solid #e0a800;
	border-style: solid;
}

.sb-devref__meta-warning {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 13px;
	font-weight: 700;
	color: #8a6500;
	margin: 8px 0 0;
}

.sb-devref__meta.is-done .sb-devref__meta-title::after {
	content: '✓ Reviewed';
	margin-left: 10px;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 12px;
	font-weight: 700;
	color: #2e7d51;
}

@media (max-width: 1023px) {
	.sb-devref__toc {
		position: static;
		width: 100%;
		height: auto;
	}

	.sb-devref__content {
		margin-left: 0;
	}
}

/* ── Default page template (templates/page.html) ──────────
   Fallback for any page without a bespoke template (e.g. Terms and
   Conditions). Root theme.json colour defaults to white-on-white
   (every real section sets its own colours), so a page with no
   custom .sb- classes renders invisible without this. */
.sb-default-page {
	background: var(--wp--preset--color--bg-white);
	color: var(--wp--preset--color--ink);
	padding-block: 80px 100px;
}

.sb-default-page a {
	color: var(--wp--preset--color--accent-primary);
	text-decoration: underline;
}

.sb-default-page__title {
	color: var(--wp--preset--color--ink);
	margin-bottom: 40px;
	padding-top: 50px;
	font-size: clamp(32px, 3.33vw, 53px);
}

.sb-default-page p {
	font-weight: 400;
}

/* Editor-only: the block editor canvas renders post_content in
   isolation, without the template's wrapping .sb-default-page element
   (that lives in templates/page.html, outside post_content), so a
   plain page's blocks would otherwise inherit theme.json's white root
   text colour and be invisible on the canvas's white background.
   Scoped to .editor-styles-wrapper so it can't reach the front end -
   changing the root colour itself was tried and reverted, because the
   header nav relies on inheriting it and went dark-on-dark. */
.editor-styles-wrapper {
	color: var(--wp--preset--color--ink);
}