/* =========================================================================
   Hueprint — main.css
   Design tokens + scoped block styles. No resets beyond what's needed.
   Use custom properties to re-theme without touching selectors.
   ========================================================================= */

/* ----- Tokens --------------------------------------------------------- */
:root {
	--color-bg: #ffffff;
	--color-fg: #0b0c0f;
	--color-muted: #5b6270;
	--color-line: #e6e8ec;
	--color-accent: #0b5cff;
	--color-accent-fg: #ffffff;
	--color-hero-bg: var(--color-fg);
	--color-hero-fg: #ffffff;
	--color-footer-bg: var(--color-fg);
	--color-footer-fg: #ffffff;

	--container: 1240px;
	--container-narrow: 760px;
	--container-wide: 1440px;
	--gutter: clamp(1rem, 3vw, 2rem);

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	/* Button tokens — editable via Site Settings → Brand */
	--button-radius: var(--radius-md);
	--button-weight: 600;
	--button-letterspacing: 0.01em;
	--button-transform: none;

	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--font-heading: var(--font-sans);

	/* Heading scale — all overridable via Site Settings → Brand → Headings */
	--h1-size: clamp(3rem, 6vw, 5rem);
	--h1-weight: 600;
	--h1-line-height: 1.1;
	--h2-size: clamp(2.25rem, 4.5vw, 3.5rem);
	--h2-weight: 600;
	--h2-line-height: 1.1;
	--h3-size: clamp(1.75rem, 3vw, 2.25rem);
	--h3-weight: 600;
	--h3-line-height: 1.15;
	--h4-size: clamp(1.25rem, 1.8vw, 1.5rem);
	--h4-weight: 600;
	--h4-line-height: 1.25;
	--h5-size: 1.125rem;
	--h5-weight: 600;
	--h5-line-height: 1.3;
	--h6-size: 1rem;
	--h6-weight: 600;
	--h6-line-height: 1.4;
	--heading-letterspacing: -0.01em;

	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: clamp(1.25rem, 1.8vw, 1.5rem);
	--fs-2xl: clamp(1.75rem, 3vw, 2.25rem);
	--fs-3xl: clamp(2.25rem, 4.5vw, 3.5rem);
	--fs-4xl: clamp(3rem, 6vw, 5rem);

	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-normal: 1.6;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 220ms;
}

/* ----- Reset-lite ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--color-fg);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.06em; }
a:hover { text-decoration-thickness: 0.12em; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: var(--heading-letterspacing);
}
h1 { font-size: var(--h1-size); line-height: var(--h1-line-height); font-weight: var(--h1-weight); }
h2 { font-size: var(--h2-size); line-height: var(--h2-line-height); font-weight: var(--h2-weight); }
h3 { font-size: var(--h3-size); line-height: var(--h3-line-height); font-weight: var(--h3-weight); }
h4 { font-size: var(--h4-size); line-height: var(--h4-line-height); font-weight: var(--h4-weight); }
h5 { font-size: var(--h5-size); line-height: var(--h5-line-height); font-weight: var(--h5-weight); }
h6 { font-size: var(--h6-size); line-height: var(--h6-line-height); font-weight: var(--h6-weight); }

/* Sub-headings need more breathing room before body copy.
   At smaller font sizes, the default `.5em` margin reads as cramped — the
   subheading visually merges with the paragraph below it. Bumping the
   bottom margin separates the type hierarchy clearly.
   These rules apply globally; block-level heading classes (.hero__heading,
   .content-block__heading, .section-intro__heading, .media-text__heading)
   have their own margin-bottom rules and override these as needed. */
h3 { margin-bottom: 1em; }
h4 { margin-bottom: .9em; }
h5 { margin-bottom: .85em; }
h6 { margin-bottom: .85em; }
p { margin: 0 0 1em; }
figure { margin: 0; }
ul, ol { padding-inline-start: 1.2em; }

/* Accessibility ------------------------------------------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link {
	position: fixed; top: -100px; left: 1rem; z-index: 100;
	background: var(--color-fg); color: var(--color-bg);
	padding: .5rem 1rem; border-radius: var(--radius-sm);
	transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

*:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ----- Containers ---------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.container--default { max-width: var(--container); }

/* ----- Buttons ------------------------------------------------------- */
.button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .9rem 1.5rem; border-radius: var(--button-radius);
	font-weight: var(--button-weight); font-size: var(--fs-sm);
	letter-spacing: var(--button-letterspacing); text-transform: var(--button-transform);
	text-decoration: none; border: 1px solid transparent;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.button + .button { margin-inline-start: .5rem; }
.button--primary { background: var(--color-accent); color: var(--color-accent-fg); }
.button--primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, black); }
.button--secondary {
	background: var(--color-button-secondary-bg, var(--color-fg));
	color: var(--color-button-secondary-fg, var(--color-bg));
}
.button--secondary:hover {
	background: color-mix(in oklab, var(--color-button-secondary-bg, var(--color-fg)) 85%, white);
}
.button--ghost { background: transparent; color: var(--color-fg); border-color: currentColor; }
.button--ghost:hover { background: var(--color-fg); color: var(--color-bg); }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; transition: transform var(--dur) var(--ease); display: inline-block; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ----- Notification bar ----------------------------------------------
   Site-wide announcement bar that sits above the header. Renders only
   when enabled in Site Settings → Notification Bar. Default colors
   inherit from the brand accent; custom colors override via CSS vars
   set inline by the helper.

   Dismissed state is JS-driven — when a visitor clicks the close button
   the bar gets `is-hidden` class and a key is written to storage. On
   subsequent page loads, JS reads the same key and re-applies the class
   before paint, so there's no flash of the dismissed bar.
*/
.notification-bar {
	position: relative;
	z-index: 60;
	background: var(--notif-bg, var(--color-accent));
	color: var(--notif-fg, #fff);
	font-size: var(--fs-sm);
	line-height: 1.4;
	border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent);
}
.notification-bar.is-hidden { display: none; }
.notification-bar--sticky { position: sticky; top: 0; }

.notification-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .65rem var(--gutter);
	min-height: 2.5rem;
	color: inherit;
	text-align: center;
	flex-wrap: wrap;
}
.notification-bar--dismissible .notification-bar__inner {
	/* Reserve space for the close button so message stays centered */
	padding-right: calc(var(--gutter) + 2.25rem);
}
.notification-bar__link { text-decoration: none; transition: opacity var(--dur) var(--ease); }
.notification-bar__link:hover { opacity: .85; }
.notification-bar__message { font-weight: 500; }
.notification-bar__cta {
	font-weight: 600;
	border-bottom: 1px solid color-mix(in oklab, currentColor 50%, transparent);
	padding-bottom: 1px;
}
.notification-bar__cta span[aria-hidden] {
	display: inline-block;
	transition: transform var(--dur) var(--ease);
	margin-left: .15rem;
}
.notification-bar__link:hover .notification-bar__cta span[aria-hidden] {
	transform: translateX(3px);
}

.notification-bar__close {
	position: absolute;
	right: calc(var(--gutter) - .25rem);
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	opacity: .8;
	transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.notification-bar__close:hover,
.notification-bar__close:focus-visible {
	opacity: 1;
	background: color-mix(in oklab, currentColor 18%, transparent);
}

@media (max-width: 600px) {
	.notification-bar__inner { font-size: var(--fs-xs); }
}

/* When the Minimal header is in use (transparent over hero), the
   notification bar must NOT be absolutely positioned above the hero —
   it lives in the document flow and pushes the page down. The
   `.site-header--minimal` rule is `position: absolute; top: 0`, so we
   nudge it down by the bar height when the bar is present.
   The bar's height is read at runtime via JS into a CSS var. */
:where(body):has(.notification-bar:not(.is-hidden)) .site-header--minimal {
	top: var(--notif-height, 0px);
}

/* ----- Site header --------------------------------------------------- */
.site-header { position: relative; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 1rem; }
.site-header__brand { display: inline-flex; align-items: baseline; gap: .75rem; }
.site-header__title { font-weight: 700; font-size: var(--fs-lg); text-decoration: none; letter-spacing: -0.02em; }
.site-header__tagline { color: var(--color-muted); font-size: var(--fs-sm); }
.custom-logo { max-height: 40px; width: auto; }

/* Two-logo system — .site-logo is what render_logo() outputs.
   The header and footer each have their own height token, both defaulting
   to 48px. Editors can override per surface in Site Settings → Brand →
   Logo Sizes. width: auto keeps the logo's aspect ratio proportional. */
.site-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.site-logo-text { font-weight: 700; font-size: var(--fs-lg); text-decoration: none; letter-spacing: -0.02em; color: inherit; }
.site-logo { width: auto; display: block; }
.site-header .site-logo { max-height: var(--logo-size-header, 48px); }
.site-footer .site-logo { max-height: var(--logo-size-footer, 48px); }
.site-header .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; align-items: center; }
.site-header .menu a { text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.site-header .menu a:hover { color: var(--color-accent); }

/* ===================================================================
   Dropdown + Mega Menu
   ===================================================================
   Two systems share infrastructure:
     1. Standard dropdown  — .menu-item-has-children without .has-mega-menu.
                             Narrow column below trigger, shows on hover/focus.
     2. Mega menu panel    — .menu-item-has-children.has-mega-menu. Full-bleed
                             panel with columns, featured cards, CTAs.
   Both use CSS-only hover/focus, layered JS for touch + keyboard above.
   =================================================================== */

/* Make top-level menu items positioning anchors */
.site-header .menu--primary { position: relative; }
.site-header .menu--primary > .menu-item { position: relative; }

/* Dropdown indicator caret */
.site-header .menu--primary > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: .4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dur) var(--ease);
	opacity: .7;
}
.site-header .menu--primary > .menu-item-has-children:hover > a::after,
.site-header .menu--primary > .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
	opacity: 1;
}

/* ---- Standard dropdown --------------------------------------------- */
.site-header .menu--primary .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14rem;
	margin: 0;
	padding: .5rem;
	list-style: none;
	background: var(--color-menu-bg, var(--color-bg));
	color: var(--color-menu-fg, var(--color-fg));
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);

	/* Hidden state — opacity + visibility so focus-within still works */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
	z-index: 60;
}
.site-header .menu--primary .sub-menu li { display: block; }
.site-header .menu--primary .sub-menu a {
	display: block;
	padding: .6rem .75rem;
	border-radius: var(--radius-sm);
	font-weight: 500;
	color: inherit;
}
.site-header .menu--primary .sub-menu a:hover,
.site-header .menu--primary .sub-menu a:focus-visible {
	background: transparent;
	color: var(--color-accent);
}

/* Reveal on hover / focus-within / data-open (for touch via JS) */
.site-header .menu--primary > .menu-item-has-children:hover > .sub-menu,
.site-header .menu--primary > .menu-item-has-children:focus-within > .sub-menu,
.site-header .menu--primary > .menu-item-has-children[data-open="true"] > .sub-menu,
.site-header .menu--primary > .has-mega-menu:hover > .mega-panel,
.site-header .menu--primary > .has-mega-menu:focus-within > .mega-panel,
.site-header .menu--primary > .has-mega-menu[data-open="true"] > .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/* ---- Mega menu panel ------------------------------------------------ */
/* The panel breaks out of the nav by pinning to the header bottom and
   spanning the viewport. The inner .container re-centers content so it
   aligns with the rest of the page. */
.site-header .has-mega-menu { position: static; } /* escape the .menu-item positioning ancestor */

.site-header .mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	padding-block: var(--space-md);
	background: var(--color-menu-bg, var(--color-bg));
	color: var(--color-menu-fg, var(--color-fg));
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .06);

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
	z-index: 60;
}
.mega-panel__inner { /* uses .container — padding handled by shared class */ }

.mega-panel__columns {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-md);
	align-items: start;
}
.mega-panel__columns > li { margin: 0; }

/* Column heading (non-clickable label above a group of links) */
.mega-panel .mega-column-heading > a {
	pointer-events: none;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--color-muted);
	font-weight: 600;
	padding: 0 0 .5rem;
	display: block;
}
.mega-panel .mega-column-heading > .sub-menu,
.mega-panel .menu-item-has-children > .sub-menu {
	display: block;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	transition: none;
}
.mega-panel .sub-menu a {
	display: block;
	padding: .35rem 0;
	font-weight: 500;
	color: inherit;
}
.mega-panel .sub-menu a:hover,
.mega-panel .sub-menu a:focus-visible {
	color: var(--color-accent);
	background: transparent;
}

/* Featured card — visual block inside the mega panel */
.mega-panel .mega-featured { margin: 0; }
.mega-panel .mega-featured__link {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 0;
	text-decoration: none;
	color: inherit;
	transition: transform var(--dur) var(--ease);
}
.mega-panel .mega-featured__link:hover,
.mega-panel .mega-featured__link:focus-visible {
	color: var(--color-accent);
	background: transparent;
}
.mega-panel .mega-featured__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: color-mix(in oklab, var(--color-fg) 5%, var(--color-bg));
}
.mega-panel .mega-featured__body { display: flex; flex-direction: column; gap: .25rem; }
.mega-panel .mega-featured__title {
	font-weight: 600;
	font-size: var(--fs-md);
}
.mega-panel .mega-featured__desc {
	font-size: var(--fs-sm);
	color: var(--color-muted);
	line-height: var(--lh-snug);
}

/* CTA item inside a mega panel */
.mega-panel .mega-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .7rem 1.25rem;
	margin-top: .5rem;
	background: var(--color-fg);
	color: var(--color-bg);
	border-radius: var(--button-radius);
	font-weight: var(--button-weight);
	letter-spacing: var(--button-letterspacing);
	text-transform: var(--button-transform);
}
.mega-panel .mega-cta > a:hover,
.mega-panel .mega-cta > a:focus-visible {
	background: var(--color-accent);
	color: var(--color-accent-fg);
}

/* On the minimal (transparent over dark hero) header, the panel surface
   still stays light — dark text is more legible at large widths than a
   translucent dark panel. */
.site-header--minimal .mega-panel { color: var(--color-menu-fg, var(--color-fg)); }

/* Reduce motion: skip the translate, keep only the fade */
@media (prefers-reduced-motion: reduce) {
	.site-header .menu--primary .sub-menu,
	.site-header .mega-panel { transform: none; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
}

/* Mobile — dropdowns + mega panels flatten into the drawer */
@media (max-width: 860px) {
	.site-header .menu--primary .sub-menu,
	.site-header .mega-panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: .5rem 0 0 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
		transition: none;
	}
	.mega-panel__columns {
		display: block;
	}
	.mega-panel__columns > li + li { margin-top: 1rem; }
	.mega-panel .mega-featured__image { max-width: 60%; }
	.site-header .menu--primary > .menu-item-has-children > a::after { display: none; }
}

/* Utility strip */
.site-header__utility { background: var(--color-fg); color: var(--color-bg); font-size: var(--fs-xs); }
.site-header__utility .menu { padding-block: .5rem; justify-content: flex-end; }
.site-header__utility a { opacity: .75; }
.site-header__utility a:hover { opacity: 1; color: var(--color-bg); }

/* Mobile toggle */
.site-header__toggle {
	display: none; background: transparent; border: 0; padding: .5rem;
	width: 44px; height: 44px; position: relative;
}
.site-header__toggle-bars, .site-header__toggle-bars::before, .site-header__toggle-bars::after {
	content: ""; display: block; position: absolute; left: 50%; top: 50%;
	width: 22px; height: 2px; background: currentColor; transform: translate(-50%, -50%);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.site-header__toggle-bars::before { transform: translate(-50%, -8px); }
.site-header__toggle-bars::after { transform: translate(-50%, 6px); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars { background: transparent; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before { transform: translate(-50%, 0) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after { transform: translate(-50%, 0) rotate(-45deg); }
.site-header__toggle-label { font-size: var(--fs-sm); font-weight: 600; }

/* Variant: centered */
.site-header--centered .site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.site-header--centered .site-header__brand { justify-content: center; grid-column: 2; }
.site-header--centered .site-header__nav--left .menu { justify-content: flex-start; }
.site-header--centered .site-header__nav--right .menu { justify-content: flex-end; }

/* Variant: minimal — transparent over hero, inline nav (matches Standard).
   The header sits absolutely over the first section; text and the nav
   toggle render in white so they're legible over a dark/imagery hero. */
.site-header--minimal {
	position: absolute; inset: 0 0 auto 0;
	background: transparent; border-bottom: 0; color: #fff;
}
.site-header--minimal .site-header__title,
.site-header--minimal .site-logo-text { color: #fff; }
.site-header--minimal .menu a { color: #fff; }
.site-header--minimal .site-header__toggle { color: #fff; }
.site-header--minimal .site-header__toggle-bars,
.site-header--minimal .site-header__toggle-bars::before,
.site-header--minimal .site-header__toggle-bars::after { background: #fff; }

/* When the nav opens on narrow screens over a hero, give the inline panel
   a translucent dark backdrop so menu items don't fight the hero imagery. */
@media (max-width: 860px) {
	.site-header--minimal[data-nav-open="true"] .site-header__nav {
		background: rgba(11, 12, 15, .92);
		backdrop-filter: blur(8px);
		padding: var(--space-sm) var(--gutter);
	}
}

/* Variant: split */
.site-header--split .site-header__end { display: flex; align-items: center; gap: var(--space-md); }
.site-header--split .site-header__cta { padding: .6rem 1rem; }

/* Mobile nav */
@media (max-width: 860px) {
	.site-header__toggle { display: inline-flex; }
	.site-header__nav,
	.site-header--split .site-header__end > .site-header__nav,
	.site-header--centered .site-header__nav--left,
	.site-header--centered .site-header__nav--right { display: none; }

	.site-header[data-nav-open="true"] .site-header__nav,
	.site-header--centered[data-nav-open="true"] .site-header__nav--left,
	.site-header--centered[data-nav-open="true"] .site-header__nav--right {
		display: block;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--color-bg); border-top: 1px solid var(--color-line);
		padding: var(--space-sm) var(--gutter);
	}
	.site-header[data-nav-open="true"] .menu,
	.site-header--centered[data-nav-open="true"] .menu {
		flex-direction: column; align-items: flex-start; gap: .75rem;
	}
	.site-header--split .site-header__cta { display: none; }
	.site-header--centered .site-header__inner { grid-template-columns: 1fr auto auto; }
}

/* ----- Flex section base -------------------------------------------- */
.flex { position: relative; }
/* Ensure the section is its own positioning context so absolute-positioned
   dividers/backgrounds anchor to it and not an ancestor. */
.flex > .flex__divider { pointer-events: none; }
/* When a background image is set, the section's direct child container needs
   to rise above the overlay layer. The hero already handles its own stacking
   via .flex__inner. */
.flex--has-bg > .container { position: relative; z-index: 1; }
/* Text over imagery gets a default light palette so it remains readable
   regardless of the block's theme setting. Editors can override by choosing
   a theme explicitly. Hero excluded — it manages its own color via
   --color-hero-fg (editable in Brand tab). */
.flex--has-bg:not(.flex--hero) { color: #fff; }
.flex--has-bg:not(.flex--hero) .section-intro__eyebrow { color: #fff; opacity: .85; }
.flex--has-bg:not(.flex--hero) .section-intro__body { color: rgba(255, 255, 255, .85); }
.flex--has-bg:not(.flex--hero) .column__text,
.flex--has-bg:not(.flex--hero) .media-text__body,
.flex--has-bg:not(.flex--hero) .content-block__body { color: rgba(255, 255, 255, .85); }
.flex--has-bg:not(.flex--hero) .column { color: var(--color-fg); } /* card content keeps its own palette */

/* ----- Section dividers (waves, angles, curves, triangles, tilts) ----
   Rendered as absolutely-positioned SVGs that stretch to the section width.
   The shape's fill color is set inline per-section (defaults to white) to
   match the adjacent section's background. Height scales with viewport so
   the curve feels proportional; capped to avoid eating content on tall
   sections. Hero gets a taller curve because heroes tend to be bigger.
*/
.flex__divider {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: clamp(40px, 6vw, 90px);
	overflow: hidden;
	z-index: 2;
	line-height: 0;
}
.flex__divider--top    { top: -1px; }  /* -1px avoids a 1-pixel hairline between sections */
.flex__divider--bottom { bottom: -1px; transform: scaleY(-1); }
.flex__divider-svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hero dividers get a bit more height — heroes are big sections, tiny
   dividers look out of proportion on them. */
.flex--hero > .flex__divider { height: clamp(60px, 8vw, 140px); }

/* Ensure the main content container rises above divider layer so nothing
   (like an accordion caret or a CTA button) gets obscured. */
.flex > .container,
.flex > .flex__inner { position: relative; z-index: 3; }

.flex--spacing-none { padding-block: 0; }
.flex--spacing-small { padding-block: var(--space-md); }
.flex--spacing-medium { padding-block: var(--space-lg); }
.flex--spacing-large { padding-block: var(--space-xl); }

.flex--theme-default { background: var(--color-bg); color: var(--color-fg); }
.flex--theme-light { background: #f6f7f9; color: var(--color-fg); }
.flex--theme-dark { background: var(--color-fg); color: #fff; }
.flex--theme-dark a { color: inherit; }
.flex--theme-accent { background: var(--color-accent); color: var(--color-accent-fg); }
.flex--theme-accent a { color: inherit; }

.flex__media { position: absolute; inset: 0; overflow: hidden; }
.flex__media img, .flex__media video { width: 100%; height: 100%; object-fit: cover; }

/* Background video: hide for users who prefer reduced motion. If a poster image
   was supplied (via --poster-url inline style from PHP), show it as a static
   background. Without a poster, the video simply hides and the overlay shows
   through to the theme background. */
@media (prefers-reduced-motion: reduce) {
	.flex__media--video video { display: none; }
	.flex__media--video {
		background-image: var(--poster-url, none);
		background-size: cover;
		background-position: center;
	}
}
/* Gradient background — alternative to image/video.
   The CSS background-image is set inline by PHP (linear-gradient or
   radial-gradient with editor-picked colors). For the animated variant,
   we scale the gradient to 200% of the container and shift its
   background-position cyclically. The technique is GPU-accelerated
   (background-position is a compositor-only property) and creates a
   smooth, unending "alive" feel without runaway CPU cost.
   The animation is paused for prefers-reduced-motion users. */
.flex__media--gradient {
	background-size: cover;
	background-position: center;
}
.flex__media--gradient-animated {
	background-size: 200% 200%;
	animation: hueprint-gradient-shift 12s ease-in-out infinite;
}
.flex__media--gradient-slow   { animation-duration: 20s; }
.flex__media--gradient-medium { animation-duration: 12s; }
.flex__media--gradient-fast   { animation-duration: 6s; }

@keyframes hueprint-gradient-shift {
	0%   { background-position: 0%   50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0%   50%; }
}

@media (prefers-reduced-motion: reduce) {
	.flex__media--gradient-animated {
		animation: none;
		background-size: cover;
	}
}

.flex__overlay { position: absolute; inset: 0; }
.flex__overlay--dark  { background: rgba(0, 0, 0, var(--overlay-opacity, .4)); }
.flex__overlay--light { background: rgba(255, 255, 255, var(--overlay-opacity, .4)); }

/* When a section has a LIGHT overlay, the image becomes bright — any text
   layered on top should switch to the dark page foreground for legibility.
   The base .flex--has-bg rule (elsewhere in this file) sets text to the
   hero foreground color (typically white) — this overrides that to use
   the dark text color instead.
   :has() selector means: any .flex section that contains a light overlay
   gets its text color flipped. */
.flex--has-bg:has(.flex__overlay--light) { color: var(--color-fg); }
.flex--has-bg:has(.flex__overlay--light) .hero__heading,
.flex--has-bg:has(.flex__overlay--light) .hero__content,
.flex--has-bg:has(.flex__overlay--light) .section-intro,
.flex--has-bg:has(.flex__overlay--light) .section-intro__heading,
.flex--has-bg:has(.flex__overlay--light) .section-intro__eyebrow {
	color: var(--color-fg);
}
.flex__inner { position: relative; z-index: 1; }

/* ----- Mobile alignment override -----------------------------------
   When a section has data-mobile-align, this block flips its content
   alignment under 768px regardless of the desktop alignment setting.
   Targets:
     - Section intro (eyebrow / heading / intro paragraph)
     - Block heading + body areas (.flex__inner, .container)
     - Action rows (buttons, links, social grids)
     - Hero text and CTA action rows specifically (data-align, .hero__actions)
     - Stats grid + intro (uses different intro class)
     - Pricing tier text alignment
     - Card and testimonial bodies
   Single source of truth — no per-block code. !important is used because
   block-specific rules (e.g. .hero__actions { justify-content: flex-start })
   would otherwise win on specificity. */
@media (max-width: 767.98px) {
	/* Center variant ------------------------------------------------- */
	.flex[data-mobile-align="center"],
	.flex[data-mobile-align="center"] .section-intro,
	.flex[data-mobile-align="center"] .hero__content,
	.flex[data-mobile-align="center"] .column,
	.flex[data-mobile-align="center"] .column__text,
	.flex[data-mobile-align="center"] .media-text__body,
	.flex[data-mobile-align="center"] .content-block__body,
	.flex[data-mobile-align="center"] .feature-list__intro,
	.flex[data-mobile-align="center"] .feature-list__body,
	.flex[data-mobile-align="center"] .pricing__tier,
	.flex[data-mobile-align="center"] .timeline__body,
	.flex[data-mobile-align="center"] .team__member,
	.flex[data-mobile-align="center"] .integrations__card,
	.flex[data-mobile-align="center"] .cta__inner {
		text-align: center !important;
	}

	/* Section intro shared modifier — also handles the centered variant
	   max-width so a center-aligned intro reads as a centered column */
	.flex[data-mobile-align="center"] .section-intro__body,
	.flex[data-mobile-align="center"] .section-intro__heading,
	.flex[data-mobile-align="center"] .section-intro__eyebrow {
		margin-inline: auto;
	}

	/* Action rows — wherever buttons or links sit in a flex row, recenter */
	.flex[data-mobile-align="center"] .hero__actions,
	.flex[data-mobile-align="center"] .cta__actions,
	.flex[data-mobile-align="center"] .feature-list__link,
	.flex[data-mobile-align="center"] .related-work__footer,
	.flex[data-mobile-align="center"] .team__social,
	.flex[data-mobile-align="center"] .pricing__cta {
		justify-content: center !important;
	}
	.flex[data-mobile-align="center"] .pricing__feature {
		justify-content: center !important;
	}

	/* Hero data-align is the canonical Hero text alignment — override it */
	.flex--hero[data-mobile-align="center"][data-align] { text-align: center; }
	.flex--hero[data-mobile-align="center"] .hero__content { margin-inline: auto; }

	/* Left variant -------------------------------------------------- */
	.flex[data-mobile-align="left"],
	.flex[data-mobile-align="left"] .section-intro,
	.flex[data-mobile-align="left"] .hero__content,
	.flex[data-mobile-align="left"] .column,
	.flex[data-mobile-align="left"] .column__text,
	.flex[data-mobile-align="left"] .media-text__body,
	.flex[data-mobile-align="left"] .content-block__body,
	.flex[data-mobile-align="left"] .feature-list__intro,
	.flex[data-mobile-align="left"] .feature-list__body,
	.flex[data-mobile-align="left"] .pricing__tier,
	.flex[data-mobile-align="left"] .timeline__body,
	.flex[data-mobile-align="left"] .team__member,
	.flex[data-mobile-align="left"] .integrations__card,
	.flex[data-mobile-align="left"] .cta__inner {
		text-align: left !important;
	}
	.flex[data-mobile-align="left"] .section-intro__body,
	.flex[data-mobile-align="left"] .section-intro__heading,
	.flex[data-mobile-align="left"] .section-intro__eyebrow {
		margin-inline: 0;
	}
	.flex[data-mobile-align="left"] .hero__actions,
	.flex[data-mobile-align="left"] .cta__actions,
	.flex[data-mobile-align="left"] .feature-list__link,
	.flex[data-mobile-align="left"] .related-work__footer,
	.flex[data-mobile-align="left"] .team__social,
	.flex[data-mobile-align="left"] .pricing__cta {
		justify-content: flex-start !important;
	}
	.flex--hero[data-mobile-align="left"][data-align] { text-align: left; }
	.flex--hero[data-mobile-align="left"] .hero__content { margin-inline: 0; }
}

/* ----- Hero ----------------------------------------------------------
   The hero uses CSS Grid as its top-level layout to vertically center
   content. Without `grid-template-columns: minmax(0, 1fr)` the implicit
   single-column track sizes itself to its content's intrinsic width —
   meaning long headings, code, or wide images can blow out the column
   and cause horizontal page scroll. The minmax() pattern is the canonical
   fix: forces the track to never exceed its parent. Same fix is applied
   to .hero__split children below. */
.flex--hero {
	min-height: 60vh;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	background-color: var(--color-hero-bg);
	color: var(--color-hero-fg);
	padding-block: clamp(4rem, 10vh, 8rem);
	overflow: hidden;
}
.flex--hero[data-height="small"] { min-height: 40vh; }
.flex--hero[data-height="medium"] { min-height: 55vh; }
.flex--hero[data-height="full"] { min-height: 100vh; }
.flex--hero[data-align="center"] .hero__content { text-align: center; margin-inline: auto; }
.flex--hero[data-align="right"]  .hero__content { text-align: right; margin-inline-start: auto; }

.hero__content {
	max-width: min(48rem, 100%);
	min-width: 0;
}
.hero__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 600; opacity: .85; margin-bottom: 1rem; }
.hero__heading {
	margin-bottom: 1rem;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.hero__subheading {
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	max-width: min(40rem, 100%);
	opacity: .9;
	overflow-wrap: anywhere;
}
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.flex--hero[data-align="center"] .hero__subheading { margin-inline: auto; }
.flex--hero[data-align="center"] .hero__actions { justify-content: center; }

/* Hero split variant — 50/50 OR 60/40 column layout.
   The split family covers four variants:
     - split_left / split_right        → 50/50 columns (media on the named side)
     - media_60_left / media_60_right  → 60/40 columns (media gets the wider 60%)
   Unlike full-bleed which is always over a dark/image background and uses
   --color-hero-bg, split heroes are typically normal sections with a light
   background, so they fall back to page colors. Editors can still apply a
   theme (.flex--theme-*) via Section Settings for custom colors. */
.flex--hero[data-variant^="split"],
.flex--hero[data-variant^="media_60"] {
	background-color: transparent;
	color: var(--color-fg);
	display: block;
	min-height: 0;
	padding-block: var(--space-xl);
}
.flex--hero[data-variant^="split"]:not([class*="flex--theme-"]):not([data-has-bg]),
.flex--hero[data-variant^="media_60"]:not([class*="flex--theme-"]):not([data-has-bg]) {
	background-color: var(--color-bg);
}
/* When the split hero has a section background image/video, it takes over —
   text shifts to light for contrast. */
.flex--hero[data-variant^="split"][data-has-bg],
.flex--hero[data-variant^="media_60"][data-has-bg] {
	color: var(--color-hero-fg);
}
.flex--hero[data-variant^="split"][data-has-bg] .hero__content,
.flex--hero[data-variant^="media_60"][data-has-bg] .hero__content { color: inherit; }
.flex--hero[data-variant^="split"] .hero__heading,
.flex--hero[data-variant^="media_60"] .hero__heading { color: inherit; }

.hero__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	align-items: center;
}
@media (min-width: 900px) {
	/* 50/50 by default. minmax(0, ...) forces tracks to honor their fr
	   ratios even when child content is intrinsically wider — without it,
	   long headings or wide images cause column tracks to expand and
	   break the 50/50 or 60/40 ratio. */
	.hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
	/* 60/40 layouts — the 60% always belongs to the media column. */
	.flex--hero[data-variant="media_60_left"]  .hero__split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.flex--hero[data-variant="media_60_right"] .hero__split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.hero__split-content {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.hero__split-content .hero__content {
	/* Cap to fit within narrower split cells (40% of 1240px ≈ 500px) but
	   never larger than the cell's actual width. min(36rem, 100%) handles
	   both the 50/50 case (36rem fits) and the 60/40 case (100% wins). */
	max-width: min(36rem, 100%);
	min-width: 0;
}

/* Hard cap on action buttons inside the split — they live in a flex-wrap
   row, but a long button label can still expand the row past its column
   width. This keeps each button shrinkable. */
.hero__split-content .hero__actions {
	max-width: 100%;
}
.hero__split-content .hero__actions > * {
	max-width: 100%;
	min-width: 0;
}

/* Split media column.
   - No background color — PNGs with transparency sit clean against the hero's
     own background rather than on a gray rectangle.
   - No forced aspect ratio on the wrapper — images dictate their own height.
   - object-fit: contain keeps the full image visible at its natural ratio,
     which is the right default for product shots, illustrations, and logos.
   - Videos keep an aspect ratio on their wrapper because they stream into a
     box and would otherwise collapse to 0 before metadata loads. */
.hero__split-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-width: 0;
	max-width: 100%;
}
.hero__split-media > img {
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	display: block;
}
/* Videos still need a defined box — fall back to a square on desktop, 4/5 on mobile */
.hero__split-media--video {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
}
@media (min-width: 900px) {
	.hero__split-media--video { aspect-ratio: 1 / 1; }
}
.hero__split-media--video > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right-side variants — flip media to the second column.
   Use explicit grid-column placement instead of `order` because order
   only affects visual position; the cell-track assignment goes by DOM
   order which can put content in the narrow 40% track while it expects
   the wider 60% track. Explicit placement makes track assignment
   deterministic regardless of source order or `order` values. */
@media (min-width: 900px) {
	.flex--hero[data-variant="split_right"] .hero__split-media,
	.flex--hero[data-variant="media_60_right"] .hero__split-media {
		grid-column: 2;
		grid-row: 1;
	}
	.flex--hero[data-variant="split_right"] .hero__split-content,
	.flex--hero[data-variant="media_60_right"] .hero__split-content {
		grid-column: 1;
		grid-row: 1;
	}
}

/* Dual-media split — when the editor sets text-column-mode to image/video,
   both columns of the hero become media cells. The heading/buttons render
   above the media row as a centered intro. The text-column slot uses the
   exact same .hero__split-media CSS as the regular media slot, so sizing,
   object-fit, video poster, and aspect ratio all behave identically.

   Track assignment: in dual-media mode we explicitly place each media
   cell so the right-side layout overrides above continue to work. */
@media (min-width: 900px) {
	.flex--hero[data-variant="split_right"]    .hero__split--dual-media .hero__split-media--text-col,
	.flex--hero[data-variant="media_60_right"] .hero__split--dual-media .hero__split-media--text-col {
		grid-column: 1;
		grid-row: 1;
	}
}

.hero__dual-intro {
	max-width: 60ch;
	margin: 0 auto var(--space-md);
	text-align: center;
}
/* When the intro renders BELOW the media row, flip the margin direction
   so the spacing sits between the media (above) and the intro (below). */
.hero__split--dual-media + .hero__dual-intro,
.flex--hero .container > .hero__dual-intro:last-child {
	margin: var(--space-md) auto 0;
}

/* Intro placed under the 40% column on 60/40 dual-media layouts.
   Architecture: in under-40 mode, the text-column media and the intro live
   inside a single .hero__split-stack wrapper, which becomes ONE grid cell
   alongside the 60% media. The wrapper takes its own intrinsic height
   (auto-sized to media + intro), independent of how tall the 60% media is.
   This stacks them tight together without any row-gap inheritance from the
   parent grid. */
.hero__split-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	/* Stack centers vertically against the OTHER column (the 60% media)
	   so a tall product shot frames the paired media+intro unit cleanly. */
	align-self: center;
}
.hero__split--intro-under-40 {
	align-items: center;
}
.hero__split--intro-under-40 .hero__dual-intro {
	max-width: none;
	margin: 0;
	text-align: left;
}
/* Tighten the heading→content→buttons stack inside the intro so the
   whole paired unit reads as one composition. */
.hero__split--intro-under-40 .hero__dual-intro .hero__heading { margin-bottom: .5rem; }
.hero__split--intro-under-40 .hero__dual-intro .hero__content { margin-bottom: .75rem; }
.hero__split--intro-under-40 .hero__dual-intro .hero__actions { justify-content: flex-start; }

/* Track placement: the stack lives in the 40% column track. */
@media (min-width: 900px) {
	.flex--hero[data-variant="media_60_left"]  .hero__split--intro-under-40 .hero__split-stack {
		grid-column: 2;
		grid-row: 1;
	}
	.flex--hero[data-variant="media_60_right"] .hero__split--intro-under-40 .hero__split-stack {
		grid-column: 1;
		grid-row: 1;
	}
}
.hero__dual-intro--left   { text-align: left; margin-left: 0; }
.hero__dual-intro--right  { text-align: right; margin-right: 0; }
.hero__dual-intro--center { text-align: center; }
.hero__dual-intro .hero__heading { margin-bottom: .75rem; }
.hero__dual-intro .hero__content { margin-bottom: 1rem; }
.hero__dual-intro .hero__actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.hero__dual-intro--center .hero__actions { justify-content: center; }
.hero__dual-intro--right .hero__actions  { justify-content: flex-end; }

/* Reduced motion: hide the split video, show the poster */
@media (prefers-reduced-motion: reduce) {
	.hero__split-media--video > video { display: none; }
	.hero__split-media--video {
		background-image: var(--poster-url, none);
		background-size: cover;
		background-position: center;
	}
}

/* When minimal header is used, the next flex section gets pushed down
   only if it's not a hero with a background. The hero handles its own full-bleed. */

/* ----- Hero entrance animations ------------------------------------
   Pure CSS keyframes that fire on page load. The hero is above the fold
   so we don't need IntersectionObserver — `animation` runs the moment
   the element is in the DOM. Each animation kind is identified by
   data-anim on .hero__content or .hero__split-media.

   When data-anim-stagger is set on .hero__content, the inner elements
   (eyebrow, heading, subheading, actions) animate sequentially using
   nth-child delays so they cascade in instead of moving as a block.

   prefers-reduced-motion disables every animation — users who've opted
   out see the final state immediately, no movement.
*/
@keyframes hueprint-fade        { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes hueprint-fade-up     { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hueprint-fade-down   { from { opacity: 0; transform: translateY(-24px);} to { opacity: 1; transform: translateY(0); } }
@keyframes hueprint-fade-left   { from { opacity: 0; transform: translateX(-32px);} to { opacity: 1; transform: translateX(0); } }
@keyframes hueprint-fade-right  { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hueprint-scale       { from { opacity: 0; transform: scale(0.95); }      to { opacity: 1; transform: scale(1); } }

[data-anim] {
	animation-duration: 800ms;
	animation-timing-function: cubic-bezier(.2, .65, .25, 1);
	animation-fill-mode: both;
	will-change: opacity, transform;
}
[data-anim="fade"]        { animation-name: hueprint-fade; }
[data-anim="fade-up"]     { animation-name: hueprint-fade-up; }
[data-anim="fade-down"]   { animation-name: hueprint-fade-down; }
[data-anim="fade-left"]   { animation-name: hueprint-fade-left; }
[data-anim="fade-right"]  { animation-name: hueprint-fade-right; }
[data-anim="scale"]       { animation-name: hueprint-scale; }

/* Media slightly delayed so it lands after the text settles — feels more
   intentional than two elements firing in sync. Only applies when the
   text ALSO animates; when text is static, media animates immediately. */
.hero__content[data-anim] ~ .hero__split-media[data-anim],
.hero__split-media[data-anim] {
	animation-delay: 100ms;
}

/* Stagger — text elements cascade in.
   Inherit the parent's animation kind by re-applying it at the child level
   with a per-child delay. The parent is reset to no animation since the
   children handle their own entrance. */
.hero__content[data-anim-stagger="1"] {
	animation: none !important;
}
.hero__content[data-anim-stagger="1"][data-anim] > * {
	animation-duration: 700ms;
	animation-timing-function: cubic-bezier(.2, .65, .25, 1);
	animation-fill-mode: both;
}
.hero__content[data-anim-stagger="1"][data-anim="fade"]        > * { animation-name: hueprint-fade; }
.hero__content[data-anim-stagger="1"][data-anim="fade-up"]     > * { animation-name: hueprint-fade-up; }
.hero__content[data-anim-stagger="1"][data-anim="fade-down"]   > * { animation-name: hueprint-fade-down; }
.hero__content[data-anim-stagger="1"][data-anim="fade-left"]   > * { animation-name: hueprint-fade-left; }
.hero__content[data-anim-stagger="1"][data-anim="fade-right"]  > * { animation-name: hueprint-fade-right; }
.hero__content[data-anim-stagger="1"][data-anim="scale"]       > * { animation-name: hueprint-scale; }

.hero__content[data-anim-stagger="1"] > *:nth-child(1) { animation-delay: 0ms; }
.hero__content[data-anim-stagger="1"] > *:nth-child(2) { animation-delay: 120ms; }
.hero__content[data-anim-stagger="1"] > *:nth-child(3) { animation-delay: 240ms; }
.hero__content[data-anim-stagger="1"] > *:nth-child(4) { animation-delay: 360ms; }
.hero__content[data-anim-stagger="1"] > *:nth-child(5) { animation-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
	[data-anim],
	.hero__content[data-anim-stagger="1"] > * {
		animation: none !important;
	}
}

/* ----- Highlighted words ----------------------------------------------
   Editors mark words inside any heading or eyebrow field with the markdown
   syntax `**word**`. The render_heading()/render_eyebrow() helpers convert
   those pairs into <span class="hl">...</span>. The body class
   `has-highlight-{style}` (set via add_highlight_body_class in brand.php)
   selects which look is active site-wide.

   Five styles, set in Site Settings → Brand → Typography → Highlight Style.
   `--color-highlight` and `--font-highlight` are defined by the brand
   pipeline; both fall back to sensible defaults when unset. */

.hl {
	color: var(--color-highlight, var(--color-accent));
	font-family: var(--font-highlight, inherit);
}

/* Color + Italic Script — the Stripe/Anthropic editorial pattern.
   Reads strongest with a script Google Font picked in Brand. */
.has-highlight-color-italic .hl {
	font-style: italic;
}

/* Underline — clean accent treatment. The underline color matches the
   highlight color; offset gives breathing room from the descenders. */
.has-highlight-underline .hl {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--color-highlight, var(--color-accent));
	text-decoration-thickness: .12em;
	text-underline-offset: .15em;
}

/* Marker — soft highlighter-pen effect with rounded edges. The background
   sits on the text baseline area, not the full line-height. */
.has-highlight-marker .hl {
	color: inherit;
	background-image: linear-gradient(
		180deg,
		transparent 60%,
		color-mix(in oklab, var(--color-highlight, var(--color-accent)) 35%, transparent) 60%
	);
	padding: 0 .1em;
	border-radius: .15em;
	font-family: inherit;
}

/* Strikethrough — for "before / after" launch hero copy: "We sold ~~hours~~ outcomes." */
.has-highlight-strike .hl {
	color: inherit;
	text-decoration: line-through;
	text-decoration-color: var(--color-highlight, var(--color-accent));
	text-decoration-thickness: .1em;
}

/* ----- Eyebrow pill variant -----------------------------------------
   When the editor picks "Pill" in Brand → Eyebrow Style, every eyebrow
   across every block renders as a self-contained pill with background,
   text color, and rounded corners. The body class `has-eyebrow-pill`
   activates the look; `has-eyebrow-radius-{full|large|medium|small|square}`
   sets the corner shape.

   The selector targets every block's eyebrow class variant in one rule
   so editors don't have to think about which block they're using —
   they pick the style once and it applies site-wide.

   Defaults: background tints from --color-eyebrow-bg if set, else a
   light tint of the accent. Text uses --color-eyebrow-fg if set, else
   the accent itself.
*/
.has-eyebrow-pill .section-intro__eyebrow,
.has-eyebrow-pill .hero__eyebrow,
.has-eyebrow-pill .content-block__eyebrow,
.has-eyebrow-pill .media-text__eyebrow,
.has-eyebrow-pill .countdown__eyebrow {
	display: inline-block;
	padding: .35rem .85rem;
	background: var(--color-eyebrow-bg, color-mix(in oklab, var(--color-accent) 14%, transparent));
	color: var(--color-eyebrow-fg, var(--color-accent));
	font-weight: 600;
	/* Reset any opacity inherited from .flex--has-bg overrides — the
	   pill provides its own contrast, so the muted opacity isn't right. */
	opacity: 1;
}

/* Radius variants */
.has-eyebrow-pill.has-eyebrow-radius-full   :where(.section-intro__eyebrow, .hero__eyebrow, .content-block__eyebrow, .media-text__eyebrow, .countdown__eyebrow) { border-radius: 999px; }
.has-eyebrow-pill.has-eyebrow-radius-large  :where(.section-intro__eyebrow, .hero__eyebrow, .content-block__eyebrow, .media-text__eyebrow, .countdown__eyebrow) { border-radius: 12px; }
.has-eyebrow-pill.has-eyebrow-radius-medium :where(.section-intro__eyebrow, .hero__eyebrow, .content-block__eyebrow, .media-text__eyebrow, .countdown__eyebrow) { border-radius: 8px; }
.has-eyebrow-pill.has-eyebrow-radius-small  :where(.section-intro__eyebrow, .hero__eyebrow, .content-block__eyebrow, .media-text__eyebrow, .countdown__eyebrow) { border-radius: 4px; }
.has-eyebrow-pill.has-eyebrow-radius-square :where(.section-intro__eyebrow, .hero__eyebrow, .content-block__eyebrow, .media-text__eyebrow, .countdown__eyebrow) { border-radius: 0; }

/* When the section has a dark/hero background, the pill needs to keep
   its own contrast — override the .flex--has-bg "color: white opacity .85"
   rules that target eyebrows generally. The pill's own colors (set via
   the eyebrow tokens) are what should win. */
.has-eyebrow-pill .flex--has-bg .section-intro__eyebrow,
.has-eyebrow-pill .flex--has-bg .hero__eyebrow {
	color: var(--color-eyebrow-fg, var(--color-accent));
	opacity: 1;
}

/* ----- Section intro (shared) --------------------------------------- */
.section-intro { max-width: 40rem; margin: 0 auto var(--space-md); text-align: left; }
.section-intro--center { text-align: center; }
.section-intro__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 600; color: var(--color-eyebrow-fg, var(--color-accent)); margin-bottom: .75rem; }
.section-intro__heading { margin-bottom: .5rem; }
.section-intro__body { color: var(--color-muted); font-size: var(--fs-lg); }

/* ----- Content block ------------------------------------------------- */
.content-block[data-align="center"] { text-align: center; margin-inline: auto; }
.content-block__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 600; color: var(--color-eyebrow-fg, var(--color-accent)); margin-bottom: .5rem; }
.content-block__heading { margin-bottom: 1rem; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content blockquote { border-inline-start: 3px solid var(--color-accent); padding-inline-start: 1.25rem; font-size: var(--fs-lg); color: var(--color-muted); }

/* ----- Media + Text -------------------------------------------------- */
.media-text { display: grid; gap: var(--space-md); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 840px) { .media-text { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
.flex--media-text[data-media-position="right"] .media-text__media { order: 2; }

/* Media cell — claims an aspect ratio so the layout stays stable regardless
   of the image's natural proportions. Image fit determines whether the
   image fills the cell (cropping) or is contained inside it (no crop). */
.media-text__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.media-text__media[data-ratio="1-1"]  { aspect-ratio: 1 / 1; }
.media-text__media[data-ratio="4-3"]  { aspect-ratio: 4 / 3; }
.media-text__media[data-ratio="3-2"]  { aspect-ratio: 3 / 2; }
.media-text__media[data-ratio="16-9"] { aspect-ratio: 16 / 9; }

/* Default — Contain & Center. Image renders at its natural proportions
   inside the cell with no cropping. Best default for product shots,
   illustrations, screenshots, and any image with composition that matters
   (subject near edges, transparent backgrounds, etc.). The cell loses its
   border-radius and overflow clipping in this mode so transparent PNGs
   read clean against the page background. */
.media-text__media[data-image-fit="contain"] {
	border-radius: 0;
	overflow: visible;
	background: transparent;
}
.media-text__media[data-image-fit="contain"] img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Cover — fills the cell, cropping if needed. Best for editorial
   photography that's meant to bleed edge-to-edge. Keeps the rounded
   corners and overflow clipping. */
.media-text__media[data-image-fit="cover"] img,
.media-text__media:not([data-image-fit]) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media-text__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 600; color: var(--color-eyebrow-fg, var(--color-accent)); margin-bottom: .5rem; }
.media-text__heading { margin-bottom: 1rem; }
.media-text__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Title alignment — centers eyebrow + heading + rich text within the content column */
.media-text__content[data-title-align="center"] { text-align: center; }
.media-text__content[data-title-align="center"] .media-text__actions { justify-content: center; }

/* ----- Columns ------------------------------------------------------- */
.columns { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .columns--2, .columns--3, .columns--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
	.columns--2 { grid-template-columns: repeat(2, 1fr); }
	.columns--3 { grid-template-columns: repeat(3, 1fr); }
	.columns--4 { grid-template-columns: repeat(4, 1fr); }
}
.column { display: flex; flex-direction: column; gap: 1.25rem; }
.column__body { display: flex; flex-direction: column; gap: 1rem; }
.columns--card .column { padding: var(--space-md); background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); }
.columns--bordered .column { padding: var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.column__media { max-width: 72px; }
.column__heading { margin: 0; }
.column__text { color: var(--color-muted); margin: 0; }
.column__link { margin: 0; }

/* Center alignment variant for columns block */
.columns--align-center .column { text-align: center; align-items: center; }
.columns--align-center .column__media { margin-inline: auto; }

/* ----- CTA ---------------------------------------------------------- */
.cta { max-width: 52rem; }
.flex--cta[data-align="center"] .cta { margin-inline: auto; text-align: center; }
.cta__heading { margin-bottom: 1rem; }
.cta__text { font-size: var(--fs-lg); opacity: .9; margin-bottom: 2rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.flex--cta[data-align="center"] .cta__actions { justify-content: center; }

/* ----- Gallery ------------------------------------------------------ */
.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
	.gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.gallery__item { overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; position: relative; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__caption { position: absolute; inset: auto 0 0 0; padding: .5rem .75rem; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: var(--fs-xs); }

/* Image fit: contain & center.
   Best for product shots, illustrations, transparent PNGs, and any asset
   that shouldn't be cropped to fill its cell. The cell still claims the
   4:3 aspect ratio (so the grid layout doesn't reflow), but the image is
   contained and centered both axes, with no hover-scale effect (it looks
   off on a contained image that doesn't fill its cell). */
.gallery[data-image-fit="contain"] {
	justify-content: center;
}
.gallery[data-image-fit="contain"] .gallery__item {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
.gallery[data-image-fit="contain"] .gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.gallery[data-image-fit="contain"] .gallery__item:hover img {
	transform: none;
}
/* Masonry doesn't have aspect-ratio cells, so the contain rule needs a
   different approach there — let the image use its natural ratio and
   simply center horizontally. */
.gallery--masonry[data-image-fit="contain"] .gallery__item {
	text-align: center;
}
.gallery--masonry[data-image-fit="contain"] .gallery__item img {
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}

.gallery--masonry { column-count: 2; column-gap: .75rem; display: block; }
@media (min-width: 720px) {
	.gallery--masonry.gallery--cols-3 { column-count: 3; }
	.gallery--masonry.gallery--cols-4 { column-count: 4; }
}
.gallery--masonry .gallery__item { aspect-ratio: auto; break-inside: avoid; margin-bottom: .75rem; }

/* ----- Carousel (shared by gallery + testimonials) ------------------- */
[data-carousel] {
	position: relative;
	display: block;
}
.carousel__track {
	display: flex;
	gap: var(--space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2.5rem; /* reserve space for controls */
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Slide sizing — default is per block below */
.gallery--carousel .carousel__track > .gallery__item {
	width: calc((100% - var(--space-md) * 2) / 3);
	aspect-ratio: 4 / 3;
}
@media (max-width: 960px) {
	.gallery--carousel .carousel__track > .gallery__item { width: calc((100% - var(--space-md)) / 2); }
}
@media (max-width: 640px) {
	.gallery--carousel .carousel__track > .gallery__item { width: 85%; }
}

.testimonials--carousel .carousel__track > .testimonial {
	width: calc((100% - var(--space-md)) / 2);
	margin: 0;
}
@media (max-width: 840px) {
	.testimonials--carousel .carousel__track > .testimonial { width: 90%; }
}

.carousel__controls {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	gap: .5rem;
	align-items: center;
}
.carousel__btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	color: var(--color-fg);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel__btn:hover { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.carousel__btn[disabled] { opacity: .35; cursor: not-allowed; }
.carousel__btn[disabled]:hover { background: var(--color-bg); color: var(--color-fg); border-color: var(--color-line); }

/* ----- Marquee (auto-scroll) — shared by gallery + logo-grid ---------- */
/* The marquee technique: render content twice, slide the track -50% so the
   duplicate takes the first's place exactly when the animation loops. The
   edge fade masks the seam if a user has paused the animation or reloads
   mid-cycle. */
.gallery--marquee,
.logo-grid--marquee {
	position: relative;
	overflow: hidden;
	/* Edge fade — mask-image trumps a hard cutoff and works on modern browsers */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: max-content;
	list-style: none;
	margin: 0;
	padding: 0;
	animation: hueprint-marquee var(--marquee-duration, 40s) linear infinite;
	will-change: transform;
}

/* Speed variants — bigger number = slower scroll */
.gallery--marquee[data-speed="slow"],
.logo-grid--marquee[data-speed="slow"]   { --marquee-duration: 60s; }
.gallery--marquee[data-speed="medium"],
.logo-grid--marquee[data-speed="medium"] { --marquee-duration: 40s; }
.gallery--marquee[data-speed="fast"],
.logo-grid--marquee[data-speed="fast"]   { --marquee-duration: 22s; }

/* Pause on hover — subtle affordance so users can read a logo or linger on an image */
.gallery--marquee:hover .marquee__track,
.logo-grid--marquee:hover .marquee__track {
	animation-play-state: paused;
}

/* Keep marquee focusable items working — pause when anything inside is focused */
.gallery--marquee:focus-within .marquee__track,
.logo-grid--marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

@keyframes hueprint-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Gallery marquee — size items so they have the same width as the 3-col grid.
   Override the default grid sizing since marquee uses a flex track, not a grid. */
.gallery--marquee .gallery__item {
	flex: 0 0 auto;
	width: 22rem;
	aspect-ratio: 4 / 3;
	margin: 0;
}
@media (max-width: 720px) {
	.gallery--marquee .gallery__item { width: 16rem; }
}

/* Logo grid marquee — sizing only. Color treatment is controlled by the
   data-color-mode attribute and lives in a shared block below so it applies
   to both grid and marquee display styles. */
.logo-grid--marquee .logo-grid__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1rem;
}
.logo-grid--marquee .logo-grid__item img {
	max-height: 48px;
	width: auto;
}

/* Honor reduced motion — freeze the animation and show a static row.
   The duplicate still renders; mask clips it. */
@media (prefers-reduced-motion: reduce) {
	.gallery--marquee .marquee__track,
	.logo-grid--marquee .marquee__track {
		animation: none;
	}
}


/* ----- Testimonial -------------------------------------------------- */
.testimonials--single .testimonial { max-width: 52rem; margin-inline: auto; text-align: center; }
.testimonials--grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 840px) { .testimonials--grid { grid-template-columns: repeat(2, 1fr); } }
.testimonial { margin: 0; padding: var(--space-md); background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); }
.testimonial__quote { font-size: var(--fs-xl); line-height: var(--lh-snug); margin: 0 0 1.5rem; }
.testimonial__quote::before { content: "“"; color: var(--color-accent); font-size: 1.2em; margin-inline-end: .1em; }
.testimonial__cite { display: flex; align-items: center; gap: .75rem; font-style: normal; }
.testimonials--single .testimonial__cite { justify-content: center; }
.testimonial__avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial__person { display: flex; flex-direction: column; }
.testimonial__name { font-weight: 600; }
.testimonial__role { color: var(--color-muted); font-size: var(--fs-sm); }

/* ----- Accordion ---------------------------------------------------- */
.accordion { border-top: 1px solid var(--color-line); }
.accordion__item { border-bottom: 1px solid var(--color-line); }
.accordion__question {
	list-style: none; cursor: pointer; padding: 1.25rem 2rem 1.25rem 0;
	font-weight: 600; font-size: var(--fs-lg); position: relative;
}
.accordion__question::-webkit-details-marker { display: none; }
.accordion__question::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; color: var(--color-accent); transition: transform var(--dur) var(--ease);
}
.accordion__item[open] .accordion__question::after { transform: translateY(-50%) rotate(45deg); }
.accordion__answer { padding: 0 0 1.5rem; color: var(--color-muted); }

/* ----- Logo grid ---------------------------------------------------- */
.logo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); align-items: center; justify-items: center; }
@media (min-width: 640px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .logo-grid { grid-template-columns: repeat(5, 1fr); } }
.logo-grid__item img {
	max-height: 48px;
	width: auto;
	transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

/* Logo color modes — applies to both grid and marquee display styles.
   The default is `color`: logos render exactly as uploaded. Editors pick
   the mode in Section Settings → Logo Color. */

/* Always-color (the default — no rules needed; just be explicit so any
   future change to the default shows up here intentionally) */
.logo-grid[data-color-mode="color"] .logo-grid__item img {
	opacity: 1;
	filter: none;
}

/* Always grayscale — clean, brand-neutral feel ("trusted by" bars) */
.logo-grid[data-color-mode="grayscale"] .logo-grid__item img {
	opacity: .7;
	filter: grayscale(100%);
}

/* Grayscale → Color on hover/focus — editorial premium pattern */
.logo-grid[data-color-mode="hover_color"] .logo-grid__item img {
	opacity: .7;
	filter: grayscale(100%);
}
.logo-grid[data-color-mode="hover_color"] .logo-grid__item:hover img,
.logo-grid[data-color-mode="hover_color"] .logo-grid__item a:hover img,
.logo-grid[data-color-mode="hover_color"] .logo-grid__item a:focus-visible img {
	opacity: 1;
	filter: grayscale(0);
}

/* ----- Form --------------------------------------------------------- */
.form-block--split { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 840px) { .form-block--split { grid-template-columns: 1fr 1.25fr; gap: var(--space-lg); } }
.form-block__intro--center { text-align: center; }
.form-block__form input[type="text"],
.form-block__form input[type="email"],
.form-block__form input[type="tel"],
.form-block__form textarea,
.form-block__form select {
	width: 100%; padding: .8rem 1rem; border: 1px solid var(--color-line);
	border-radius: var(--radius-md); font: inherit; background: #fff;
}
.form-block__form label { font-size: var(--fs-sm); font-weight: 600; display: block; margin-bottom: .4rem; }

/* ----- Projects archive + related work grid ------------------------- */
.archive__filters {
	display: flex; flex-wrap: wrap; gap: .5rem;
	margin-top: 1rem;
}
.archive__filter {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .4rem .9rem;
	background: transparent;
	color: var(--color-fg);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.archive__filter:hover { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.archive__filter.is-active { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }

.projects-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
	margin-top: var(--space-md);
}
@media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
	.projects-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.projects-grid--cols-3, .projects-grid { grid-template-columns: repeat(3, 1fr); }
	.projects-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.project-card { margin: 0; }
.project-card__link {
	display: flex; flex-direction: column; gap: 1rem;
	text-decoration: none; color: inherit;
}
.project-card__media {
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 4 / 3;
	background: #f6f7f9;
}
.project-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 600ms var(--ease);
}
.project-card__link:hover .project-card__media img { transform: scale(1.04); }
.project-card__category {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--color-accent);
}
.project-card__title { font-size: var(--fs-xl); margin: 0; }
.project-card__excerpt { color: var(--color-muted); margin: 0; font-size: var(--fs-sm); }

.related-work__footer {
	margin-top: var(--space-md);
	text-align: center;
}

/* =====================================================================
   NEW BLOCKS — feature-list, stats, comparison, pricing, timeline,
   video, code, team, integrations, before-after
   ===================================================================== */

/* ----- Feature List ------------------------------------------------- */
.feature-list {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.feature-list { grid-template-columns: 1fr 1.3fr; gap: var(--space-lg); align-items: start; }
}
.feature-list__intro--sticky {
	position: sticky;
	top: 6rem;
}
.feature-list__items {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--space-md);
}
.feature-list__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-line);
}
.feature-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.feature-list__icon img {
	width: 48px; height: 48px; object-fit: contain;
	border-radius: var(--radius-sm);
}
.feature-list__title { font-size: var(--fs-xl); margin: 0 0 .35rem; }
.feature-list__desc { color: var(--color-muted); margin: 0; }
.feature-list__link { margin: .75rem 0 0; }

/* ----- Stats --------------------------------------------------------- */
.stats {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	text-align: center;
}
.stats__item { display: flex; flex-direction: column; gap: .5rem; }
.stats__value {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}
.stats__prefix, .stats__suffix { font-size: .7em; opacity: .8; }
.stats__label { color: var(--color-muted); font-size: var(--fs-sm); font-weight: 500; }

/* ----- Comparison Table --------------------------------------------- */
.comparison { overflow-x: auto; }
.comparison__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.comparison__table th,
.comparison__table td {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-line);
	vertical-align: middle;
}
.comparison__table thead th {
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--color-fg);
}
.comparison__feature-col { width: 40%; }
.comparison__feature { font-weight: 500; }
.comparison__tooltip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px;
	background: var(--color-line); color: var(--color-muted);
	border-radius: 50%;
	font-size: 10px; font-weight: 700;
	margin-inline-start: .4rem; cursor: help;
}
.comparison__check { color: var(--color-accent); font-weight: 700; font-size: 1.2em; }
.comparison__cross { color: var(--color-muted); opacity: .5; font-weight: 500; }
.comparison__col--highlight {
	background: color-mix(in oklab, var(--color-accent) 6%, transparent);
}
.comparison__table thead .comparison__col--highlight {
	background: color-mix(in oklab, var(--color-accent) 12%, transparent);
	color: var(--color-accent);
}

/* Mobile: stack rows into cards */
@media (max-width: 720px) {
	.comparison__table, .comparison__table thead, .comparison__table tbody,
	.comparison__table tr, .comparison__table th, .comparison__table td { display: block; }
	.comparison__table thead { display: none; }
	.comparison__table tr {
		border: 1px solid var(--color-line);
		border-radius: var(--radius-md);
		margin-bottom: var(--space-sm);
		padding: 1rem;
	}
	.comparison__table td {
		border-bottom: 0;
		padding: .35rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.comparison__table td::before {
		content: attr(data-label);
		font-size: var(--fs-xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .08em;
		color: var(--color-muted);
	}
}

/* ----- Countdown ----------------------------------------------------- */
.countdown { display: flex; flex-direction: column; gap: var(--space-md); }
.countdown--align-center { text-align: center; align-items: center; }
.countdown--align-left   { text-align: left;   align-items: flex-start; }

.countdown__header { max-width: 50rem; }
.countdown--align-center .countdown__header { margin-inline: auto; }

.countdown__eyebrow {
	margin: 0 0 .5rem;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
	color: var(--color-eyebrow-fg, var(--color-accent));
}
.countdown__heading { margin: 0 0 1rem; letter-spacing: -0.02em; }
.countdown__intro { color: var(--color-muted); font-size: var(--fs-md); }

.countdown__timer {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.75rem, 2vw, 1.5rem);
	font-variant-numeric: tabular-nums;
}
.countdown--align-center .countdown__timer { justify-content: center; }

.countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4rem;
}

.countdown__value {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-family: var(--font-heading);
}
.countdown__label {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--color-muted);
	font-weight: 600;
	margin-top: .5rem;
}

/* Style: Boxed — each unit sits in its own card */
.countdown--boxed .countdown__unit {
	padding: 1.25rem 1rem;
	background: color-mix(in oklab, var(--color-fg) 4%, transparent);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	min-width: 6rem;
}

/* Style: Stacked — tighter, no decoration, units sit close */
.countdown--stacked .countdown__timer {
	gap: clamp(.5rem, 1.2vw, 1rem);
}
.countdown--stacked .countdown__unit { padding: 0; }
.countdown--stacked .countdown__value::after {
	content: ":";
	color: var(--color-muted);
	margin-left: clamp(.5rem, 1.2vw, 1rem);
}
.countdown--stacked .countdown__unit:last-child .countdown__value::after { content: ""; }
.countdown--stacked .countdown__label { display: none; }

/* Style: Minimal — pure type, no background, nothing decorative */
/* (default styling is already minimal — this just ensures no box) */
.countdown--minimal .countdown__unit {
	padding: 0;
	background: transparent;
	border: 0;
}

/* Sizes */
.countdown--large .countdown__value   { font-size: clamp(3rem, 8vw, 6rem); }
.countdown--compact .countdown__value { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.countdown--compact .countdown__unit  { min-width: 3rem; }
.countdown--compact.countdown--boxed .countdown__unit { padding: .75rem .65rem; min-width: 4.5rem; }

/* On accent or dark themes, the boxed cells need a brighter surface */
.flex--theme-dark   .countdown--boxed .countdown__unit,
.flex--theme-accent .countdown--boxed .countdown__unit {
	background: color-mix(in oklab, var(--color-bg) 12%, transparent);
	border-color: color-mix(in oklab, var(--color-bg) 25%, transparent);
}

.countdown__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.countdown--align-center .countdown__actions { justify-content: center; }

.countdown__expired {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.countdown--align-center .countdown__expired { align-items: center; }

/* ----- Product Feature ------------------------------------------------
   A feature grid that leads with a large product image. Two layout modes:
   stacked (image on top, 2-4 columns) and alternating (image left/right
   in alternating rows, single-column full-width).

   Image cell uses aspect-ratio for consistency across tiles. The
   data-image-ratio + data-image-fit attributes drive the visual without
   per-instance inline styles. */
.product-feature {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

/* Stacked layout — N column grid */
.product-feature--stacked.product-feature--cols-2 { grid-template-columns: 1fr; }
.product-feature--stacked.product-feature--cols-3 { grid-template-columns: 1fr; }
.product-feature--stacked.product-feature--cols-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.product-feature--stacked.product-feature--cols-2,
	.product-feature--stacked.product-feature--cols-3,
	.product-feature--stacked.product-feature--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.product-feature--stacked.product-feature--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.product-feature--stacked.product-feature--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Alternating layout — full-width single column with side-by-side rows */
.product-feature--alternating { gap: var(--space-xl); }
.product-feature--alternating .product-feature__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	align-items: center;
}
@media (min-width: 768px) {
	.product-feature--alternating .product-feature__item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-lg);
	}
	.product-feature--alternating .product-feature__item--reverse .product-feature__media { grid-column: 2; grid-row: 1; }
	.product-feature--alternating .product-feature__item--reverse .product-feature__body  { grid-column: 1; grid-row: 1; }
}

/* Tile — base. The wrapper for a single feature, holds the media + body.
   Items align center so eyebrow/title/description/link cluster cleanly in
   the middle of the tile (Linear / Cursor product feature aesthetic). */
.product-feature__item {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	align-items: center;
	text-align: center;
}

/* Tile style variants */
.product-feature--card .product-feature__item {
	background: color-mix(in oklab, var(--color-fg) 3%, transparent);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-feature--card .product-feature__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
}
.product-feature--bordered .product-feature__item {
	border: 1px solid var(--color-line);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product-feature--bordered .product-feature__item:hover {
	border-color: var(--color-accent);
	transform: translateY(-3px);
}
/* Card/border variants don't apply to alternating layout — alternating is
   editorial, the tile shouldn't have a visible frame */
.product-feature--alternating.product-feature--card .product-feature__item,
.product-feature--alternating.product-feature--bordered .product-feature__item {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}
.product-feature--alternating.product-feature--card .product-feature__item:hover,
.product-feature--alternating.product-feature--bordered .product-feature__item:hover {
	transform: none;
	box-shadow: none;
}

/* Media — the centerpiece. Aspect ratio set via data attribute.
   Background is transparent so screenshots and illustrations with
   transparent edges sit cleanly against whatever the section's
   background is. */
.product-feature__media {
	overflow: hidden;
	border-radius: var(--radius-md);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.product-feature[data-image-ratio="16-9"] .product-feature__media { aspect-ratio: 16 / 9; }
.product-feature[data-image-ratio="4-3"]  .product-feature__media { aspect-ratio: 4 / 3; }
.product-feature[data-image-ratio="3-2"]  .product-feature__media { aspect-ratio: 3 / 2; }
.product-feature[data-image-ratio="1-1"]  .product-feature__media { aspect-ratio: 1 / 1; }
.product-feature[data-image-ratio="auto"] .product-feature__media { aspect-ratio: auto; }

.product-feature__media img {
	width: 100%;
	height: 100%;
	display: block;
}
.product-feature[data-image-fit="cover"] .product-feature__media img    { object-fit: cover; }
.product-feature[data-image-fit="contain"] .product-feature__media img  { object-fit: contain; max-width: 100%; height: auto; max-height: 100%; }
.product-feature[data-image-fit="contain"] .product-feature__media      { padding: var(--space-sm); }
.product-feature[data-image-ratio="auto"] .product-feature__media img   { width: 100%; height: auto; }

/* Body — text below (or beside) the media. Width 100% so it spans the
   tile, but `align-items: center` on the parent + `text-align: center`
   on the parent center the inline content within. */
.product-feature__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-width: 0;
	width: 100%;
	align-items: center;
}
.product-feature__eyebrow {
	margin: 0;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
	color: var(--color-eyebrow-fg, var(--color-accent));
}
.product-feature__title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}
.product-feature__description {
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
}
.product-feature__link {
	margin: .25rem 0 0;
	font-weight: 500;
}

/* Alternating layout reads bigger — the title can size up to feel hero.
   Editorial alternating is left-aligned by convention; centering reads
   awkwardly when the image is beside the text. */
.product-feature--alternating .product-feature__title {
	font-size: var(--fs-xl);
}
.product-feature--alternating .product-feature__item {
	align-items: stretch;
	text-align: left;
}
.product-feature--alternating .product-feature__body {
	align-items: flex-start;
}

/* ----- Pricing Tiers ------------------------------------------------- */
.pricing-toggle {
	display: inline-flex;
	margin: 0 auto var(--space-md);
	padding: .25rem;
	background: color-mix(in oklab, var(--color-fg) 6%, transparent);
	border-radius: 999px;
	gap: .25rem;
}
.pricing-toggle__btn {
	padding: .5rem 1.25rem;
	background: transparent;
	border: 0;
	border-radius: 999px;
	font-weight: 500;
	color: var(--color-muted);
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pricing-toggle__btn.is-active { background: var(--color-bg); color: var(--color-fg); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Savings pill — sits inline next to "Annual" text. Always tinted with
   the accent so it draws the eye toward the better-value option, even
   when that toggle isn't currently active. */
.pricing-toggle__savings {
	display: inline-block;
	margin-left: .4rem;
	padding: .12rem .5rem;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-accent-fg);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	vertical-align: middle;
	transform: translateY(-1px);
}

.flex--pricing .container { text-align: center; }

.pricing {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
	text-align: left;
}
@media (min-width: 720px) { .pricing[data-count="2"], .pricing[data-count="3"], .pricing[data-count="4"], .pricing[data-count="5"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
	.pricing[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
	.pricing[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
	.pricing[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
}

.pricing__tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
}
.pricing__tier--popular {
	border-color: var(--color-accent);
	box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 0 0 1px var(--color-accent);
}
.pricing__badge {
	position: absolute; top: -12px; left: 50%;
	transform: translateX(-50%);
	background: var(--color-accent); color: var(--color-accent-fg);
	padding: .35rem .9rem;
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
	max-width: calc(100% - 1.5rem);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* At 4+ columns the tier cards get narrow (≈220–250px wide on standard
   desktop containers). The badge with default sizing can crowd or visually
   collide with the card edge. Tighten the badge typography slightly so it
   sits comfortably in the narrower card. */
@media (min-width: 960px) {
	.pricing[data-count="4"] .pricing__badge,
	.pricing[data-count="5"] .pricing__badge {
		font-size: 10px;
		padding: .3rem .65rem;
		letter-spacing: .06em;
	}
}
.pricing__name { font-size: var(--fs-xl); margin: 0; }
.pricing__tagline { color: var(--color-muted); font-size: var(--fs-sm); margin: .25rem 0 0; }
.pricing__price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
.pricing__amount { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.pricing__period { color: var(--color-muted); font-size: var(--fs-sm); }
.pricing__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

/* Annual feature lists.
   When a tier has both monthly and annual features, both are rendered. The
   .pricing block's data-billing attribute (set by the toggle JS) determines
   which list is visible. Lists tagged with data-billing="both" stay visible
   in both modes — used when only one features list is defined. */
.pricing[data-billing="annual"] .pricing__features[data-billing="monthly"],
.pricing:not([data-billing="annual"]) .pricing__features[data-billing="annual"] {
	display: none;
}

.pricing__feature { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-sm); }
.pricing__feature-icon { flex: 0 0 1.1rem; color: var(--color-accent); font-weight: 700; }
.pricing__feature--excluded { color: var(--color-muted); }
.pricing__feature--excluded .pricing__feature-icon { color: var(--color-muted); opacity: .5; }
.pricing__cta { margin-top: auto; }
.pricing__cta .button { width: 100%; }

/* ----- Timeline ------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; }

/* Vertical */
.timeline--vertical { display: flex; flex-direction: column; gap: var(--space-md); position: relative; }
.timeline--vertical::before {
	content: ""; position: absolute; left: 24px; top: 24px; bottom: 24px;
	width: 2px; background: var(--color-line);
}
.timeline--vertical .timeline__step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 1.25rem;
	counter-increment: timeline-step;
}
.timeline--vertical .timeline__marker {
	position: relative; z-index: 1;
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-bg);
	border: 2px solid var(--color-accent);
	border-radius: 50%;
	color: var(--color-accent);
}
.timeline--vertical .timeline__marker img { width: 24px; height: 24px; }

/* Horizontal */
.timeline--horizontal { display: grid; grid-template-columns: 1fr; gap: var(--space-md); counter-reset: timeline-step; }
@media (min-width: 720px) {
	.timeline--horizontal { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
	.timeline--horizontal .timeline__step {
		position: relative;
		padding-top: 64px;
		text-align: left;
	}
	.timeline--horizontal .timeline__step::before {
		content: ""; position: absolute;
		top: 24px; left: 48px; right: 0;
		height: 2px;
		background: var(--color-line);
	}
	.timeline--horizontal .timeline__step:last-child::before { display: none; }
	.timeline--horizontal .timeline__marker {
		position: absolute; top: 0; left: 0;
		width: 48px; height: 48px;
		background: var(--color-bg);
		border: 2px solid var(--color-accent);
		border-radius: 50%;
		display: inline-flex; align-items: center; justify-content: center;
		color: var(--color-accent);
	}
}

.timeline__label-badge { font-weight: 700; font-size: var(--fs-sm); }
.timeline__label {
	font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
	color: var(--color-muted); margin: 0 0 .25rem;
}
.timeline__title { font-size: var(--fs-xl); margin: 0 0 .35rem; }
.timeline__desc { color: var(--color-muted); }

/* ----- Video --------------------------------------------------------- */
.video-embed {
	position: relative; width: 100%;
	border-radius: var(--radius-lg); overflow: hidden;
	background: #000;
}
.video-embed[data-ratio="16-9"] { aspect-ratio: 16 / 9; }
.video-embed[data-ratio="9-16"] { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.video-embed[data-ratio="1-1"]  { aspect-ratio: 1 / 1; max-width: 720px; margin-inline: auto; }
.video-embed[data-ratio="4-3"]  { aspect-ratio: 4 / 3; }
.video-embed iframe,
.video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ----- Code Snippet -------------------------------------------------- */
.code-block {
	background: #0b0c0f;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid color-mix(in oklab, var(--color-fg) 10%, transparent);
}
.code-block__tabs {
	display: flex;
	gap: 2px;
	background: rgba(255,255,255,.04);
	border-bottom: 1px solid rgba(255,255,255,.08);
	padding: .25rem .25rem 0;
	overflow-x: auto;
}
.code-block__tab {
	padding: .6rem 1rem;
	background: transparent;
	color: rgba(255,255,255,.55);
	border: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	cursor: pointer;
	border-radius: 6px 6px 0 0;
	white-space: nowrap;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.code-block__tab:hover { color: #fff; }
.code-block__tab.is-active { background: #0b0c0f; color: #fff; }

.code-block__panel { display: none; }
.code-block__panel.is-active { display: block; }
.code-block__panel[hidden] { display: none; }

.code-block__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: .6rem 1rem;
	background: rgba(255,255,255,.03);
	border-bottom: 1px solid rgba(255,255,255,.06);
	color: rgba(255,255,255,.55);
	font-size: var(--fs-xs);
}
.code-block__filename { font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; }
.code-block__copy {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .35rem .7rem;
	background: transparent;
	color: inherit;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.code-block__copy:hover { background: rgba(255,255,255,.1); color: #fff; }
.code-block__copy.is-copied { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); }

.code-block__pre {
	margin: 0;
	padding: 1.25rem;
	overflow-x: auto;
	color: #e6e9ef;
	font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
	font-size: 0.875rem;
	line-height: 1.6;
}
.code-block__pre code { font-family: inherit; }

/* ----- Team Grid ----------------------------------------------------- */
.team {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--space-md);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.team--cols-2, .team--cols-3, .team--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.team--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.team--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.team--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.team__member { display: flex; flex-direction: column; gap: 1rem; }
.team__photo { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-md); background: var(--color-line); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__name { font-size: var(--fs-xl); margin: 0; }
.team__role { color: var(--color-accent); font-size: var(--fs-sm); font-weight: 500; margin: .2rem 0 .5rem; }
.team__bio { color: var(--color-muted); font-size: var(--fs-sm); }
.team__social { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; gap: .75rem; }
.team__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	color: var(--color-muted);
	border-radius: 50%;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.team__social a:hover { background: var(--color-fg); color: var(--color-bg); }

/* ----- Integrations Grid -------------------------------------------- */
.integrations {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--space-sm);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
	.integrations--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.integrations--cols-4 { grid-template-columns: repeat(3, 1fr); }
	.integrations--cols-5 { grid-template-columns: repeat(3, 1fr); }
	.integrations--cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
	.integrations--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.integrations--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.integrations--cols-5 { grid-template-columns: repeat(5, 1fr); }
	.integrations--cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Card content alignment — controls the alignment of content INSIDE each
   tile (logo, name, category, description). The card itself uses flex
   column layout, so we set align-items + text-align to flip every item
   from start-aligned (default) to centered. */
.integrations[data-align="center"] .integrations__card {
	align-items: center;
	text-align: center;
}
.integrations[data-align="left"] .integrations__card {
	align-items: flex-start;
	text-align: left;
}
.integrations__card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
	height: 100%;
	position: relative;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.integrations__card:hover {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}
.integrations__logo { max-width: 40px; }
.integrations__logo img { width: 100%; height: auto; }
.integrations__category {
	font-size: var(--fs-xs); text-transform: uppercase;
	letter-spacing: .12em; color: var(--color-muted); margin: 0;
}
.integrations__name { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.integrations__desc { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }

/* ----- Featured tile treatment --------------------------------------
   Per-tile: editor toggles `featured` ON to mark a tile, optionally
   sets a custom `featured_label` (defaults to "Featured").
   Site-wide: editor picks ONE treatment in Brand → Featured Tile Style
   that applies to every featured tile across every Integrations block.

   The body class `has-featured-{style}` selects which look is active. */
.integrations__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-accent);
	color: var(--color-accent-fg, #fff);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .25rem .65rem;
	border-radius: 999px;
	white-space: nowrap;
	max-width: calc(100% - 1.5rem);
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 1;
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Style: Accent Border — replace the neutral border with accent.
   Adds slight inner padding via shadow so the border feels intentional. */
.has-featured-border .integrations__item.is-featured > .integrations__card,
.has-featured-pill-border .integrations__item.is-featured > .integrations__card {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent);
}

/* Style: Pill Only — hide the accent border, keep just the badge */
.has-featured-pill .integrations__item.is-featured .integrations__badge {
	display: inline-block;
}
.has-featured-pill .integrations__item.is-featured > .integrations__card {
	/* No additional treatment — badge alone */
}

/* Style: Tinted Background */
.has-featured-tint .integrations__item.is-featured > .integrations__card,
.has-featured-tint-pill .integrations__item.is-featured > .integrations__card {
	background: color-mix(in oklab, var(--color-accent) 6%, var(--color-bg));
	border-color: color-mix(in oklab, var(--color-accent) 35%, var(--color-line));
}

/* Style: Subtle Glow — soft accent-colored shadow */
.has-featured-glow .integrations__item.is-featured > .integrations__card {
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--color-accent) 40%, transparent),
		0 8px 24px color-mix(in oklab, var(--color-accent) 18%, transparent);
	border-color: transparent;
}

/* Hide the badge in style variants that don't display it */
.has-featured-border .integrations__item.is-featured .integrations__badge,
.has-featured-tint   .integrations__item.is-featured .integrations__badge,
.has-featured-glow   .integrations__item.is-featured .integrations__badge {
	display: none;
}

/* On hover, featured tiles get a slightly stronger lift than standard */
a.integrations__card:hover {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}
.integrations__item.is-featured a.integrations__card:hover {
	transform: translateY(-3px);
}

/* ----- Before / After Slider ---------------------------------------- */
.before-after { --ba-pos: 50%; }
.before-after__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	user-select: none;
}
.before-after__image {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
}
.before-after__image img { width: 100%; height: 100%; object-fit: cover; }

/* "After" image sits on top and gets clipped from the right by the handle position */
.before-after__image--after {
	clip-path: inset(0 0 0 var(--ba-pos));
}

.before-after__label {
	position: absolute; top: 1rem;
	background: rgba(0,0,0,.6); color: #fff;
	padding: .35rem .75rem;
	border-radius: 999px;
	font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em;
}
.before-after__label--before { left: 1rem; }
.before-after__label--after  { right: 1rem; }

.before-after__handle {
	position: absolute; top: 0; bottom: 0;
	left: var(--ba-pos);
	width: 2px;
	background: #fff;
	transform: translateX(-1px);
	pointer-events: none;
}
.before-after__handle-grip {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 40px; height: 40px;
	background: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-fg);
	box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.before-after__slider {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	opacity: 0;
	cursor: ew-resize;
}
.before-after__slider:focus-visible + .before-after__handle .before-after__handle-grip {
	box-shadow: 0 0 0 3px var(--color-accent), 0 2px 12px rgba(0,0,0,.3);
}


/* ----- Archive + Post body ----------------------------------------- */
.archive__header { padding-block: var(--space-lg); text-align: center; }
.archive__context {
	margin: 0 0 .5rem;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
	color: var(--color-accent);
}
.archive__title { margin-bottom: .5rem; }
.archive__description { color: var(--color-muted); max-width: 42rem; margin-inline: auto; }
.archive__empty { text-align: center; color: var(--color-muted); padding: var(--space-lg) 0; }
.archive__grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; padding-bottom: var(--space-lg); }
@media (min-width: 640px) { .archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .archive__grid { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; gap: 1rem; }
.card__media { overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; display: block; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__cats {
	margin: 0;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 600;
}
.card__cats a { color: var(--color-accent); text-decoration: none; }
.card__cats a:hover { text-decoration: underline; }
.card__title { font-size: var(--fs-xl); margin: 0; }
.card__title a { text-decoration: none; color: var(--color-fg); }
.card__title a:hover { color: var(--color-accent); }
.card__meta { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
.card__excerpt { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; line-height: var(--lh-normal); }

/* Pagination — used on blog index, archives, and any flex block with
   numbered or load-more pagination. Two variants share the wrapper class:
   .pagination--numbered for paginate_links() output, .pagination--load-more
   for the client-side reveal button. */

/* The HTML `hidden` attribute should hide elements unconditionally, but
   any block with `display: flex` / `display: grid` (.column, .integrations__item,
   .project-card, .product-feature__item, etc.) overrides the implicit
   `display: none`. This rule restores correct behavior — `hidden` must
   beat display rules. */
[hidden] { display: none !important; }

.pagination {
	display: flex;
	justify-content: center;
	gap: .35rem;
	margin-top: var(--space-md);
	flex-wrap: wrap;
}
.pagination ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	color: var(--color-fg);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .page-numbers.current {
	background: var(--color-fg);
	color: var(--color-bg);
	border-color: var(--color-fg);
}
.pagination .page-numbers.dots { border: 0; color: var(--color-muted); }

/* Load-more variant — single ghost button. Sits centered below the grid. */
.pagination--load-more { margin-top: var(--space-md); }

/* Error 404 — generous, calm, helpful */
.error-404 {
	padding-block: clamp(4rem, 12vh, 9rem);
	text-align: center;
}
.error-404__code {
	margin: 0;
	font-size: clamp(5rem, 16vw, 12rem);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: color-mix(in oklab, var(--color-accent) 20%, var(--color-line));
	user-select: none;
}
.error-404__title {
	margin: 1rem 0 .75rem;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.error-404__intro {
	color: var(--color-muted);
	max-width: 36rem;
	margin: 0 auto var(--space-md);
}
.error-404__search { margin-bottom: var(--space-md); }
.error-404__search .search-form {
	display: flex;
	gap: .5rem;
	max-width: 30rem;
	margin: 0 auto;
}
.error-404__search input[type="search"] {
	flex: 1;
	padding: .75rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	font-size: var(--fs-md);
	background: var(--color-bg);
}
.error-404__search input[type="submit"] {
	padding: .75rem 1.25rem;
	background: var(--color-fg);
	color: var(--color-bg);
	border: 0;
	border-radius: var(--radius-md);
	font-weight: 600;
	cursor: pointer;
}
.error-404__search input[type="submit"]:hover { background: var(--color-accent); color: var(--color-accent-fg); }
.error-404__actions { display: flex; justify-content: center; }

/* Comments */
.comments { margin-top: var(--space-md); }
.comments__title { font-size: var(--fs-xl); margin: 0 0 var(--space-md); }
.comments__list { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.comments__list .comment-body { padding: 1.25rem 0; border-bottom: 1px solid var(--color-line); }
.comments__list .children {
	list-style: none;
	margin: .5rem 0 0;
	padding-left: clamp(1rem, 4vw, 3rem);
	border-left: 2px solid var(--color-line);
}
.comments__list .comment-author { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.comments__list .avatar { border-radius: 50%; }
.comments__list .fn { font-style: normal; font-weight: 600; }
.comments__list .says { display: none; }
.comments__list .comment-meta { font-size: var(--fs-xs); color: var(--color-muted); }
.comments__list .comment-meta a { color: inherit; text-decoration: none; }
.comments__list .comment-meta a:hover { color: var(--color-accent); }
.comments__list .reply { margin-top: .5rem; }
.comments__list .comment-reply-link {
	font-size: var(--fs-sm); color: var(--color-accent);
	text-decoration: none; font-weight: 500;
}
.comments__list .comment-reply-link:hover { text-decoration: underline; }
.comments__closed {
	text-align: center; color: var(--color-muted); font-size: var(--fs-sm);
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}

/* Comment form */
.comment-form {
	display: flex; flex-direction: column; gap: 1rem;
	max-width: 42rem;
}
.comment-form__notes { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; padding: .75rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	font-size: var(--fs-md);
	font-family: inherit;
	background: var(--color-bg); color: var(--color-fg);
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: 0;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 20%, transparent);
}
.comment-form label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: .35rem; }
.comment-form .comment-form-cookies-consent {
	display: flex; align-items: center; gap: .5rem;
	font-size: var(--fs-sm); color: var(--color-muted);
}
.comment-form input[type="submit"] { align-self: flex-start; }

/* ----- Single Post (article-style) ----------------------------------- */
.post-single { padding-block: 0 var(--space-xl); }

.post-single__hero {
	width: 100%;
	height: clamp(20rem, 45vh, 32rem);
	overflow: hidden;
	position: relative;
	margin-bottom: var(--space-lg);
	background: var(--color-line);
}
.post-single__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-single__header {
	margin-bottom: var(--space-md);
	text-align: center;
}
.post-single__cats {
	margin: 0 0 1rem;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
}
.post-single__cats a { color: var(--color-accent); text-decoration: none; }
.post-single__cats a:hover { text-decoration: underline; }

.post-single__title {
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}

.post-single__meta {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	align-items: center;
}
.post-single__meta a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 30%, transparent); text-underline-offset: 3px; }
.post-single__meta a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.post-single__sep { opacity: .5; }

/* Article body — comfortable reading column with proper rhythm */
.post-single__content {
	font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.1875rem);
	line-height: 1.7;
	color: var(--color-fg);
}
.post-single__content > * + * { margin-top: 1.25em; }
.post-single__content h2 { margin-top: 2em; }
.post-single__content h3 { margin-top: 1.6em; }
.post-single__content blockquote {
	border-left: 3px solid var(--color-accent);
	padding-left: 1.25rem;
	font-style: italic;
	color: var(--color-muted);
	margin-inline: 0;
}
.post-single__content figure {
	margin-inline: 0;
}
.post-single__content figure img,
.post-single__content > img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}
.post-single__content figcaption {
	color: var(--color-muted);
	font-size: var(--fs-sm);
	margin-top: .5rem;
	text-align: center;
}
.post-single__content code {
	font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
	font-size: 0.92em;
	background: color-mix(in oklab, var(--color-fg) 6%, transparent);
	padding: .15em .35em;
	border-radius: 4px;
}
.post-single__content pre {
	background: #0b0c0f;
	color: #e6e9ef;
	border-radius: var(--radius-md);
	padding: 1.25rem;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.6;
}
.post-single__content pre code { background: transparent; padding: 0; color: inherit; }
.post-single__content ul,
.post-single__content ol { padding-left: 1.5rem; }
.post-single__content li + li { margin-top: .5rem; }

.post-single__pages {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-line);
	font-size: var(--fs-sm);
}
.post-single__pages-label { color: var(--color-muted); margin-right: .5rem; font-weight: 600; }

/* Tags */
.post-single__tags {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.post-single__tags a {
	display: inline-flex;
	padding: .35rem .75rem;
	background: color-mix(in oklab, var(--color-fg) 5%, transparent);
	color: var(--color-muted);
	border-radius: 999px;
	font-size: var(--fs-xs);
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.post-single__tags a:hover { background: var(--color-accent); color: var(--color-accent-fg); }

/* Prev/Next post navigation */
.post-single__nav {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.post-single__nav { grid-template-columns: 1fr 1fr; }
	.post-single__nav-link--next { text-align: right; grid-column: 2; }
}
.post-single__nav-link {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-single__nav-link:hover {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}
.post-single__nav-label {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--color-muted);
	font-weight: 600;
}
.post-single__nav-title {
	font-weight: 500;
	color: var(--color-fg);
}

/* Comments */
.post-single__comments {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
}

/* ----- Pagination -------------------------------------------------- */
.nav-links { display: flex; gap: .5rem; align-items: center; justify-content: center; padding: var(--space-md) 0; }
.nav-links .page-numbers {
	padding: .5rem .9rem; border: 1px solid var(--color-line); border-radius: var(--radius-md);
	text-decoration: none; font-size: var(--fs-sm);
}
.nav-links .current { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }

/* ----- Footer ------------------------------------------------------- */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-fg); padding-block: var(--space-lg); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: color-mix(in oklab, var(--color-bg) 70%, var(--color-accent)); }

/* All hardcoded rgba(255,255,255,...) values inside the footer have been
   replaced with `color-mix` against currentColor — so the muted/border
   shades follow whatever Footer Text Color the editor picks instead of
   being permanently white. Opacity ratios are preserved (~.7 muted,
   ~.6 ultra-muted, ~.15 border, ~.12 divider). */
.site-footer__top {
	display: flex; flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: space-between; align-items: flex-start;
	padding-bottom: var(--space-md);
	border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent);
}
.site-footer__brand { max-width: 36rem; display: flex; flex-direction: column; gap: .75rem; }
.site-footer__title { font-size: var(--fs-xl); font-weight: 700; margin: 0; }
.site-footer__blurb {
	margin: 0;
	color: color-mix(in oklab, currentColor 70%, transparent);
	font-size: var(--fs-sm); line-height: var(--lh-normal); max-width: 32rem;
}
.site-footer__nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* Social links — appears between footer-top and footer-bottom rows.
   Single line by default; wraps on narrow screens. Icons inherit color
   from the surrounding footer text. */
.site-footer__socials {
	padding: var(--space-sm) 0;
	border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
.social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.social-links li { margin: 0; }
.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: color-mix(in oklab, currentColor 70%, transparent);
	background: color-mix(in oklab, currentColor 6%, transparent);
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social-links a:hover,
.social-links a:focus-visible {
	color: var(--color-accent-fg, #fff);
	background: var(--color-accent);
	transform: translateY(-1px);
}
.social-links svg { display: block; }

.site-footer__bottom {
	padding-top: var(--space-md);
	color: color-mix(in oklab, currentColor 60%, transparent);
	font-size: var(--fs-sm);
}

/* Minimal variant — only the copyright line shows. Drop the padding-top
   from .site-footer__bottom (which exists to space the copy below the
   border on the full variant) and tighten the section padding so it reads
   as a slim utility bar rather than a heavy footer. */
.site-footer--minimal { padding-block: var(--space-sm); }
.site-footer--minimal .site-footer__bottom { padding-top: 0; }
.site-footer__copy { margin: 0; }

/* Centered footer variant — brand, nav, and copyright all center-aligned.
   The top row stacks vertically instead of splitting left/right. */
.site-footer--align-center .site-footer__top {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.site-footer--align-center .site-footer__brand { align-items: center; max-width: 42rem; }
.site-footer--align-center .site-footer__logo { display: flex; justify-content: center; }
.site-footer--align-center .site-footer__blurb { text-align: center; }
.site-footer--align-center .site-footer__nav .menu { justify-content: center; }
.site-footer--align-center .social-links { justify-content: center; }
.site-footer--align-center .site-footer__bottom { text-align: center; }