/*
 * cphnano — theme styles, matching the HubSpot Growth theme in production.
 *
 * Colour, type, space and radius resolve to custom properties generated from
 * theme.json. Change tokens there; both the front end and the block editor move.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Page gutter is the space from the viewport edge to content on a narrow
 * screen. Page inset is that same edge on a wide screen, so full-bleed
 * sections line up with the header and footer.
 */
html {
	--cphnano-page-gutter: var(--wp--custom--page-gutter);
	--cphnano-page-inset: max(
		var(--cphnano-page-gutter),
		calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--cphnano-page-gutter))
	);
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/* ---------- focus ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--rule--accent-width) solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: var(--wp--preset--spacing--20);
	z-index: 100;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.skip-link:focus {
	left: var(--wp--preset--spacing--20);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- backdrop video (front page) ---------- */

.site-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

body.home,
body.front-page,
body.has-hero-video {
	background: transparent;
}

/* ---------- layout shell ---------- */

.site-header,
.site-footer {
	width: 100%;
}

.site-header__inner,
.site-footer__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--cphnano-page-gutter);
	width: 100%;
}

.site-main {
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* ---------- top bar ---------- */

/*
 * Utility links: a shop, a product at another hostname, a conversion action.
 * They are not navigation into this site, so they sit above the header instead
 * of competing with the site's own sections for the same row.
 */
.topbar {
	position: relative;
	background: var(--wp--preset--color--wash);
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	min-height: 2.25rem;
	padding-inline: var(--cphnano-page-gutter);
	width: 100%;
}

.topbar__list {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbar__item {
	max-width: none;
}

.topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.6rem;
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.topbar__link:hover,
.topbar__link:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.topbar__external {
	flex-shrink: 0;
	opacity: 0.65;
}

.topbar__item--cta > .topbar__link {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.topbar__item--cta > .topbar__link:hover,
.topbar__item--cta > .topbar__link:focus-visible {
	color: var(--wp--preset--color--brand-hot);
}

.topbar .lang__current {
	padding-block: 0.25rem;
	font-size: var(--wp--preset--font-size--xs);
}

@media (max-width: 40rem) {
	.topbar__inner {
		justify-content: space-between;
		gap: 0.25rem;
	}

	.topbar__link {
		padding-inline: 0.35rem;
	}
}

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

/*
 * The sticky pair. Scrolling down slides both up by exactly the top bar's
 * height, so the utility links leave and the navigation stays; scrolling up
 * brings the bar straight back. Transform rather than height or margin: it
 * animates on the compositor and, unlike `overflow: clip`, it does not cut off
 * the megamenu panel, which deliberately overflows this box.
 */
.site-top {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 220ms ease;
}

.site-top.is-retracted {
	transform: translateY(calc(-1 * var(--cphnano-topbar-height, 0px)));
}

.admin-bar .site-top {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-top {
		top: 46px;
	}
}

/*
 * The bar's translucency and blur live on a pseudo-element, not on
 * .site-header itself, and this is load-bearing. backdrop-filter changes two
 * things about the element that carries it: it becomes the containing block for
 * fixed descendants, and the compositor re-blends its backdrop whenever
 * anything inside it repaints. The megamenu panel is a descendant, so with the
 * filter on the header every hover inside the panel flashed the whole sheet —
 * and the scrim, when it hung off the header, collapsed to the header's own
 * height instead of covering the page.
 *
 * The panel is opaque and sits below the bar; it never wanted the blur. Keeping
 * the filter on a layer that paints only the bar's own background gives the
 * same look with neither side effect.
 */
.site-header {
	position: relative;
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 92%);
	backdrop-filter: saturate(1.2) blur(16px);
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	min-height: 4.25rem;
	padding-block: 0.75rem;
}

.site-header__brand {
	display: flex;
	align-items: center;
	margin-right: auto;
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo {
	display: block;
	width: auto;
	height: var(--wp--custom--logo-height);
}

.site-title {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* ---------- language switcher ---------- */

.lang {
	flex-shrink: 0;
}

/*
 * Language switcher: a native <details> dropdown, so it opens without
 * JavaScript and screen readers already understand it. It used to be two bare
 * codes side by side ("EN DA"), which gave no indication of which was active
 * beyond a colour, and no language names.
 */
.lang__switch {
	position: relative;
}

.lang__current {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	transition: background var(--wp--custom--transition);
}

/* Safari renders a disclosure triangle unless the marker is removed. */
.lang__current::-webkit-details-marker {
	display: none;
}

.lang__current:hover,
.lang__switch[open] > .lang__current {
	background: var(--wp--preset--color--wash);
}

.lang__code {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lang__current .lang__name {
	display: none;
}

.lang__chevron {
	width: 0.4rem;
	height: 0.4rem;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	transform: rotate(45deg) translateY(-15%);
	transition: transform var(--wp--custom--transition);
}

.lang__switch[open] .lang__chevron {
	transform: rotate(225deg) translateY(-15%);
}

.lang__list {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	z-index: 30;
	min-width: 10rem;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow: var(--wp--custom--shadow--dropdown);
}

.lang__item {
	max-width: none;
}

.lang__link {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.55rem 0.65rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.lang__link:hover,
.lang__link:focus-visible {
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.lang__item--current .lang__link {
	font-weight: 700;
}

.lang__item--current .lang__link::after {
	content: "";
	width: 0.3rem;
	height: 0.55rem;
	margin-left: auto;
	border-right: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: rotate(45deg);
}

/* Room for the full language name once there is space for it. */
@media (min-width: 48rem) {
	.lang__current .lang__name {
		display: inline;
	}
}


/* ---------- primary navigation ---------- */

.nav-button {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	order: 4;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: transparent;
	appearance: none;
	cursor: pointer;
}

.nav-button:hover {
	background: var(--wp--preset--color--wash);
}

.nav-button__box {
	position: relative;
	display: block;
	width: 1.15rem;
	height: 0.75rem;
}

.nav-button__bar {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--ink);
	transition: transform 200ms ease, opacity 200ms ease, top 200ms ease;
}

.nav-button__bar:nth-child(1) { top: 0; }
.nav-button__bar:nth-child(2) { top: 5px; }
.nav-button__bar:nth-child(3) { top: 10px; }

.nav-button[aria-expanded="true"] .nav-button__bar:nth-child(1) {
	top: 5px;
	transform: rotate(45deg);
}

.nav-button[aria-expanded="true"] .nav-button__bar:nth-child(2) {
	opacity: 0;
}

.nav-button[aria-expanded="true"] .nav-button__bar:nth-child(3) {
	top: 5px;
	transform: rotate(-45deg);
}

body.nav-open {
	overflow: hidden;
}

.nav {
	margin-left: 1.5rem;
	order: 2;
}

.nav__list,
.nav__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}

.nav__item {
	max-width: none;
	position: relative;
}

.nav__item--top {
	position: static;
	display: flex;
	align-items: center;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: transparent;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	appearance: none;
	cursor: pointer;
}

.nav__link:hover,
.nav__link:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	background: transparent;
}

.nav__item.current-menu-item > .nav__link,
.nav__item.current-menu-ancestor > .nav__link,
.nav__item.current-menu-parent > .nav__link {
	color: var(--wp--preset--color--brand);
}

.nav__link--parent::after,
.nav__toggle::after {
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	margin-top: -0.15rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease;
}

.nav__item.is-open > .nav__link--parent::after,
.nav__item.is-open > .nav__toggle::after,
.nav__item--parent:hover > .nav__link--parent::after,
.nav__item--parent:focus-within > .nav__link--parent::after {
	margin-top: 0.15rem;
	transform: rotate(-135deg);
}

.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: none;
	color: inherit;
	cursor: pointer;
}

.nav__item--external {
	margin-left: 0.35rem;
}

.nav__external {
	flex-shrink: 0;
	opacity: 0.65;
}

.nav__item--external > .nav__link:hover .nav__external,
.nav__item--external > .nav__link:focus-visible .nav__external {
	opacity: 1;
}

.nav__item--cta > .nav__link,
.nav__item--cta.current-menu-item > .nav__link {
	margin-left: 0.25rem;
	padding: 0.5rem 1.15rem;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.nav__item--cta > .nav__link:hover,
.nav__item--cta > .nav__link:focus-visible {
	background: var(--wp--preset--color--brand-hot);
	border-color: var(--wp--preset--color--brand-hot);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/*
 * Megamenu panel.
 *
 * Revealed on :hover / :focus-within for the no-JS path. Once navigation.js
 * adds .nav--enhanced those hover rules stop applying and .is-open — set on
 * click — is the only thing that opens a panel. Hover panels open by accident
 * on trackpads; hover is the fallback, not the intent.
 */
/*
 * The panel spans the header's container, not the trigger, so it is positioned
 * against .site-header__inner: the top-level item goes position:static to get
 * out of the way. Centring a wide panel on a narrow trigger would push it off
 * one edge or the other depending on which section you opened.
 */
.nav__panel {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: var(--cphnano-page-gutter);
	right: var(--cphnano-page-gutter);
	z-index: 20;
	transform: translateY(0.4rem);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

/*
 * A bridge across the gap between the trigger and the panel. Without it the
 * pointer leaves the item on the way down and the close timer starts, which
 * reads as the panel flinching away from the cursor.
 */
.nav__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.75rem;
	height: 0.75rem;
}

.nav__panel-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--panel);
}

.nav__panel--has-feature > .nav__panel-inner {
	grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
}

/*
 * Columns are capped and packed from the left rather than stretched to fill.
 * Letting two columns share a 60rem panel gives each a 30rem measure, which
 * reads as a page of prose rather than a list of links.
 *
 * The cap is what decides how many columns appear, not the panel width: for
 * repeat(auto-fit, minmax(a, b)) with both lengths definite, the repetition
 * count is worked out from b. At a 76rem panel a 19rem cap yields two tracks
 * and leaves a third of the row empty; 16rem yields three.
 */
.nav__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 16rem));
	justify-content: start;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-content: start;
}

.nav__column-title {
	display: block;
	margin: 0 0 0.5rem;
	padding-inline: 0.6rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.nav__column-title--link:hover,
.nav__column-title--link:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.nav__links {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.nav__link-item {
	max-width: none;
}

/* The whole entry is the target, not just its title. */
.nav__entry {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.55rem 0.6rem;
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/*
 * Row hover is the rule grey. It matches the icon tile's resting colour, which
 * is deliberate: on hover the tile inverts to white with a brand ring, so it
 * lifts out of the row rather than dissolving into it.
 */
.nav__entry:hover,
.nav__entry:focus-visible {
	background: var(--wp--preset--color--line);
	text-decoration: none;
}

/*
 * No tile behind the icon. The brand product marks carry their own rounded
 * badge, so a second one around them read as a frame inside a frame — and
 * without it the mark itself gets the whole 2.5rem instead of 1.9rem of it.
 */
.nav__entry-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
}

.nav__entry-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * The drawn glyphs are line art on a 24px grid rather than a filled badge, so
 * they sit a little inside the box the marks fill, and they inherit colour to
 * follow the entry's hover state.
 */
.nav__glyph {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--wp--preset--color--brand);
}

.nav__entry:hover .nav__glyph,
.nav__entry:focus-visible .nav__glyph {
	color: var(--wp--preset--color--brand);
}

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

.nav__entry-title {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
}

.nav__entry:hover .nav__entry-title,
.nav__entry:focus-visible .nav__entry-title {
	color: var(--wp--preset--color--brand);
}

.nav__entry-desc {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/*
 * Not published yet. The whole entry dims and takes a dot after its title, and
 * both come from the target's post status — so the day the page is published
 * the marker goes away on its own. The link still works: Coming_Soon sends the
 * visitor to the coming-soon page rather than a 404.
 */
.nav__entry--soon {
	opacity: 0.55;
}

.nav__entry--soon:hover,
.nav__entry--soon:focus-visible {
	opacity: 1;
}

.nav__soon {
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	margin-left: 0.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
}

/* Featured card. Its tone is a field on the menu item, never inferred. */
.nav__feature {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.nav__feature:hover,
.nav__feature:focus-visible {
	text-decoration: none;
}

.nav__feature--tone-brand {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.nav__feature--tone-tier-bronze { background: var(--wp--preset--color--tier-bronze); color: var(--wp--preset--color--surface); }
.nav__feature--tone-tier-silver { background: var(--wp--preset--color--tier-silver); color: var(--wp--preset--color--surface); }
.nav__feature--tone-tier-gold { background: var(--wp--preset--color--tier-gold); color: var(--wp--preset--color--surface); }
.nav__feature--tone-tier-platinum { background: var(--wp--preset--color--tier-platinum); }

.nav__feature-media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.nav__feature-media img {
	display: block;
	width: 100%;
	height: 9rem;
	object-fit: cover;
	object-position: var(--nav-focal-point, 50% 50%);
}

/*
 * The drawn fallback. It is a spectrum because that is what the instruments
 * produce; an empty grey rectangle would say nothing and still take the space.
 */
.nav__feature-media--motif {
	height: 7.5rem;
	padding-top: var(--wp--preset--spacing--15);
	background: linear-gradient(
		160deg,
		var(--wp--preset--color--surface),
		var(--wp--preset--color--line)
	);
	color: var(--wp--preset--color--brand);
}

.nav__feature-motif {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	opacity: 0.85;
}

.nav__feature--tone-brand .nav__feature-media--motif,
.nav__feature--tone-tier-bronze .nav__feature-media--motif,
.nav__feature--tone-tier-silver .nav__feature-media--motif,
.nav__feature--tone-tier-gold .nav__feature-media--motif {
	background: rgb(255 255 255 / 14%);
	color: currentColor;
}

.nav__feature-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.nav__feature-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.8;
}

.nav__feature-title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.3;
}

.nav__feature-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: gap var(--wp--custom--transition);
}

.nav__feature:hover .nav__feature-more,
.nav__feature:focus-visible .nav__feature-more {
	gap: 0.6rem;
}

/*
 * Opening. The hover pair is the no-JS fallback only — once the script marks
 * the nav as enhanced it drives hover itself, so .is-open is the single source
 * of truth and aria-expanded and the scrim cannot disagree with what is on
 * screen.
 */
.nav:not(.nav--enhanced) .nav__item--parent:hover > .nav__panel,
.nav:not(.nav--enhanced) .nav__item--parent:focus-within > .nav__panel,
.nav__item.is-open > .nav__panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/*
 * Between the drawer breakpoint and a comfortable desktop there is not room for
 * columns and a card side by side: the card drops under the columns rather than
 * squeezing both. It is never hidden — an editor who filled it in should see it
 * at every width.
 */
@media (min-width: 60.0625rem) and (max-width: 75rem) {
	.nav__panel--has-feature > .nav__panel-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.nav__feature {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
	}

	.nav__feature-media {
		flex: 0 0 12rem;
	}

	.nav__feature-media img,
	.nav__feature-media--motif {
		height: 6rem;
	}
}

/* A panel must never grow past the viewport; a long one scrolls inside. */
@media (min-width: 60.0625rem) {
	.nav__panel-inner {
		max-height: calc(100dvh - 9rem);
		overflow-y: auto;
	}
}

/*
 * Scrim behind an open panel: a body class, so the document gains no element
 * for the no-JS path to reveal. It cannot hang off .site-header — that carries
 * a backdrop-filter, which makes it the containing block for fixed descendants,
 * and the overlay collapses to the height of the header itself.
 *
 * z-index sits below the header (100) and the top bar (101) so both stay lit.
 */
body.has-panel-open::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgb(0 0 0 / 25%);
	pointer-events: none;
}

@media (max-width: 60rem) {
	.lang {
		order: 2;
		margin-left: auto;
	}

	.nav-button {
		display: inline-flex;
		order: 3;
		margin-left: 0.15rem;
	}

	.nav {
		display: none;
		flex-basis: 100%;
		margin-left: 0;
		order: 4;
		max-height: calc(100dvh - 4.25rem);
		overflow: auto;
		padding-bottom: var(--wp--preset--spacing--20);
	}

	.admin-bar .nav {
		max-height: calc(100dvh - 4.25rem - 46px);
	}

	.nav.is-open {
		display: block;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
		padding-top: var(--wp--preset--spacing--20);
	}

	.nav__item--top {
		flex-wrap: wrap;
	}

	.nav__item--top > .nav__link,
	.nav__item--top > .nav__toggle {
		min-height: 2.75rem;
	}

	.nav__item--top > .nav__link {
		flex: 1;
		justify-content: space-between;
		padding-inline: 0.25rem;
		font-size: var(--wp--preset--font-size--md);
	}

	.nav__item--cta.nav__item--top {
		display: block;
	}

	.nav__item--external,
	.nav__item--cta {
		margin-left: 0;
		width: 100%;
	}

	.nav__item--external > .nav__link {
		flex: 1;
		justify-content: flex-start;
		margin-top: 0.35rem;
		padding-inline: 0.25rem;
	}

	.nav__item--cta > .nav__link,
	.nav__item--cta.current-menu-item > .nav__link {
		flex: none;
		width: 100%;
		justify-content: center;
		margin: 0.85rem 0 0;
		padding: 0.85rem 1.25rem;
	}

	/*
	 * In the drawer the panel is an accordion section: no sheet, no shadow,
	 * columns stacked, and the featured card last so it never pushes the links
	 * below the fold.
	 */
	.nav__panel {
		position: static;
		display: none;
		flex-basis: 100%;
		width: auto;
		visibility: hidden;
		opacity: 1;
		transform: none;
		pointer-events: none;
		transition: none;
	}

	.nav__panel-inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
		padding: 0 0 0.5rem 0.75rem;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.nav__panel--has-feature > .nav__panel-inner {
		grid-template-columns: 1fr;
	}

	.nav__columns {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--15);
	}

	.nav__item.is-open > .nav__panel {
		display: block;
		visibility: visible;
		pointer-events: auto;
	}

	.nav__entry {
		padding-block: 0.7rem;
	}

	.nav__feature-media img {
		height: 7rem;
	}

	.nav__item.is-open > .nav__link--parent::after,
	.nav__item.is-open > .nav__toggle::after,
	.nav__item--parent:hover > .nav__link--parent::after,
	.nav__item--parent:focus-within > .nav__link--parent::after {
		margin-top: -0.15rem;
		transform: rotate(45deg);
	}

	.nav__item.is-open > .nav__link--parent::after,
	.nav__item.is-open > .nav__toggle::after {
		margin-top: 0.15rem;
		transform: rotate(-135deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-top,
	.nav-button__bar,
	.nav__link--parent::after,
	.nav__toggle::after,
	.nav__panel,
	.nav__feature-more {
		transition: none;
	}
}

/* ---------- footer ---------- */

.site-footer {
	background: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--md);
	padding-block: var(--wp--preset--spacing--50);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(10rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 60rem) {
	.site-footer__columns {
		grid-template-columns: 1fr;
	}
}

.site-footer__brand {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.site-footer__brand img {
	width: 12.5rem;
	height: auto;
}

.site-footer__tagline,
.site-footer__award,
.site-footer__address,
.site-footer__registration {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-style: normal;
	line-height: 1.4;
}

.site-footer__address,
.site-footer__registration {
	display: flex;
	flex-direction: column;
}

.site-footer__heading {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 900;
	letter-spacing: 1.06px;
	color: var(--wp--preset--color--surface);
}

.site-footer__list,
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.site-footer__list li,
.site-footer__social li {
	max-width: none;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--wp--custom--rule--accent-width) solid rgb(255 255 255 / 20%);
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__social {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.site-footer__social-link:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	opacity: 0.8;
}

.site-footer__social-link svg {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
}

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

.section {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--cphnano-page-inset);
}

.section--contained {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--cphnano-page-gutter);
}

.section--align-center {
	text-align: center;
	align-items: center;
}

.section--align-center .section__heading,
.section--align-center .section__lede,
.section--align-center .section__eyebrow,
.section--align-center .rich-text,
.section--align-center .comparison__lede,
.section--align-center .hero__copy,
.section--align-center .section__actions {
	margin-inline: auto;
}

.section__heading {
	margin: 0;
	text-wrap: pretty;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.625rem, 3.6vw, 2.375rem);
}

.section__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section--align-center .hero__copy {
	align-items: center;
}

.section--align-center .section__eyebrow {
	color: var(--wp--preset--color--brand);
}

.section--align-center .section__actions {
	justify-content: center;
}

.section__lede {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	max-width: 46rem;
}

.section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	max-width: none;
	margin: 0;
}

/* Surfaces — HubSpot sections are full-bleed coloured bands. */

.section--surface-default {
	background: var(--wp--preset--color--surface);
}

.section--surface-wash {
	background: var(--wp--preset--color--wash);
}

.section--surface-glass {
	background: rgb(255 255 255 / 50%);
}

.section--surface-transparent {
	background: transparent;
}

.section--surface-brand {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.section--surface-brand .section__heading,
.section--surface-brand .section__lede,
.section--surface-brand .section__eyebrow,
.section--surface-brand .cta-banner__body {
	color: var(--wp--preset--color--surface);
}

.section--surface-dark {
	background: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--surface);
}

.section--surface-dark .media-text .section__heading,
.section--surface-dark .media-text .section__eyebrow {
	color: var(--wp--preset--color--surface);
}

.section--surface-dark .media-text__prose {
	color: rgb(255 255 255 / 82%);
}

.section--surface-dark .media-text__prose strong {
	color: var(--wp--preset--color--brand-hot);
}

.section--surface-mist {
	background: var(--wp--preset--color--wash);
}

.section--has-background {
	position: relative;
	isolation: isolate;
	background-image: var(--section-background);
	background-size: cover;
	background-position: center;
}

.section--has-background::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--surface);
	opacity: var(--section-scrim, 0.85);
}

.section--bg-wash { --section-scrim: 0.88; }
.section--bg-dim  { --section-scrim: 0.6; }
.section--bg-full { --section-scrim: 0; }

.section--bg-full .section__heading,
.section--bg-full .section__lede,
.section--bg-full .section__eyebrow {
	text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
	color: var(--wp--preset--color--surface);
}

/* Lifestyle photo band: full-bleed image, copy on the left, subject visible
 * on the right — same left scrim as the product heroes. */
.section--rich-text.section--bg-full {
	min-height: min(26rem, 68vh);
	padding-block: 5.5rem 4.5rem;
	justify-content: center;
	background-position: 72% 38%;
}

.section--rich-text.section--bg-full::before {
	background: linear-gradient(
		105deg,
		rgb(20 16 16 / 78%) 0%,
		rgb(20 16 16 / 46%) 32%,
		rgb(20 16 16 / 12%) 58%,
		rgb(20 16 16 / 0%) 78%
	);
	opacity: 1;
	z-index: 0;
}

.section--rich-text.section--bg-full > * {
	position: relative;
	z-index: 1;
	max-width: 36rem;
}

.section--rich-text.section--bg-full .section__eyebrow {
	color: var(--wp--preset--color--brand-hot);
	text-shadow: none;
}

.section--rich-text.section--bg-full .section__heading {
	color: var(--wp--preset--color--surface);
	font-weight: 700;
	text-shadow: none;
}

.section--rich-text.section--bg-full .rich-text {
	color: rgb(255 255 255 / 88%);
	max-width: 36rem;
}

.section--rich-text.section--bg-full .rich-text strong {
	color: var(--wp--preset--color--brand-hot);
}

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

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 44px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.button:hover {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.button--ghost {
	background: transparent;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-weight: 400;
}

.button--ghost:hover {
	background: transparent;
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	font-weight: 800;
}

.section--surface-dark .button {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.section--surface-dark .button:hover {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.section--surface-dark .button--ghost {
	background: transparent;
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--surface);
}

.button--small {
	font-size: var(--wp--preset--font-size--sm);
	padding: 12px 44px;
}

/* ---------- section: hero ---------- */

.section--hero {
	padding-block: var(--wp--preset--spacing--50);
}

.hero--split {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	width: 100%;
}

@media (min-width: 48rem) {
	.hero--split {
		grid-template-columns: 1fr 1fr;
	}

	/* "Place heading on the right": copy after the photo. */
	.section--hero-end .hero--split .hero__copy {
		order: 2;
	}
}

.hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
}

.hero__media {
	margin: 0;
}

.hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

.section--hero .section__heading {
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	line-height: 1.1;
}

/* Product pages: full-bleed lab photo. Title sits on the left, like
 * the homepage, so it does not cover the instrument. */
.section--hero.section--has-background {
	min-height: min(34rem, 72vh);
	padding-block: 7rem 5rem;
	justify-content: center;
	background-color: var(--wp--preset--color--wash);
	background-position: 70% 32%;
}

.section--hero.section--has-background::before {
	background: linear-gradient(
		105deg,
		rgb(20 16 16 / 78%) 0%,
		rgb(20 16 16 / 46%) 30%,
		rgb(20 16 16 / 12%) 56%,
		rgb(20 16 16 / 0%) 76%
	);
	opacity: 1;
	z-index: 0;
}

.section--hero.section--has-background > * {
	position: relative;
	z-index: 1;
}

.section--hero.section--has-background .hero {
	width: min(38rem, 100%);
}

.section--hero.section--has-background .hero__copy {
	gap: var(--wp--preset--spacing--30);
	max-width: 34rem;
}

.section--hero.section--has-background .section__eyebrow {
	color: var(--wp--preset--color--brand-hot);
}

.section--hero.section--has-background .section__heading {
	color: var(--wp--preset--color--surface);
	font-weight: 700;
}

.section--hero.section--has-background .hero__accent {
	color: var(--wp--preset--color--brand-hot);
}

.section--hero.section--has-background .section__lede {
	color: rgb(255 255 255 / 86%);
	text-shadow: none;
	max-width: 32rem;
}

.hero--split .button {
	background: transparent;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-weight: 400;
}

.hero--split .button:hover {
	background: transparent;
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	font-weight: 800;
}

.section--hero.section--surface-default .hero--split .button {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.section--hero.section--surface-default .hero--split .button:hover {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.section--hero.section--has-background .button {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 800;
}

.section--hero.section--has-background .button:hover {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-weight: 800;
}

.section--hero.section--has-background .button--ghost {
	background: rgb(255 255 255 / 10%);
	border-color: rgb(255 255 255 / 80%);
	color: var(--wp--preset--color--surface);
	font-weight: 500;
	backdrop-filter: blur(8px);
}

.section--hero.section--has-background .button--ghost:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Video-backed heroes (front page and /backup/). Product pages do not. */
.has-hero-video .section--hero {
	position: relative;
	isolation: isolate;
	min-height: calc(100svh - 4.25rem);
	justify-content: center;
	padding-block: 8rem;
}

.has-hero-video .section--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		rgb(20 16 16 / 78%) 0%,
		rgb(20 16 16 / 48%) 34%,
		rgb(20 16 16 / 12%) 62%,
		rgb(20 16 16 / 0%) 82%
	);
}

.has-hero-video .section--hero > * {
	position: relative;
	z-index: 1;
}

.has-hero-video .section--hero .hero__copy {
	max-width: 40rem;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--40);
}

.has-hero-video .section--hero .section__eyebrow {
	color: var(--wp--preset--color--brand-hot);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.has-hero-video .section--hero .section__heading {
	font-size: var(--wp--custom--hero-size);
	line-height: 1.05;
	font-weight: 900;
	color: var(--wp--preset--color--surface);
	text-shadow: none;
	max-width: none;
}

.has-hero-video .section--hero .hero__accent {
	color: var(--wp--preset--color--brand-hot);
}

.has-hero-video .section--hero .section__lede {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	color: rgb(255 255 255 / 86%);
	text-shadow: none;
	max-width: 34rem;
}

.has-hero-video .section--hero .section__actions {
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--10);
}

.has-hero-video .section--hero .button {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.has-hero-video .section--hero .button:hover {
	background: var(--wp--preset--color--brand-hot);
	border-color: var(--wp--preset--color--brand-hot);
	color: var(--wp--preset--color--surface);
}

.has-hero-video .section--hero .button--ghost {
	background: rgb(255 255 255 / 8%);
	border-color: rgb(255 255 255 / 80%);
	color: var(--wp--preset--color--surface);
	font-weight: 500;
	backdrop-filter: blur(8px);
}

.has-hero-video .section--hero .button--ghost:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

@media (max-width: 48rem) {
	.has-hero-video .section--hero {
		min-height: calc(100svh - 4.25rem);
		padding-block: 5rem 6rem;
		justify-content: center;
	}

	.has-hero-video .section--hero::before {
		background: linear-gradient(
			180deg,
			rgb(20 16 16 / 18%) 0%,
			rgb(20 16 16 / 55%) 48%,
			rgb(20 16 16 / 82%) 100%
		);
	}

	.has-hero-video .section--hero .hero__copy {
		padding-right: 0;
	}

	.has-hero-video .section--hero .section__heading {
		font-size: clamp(2.5rem, 12vw, var(--wp--custom--hero-size));
	}
}

/* ---------- section: media-text ---------- */

.media-text {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

.media-text__media {
	margin: 0;
	order: 2;
	min-width: 0;
	width: 100%;
}

.media-text__media img {
	display: block;
	width: 100%;
	height: auto;
}

body.page .media-text__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.page .media-text__media img {
	width: auto;
	max-width: 100%;
	max-height: 20rem;
}

body.page .section--media-diagram .media-text__media img,
body.page .section--media-feature .media-text__media img {
	width: 100%;
	max-height: none;
}

.section--media-diagram {
	background: var(--wp--preset--color--surface);
}

body.page .section--media-diagram .media-text__media,
body.page .section--media-diagram .media-text__media img {
	background: var(--wp--preset--color--surface);
}

body.page .section--media-feature .media-text {
	align-items: start;
}

.media-text__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
	order: 1;
	text-align: start;
	min-width: 0;
	width: 100%;
}

.media-text .section__eyebrow {
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.media-text .section__heading {
	font-size: clamp(1.625rem, 3.6vw, 2.375rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}

.media-text__prose {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.media-text__prose p {
	margin: 0;
}

.media-text__prose h3 {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.media-text__prose ul {
	margin: 0;
	padding-left: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.media-text__prose li {
	color: var(--wp--preset--color--ink);
}

body.home .section--media-feature .media-text__prose ul {
	list-style: none;
	padding-left: 0;
	gap: 0.85rem;
	margin-top: 0.15rem;
}

body.home .section--media-feature .media-text__prose li {
	position: relative;
	padding-left: 1.15rem;
	line-height: 1.45;
}

body.home .section--media-feature .media-text__prose li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.4rem;
	height: 0.4rem;
	background: var(--wp--preset--color--brand);
}

.media-text__prose strong,
.rich-text strong {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.media-text__addons {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
	margin-top: var(--wp--preset--spacing--10);
}

.media-text__addons-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.media-text__actions {
	margin: 0;
	width: 100%;
	flex-direction: column;
	align-items: stretch;
}

.media-text__actions .button {
	width: 100%;
	justify-content: center;
	padding: 0.75rem 1.15rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.media-text__actions .button--ghost {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--ink);
}

.media-text__actions .button--ghost:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

.section--surface-wash .media-text__actions .button--ghost {
	background: var(--wp--preset--color--surface);
}

.section--surface-wash .media-text__actions .button--ghost:hover {
	background: var(--wp--preset--color--wash);
}

.media-text__resources {
	width: 100%;
	margin-top: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.media-text__resources > p:first-child {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.media-text__resources .doc-links,
.media-text__prose .doc-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.media-text__resources .doc-links a {
	display: block;
	padding: 0.7rem 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
	text-decoration: none;
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.media-text__resources .doc-links li:first-child a {
	padding-top: 0;
}

.media-text__resources .doc-links a:hover {
	color: var(--wp--preset--color--brand);
	border-bottom-color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.media-text__prose .equation,
.rich-text .equation {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.01em;
}

.media-text__prose .split-pair,
.rich-text .split-pair {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	margin-top: 0;
	text-align: start;
}

@media (min-width: 48rem) {
	.media-text:has(.media-text__media) {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: var(--wp--preset--spacing--50);
	}

	body.page .media-text:has(.media-text__media) {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.7fr);
	}

	body.page .section--media-start .media-text:has(.media-text__media) {
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.25fr);
	}

	body.page .media-text__media img {
		max-height: 22rem;
	}

	body.page .section--media-diagram .media-text:has(.media-text__media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}

	body.page .section--media-diagram .media-text__media img {
		width: 100%;
		max-height: none;
		background: var(--wp--preset--color--surface);
	}

	body.page .section--media-feature .media-text {
		align-items: start;
	}

	body.page .section--media-feature .media-text:has(.media-text__media) {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	body.page .section--media-feature .media-text__media img {
		width: 100%;
		max-height: none;
	}

	.media-text__body,
	.media-text__media {
		order: 0;
	}

	.section--media-end .media-text__media {
		order: 2;
	}

	.media-text__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.media-text__actions .button {
		width: auto;
		flex: 0 1 auto;
	}

	.media-text__prose .split-pair,
	.rich-text .split-pair {
		grid-template-columns: 1fr 1fr;
	}
}

body.home .section--media-feature .media-text {
	align-items: center;
}

/*
 * A circle is narrower than its column. Centred there it floats a hand's width
 * in from the content edge and looks misaligned against the sections above and
 * below, so from tablet up it sits on the side the editor chose — flush left
 * for an image at the start, flush right for one at the end. On a phone the
 * column is the whole width and centred reads better.
 *
 * This used to be `body.home ... justify-content: center`: a page-scoped rule
 * for what is really a property of the circle shape.
 */
.section--media-circle .media-text__media {
	display: flex;
	justify-content: center;
}

@media (min-width: 48rem) {
	.section--media-start.section--media-circle .media-text__media {
		justify-content: flex-start;
	}

	.section--media-end.section--media-circle .media-text__media {
		justify-content: flex-end;
	}
}

/*
 * A circular image, chosen with the section's Image shape field.
 *
 * This was scoped to `body.home` and to one image style, so the treatment
 * existed on exactly one page and no editor could find it — including the crop
 * offset, which was art direction for that one photograph baked into the
 * stylesheet. The offset is now the block's Focal point field.
 */
.section--media-circle .media-text__media img {
	width: min(22rem, 100%);
	max-width: 100%;
	max-height: none;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: var(--media-focal-point, 50% 50%);
	border-radius: 50%;
	box-shadow:
		0 0 0 0.55rem var(--wp--preset--color--surface),
		0 22px 44px rgb(65 65 65 / 12%);
}

@media (min-width: 48rem) {
	body.home .section--media-feature .media-text {
		align-items: center;
	}

	body.home .section--media-feature .media-text__media img {
		width: min(26rem, 100%);
	}
}

.rich-text .split-pair img {
	display: block;
	width: 100%;
	max-width: 20rem;
	height: auto;
	margin: var(--wp--preset--spacing--20) 0;
}

.section--rich-text:has(.split-pair--apps) {
	gap: var(--wp--preset--spacing--40);
}

.rich-text .split-pair--apps {
	align-items: start;
	gap: var(--wp--preset--spacing--50);
}

.rich-text .split-pair--apps > div {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.rich-text .split-pair--apps p {
	margin: 0;
	font-weight: 300;
	color: var(--wp--preset--color--heading);
}

@media (min-width: 48rem) {
	.rich-text .split-pair--apps {
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.rich-text .split-pair--apps > div + div {
		padding-left: clamp(2rem, 4vw, 3.5rem);
		border-left: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	}
}

.rich-text .split-pair--apps h3,
.section--rich-text .rich-text .split-pair--apps h3 {
	margin: 0;
	text-align: start;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.rich-text .split-pair--apps img {
	max-width: none;
	width: 100%;
	margin: 0;
	background: none;
}

.rich-text .split-pair--apps .app-label {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
}

.rich-text .split-pair--apps .note {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.rich-text .split-pair--apps + .cite {
	margin-top: var(--wp--preset--spacing--40);
}

.media-text__prose .cite,
.rich-text .cite {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* ---------- section: product-grid ---------- */

.product-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

.product-grid__item {
	max-width: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	text-align: center;
}

.product-grid__media {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.product-grid__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 10rem;
	object-fit: contain;
	margin-inline: auto;
}

.product-grid__title {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.product-grid__title a {
	color: inherit;
	text-decoration: none;
}

.product-grid__title a:hover {
	color: var(--wp--preset--color--brand);
}

.product-grid__summary {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.section--products-family .product-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

@media (min-width: 48rem) {
	.section--products-family .product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.section--products-family .product-grid:has(> :nth-child(6):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

.section--products-family .product-grid__media {
	margin: 0;
}

.section--products-family .product-grid__media img {
	width: 4.5rem;
	height: 4.5rem;
	max-height: none;
}

.section--products-family .product-grid__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.section--products-family .product-grid__summary {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	color: var(--wp--preset--color--heading);
}

.section--products-cards .product-grid {
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 48rem) {
	.section--products-cards .product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
	}
}

.section--products-cards .product-grid__item {
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
}

.section--products-cards .product-grid__media img {
	max-height: 16rem;
}

.section--products-cards .product-grid__title {
	font-size: clamp(1.25rem, 2vw, 1.625rem);
}

.section--products-cards .product-grid__summary {
	font-weight: 300;
	max-width: 22rem;
	margin-inline: auto;
}

.section--products-cards .product-grid__action {
	margin: auto 0 0;
}

/* ---------- section: feature-grid ---------- */

.feature-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	width: 100%;
}

@media (min-width: 40rem) {
	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.feature-grid:has(> :nth-child(3):last-child),
	.feature-grid:has(> :nth-child(6):last-child),
	.feature-grid:has(> :nth-child(9):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.feature-grid-split {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	width: 100%;
	align-items: start;
	align-self: stretch;
}

.feature-grid__media {
	margin: 0;
	max-width: 16rem;
	justify-self: center;
}

.feature-grid__media img {
	display: block;
	width: 100%;
	max-width: 16rem;
	max-height: 28rem;
	height: auto;
	object-fit: contain;
}

@media (min-width: 56rem) {
	.feature-grid-split {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.feature-grid__media {
		justify-self: start;
	}

	.section--features-split .feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.feature-grid__item {
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	text-align: center;
}

.feature-grid__item:not(:has(.feature-grid__icon-wrap)) {
	align-items: start;
	text-align: start;
}

.section--features-split .feature-grid__item {
	align-items: start;
	text-align: start;
}

.feature-grid__icon-wrap {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
}

.feature-grid__icon {
	width: 48px;
	height: 48px;
	padding: 0;
	object-fit: contain;
}

/*
 * A glyph from the shared icon set, drawn in currentColor rather than loaded
 * as a file, so a topic with no artwork still reads as something.
 */
.feature-grid__glyph {
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--brand);
}

.feature-grid__photo-wrap {
	margin: 0;
	width: 100%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--wash);
}

.feature-grid__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.section--features-photos .feature-grid__item {
	align-items: start;
	text-align: start;
	gap: var(--wp--preset--spacing--20);
}

.section--features-photos .feature-grid__title {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	line-height: 1.3;
}

.section--features-photos .feature-grid__body {
	font-weight: 300;
}

.feature-grid__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.feature-grid__body {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.section--features-list .feature-grid {
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
}

.section--features-list.section--align-center .section__heading {
	max-width: 42rem;
}

/* ---------- feature carousel ---------- */

.feature-carousel {
	width: 100%;
}

.feature-carousel__viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--ink);
	min-height: 22rem;
}

.feature-carousel__slide {
	display: none;
	position: relative;
	min-height: 22rem;
}

.feature-carousel__slide.is-active {
	display: block;
}

.feature-carousel.is-ready .feature-carousel__slide {
	display: block;
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.7s ease, visibility 0.7s ease;
}

.feature-carousel.is-ready .feature-carousel__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.feature-carousel__media {
	margin: 0;
	overflow: hidden;
}

.feature-carousel__media img {
	display: block;
	width: 100%;
	height: 22rem;
	object-fit: cover;
	transform: scale(1);
}

.feature-carousel.is-ready .feature-carousel__slide.is-active .feature-carousel__media img {
	animation: feature-carousel-drift 6s ease-out forwards;
}

.feature-carousel__copy {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--20);
	max-width: 36rem;
	padding: var(--wp--preset--spacing--40);
	padding-bottom: 2.75rem;
	background: linear-gradient(
		105deg,
		rgb(20 16 16 / 82%) 0%,
		rgb(20 16 16 / 48%) 55%,
		rgb(20 16 16 / 0%) 100%
	);
}

.feature-carousel__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--surface);
	text-transform: none;
}

.feature-carousel__body {
	margin: 0;
	max-width: 28rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	line-height: 1.5;
	color: rgb(255 255 255 / 88%);
}

.feature-carousel__arrow {
	appearance: none;
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	color: var(--wp--preset--color--ink);
	font-size: 1.75rem;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: opacity var(--wp--custom--transition), transform var(--wp--custom--transition), color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.feature-carousel__arrow--prev {
	left: 0.85rem;
	transform: translate(-0.4rem, -50%);
}

.feature-carousel__arrow--next {
	right: 0.85rem;
	transform: translate(0.4rem, -50%);
}

.feature-carousel:hover .feature-carousel__arrow,
.feature-carousel:focus-within .feature-carousel__arrow {
	opacity: 1;
	pointer-events: auto;
}

.feature-carousel:hover .feature-carousel__arrow--prev,
.feature-carousel:focus-within .feature-carousel__arrow--prev {
	transform: translate(0, -50%);
}

.feature-carousel:hover .feature-carousel__arrow--next,
.feature-carousel:focus-within .feature-carousel__arrow--next {
	transform: translate(0, -50%);
}

.feature-carousel__arrow:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand);
}

.feature-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	transform: translateX(-50%);
}

.feature-carousel__dot {
	appearance: none;
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 42%);
	cursor: pointer;
	transition: width 200ms ease, background-color var(--wp--custom--transition);
}

.feature-carousel__dot.is-active {
	width: 1.85rem;
	background: rgb(255 255 255 / 28%);
}

.feature-carousel__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--brand);
	transform: scaleX(0);
	transform-origin: left center;
}

.feature-carousel__dot.is-progressing::after {
	animation: feature-carousel-progress 6s linear forwards;
}

@keyframes feature-carousel-drift {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.06);
	}
}

@keyframes feature-carousel-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@media (hover: none) {
	.feature-carousel__arrow {
		opacity: 1;
		pointer-events: auto;
	}

	.feature-carousel__arrow--prev,
	.feature-carousel__arrow--next {
		transform: translate(0, -50%);
	}
}

@media (min-width: 48rem) {
	.feature-carousel__viewport,
	.feature-carousel__slide {
		min-height: 28rem;
	}

	.feature-carousel__media img {
		height: 28rem;
	}

	.feature-carousel__copy {
		padding: var(--wp--preset--spacing--50);
		padding-bottom: 3rem;
		max-width: 40rem;
	}
}

@media (max-width: 47.99rem) {
	.feature-carousel__viewport,
	.feature-carousel__slide {
		min-height: 18rem;
	}

	.feature-carousel__media img {
		height: 18rem;
	}

	.feature-carousel__copy {
		padding: var(--wp--preset--spacing--30);
		padding-bottom: 2.5rem;
		max-width: none;
	}

	.feature-carousel__title {
		font-size: 1.35rem;
	}

	.feature-carousel__body {
		font-size: var(--wp--preset--font-size--md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.feature-carousel.is-ready .feature-carousel__slide {
		transition: none;
	}

	.feature-carousel.is-ready .feature-carousel__slide.is-active .feature-carousel__media img,
	.feature-carousel__dot.is-progressing::after {
		animation: none;
	}

	.feature-carousel__dot.is-active::after {
		transform: scaleX(1);
	}

	.feature-carousel__arrow,
	.feature-carousel__arrow--prev,
	.feature-carousel__arrow--next {
		transition: none;
	}
}

.section--features-list.section--align-center .feature-grid {
	width: min(42rem, 100%);
	margin-inline: auto;
}

.section--features-list .feature-grid__item {
	flex-direction: row;
	align-items: flex-start;
	text-align: start;
	gap: var(--wp--preset--spacing--20);
}

.section--features-list .feature-grid__icon-wrap {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.2rem;
	background: none;
	border-radius: 0;
}

.section--features-list .feature-grid__icon {
	width: 1.5rem;
	height: 1.5rem;
	filter: none;
}

.section--features-list .feature-grid__title {
	font-size: var(--wp--preset--font-size--lg);
	text-transform: none;
	letter-spacing: 0;
}

.section--features-list .feature-grid__item:not(:has(.feature-grid__body)) .feature-grid__title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

/* ---------- section: flywheel ---------- */

/*
 * Steps on a ring around a hub, with the selected step's detail beside it.
 * Geometry (node positions, node count) arrives as custom properties from the
 * template; everything visual is a token. The stage is a size container so the
 * hub and node text scale with the wheel rather than with the viewport.
 */

.flywheel {
	display: grid;
	grid-template-columns: minmax(0, 40rem);
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

@media (min-width: 64rem) {
	.flywheel {
		grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr);
		justify-content: stretch;
	}
}

/*
 * The box is square and bleeds past its column by the node overhang the
 * template computed, so the visible wheel — not its bounding box — lines up
 * with the content edge. See Flywheel::prepare().
 *
 * On a phone that bleed can exceed the page gutter by a pixel or two, and the
 * home page's body is transparent over a fixed backdrop video, so any stray
 * horizontal overflow shows as a moving stripe at the edge. The section clips
 * its own overflow so the box can never widen the page.
 */
.section--flywheel {
	overflow: hidden;
}

.flywheel__stage {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1;
	margin-inline: calc(-1 * var(--flywheel-bleed, 0%));
}

.flywheel__track,
.flywheel__flow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	pointer-events: none;
}

.flywheel__track circle {
	stroke: var(--wp--preset--color--line);
	stroke-width: 4.2;
}

/*
 * The dashes travel by animating the dash offset along the path, not by
 * rotating the element: a rotated square box sweeps outside the stage and
 * would give the page a horizontal scrollbar on a phone. pathLength="100" on
 * the circle makes one full lap exactly 100 units.
 */
.flywheel__flow circle {
	stroke: var(--wp--preset--color--brand);
	stroke-width: 0.6;
	stroke-linecap: round;
	stroke-dasharray: 3.1 6.9;
	opacity: 0.85;
	animation: flywheel-spin 26s linear infinite;
}

.flywheel__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 40%;
	aspect-ratio: 1;
	padding: 5%;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--heading);
	font-size: clamp(0.65rem, 2.4cqi, 0.85rem);
	line-height: 1.4;
	text-align: center;
	transform: translate(-50%, -50%);
}

.flywheel__hub::before {
	content: "";
	position: absolute;
	inset: 8%;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--brand);
	border-radius: 999px;
	opacity: 0.5;
	animation: flywheel-pulse 4.5s ease-in-out infinite;
	pointer-events: none;
}

.flywheel__hub-eyebrow {
	color: var(--wp--preset--color--brand);
	font-size: clamp(0.55rem, 2cqi, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.flywheel__hub-title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(0.9rem, 4cqi, 1.45rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.flywheel__hub-body {
	max-width: 19ch;
	text-wrap: balance;
}

.flywheel__node {
	position: absolute;
	top: var(--flywheel-y);
	left: var(--flywheel-x);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.25rem, 1.6cqi, 0.6rem);
	width: var(--flywheel-node, 23%);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font: inherit;
	cursor: pointer;
	transform: translate(-50%, -50%);
	appearance: none;
}

.flywheel__disc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 6px 20px rgb(0 0 0 / 5%);
	transition: transform var(--wp--custom--transition);
}

.flywheel__disc::after {
	content: "";
	position: absolute;
	inset: -0.5rem;
	border: var(--wp--custom--rule--accent-width) solid var(--wp--preset--color--brand);
	border-radius: 999px;
	opacity: 0;
	transition: opacity var(--wp--custom--transition);
}

.flywheel__node:hover .flywheel__disc {
	transform: scale(1.06);
}

.flywheel__node.is-active .flywheel__disc::after {
	opacity: 1;
}

.flywheel__node:focus-visible {
	outline: none;
}

.flywheel__node:focus-visible .flywheel__disc {
	outline: var(--wp--custom--rule--accent-width) solid var(--wp--preset--color--brand);
	outline-offset: 0.75rem;
}

.flywheel__icon {
	display: block;
	width: 44%;
	height: 44%;
}

.flywheel__ordinal {
	color: var(--wp--preset--color--brand);
	font-size: clamp(0.9rem, 4cqi, 1.5rem);
	font-weight: 700;
}

.flywheel__label {
	font-size: clamp(0.7rem, 2.6cqi, 0.95rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

/*
 * Every panel is in the markup. Until the script marks the wheel ready they
 * stack in a column; after that they share one grid cell, so the column is as
 * tall as the tallest step and switching never shifts the page.
 */
.flywheel__panels {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.flywheel__panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	text-align: left;
}

.flywheel.is-ready .flywheel__panel {
	grid-area: 1 / 1;
	align-self: start;
	transition: opacity 250ms ease, visibility 250ms;
}

/* Beside the wheel the card sits on its centre line; under it, the spare height falls below. */
@media (min-width: 64rem) {
	.flywheel.is-ready .flywheel__panel {
		align-self: center;
	}
}

.flywheel.is-ready .flywheel__panel:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

.flywheel__step {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--15);
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.flywheel__rule {
	position: relative;
	flex: 1;
	height: var(--wp--custom--rule--width);
	overflow: hidden;
	background: var(--wp--preset--color--line);
}

/* Fills over one auto-advance interval; keep the duration equal to INTERVAL in flywheel.js. */
.flywheel__rule::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--brand);
	transform: scaleX(0);
	transform-origin: left;
}

.flywheel__panel.is-progressing .flywheel__rule::after {
	animation: flywheel-progress 7s linear forwards;
}

.flywheel__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.375rem, 2vw, 1.875rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.flywheel__body {
	margin: 0;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}

.flywheel__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
}

.flywheel__links .button--small {
	padding: 9px 18px;
}

/*
 * A link can carry the product's square mark. The pill's left padding shrinks
 * so the mark sits close to the edge, the way an avatar chip does.
 */
.flywheel__link {
	gap: 0.6rem;
}

.flywheel__links .flywheel__link--marked {
	padding-left: 7px;
}

.flywheel__link-mark {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
}

.flywheel__note {
	position: relative;
	margin: var(--wp--preset--spacing--10) 0 0;
	padding-top: var(--wp--preset--spacing--20);
	padding-left: 1.25rem;
	border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	text-wrap: pretty;
}

.flywheel__note::before {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--20) + 0.45em);
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
}

@keyframes flywheel-spin {
	to {
		stroke-dashoffset: -100;
	}
}

@keyframes flywheel-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.55;
	}

	50% {
		transform: scale(1.06);
		opacity: 0.18;
	}
}

@keyframes flywheel-progress {
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.flywheel__flow circle,
	.flywheel__hub::before,
	.flywheel__panel.is-progressing .flywheel__rule::after {
		animation: none;
	}
}

/* ---------- section: video-grid ---------- */

/*
 * Self-hosted videos as cards. The player is the browser's own <video>, so
 * everything here is framing: a 16:9 stage, a duration badge that steps aside
 * once playback starts, and filter pills that reuse the button language.
 */

.video-grid {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

.video-grid__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.section--align-center .video-grid__filter {
	justify-content: center;
}

.video-grid__pill {
	padding: 8px 18px;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.video-grid__pill:hover {
	border-color: var(--wp--preset--color--ink);
}

.video-grid__pill.is-active {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}

.video-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.video-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	text-align: left;
}

.video-card[hidden] {
	display: none;
}

.video-card__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--ink);
}

.video-card__player {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-card__duration {
	position: absolute;
	right: var(--wp--preset--spacing--15);
	bottom: var(--wp--preset--spacing--15);
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--card);
	background: rgb(0 0 0 / 65%);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	pointer-events: none;
	transition: opacity var(--wp--custom--transition);
}

.video-card.is-playing .video-card__duration {
	opacity: 0;
}

.video-card__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--25);
}

.video-card__tag {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.video-card__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.25;
}

.video-card__body {
	margin: 0;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

/* ---------- section: rich-text ---------- */

.section--rich-text .section__heading {
	font-size: clamp(1.625rem, 3.6vw, 2.375rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}

.section--align-center.section--rich-text .section__heading,
.section--align-center.section--rich-text .rich-text__media,
/*
 * A centred rich text stretches its content to full width, which is right for
 * prose but leaves a video unbounded. Cap it at a readable width instead.
 *
 * This cap used to exist only under .page-resellers, so the same block on
 * nanocuvette-one rendered edge to edge — two pages, same markup, different
 * result, and no way for an editor to see why.
 */
.section--align-center.section--rich-text .rich-text__video {
	align-self: center;
	width: min(56rem, 100%);
	max-width: none;
}

.section--align-center.section--rich-text .rich-text {
	margin-inline: auto;
	text-align: center;
	color: var(--wp--preset--color--ink);
	font-weight: 400;
}

.section--rich-text:has(.split-pair) {
	gap: var(--wp--preset--spacing--20);
}

.section--rich-text .rich-text:has(.split-pair),
.section--align-center.section--rich-text .rich-text:has(.split-pair) {
	max-width: none;
	width: 100%;
	text-align: start;
}

.section--rich-text .rich-text h3 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	text-align: center;
}

.rich-text__video {
	width: 100%;
	max-width: 64rem;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.rich-text__video iframe,
.rich-text__video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.section--rich-text .rich-text {
	max-width: 40rem;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	font-weight: 300;
	color: var(--wp--preset--color--heading);
}

.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child  { margin-bottom: 0; }

.rich-text strong {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.rich-text a {
	color: var(--wp--preset--color--ink);
}

.rich-text a:hover {
	color: var(--wp--preset--color--brand);
}

.rich-text .doc-links,
.rich-text ul.doc-links {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 2;
	text-align: start;
}

.rich-text__media {
	margin: 0;
	max-width: none;
	width: 100%;
}

.section--align-center .rich-text__media {
	margin-inline: auto;
}

.rich-text__media img {
	display: block;
	width: 100%;
	height: auto;
}

.downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 2;
	text-align: start;
	width: 100%;
}

.downloads__item {
	max-width: none;
}

.downloads__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.downloads__link:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

.downloads__meta {
	color: var(--wp--preset--color--muted);
	margin-left: var(--wp--preset--spacing--10);
}

/* ---------- feature grid: tiles ---------- */

/*
 * Each feature in a tinted panel, for a page of short equal-weight points.
 * Chosen with the section's Item style field.
 *
 * This was four copies of the same declarations: .page-invest,
 * .page-contact-us, .error404 and (near enough) .section--kb-topics. The only
 * differences between them were a title clamp that varied in the third decimal
 * place and one stray `white-space`. Four places to change, three to forget.
 */
.section--features-tiles .feature-grid {
	gap: var(--wp--preset--spacing--30);
	max-width: 72rem;
	margin-inline: auto;
}

.section--features-tiles .feature-grid__item {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	gap: var(--wp--preset--spacing--15);
}

/* On a wash background the tile lifts to white instead. */
.section--features-tiles.section--surface-wash .feature-grid__item {
	background: var(--wp--preset--color--surface);
}

.section--features-tiles .feature-grid__title {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	line-height: 1.25;
}

.section--features-tiles .feature-grid__body {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
	line-height: 1.55;
	white-space: pre-line;
}

/*
 * A tile whose whole surface is a link moves its padding onto the anchor, so
 * the hit area covers the panel rather than just the text.
 */
.section--features-tiles .feature-grid__item:has(.feature-grid__hit) {
	padding: 0;
}

.section--features-tiles .feature-grid__hit {
	padding: var(--wp--preset--spacing--30);
}

.section--features-tiles .feature-grid__item:has(.feature-grid__hit):hover {
	border-color: var(--wp--preset--color--brand);
}

.section--features-tiles .feature-grid__item:has(.feature-grid__hit):hover .feature-grid__title {
	color: var(--wp--preset--color--brand);
}

/* ---------- section: comparison ---------- */

.section--comparison .section__eyebrow {
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section--comparison .section__heading {
	font-size: clamp(1.625rem, 3.6vw, 2.375rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.section__heading--display {
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
}

.comparison__lede {
	max-width: 40rem;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
	font-weight: 300;
	color: var(--wp--preset--color--heading);
}

.comparison__lede strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.comparison {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	max-width: 64rem;
	margin-inline: auto;
	text-align: start;
}

.comparison__column {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: 1.5rem 1.5rem 1.75rem;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.comparison__column--emphasis {
	border-color: var(--wp--preset--color--brand);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--brand);
}

.comparison__media {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.comparison__media img {
	display: block;
	width: 100%;
	max-height: 4.5rem;
	height: auto;
	object-fit: contain;
	object-position: start;
}

.comparison__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--heading);
}

.comparison__column--emphasis .comparison__title {
	color: var(--wp--preset--color--brand);
}

.comparison__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--heading);
}

.comparison__column--emphasis .comparison__points {
	color: var(--wp--preset--color--ink);
}

.comparison__points li {
	display: grid;
	grid-template-columns: 1.15rem minmax(0, 1fr);
	gap: 0.7rem;
	align-items: start;
	max-width: none;
	line-height: 1.45;
}

.comparison__points li::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.45em;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

.comparison__column--emphasis .comparison__points li::before {
	width: 0.7rem;
	height: 0.4rem;
	margin-top: 0.4em;
	border-radius: 0;
	background: none;
	border-left: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: rotate(-45deg);
	transform-origin: center;
}

@media (min-width: 48rem) {
	.comparison {
		/*
		 * Driven by how many columns the editor added, rather than fixed at two.
		 * The block used to have `before` and `after` fields, so it could never
		 * be a three-way comparison.
		 */
		grid-template-columns: repeat(var(--comparison-columns, 2), minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
		align-items: stretch;
	}
}

/* ---------- section: logo-wall ---------- */

.section--logo-wall .section__heading {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.section--logo-wall-marquee {
	overflow: hidden;
}

.logo-wall {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 30px;
	width: 100%;
}

.logo-wall__item {
	max-width: none;
	flex: 0 1 calc(16.666% - 25px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-wall:has(> :nth-child(-n+5):last-child) .logo-wall__item {
	flex: 0 1 10rem;
}

.logo-wall__item a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-wall__image {
	display: block;
	width: auto;
	height: 3rem;
	max-width: 9.5rem;
	object-fit: contain;
}

.logo-wall--marquee {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: calc(100% + 2 * var(--cphnano-page-inset));
	margin-inline: calc(-1 * var(--cphnano-page-inset));
	overflow: hidden;
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 5%,
		#000 95%,
		transparent
	);
}

.logo-wall__marquee {
	display: flex;
	width: max-content;
	animation: logo-wall-scroll calc(var(--logo-wall-count, 6) * 4.5s) linear infinite;
}

.logo-wall__marquee--reverse {
	animation-direction: reverse;
	animation-duration: calc(var(--logo-wall-count, 6) * 5.5s);
}

.logo-wall--marquee:hover .logo-wall__marquee,
.logo-wall--marquee:focus-within .logo-wall__marquee {
	animation-play-state: paused;
}

.logo-wall--marquee .logo-wall__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 3.5rem;
	margin: 0;
	padding: 0 3.5rem 0 0;
	list-style: none;
}

.logo-wall--marquee .logo-wall__item {
	flex: 0 0 auto;
}

.logo-wall--marquee .logo-wall__image {
	height: 2.75rem;
	max-width: 8.5rem;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.logo-wall--marquee .logo-wall__item:hover .logo-wall__image,
.logo-wall--marquee .logo-wall__item:focus-within .logo-wall__image {
	opacity: 1;
	filter: none;
	transform: scale(1.06);
}

@keyframes logo-wall-scroll {
	from {
		transform: translateX(0);
	}

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

@media (prefers-reduced-motion: reduce) {
	.logo-wall__marquee {
		animation: none;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.logo-wall__marquee--reverse,
	.logo-wall--marquee .logo-wall__list[aria-hidden="true"] {
		display: none;
	}

	.logo-wall--marquee .logo-wall__list {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		gap: var(--wp--preset--spacing--30) 3.5rem;
		width: 100%;
	}

	.logo-wall--marquee .logo-wall__image {
		opacity: 0.7;
	}
}

/* ---------- section: accordion ---------- */

.accordion {
	display: flex;
	flex-direction: column;
	border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	width: 100%;
	text-align: start;
}

.accordion__item {
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.accordion__question {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	cursor: pointer;
	font-weight: 900;
	color: var(--wp--preset--color--ink);
	list-style: none;
}

.accordion__question::-webkit-details-marker {
	display: none;
}

.accordion__question::after {
	content: "";
	flex: none;
	margin-left: auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: var(--wp--custom--rule--accent-width) solid var(--wp--preset--color--brand);
	border-bottom: var(--wp--custom--rule--accent-width) solid var(--wp--preset--color--brand);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform var(--wp--custom--transition);
}

.accordion__item[open] .accordion__question::after {
	transform: rotate(-135deg);
}

.accordion__answer {
	padding-bottom: var(--wp--preset--spacing--30);
}

.accordion__answer > :first-child { margin-top: 0; }
.accordion__answer > :last-child  { margin-bottom: 0; }

/*
 * Site links inherit their colour and carry no underline, which suits menus
 * and cards but leaves a link inside an answer indistinguishable from the
 * sentence around it. Answers are where "read more" links live, so they show.
 */
.accordion__answer a {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--wp--custom--transition);
}

.accordion__answer a:hover {
	color: var(--wp--preset--color--ink);
}

/* ---------- section: stat-row ---------- */

.stat-row {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

.stat-row__value {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 900;
	line-height: 1.1;
	color: var(--wp--preset--color--heading);
}

.stat-row__label {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--ink);
}

/* ---------- section: testimonial ---------- */

.section--testimonial .section__heading {
	font-size: clamp(1.625rem, 3.6vw, 2.375rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.testimonial-videos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.testimonial-videos__item {
	max-width: none;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.testimonial-videos__player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	background: var(--wp--preset--color--ink);
}

@media (min-width: 48rem) {
	.section--testimonial-row .testimonial-videos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}

	.section--testimonial-row .testimonial-videos:has(:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.testimonials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

.section--testimonial-row .testimonials {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.testimonials__item {
	max-width: none;
}

.testimonial {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
	text-align: center;
}

.testimonial__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 900;
	letter-spacing: 1.06px;
	color: var(--wp--preset--color--heading);
	text-transform: uppercase;
}

.testimonial__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: italic;
	color: var(--wp--preset--color--ink);
}

.testimonial__quote p {
	margin: 0;
}

.testimonial__quote strong {
	font-style: italic;
	font-weight: 700;
}

.testimonial__source {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin-top: auto;
}

.testimonial__portrait {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial__attribution {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.testimonial__name,
.testimonial__role {
	color: var(--wp--preset--color--ink);
}

/* ---------- section: cta-banner ---------- */

.cta-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	align-content: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

.cta-banner__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	flex: 1 1 16rem;
}

.cta-banner__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	color: var(--wp--preset--color--heading);
}

.cta-banner__action {
	margin: 0;
	max-width: none;
}

.section--cta-banner.section--align-center .cta-banner {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	text-align: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.section--cta-banner.section--align-center .cta-banner__text {
	flex: 0 0 auto;
	width: auto;
	max-width: 40rem;
}

.section--cta-banner.section--align-center {
	padding-block: 2.25rem;
	gap: var(--wp--preset--spacing--20);
}

.section--cta-banner.section--align-center .section__heading {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.section--cta-banner.section--align-center .button {
	width: auto;
	min-width: 12rem;
}

.section--cta-loud .cta-banner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* ---------- section: enquiry ---------- */

.section--enquiry .section__heading {
	font-size: clamp(1.625rem, 3.6vw, 2.375rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.section--enquiry h1.section__heading {
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	line-height: 1.1;
}

.section--enquiry .section__lede {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	color: var(--wp--preset--color--heading);
}

.enquiry {
	width: min(40rem, 100%);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.section--enquiry-split {
	text-align: start;
	align-items: stretch;
}

.section--enquiry-split .enquiry {
	width: 100%;
	max-width: none;
	align-self: stretch;
	text-align: start;
}

.section--enquiry-split .enquiry__intro .section__heading,
.section--enquiry-split .enquiry__intro .section__lede {
	margin-inline: 0;
	text-align: start;
}

.section--enquiry-split .enquiry__intro .section__lede {
	max-width: 28rem;
}

.section--enquiry-split .enquiry__intro {
	padding-block: 0.2rem;
}

@media (min-width: 48rem) {
	.section--enquiry-split .enquiry {
		display: grid;
		grid-template-columns: minmax(16rem, 0.85fr) minmax(22rem, 1.15fr);
		gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.section--enquiry-split:has(.enquiry__media) .enquiry {
		grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 1.05fr);
	}
}

.enquiry__media {
	margin: var(--wp--preset--spacing--20) 0 0;
	width: 100%;
	max-width: 26rem;
}

.enquiry__media img {
	display: block;
	width: 100%;
	height: auto;
}

.section--enquiry-split:has(.enquiry__media) .enquiry__form {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--wash);
	border-radius: var(--wp--custom--radius--card);
}

.enquiry__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.enquiry__notice {
	margin: 0;
	font-weight: 700;
}

.enquiry__notice--ok {
	color: var(--wp--preset--color--heading);
}

.enquiry__notice--error {
	color: var(--wp--preset--color--brand);
}

.enquiry__hp {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.enquiry__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
}

@media (min-width: 36rem) {
	.enquiry__form {
		grid-template-columns: 1fr 1fr;
	}

	.enquiry__hp,
	.enquiry__field:has(textarea),
	.enquiry__field--span,
	.enquiry__actions {
		grid-column: 1 / -1;
	}
}

.enquiry__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
}

.enquiry__field label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--heading);
}

.enquiry__field input:not([type="checkbox"]),
.enquiry__field select,
.enquiry__field textarea {
	width: 100%;
	min-height: 3rem;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.enquiry__field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23414141' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 2.5rem;
}

.enquiry__field textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.enquiry__field input:not([type="checkbox"]):focus,
.enquiry__field select:focus,
.enquiry__field textarea:focus {
	border-color: var(--wp--preset--color--ink);
	outline: none;
}

.enquiry__actions {
	margin: 0;
}

.section--enquiry-inline .enquiry {
	width: 100%;
	max-width: 44rem;
	margin-inline: auto;
	text-align: start;
}

.section--enquiry-inline .enquiry__intro {
	margin-bottom: var(--wp--preset--spacing--30);
}

.section--enquiry-inline .enquiry__intro .section__heading,
.section--enquiry-inline .enquiry__intro .section__lede {
	margin-inline: 0;
	text-align: start;
}

.enquiry__field legend {
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--heading);
}

.enquiry__checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}

.enquiry__checks label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.enquiry__checks input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.2rem 0 0;
	flex: none;
	accent-color: var(--wp--preset--color--brand);
}

button.button {
	font: inherit;
	cursor: pointer;
}

/* ---------- instruments ---------- */

.instrument-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-end;
	width: min(64rem, 100%);
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--30);
	text-align: start;
}

.instrument-filters__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 10rem;
	flex: 1;
}

.instrument-filters__field label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.instrument-filters__field input,
.instrument-filters__field select {
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	font: inherit;
	background-color: var(--wp--preset--color--surface);
}

.instrument-filters__field select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23414141' d='M1.5 1.8h9L6 7.2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.instrument-filters__actions {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.instrument-filters__submit {
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	cursor: pointer;
}

.instrument-filters__submit:hover {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
}

.instrument-filters__reset {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-decoration: none;
}

.instrument-table-wrap {
	width: 100%;
	overflow-x: auto;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.instrument-table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--xs);
	text-align: start;
}

.instrument-table th,
.instrument-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	white-space: nowrap;
}

.instrument-table th {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--wash);
	position: sticky;
	top: 0;
	z-index: 1;
}

.instrument-table th:first-child,
.instrument-table td:first-child {
	position: sticky;
	left: 0;
	background: var(--wp--preset--color--surface);
	z-index: 2;
	font-weight: 700;
}

.instrument-table th:first-child {
	background: var(--wp--preset--color--wash);
	z-index: 3;
}

.instrument-table tbody tr:hover,
.instrument-table tbody tr:hover td:first-child {
	background: var(--wp--preset--color--wash);
}

.instrument-flag--yes {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.instrument-flag--no {
	color: var(--wp--preset--color--muted);
}

.instrument-count {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* ---------- knowledge base ---------- */

.kb {
	display: grid;
	grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
	grid-template-areas:
		"toolbar toolbar"
		"sidebar content";
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--cphnano-page-gutter) var(--wp--preset--spacing--50);
	align-items: start;
}

.kb__toolbar {
	grid-area: toolbar;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.kb__sidebar {
	grid-area: sidebar;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	position: sticky;
	top: var(--wp--preset--spacing--20);
}

.kb__content {
	grid-area: content;
	min-width: 0;
}

.kb-search {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: stretch;
	position: relative;
	width: min(36rem, 100%);
}

.kb-search__field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.kb-search__submit {
	flex: none;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	cursor: pointer;
}

.kb-search__submit:hover {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
}

.kb-suggest {
	position: absolute;
	z-index: 4;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 12px 32px rgb(0 0 0 / 8%);
	max-height: 18rem;
	overflow: auto;
	text-align: start;
}

.kb-suggest li {
	margin: 0;
}

.kb-suggest__item {
	display: block;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-weight: 400;
	line-height: 1.35;
}

.kb-suggest__item.is-active,
.kb-suggest__item:hover {
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--brand);
}

.kb-results {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.kb-pagination {
	margin-top: var(--wp--preset--spacing--40);
}

.kb-pagination .nav-links,
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.kb-pagination .page-numbers,
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 6px 10px;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.kb-pagination .page-numbers.current,
.pagination .page-numbers.current {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}

.kb-pagination a.page-numbers:hover,
.pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.kb-pagination .page-numbers.dots,
.pagination .page-numbers.dots {
	border: 0;
	min-width: 0;
	padding-inline: 4px;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.section--align-center > .kb-search {
	width: min(36rem, 100%);
	margin-inline: auto;
	text-align: start;
}

.section--align-center .kb-list--featured,
.section--align-center .accordion {
	width: min(46rem, 100%);
	margin-inline: auto;
	text-align: start;
}

.kb-list--featured {
	margin-top: var(--wp--preset--spacing--30);
}

.section--kb-topics .feature-grid__item {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	height: 100%;
}

.feature-grid__hit {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: inherit;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.section--kb-topics .feature-grid__title {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	line-height: 1.3;
}

.section--kb-topics .feature-grid__body {
	font-weight: 300;
}

.feature-grid__meta {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.section--features-grid .feature-grid__title a,
.feature-grid__title a {
	text-decoration: none;
	color: inherit;
}

.feature-grid__title a:hover {
	color: var(--wp--preset--color--brand);
}

.kb-search input {
	width: 100%;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	font: inherit;
	appearance: none;
}

.kb-search input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

.kb-nav__home {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 900;
}

.kb-nav__home a {
	text-decoration: none;
}

/* The second list in the same sidebar needs air above it, not a rule. */
.kb-nav__home--types {
	margin-top: var(--wp--preset--spacing--40);
}

.kb-nav__topics,
.kb-nav__topics ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kb-nav__topics > li {
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--10);
}

.kb-nav__topic {
	display: block;
	font-weight: 700;
	text-decoration: none;
}

.kb-nav__topics ul {
	padding: 8px 0 4px var(--wp--preset--spacing--20);
}

.kb-nav__topics ul a {
	display: block;
	padding-block: 4px;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.kb-nav .is-current > .kb-nav__topic,
.kb-nav ul .is-current a {
	color: var(--wp--preset--color--brand);
}

.kb-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.kb-crumbs a {
	text-decoration: none;
}

.kb-hub {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.kb-hub__card {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border-radius: var(--wp--custom--radius--card);
}

.kb-hub__card h2 {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--lg);
}

.kb-hub__card a {
	text-decoration: none;
}

.kb-hub__card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

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

.kb-list li {
	padding-block: var(--wp--preset--spacing--10);
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.kb-list a {
	font-weight: 700;
	text-decoration: none;
}

.kb-list p {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.kb-group {
	margin-top: var(--wp--preset--spacing--40);
	scroll-margin-top: var(--wp--preset--spacing--30);
}

.kb-group h2 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--10);
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.kb-group__count {
	flex: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.kb__content > .section__eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
}

.kb__content > .section__lede {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 40rem;
}

.kb-list a:hover {
	color: var(--wp--preset--color--brand);
}

.kb-article__body {
	margin-top: var(--wp--preset--spacing--40);
	max-width: 42rem;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	font-weight: 300;
	color: var(--wp--preset--color--heading);
	overflow-x: auto;
}

.kb-article__body h2,
.kb-article__body h3,
.kb-article__body h4,
.kb-article__body [id] {
	scroll-margin-top: var(--wp--preset--spacing--30);
}

.kb-article__body h2 {
	margin: 2em 0 0.6em;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.28;
	color: var(--wp--preset--color--ink);
}

.kb-article__body h3,
.kb-article__body h4 {
	margin: 1.6em 0 0.5em;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.kb-article__body p,
.kb-article__body li {
	color: var(--wp--preset--color--heading);
}

.kb-article__body ul,
.kb-article__body ol {
	padding-left: 1.2rem;
}

.kb-article__body.rich-text strong {
	color: inherit;
	font-weight: 700;
}

.kb-article__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: var(--wp--preset--spacing--20) 0;
	border-radius: var(--wp--custom--radius--card);
}

.kb-article__body figure {
	margin: var(--wp--preset--spacing--30) 0;
}

.kb-article__body figcaption {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.kb-article__body table {
	width: 100%;
	margin: var(--wp--preset--spacing--30) 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
}

.kb-article__body th,
.kb-article__body td {
	padding: 8px 12px;
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	text-align: start;
	vertical-align: top;
}

.kb-article__body th {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.kb-article__body iframe {
	display: block;
	width: 100%;
	max-width: 40rem;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: var(--wp--preset--spacing--30) 0;
	border: 0;
}

.kb-note {
	margin: var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--wash);
	border-left: var(--wp--custom--rule--accent-width) solid var(--wp--preset--color--brand);
}

.kb-note p {
	margin: 0;
}

.kb-related {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	max-width: 42rem;
}

.kb-related__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

@media (max-width: 50rem) {
	.kb {
		grid-template-columns: 1fr;
		grid-template-areas:
			"toolbar"
			"sidebar"
			"content";
	}

	.kb__sidebar {
		position: static;
	}
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.site-backdrop {
		display: none;
	}
}

/* ---------- hero: tall ---------- */

/*
 * The opening band of a company or campaign page. Selected with the hero's own
 * Prominence field, so it can be used on any page and moves with the block.
 *
 * This was five near-identical copies of the same rules under .page-about,
 * .page-contact-us, .page-invest, .page-resellers and .page-branding-and-media-kit.
 * The heading and lede declarations were byte-identical in four of them, and
 * .page-contact-us declared the heading twice with different values — the
 * classic result of styling by page slug: nobody can see the duplication.
 */
.section--hero-tall {
	min-height: min(24rem, 56vh);
	justify-content: center;
	padding-block: 6.5rem 4.5rem;
}

.section--hero-tall .hero__copy {
	max-width: 46rem;
	gap: var(--wp--preset--spacing--20);
}

.section--hero-tall .section__heading {
	font-size: clamp(2.75rem, 7vw, 4.6rem);
	line-height: 0.95;
}

.section--hero-tall .hero__accent {
	color: var(--wp--preset--color--brand-hot);
}

.section--hero-tall .section__lede {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	max-width: 38rem;
}

/* ---------- feature grid over a background image ---------- */

/*
 * Cards that stay readable on top of a photograph. Keyed to the section's own
 * background rather than to one page slug; any feature grid given a background
 * image now gets it.
 */
.section--features-grid.section--has-background {
	min-height: min(28rem, 70vh);
	justify-content: center;
}

.section.section--features-grid.section--has-background h2.section__heading {
	color: var(--wp--preset--color--surface);
	text-shadow: 0 1px 8px rgb(0 0 0 / 45%);
}

.section--features-grid.section--has-background .feature-grid__item {
	background: rgb(255 255 255 / 94%);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--card);
	text-align: start;
	height: 100%;
}

.section--products-people .product-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	max-width: 72rem;
	margin-inline: auto;
}

@media (min-width: 64rem) {
	.section--products-people .product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.section--products-people .product-grid__item {
	align-items: center;
	text-align: center;
}

.section--products-people .product-grid__media img {
	width: 10rem;
	height: 10rem;
	max-height: none;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
}

.section--products-people .product-grid__title {
	font-size: clamp(1.15rem, 1.8vw, 1.375rem);
}

.section--products-people .product-grid__summary {
	font-weight: 300;
	font-size: var(--wp--preset--font-size--sm);
}

.section--products-people .product-grid__action {
	margin-top: var(--wp--preset--spacing--10);
}

.section--products-people .product-grid__action a {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--brand);
}

/* ---------- company pages ---------- */

/* ---------- logo wall: grid ---------- */

/*
 * A full partner or reseller list: every logo visible at once, wrapped over as
 * many lines as it needs. Chosen with the section's Arrangement field.
 *
 * This used to be `.page-resellers` applying the reduced-motion fallback
 * unconditionally — cancelling the animation, hiding the duplicated track and
 * letting the list wrap. The arrangement was derived from how many logos there
 * were, so a long list switched itself to a scrolling marquee and the page then
 * had to undo it. Choosing the layout renders the plain wrapped markup in the
 * first place, so most of those overrides are simply unnecessary: the base
 * .logo-wall is already a centred, wrapping flex list at the same image size.
 */
.section--logo-wall-grid {
	padding-block: var(--wp--preset--spacing--40);
}

.section--logo-wall-grid + .section--logo-wall-grid {
	padding-top: 0;
}

.section--logo-wall-grid .section__heading {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}

.section--logo-wall-grid .logo-wall {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.section--logo-wall-grid .logo-wall__image {
	opacity: 0.85;
}




.section--stats-tiles .section__heading {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

/*
 * Tinted stat tiles.
 *
 * Selected with the section's Item style field, and each tile's colour with its
 * own Tone field — so the treatment travels with the content
 * and survives reordering, renaming or moving the section to another page.
 *
 * This replaced `.page-invest .stat-row__item:nth-child(n)` with four literal
 * hex codes: the design was bound to one page slug and to each figure's
 * position in the list.
 */
.section--stats-tiles .stat-row {
	gap: var(--wp--preset--spacing--20);
}

.section--stats-tiles .stat-row__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	min-height: 8.5rem;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--card);
}

.section--stats-tiles .stat-row__value {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: inherit;
}

.section--stats-tiles .stat-row__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.9;
}

/* Tones. Light tints keep ink text; dark ones flip to the surface colour. */
.stat-row__item--tone-bronze,
.stat-row__item--tone-silver,
.stat-row__item--tone-gold {
	color: var(--wp--preset--color--surface);
}

.stat-row__item--tone-bronze { background: var(--wp--preset--color--tier-bronze); }
.stat-row__item--tone-silver { background: var(--wp--preset--color--tier-silver); }
.stat-row__item--tone-gold { background: var(--wp--preset--color--tier-gold); }

.stat-row__item--tone-platinum {
	background: var(--wp--preset--color--tier-platinum);
	color: var(--wp--preset--color--ink);
}

.section--comparison .section__heading--display {
	font-size: clamp(2.75rem, 7vw, 4.6rem);
	line-height: 0.95;
}

.section--enquiry-split .enquiry__intro .section__heading {
	font-size: clamp(1.625rem, 3.6vw, 2.375rem);
}

/* ---------- branding page ---------- */

/* ---------- brand kit (media kit page) ---------- */

.page-branding-and-media-kit .section--hero.section--hero-split {
	padding-block: clamp(4rem, 8vw, 6.5rem);
}

.page-branding-and-media-kit .section--hero.section--hero-split .hero__media img {
	max-height: min(20rem, 40vh);
	width: auto;
	margin-inline: auto;
}

.brand-kit__lede {
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
}

.brand-kit__logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.brand-kit__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--15);
	min-height: 10rem;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--card);
	text-align: center;
}

.brand-kit__logo--light {
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.brand-kit__logo--dark {
	background: var(--wp--preset--color--footer);
	border: var(--wp--custom--rule--width) solid rgb(255 255 255 / 10%);
}

.brand-kit__logo--light-wide {
	grid-column: 1 / -1;
	min-height: 12rem;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.brand-kit__logo img {
	display: block;
	width: auto;
	max-width: min(100%, 16rem);
	max-height: 4.5rem;
	object-fit: contain;
}

.brand-kit__logo--light-wide img {
	max-width: min(100%, 42rem);
	max-height: 8rem;
}

.brand-kit__logo figcaption {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.brand-kit__logo--dark figcaption {
	color: var(--wp--preset--color--surface);
}

.brand-kit__download {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-decoration: none;
	transition: transform var(--wp--custom--transition);
}

.brand-kit__download:hover,
.brand-kit__download:focus-visible {
	transform: scale(1.03);
}

.page-branding-and-media-kit .section--products-cards .product-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 64rem) {
	.page-branding-and-media-kit .section--products-cards .product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.page-branding-and-media-kit .section--products-cards .product-grid__item {
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--wash);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.page-branding-and-media-kit .section--products-cards .product-grid__media img {
	max-height: 14rem;
}

.brand-kit--guide {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--20);
}

.brand-kit__colors-hero {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--15);
}

@media (max-width: 40rem) {
	.brand-kit__colors-hero {
		grid-template-columns: 1fr;
	}
}

.brand-kit__color-hero {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--10);
	min-height: 9rem;
	padding: var(--wp--preset--spacing--25);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}

.brand-kit__color-hero.brand-swatch--white {
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.brand-kit__color-hero-name {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.brand-kit__color-hero-hex {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.brand-kit .brand-palette {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 48rem) {
	.brand-kit .brand-palette {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.brand-kit .brand-palette__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.brand-kit .brand-palette__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: var(--wp--preset--spacing--15);
	margin: 0;
	padding: 0;
	list-style: none;
}

.brand-kit .brand-swatch {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.brand-kit .brand-swatch__chip {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}

.brand-kit .brand-swatch__name {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.brand-kit .brand-swatch__meta {
	display: grid;
	gap: 0.1rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 300;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.brand-kit .brand-swatch__meta code {
	font-size: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.brand-kit .brand-swatch--white .brand-swatch__chip,
.brand-kit .brand-swatch--grey-250 .brand-swatch__chip,
.brand-kit .brand-swatch--grey-238 .brand-swatch__chip,
.brand-kit .brand-swatch--grey-204 .brand-swatch__chip,
.brand-kit .brand-swatch--orange-lighter .brand-swatch__chip,
.brand-kit .brand-swatch--green-lighter .brand-swatch__chip {
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.brand-kit .brand-swatch--red-darker .brand-swatch__chip,
.brand-kit__color-hero.brand-swatch--red-darker { background: #8a0a0a; }

.brand-kit .brand-swatch--red-primary .brand-swatch__chip,
.brand-kit__color-hero.brand-swatch--red-primary { background: #a00000; }

.brand-kit .brand-swatch--red-lighter .brand-swatch__chip { background: #c15959; }
.brand-kit .brand-swatch--red-hot .brand-swatch__chip { background: #f05050; }

.brand-kit .brand-swatch--grey-77 .brand-swatch__chip,
.brand-kit__color-hero.brand-swatch--grey-77 { background: #4d4d4d; }

.brand-kit .brand-swatch--grey-65 .brand-swatch__chip { background: #414141; }
.brand-kit .brand-swatch--grey-102 .brand-swatch__chip { background: #666; }
.brand-kit .brand-swatch--grey-153 .brand-swatch__chip { background: #999; }
.brand-kit .brand-swatch--grey-204 .brand-swatch__chip { background: #ccc; }
.brand-kit .brand-swatch--grey-238 .brand-swatch__chip { background: #eee; }
.brand-kit .brand-swatch--grey-250 .brand-swatch__chip { background: #fafafa; }

.brand-kit .brand-swatch--white .brand-swatch__chip,
.brand-kit__color-hero.brand-swatch--white { background: #fff; }

.brand-kit .brand-swatch--orange-darker .brand-swatch__chip { background: #cf7723; }
.brand-kit .brand-swatch--orange-primary .brand-swatch__chip { background: #ea8c1c; }
.brand-kit .brand-swatch--orange-lighter .brand-swatch__chip { background: #f9b26d; }
.brand-kit .brand-swatch--green-darker .brand-swatch__chip { background: #7faa3c; }
.brand-kit .brand-swatch--green-primary .brand-swatch__chip { background: #82b83a; }
.brand-kit .brand-swatch--green-lighter .brand-swatch__chip { background: #b8db81; }
.brand-kit .brand-swatch--blue-darker .brand-swatch__chip { background: #3d4179; }
.brand-kit .brand-swatch--blue-primary .brand-swatch__chip { background: #514d94; }
.brand-kit .brand-swatch--blue-lighter .brand-swatch__chip { background: #8286b3; }

.page-branding-and-media-kit .section--features-grid .feature-grid__icon {
	width: 3.5rem;
	height: 3.5rem;
}

/* ---------- 404 ---------- */

.error404 .section--hero .hero__copy {
	width: 100%;
}

.error404 .section--hero .kb-search {
	width: min(36rem, 100%);
}

.error404 .section--features-grid .section__heading {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* ---------- shop catalog (Shopify shop.cphnano.com) ---------- */

.shop-main {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.shop-slideshow {
	width: 100%;
}

.shop-slideshow__viewport {
	position: relative;
}

.shop-slideshow__slide {
	display: none;
	position: relative;
	background: #111;
}

.shop-slideshow__slide.is-active {
	display: block;
}

.shop-slideshow__image {
	display: block;
	width: 100%;
	height: 21rem;
	object-fit: cover;
}

.shop-slideshow__card {
	width: 100%;
	background: var(--wp--preset--color--brand);
	color: #fff;
	padding: 1.75rem 1.5rem;
}

@media (min-width: 48rem) {
	.shop-slideshow__image {
		height: 35rem;
	}

	.shop-slideshow__card {
		position: absolute;
		z-index: 1;
		width: min(28rem, calc(100% - 5rem));
		padding: 2.25rem 2rem;
	}

	.shop-slideshow__slide--top-right .shop-slideshow__card {
		top: 3rem;
		right: 3rem;
		left: auto;
		bottom: auto;
	}

	.shop-slideshow__slide--top-left .shop-slideshow__card {
		top: 3rem;
		left: 3rem;
		right: auto;
		bottom: auto;
	}

	.shop-slideshow__slide--bottom-left .shop-slideshow__card {
		bottom: 3rem;
		left: 3rem;
		right: auto;
		top: auto;
	}

	.shop-slideshow__slide--bottom-right .shop-slideshow__card {
		bottom: 3rem;
		right: 3rem;
		left: auto;
		top: auto;
	}
}

.shop-slideshow__title {
	margin: 0 0 0.75rem;
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
}

.shop-slideshow__text {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.45;
	color: inherit;
}

.shop-slideshow__cta {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid #fff;
	color: #fff;
	text-decoration: none;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
}

.shop-slideshow__cta:hover {
	background: #fff;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.shop-slideshow__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 0.85rem var(--cphnano-page-gutter, 1.5rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.shop-slideshow__arrow,
.shop-slideshow__pause,
.shop-slideshow__dot {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.2rem;
	color: #666;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}

.shop-slideshow__dot {
	width: 0.7rem;
	height: 0.7rem;
	border: 1px solid #222;
	border-radius: 50%;
}

.shop-slideshow__dot.is-active {
	background: #222;
}

.shop-section {
	width: 100%;
	padding: 2.5rem var(--cphnano-page-gutter, 1.5rem) 3.5rem;
	max-width: 90rem;
	margin-inline: auto;
}

.shop-section__heading {
	margin: 0 0 1.75rem;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.shop-section__heading--brand {
	color: var(--wp--preset--color--brand);
}

.shop-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
}

@media (min-width: 64rem) {
	.shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

.shop-card {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	color: inherit;
	text-decoration: none;
	text-align: left;
}

.shop-card:hover {
	color: inherit;
	text-decoration: none;
}

.shop-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	overflow: hidden;
}

.shop-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shop-card__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
	object-fit: cover;
}

.shop-card:hover .shop-card__hover {
	opacity: 1;
}

.shop-card__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
}

.shop-card__price {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 400;
}

.shop-card__price .from {
	font-weight: 400;
}

.shop-apps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.shop-apps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.shop-apps__link {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	font-weight: 600;
}

.shop-apps__link:hover {
	text-decoration: underline;
}

.shop-apps__link img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: grayscale(1);
}

.shop-product {
	width: 100%;
	max-width: 90rem;
	margin-inline: auto;
	padding: 2rem var(--cphnano-page-gutter, 1.5rem) 3rem;
}

.shop-product__layout {
	display: grid;
	gap: 2.5rem;
	width: 100%;
}

@media (min-width: 48rem) {
	.shop-product__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: start;
	}
}

.shop-product__media {
	position: relative;
}

.shop-product__media .woocommerce-product-gallery {
	margin: 0;
	position: relative;
	opacity: 1 !important;
}

.shop-product__media img {
	width: 100%;
	height: auto;
}

.shop-product__vendor {
	margin: 0 0 0.4rem;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #888;
}

.shop-product__summary .product_title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.shop-product__price {
	font-size: 1.15rem;
	font-weight: 400;
	margin-bottom: 0.15rem;
}

.shop-product__price .price {
	margin: 0;
}

.shop-product__tax {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	color: #666;
}

.shop-product__excerpt {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #444;
}

.shop-product__legal {
	margin-top: 1rem;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
}

.shop-actions {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 1.25rem 0 0;
}

.shop-product .shop-actions .button {
	width: 100%;
	border-radius: 0;
	justify-content: center;
	text-align: center;
}

.shop-product .shop-actions .button--ghost {
	background: #fff;
	color: #111;
	border-color: #111;
}

.shop-product .shop-actions .button--ghost:hover {
	background: #111;
	color: #fff;
}

.shop-variations {
	margin: 0;
}

.shop-variations__row {
	margin-bottom: 1rem;
}

.shop-variations__label {
	margin: 0 0 0.45rem;
	font-size: 0.8rem;
	color: #666;
}

.shop-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.shop-pill {
	appearance: none;
	border: 1px solid #ccc;
	background: #fff;
	color: #666;
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.shop-pill.is-active {
	background: #111;
	border-color: #111;
	color: #fff;
}

.shop-variations__select,
.shop-variations .reset_variations,
.shop-variations .single_add_to_cart_button,
.shop-variations .quantity,
.cphnano-shop .woocommerce-notices-wrapper {
	display: none;
}

.shop-info {
	text-align: center;
}

.shop-info__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #888;
}

.shop-accordion {
	max-width: 44rem;
	margin: 0 auto;
	text-align: left;
	border-top: 1px solid var(--wp--preset--color--line);
}

.shop-accordion__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.85rem 0;
}

.shop-accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	list-style: none;
}

.shop-accordion__title::-webkit-details-marker {
	display: none;
}

.shop-accordion__title::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	flex-shrink: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -0.2rem;
}

.shop-accordion__item[open] .shop-accordion__title::after {
	transform: rotate(-135deg);
	margin-top: 0.2rem;
}

.shop-accordion__body {
	padding-top: 0.75rem;
	font-size: 0.95rem;
}

.woocommerce-product-gallery__trigger {
	display: none;
}

.flex-control-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}

.flex-control-nav img {
	width: 4rem;
	height: 4rem;
	object-fit: cover;
}

.flex-control-nav li img {
	border: 1px solid transparent;
}

.flex-control-thumbs .flex-active,
.flex-control-nav .flex-active {
	border-color: #111;
}

.flex-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.flex-direction-nav a {
	position: absolute;
	top: 40%;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(255 255 255 / 85%);
	color: #111;
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 1;
}

.flex-direction-nav .flex-prev {
	left: 0;
}

.flex-direction-nav .flex-next {
	right: 0;
}

.flex-direction-nav .flex-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * News — the blog, company news and press releases.
 *
 * One archive holds all three, so the card carries its category rather than
 * relying on which page you are on to tell you what you are reading.
 * ------------------------------------------------------------------------ */

.news {
	align-items: stretch;
}

/*
 * The listing sits directly under the page's own intro blocks, and two full
 * section paddings between a lede and the first card reads as a missing
 * section rather than as breathing room.
 */
.section:not(.news) + .news {
	padding-block-start: 0;
}

.news__empty {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Plain links, so a narrowed listing is a real URL that can be shared. */
.news-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.news-filter__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

.news-filter__chip:hover,
.news-filter__chip:focus-visible {
	background: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--surface);
}

.news-filter__chip.is-current {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

/*
 * min-width: 0 because a grid item's automatic minimum is its content, and the
 * content here is an image the browser may fetch at 2048px. Without this a
 * single-column track is sized by the photograph rather than by the column.
 */
.news-card {
	display: flex;
	min-width: 0;
}

/*
 * A card reads left-aligned whatever the section around it does. Centring a
 * headline and a two-line summary inside a box makes both harder to scan.
 */
.news-card__hit {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: start;
	gap: var(--wp--preset--spacing--10);
	width: 100%;
	color: inherit;
	text-decoration: none;
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.news-card__hit:hover,
.news-card__hit:focus-visible {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--custom--shadow--dropdown);
}

.news-card__media {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--wash);
}

.news-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
}

.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.news-card__category {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.news-card__category::after {
	content: "·";
	margin-inline-start: 0.5rem;
	color: var(--wp--preset--color--muted);
}

.news-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.news-card__body-text {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.news-list__more {
	margin: 0;
}

/*
 * The list variant: full-width rows rather than cards, for a sidebar or a
 * narrow column where three cards would each be too small to read.
 */
.section--posts-list .news-list {
	grid-template-columns: 1fr;
	gap: 0;
}

.section--posts-list .news-card__hit {
	flex-direction: row;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	border: 0;
	border-radius: 0;
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	box-shadow: none;
	padding-block: var(--wp--preset--spacing--20);
}

.section--posts-list .news-card__hit:hover,
.section--posts-list .news-card__hit:focus-visible {
	border-color: var(--wp--preset--color--line);
	box-shadow: none;
}

.section--posts-list .news-card__hit:hover .news-card__title,
.section--posts-list .news-card__hit:focus-visible .news-card__title {
	color: var(--wp--preset--color--brand);
}

.section--posts-list .news-card__media {
	display: none;
}

.section--posts-list .news-card__body {
	padding: 0;
}

/* One post. Narrow, because a column of prose is read, not scanned. */
.news-post {
	max-width: 48rem;
}

.news-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.news-post__byline::before {
	content: "·";
	margin-inline-end: 0.5rem;
}

.news-post__media {
	margin: 0;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.news-post__media img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Post body — long-form editorial written in Gutenberg rather than assembled
 * from sections, so the rules below dress whatever blocks an editor reaches
 * for instead of a fixed layout.
 * ------------------------------------------------------------------------ */

.news-post__body h2 {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.news-post__body h3 {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.news-post__body ul,
.news-post__body ol {
	margin-block: var(--wp--preset--spacing--20);
	padding-inline-start: 1.4em;
}

.news-post__body li {
	margin-block: 0.35em;
}

/*
 * An image in a body of prose breaks out past the 40rem measure: the text
 * wants a short line, a photograph does not.
 */
.news-post__body figure {
	margin-block: var(--wp--preset--spacing--40);
	width: 100%;
}

/*
 * Figures step outside the 40rem measure the prose keeps. A line of text wants
 * to be short; a wide diagram reduced to the same width becomes a thin strip
 * with unreadable labels. Only where there is room for it.
 */
@media (min-width: 60rem) {
	.news-post__body figure {
		width: 48rem;
		margin-inline: -4rem;
	}
}

/*
 * Capped by height, not width. A portrait photograph set to the full measure
 * of a prose column comes out over a thousand pixels tall and pushes the
 * article apart; a wide diagram set the same way is fine. Sizing by height and
 * letting width follow keeps both in proportion to the text around them.
 */
.news-post__body figure img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 28rem;
	height: auto;
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--card);
}

/*
 * Centred, because the image it describes is centred. Starting the caption at
 * the figure's own left edge left it hanging outside both the picture and the
 * column of text, belonging to neither.
 */
.news-post__body figcaption {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Jump links for a long post, as a panel rather than a bare list. */
.news-toc {
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--small);
}

.news-toc > :first-child {
	margin-block-start: 0;
}

.news-toc p {
	margin-block: 0 var(--wp--preset--spacing--10);
	font-weight: 700;
	color: var(--wp--preset--color--heading);
}

.news-toc ol {
	margin: 0;
	padding-inline-start: 1.2em;
	line-height: 1.9;
}

.news-toc a {
	text-decoration: none;
}

.news-toc a:hover {
	text-decoration: underline;
}

/* The contact block that closes a press release. */
.news-contacts {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.news-contacts h2 {
	margin-block: 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--medium);
}

/*
 * Lead layout: the newest post as a wide card, the rest as rows beneath it.
 *
 * An earlier version put the rest in a second column beside the lead, which
 * only worked when there were enough of them to fill it — with one secondary
 * post it reserved 40% of the width for a single row and left a hole. Stacking
 * means the section fills its width whether there are two posts or five.
 */
.news-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	text-align: start;
}

.news-lead__main,
.news-lead__rest {
	grid-template-columns: minmax(0, 1fr);
}

/* The lead runs picture-beside-text, so it stays short without cropping hard. */
@media (min-width: 48rem) {
	.news-lead__main .news-card__hit {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
	}

	.news-lead__main .news-card__media {
		flex: none;
		width: 38%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.news-lead__main .news-card__body {
		justify-content: center;
		padding: var(--wp--preset--spacing--40);
	}
}

.news-lead__main .news-card__title {
	font-size: var(--wp--preset--font-size--medium);
}

.news-lead__rest {
	gap: 0;
}

/* Rows: a thumbnail, the title, the date. Nothing else competes with the lead. */
.news-lead__rest .news-card__hit {
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	border: 0;
	border-radius: 0;
	border-block-end: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--20);
	background: none;
	box-shadow: none;
}

.news-lead__rest .news-card:first-child .news-card__hit {
	border-block-start: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
}

.news-lead__rest .news-card__hit:hover,
.news-lead__rest .news-card__hit:focus-visible {
	border-color: var(--wp--preset--color--line);
	box-shadow: none;
}

.news-lead__rest .news-card__hit:hover .news-card__title,
.news-lead__rest .news-card__hit:focus-visible .news-card__title {
	color: var(--wp--preset--color--brand);
}

.news-lead__rest .news-card__media {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	aspect-ratio: auto;
	border-radius: var(--wp--custom--radius--card);
}

.news-lead__rest .news-card__body {
	padding: 0;
	gap: 0.15rem;
}

.news-lead__rest .news-card__body-text {
	display: none;
}

.news-lead__rest .news-card__title {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}