@riverbankcms/sdk 0.104.1 → 0.104.3

package/dist/server/rendering.mjs

@@ -494,11 +494,11 @@ function joinStoragePathSegments(segments) {
 }
 //#endregion
 //#region ../media-core/src/typeGuards.ts
-function isRecord$29(value) {
+function isRecord$31(value) {
 	return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
 function asRecord$3(value) {
-	return isRecord$29(value) ? value : void 0;
+	return isRecord$31(value) ? value : void 0;
 }
 function isFileJsonObject(value) {
 	return Object.values(value).every(isFileJsonValue);
@@ -507,7 +507,7 @@ function isFileJsonValue(value) {
 	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
 	if (typeof value === "number") return Number.isFinite(value);
 	if (Array.isArray(value)) return value.every(isFileJsonValue);
-	return isRecord$29(value) && isFileJsonObject(value);
+	return isRecord$31(value) && isFileJsonObject(value);
 }
 new TextDecoder("latin1");
 //#endregion
@@ -811,7 +811,7 @@ function isCmsMediaObjectType(value) {
 	return typeof value === "string" && CMS_MEDIA_OBJECT_TYPES.includes(value);
 }
 function isCmsMediaObject(value) {
-	if (!isRecord$29(value)) return false;
+	if (!isRecord$31(value)) return false;
 	const type = value.type;
 	if (!isCmsMediaObjectType(type)) return false;
 	if ("attrs" in value) return false;
@@ -822,7 +822,7 @@ function collectMediaObjects(value, out, location = "") {
 		value.forEach((item, index) => collectMediaObjects(item, out, `${location}[${index}]`));
 		return;
 	}
-	if (!isRecord$29(value)) return;
+	if (!isRecord$31(value)) return;
 	if (isCmsMediaObject(value)) out.push({
 		obj: value,
 		location
@@ -836,8 +836,8 @@ function walkAndCollectImageAttrs(value, out, location = "") {
 		value.forEach((item, index) => walkAndCollectImageAttrs(item, out, `${location}[${index}]`));
 		return;
 	}
-	if (!isRecord$29(value)) return;
-	if (value.type === "image" && isRecord$29(value.attrs)) out.push({
+	if (!isRecord$31(value)) return;
+	if (value.type === "image" && isRecord$31(value.attrs)) out.push({
 		attrs: value.attrs,
 		location: location ? `${location}.attrs` : "attrs"
 	});
@@ -1087,6 +1087,9 @@ const ALLOWED_NODE_TYPES = [
 	"richText",
 	"media",
 	"videoEmbed",
+	"icon",
+	"feature-card-icon",
+	"svg",
 	"button",
 	"link",
 	"carousel",
@@ -1123,11 +1126,13 @@ const ALLOWED_TRANSFORM_IDS = [
 	"value.jsonArray",
 	"value.csv",
 	"array.marqueeLoop",
+	"value.mapToken",
 	"layout.maxWidthClass",
 	"layout.headerRootClass",
 	"layout.footerRootClass",
 	"layout.headerRootStyle",
 	"layout.headerSectionBackground",
+	"layout.classicNavMode",
 	"layout.footerRootStyle",
 	"ui.headerNavLinkClass",
 	"ui.headingClassFromAlignment",
@@ -2986,7 +2991,7 @@ function getSemanticIconComponent(name) {
 //#endregion
 //#region ../blocks/src/system/icons/value.ts
 const NO_BLOCK_ICON_VALUE = { kind: "none" };
-function isRecord$28(value) {
+function isRecord$30(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function parseBlockIconValue(value) {
@@ -2994,7 +2999,7 @@ function parseBlockIconValue(value) {
 		kind: "semantic",
 		iconId: value
 	};
-	if (!isRecord$28(value)) return NO_BLOCK_ICON_VALUE;
+	if (!isRecord$30(value)) return NO_BLOCK_ICON_VALUE;
 	switch (value.kind) {
 		case "none": return NO_BLOCK_ICON_VALUE;
 		case "semantic": return isSemanticIconId(value.iconId) ? {
@@ -3067,7 +3072,7 @@ function buildGeneratedBlockIconRenderAssetLookupFromUnknown(value) {
 	if (!Array.isArray(value)) return { kind: "invalid_asset_list" };
 	const inputs = [];
 	for (const [index, item] of value.entries()) {
-		if (!isRecord$28(item)) return {
+		if (!isRecord$30(item)) return {
 			kind: "invalid_asset_entry",
 			index,
 			reason: "not_object"
@@ -5420,6 +5425,234 @@ function expandPalette(palette) {
 	return expanded;
 }
 //#endregion
+//#region ../theme-core/src/tokens/colorTokenParts.ts
+function parseOpacityPercent(source) {
+	const trimmed = source.trim();
+	if (!trimmed) return null;
+	if (!/^\d{1,3}(?:\.\d+)?$/.test(trimmed)) return null;
+	const value = Number(trimmed);
+	if (!Number.isFinite(value)) return null;
+	if (value < 0 || value > 100) return null;
+	return value;
+}
+function parseColorTokenParts(source) {
+	const trimmed = source.trim();
+	if (trimmed.startsWith("raw:")) return {
+		kind: "raw",
+		value: trimmed.slice(4)
+	};
+	const [token, opacityRaw, extra] = trimmed.split("/");
+	if (!token || extra !== void 0) return {
+		kind: "invalid",
+		token: trimmed
+	};
+	if (opacityRaw === void 0) return {
+		kind: "token",
+		token,
+		opacityPercent: null
+	};
+	const opacityPercent = parseOpacityPercent(opacityRaw);
+	if (opacityPercent === null) return {
+		kind: "invalid",
+		token: trimmed
+	};
+	return {
+		kind: "token",
+		token,
+		opacityPercent
+	};
+}
+//#endregion
+//#region ../theme-core/src/tokens/blockColorTokens.ts
+const blockColorTokenNames = [
+	"text",
+	"heading",
+	"mutedText",
+	"surface",
+	"background",
+	"foreground",
+	"border",
+	"primary",
+	"secondary",
+	"accent",
+	"success",
+	"warning",
+	"info",
+	"error",
+	"destructive",
+	"scrim",
+	"shadow",
+	"onPrimary",
+	"onSecondary",
+	"onAccent",
+	"onSuccess",
+	"onWarning",
+	"onInfo",
+	"onError",
+	"onDestructive",
+	"onSurface"
+];
+const blockColorTokenNameSet = new Set(blockColorTokenNames);
+function isBlockColorToken(value) {
+	if (typeof value !== "string") return false;
+	const parts = parseColorTokenParts(value);
+	return parts.kind === "token" && blockColorTokenNameSet.has(parts.token);
+}
+function parseBlockColorToken(value) {
+	if (!isBlockColorToken(value)) return null;
+	return value.trim();
+}
+//#endregion
+//#region ../theme-core/src/tokens/themeColorTokens.ts
+/**
+* Known palette role token names. This is the low-level source of truth for
+* palette roles used by palette variants, Theme V2 schemas, and runtime color
+* reference parsing.
+*/
+const PALETTE_TOKEN_NAMES = [
+	"primary",
+	"primaryForeground",
+	"secondary",
+	"accent",
+	"success",
+	"warning",
+	"destructive",
+	"background",
+	"surface",
+	"surfaceAlt",
+	"muted",
+	"text",
+	"border"
+];
+const paletteTokenNameSchema = z$1.enum(PALETTE_TOKEN_NAMES);
+const themeColorBaseTokenNames = [
+	...PALETTE_TOKEN_NAMES,
+	...blockColorTokenNames,
+	"white",
+	"neutral",
+	"primaryText",
+	"secondaryForeground",
+	"accentForeground"
+];
+const themeColorBaseTokenSet = new Set(themeColorBaseTokenNames);
+const themeColorShadeSteps = [
+	"50",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900",
+	"950"
+];
+const shadeStepSet = new Set(themeColorShadeSteps);
+function isKnownBaseToken(value) {
+	return themeColorBaseTokenSet.has(value);
+}
+function isKnownShadeToken(value) {
+	const match = value.match(/^([a-zA-Z][a-zA-Z0-9]*)(?:-([0-9]{2,3}))$/);
+	if (!match) return false;
+	const [, base, shade] = match;
+	return Boolean(base && shade && isKnownBaseToken(base) && shadeStepSet.has(shade));
+}
+function isThemeColorTokenBase(value) {
+	return isKnownBaseToken(value) || isKnownShadeToken(value);
+}
+function isThemeColorToken(value) {
+	if (typeof value !== "string") return false;
+	const parts = parseColorTokenParts(value);
+	return parts.kind === "token" && isThemeColorTokenBase(parts.token);
+}
+function parseThemeColorToken(value) {
+	if (!isThemeColorToken(value)) return null;
+	return value.trim();
+}
+const themeColorTokenSchema = z$1.string().min(1).refine((value) => Boolean(isThemeColorToken(value)), "Expected a known Theme V2 color token");
+//#endregion
+//#region ../theme-core/src/palette/colors.ts
+const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/;
+const NORMALIZABLE_HEX_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+const hexColorSchema = z$1.string().regex(HEX_COLOR_REGEX, "Hex must be #RRGGBB (lowercase)").transform((value) => value);
+const paletteModeSchema = z$1.enum(["light", "dark"]);
+z$1.string().regex(/^[0-9a-f]{64}$/, "Palette hash must be a lowercase SHA-256 value").transform((value) => value);
+const paletteColorsSchema = z$1.object({
+	primary: hexColorSchema,
+	primaryForeground: hexColorSchema,
+	secondary: hexColorSchema,
+	accent: hexColorSchema,
+	success: hexColorSchema,
+	warning: hexColorSchema,
+	destructive: hexColorSchema,
+	background: hexColorSchema,
+	surface: hexColorSchema,
+	surfaceAlt: hexColorSchema,
+	muted: hexColorSchema,
+	text: hexColorSchema,
+	border: hexColorSchema
+}).strict().transform((value) => value);
+function normalizePaletteHex(value) {
+	if (!NORMALIZABLE_HEX_REGEX.test(value)) return null;
+	const normalized = value.toLowerCase();
+	if (normalized.length === 7) return normalized;
+	const triplet = normalized.slice(1);
+	const red = triplet.charAt(0);
+	const green = triplet.charAt(1);
+	const blue = triplet.charAt(2);
+	return `#${red}${red}${green}${green}${blue}${blue}`;
+}
+function paletteColorsFromEntries(entries) {
+	const values = {};
+	for (const entry of entries) {
+		const parsedRole = paletteTokenNameSchema.safeParse(entry.name);
+		if (!parsedRole.success) return {
+			ok: false,
+			error: {
+				kind: "unknown-role",
+				role: entry.name
+			}
+		};
+		const role = parsedRole.data;
+		if (values[role] !== void 0) return {
+			ok: false,
+			error: {
+				kind: "duplicate-role",
+				role
+			}
+		};
+		const hex = normalizePaletteHex(entry.hex);
+		if (!hex) return {
+			ok: false,
+			error: {
+				kind: "invalid-color",
+				role,
+				value: entry.hex
+			}
+		};
+		values[role] = hex;
+	}
+	const missing = PALETTE_TOKEN_NAMES.filter((role) => values[role] === void 0);
+	if (missing.length > 0) return {
+		ok: false,
+		error: {
+			kind: "missing-roles",
+			roles: missing
+		}
+	};
+	return {
+		ok: true,
+		colors: paletteColorsSchema.parse(values)
+	};
+}
+function requirePaletteColorsFromEntries(entries) {
+	const result = paletteColorsFromEntries(entries);
+	if (result.ok) return result.colors;
+	throw new Error(`Invalid complete palette: ${result.error.kind}`);
+}
+new Set(PALETTE_TOKEN_NAMES);
+//#endregion
 //#region ../../node_modules/.pnpm/@vibrant+image@4.0.4/node_modules/@vibrant/image/dist/esm/histogram.js
 var Histogram = class {
 	constructor(pixels, opts) {
@@ -6450,233 +6683,6 @@ const pipeline = new BasicPipeline().filter.register("default", (r, g, b, a) =>
 //#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/browser.js
 Vibrant.use(pipeline);
 //#endregion
-//#region ../theme-core/src/tokens/colorTokenParts.ts
-function parseOpacityPercent(source) {
-	const trimmed = source.trim();
-	if (!trimmed) return null;
-	if (!/^\d{1,3}(?:\.\d+)?$/.test(trimmed)) return null;
-	const value = Number(trimmed);
-	if (!Number.isFinite(value)) return null;
-	if (value < 0 || value > 100) return null;
-	return value;
-}
-function parseColorTokenParts(source) {
-	const trimmed = source.trim();
-	if (trimmed.startsWith("raw:")) return {
-		kind: "raw",
-		value: trimmed.slice(4)
-	};
-	const [token, opacityRaw, extra] = trimmed.split("/");
-	if (!token || extra !== void 0) return {
-		kind: "invalid",
-		token: trimmed
-	};
-	if (opacityRaw === void 0) return {
-		kind: "token",
-		token,
-		opacityPercent: null
-	};
-	const opacityPercent = parseOpacityPercent(opacityRaw);
-	if (opacityPercent === null) return {
-		kind: "invalid",
-		token: trimmed
-	};
-	return {
-		kind: "token",
-		token,
-		opacityPercent
-	};
-}
-//#endregion
-//#region ../theme-core/src/tokens/blockColorTokens.ts
-const blockColorTokenNames = [
-	"text",
-	"heading",
-	"mutedText",
-	"surface",
-	"background",
-	"foreground",
-	"border",
-	"primary",
-	"secondary",
-	"accent",
-	"success",
-	"warning",
-	"info",
-	"error",
-	"destructive",
-	"scrim",
-	"shadow",
-	"onPrimary",
-	"onSecondary",
-	"onAccent",
-	"onSuccess",
-	"onWarning",
-	"onInfo",
-	"onError",
-	"onDestructive",
-	"onSurface"
-];
-const blockColorTokenNameSet = new Set(blockColorTokenNames);
-function isBlockColorToken(value) {
-	if (typeof value !== "string") return false;
-	const parts = parseColorTokenParts(value);
-	return parts.kind === "token" && blockColorTokenNameSet.has(parts.token);
-}
-function parseBlockColorToken(value) {
-	if (!isBlockColorToken(value)) return null;
-	return value.trim();
-}
-//#endregion
-//#region ../theme-core/src/tokens/themeColorTokens.ts
-/**
-* Known palette role token names. This is the low-level source of truth for
-* palette roles used by palette variants, Theme V2 schemas, and runtime color
-* reference parsing.
-*/
-const PALETTE_TOKEN_NAMES = [
-	"primary",
-	"primaryForeground",
-	"secondary",
-	"accent",
-	"success",
-	"warning",
-	"destructive",
-	"background",
-	"surface",
-	"surfaceAlt",
-	"muted",
-	"text",
-	"border"
-];
-const paletteTokenNameSchema = z$1.enum(PALETTE_TOKEN_NAMES);
-const themeColorBaseTokenNames = [
-	...PALETTE_TOKEN_NAMES,
-	...blockColorTokenNames,
-	"white",
-	"neutral",
-	"primaryText",
-	"secondaryForeground",
-	"accentForeground"
-];
-const themeColorBaseTokenSet = new Set(themeColorBaseTokenNames);
-const themeColorShadeSteps = [
-	"50",
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"600",
-	"700",
-	"800",
-	"900",
-	"950"
-];
-const shadeStepSet = new Set(themeColorShadeSteps);
-function isKnownBaseToken(value) {
-	return themeColorBaseTokenSet.has(value);
-}
-function isKnownShadeToken(value) {
-	const match = value.match(/^([a-zA-Z][a-zA-Z0-9]*)(?:-([0-9]{2,3}))$/);
-	if (!match) return false;
-	const [, base, shade] = match;
-	return Boolean(base && shade && isKnownBaseToken(base) && shadeStepSet.has(shade));
-}
-function isThemeColorTokenBase(value) {
-	return isKnownBaseToken(value) || isKnownShadeToken(value);
-}
-function isThemeColorToken(value) {
-	if (typeof value !== "string") return false;
-	const parts = parseColorTokenParts(value);
-	return parts.kind === "token" && isThemeColorTokenBase(parts.token);
-}
-function parseThemeColorToken(value) {
-	if (!isThemeColorToken(value)) return null;
-	return value.trim();
-}
-const themeColorTokenSchema = z$1.string().min(1).refine((value) => Boolean(isThemeColorToken(value)), "Expected a known Theme V2 color token");
-//#endregion
-//#region ../theme-core/src/palette/colors.ts
-const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/;
-const NORMALIZABLE_HEX_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
-const hexColorSchema = z$1.string().regex(HEX_COLOR_REGEX, "Hex must be #RRGGBB (lowercase)").transform((value) => value);
-const paletteModeSchema = z$1.enum(["light", "dark"]);
-z$1.string().regex(/^[0-9a-f]{64}$/, "Palette hash must be a lowercase SHA-256 value").transform((value) => value);
-const paletteColorsSchema = z$1.object({
-	primary: hexColorSchema,
-	primaryForeground: hexColorSchema,
-	secondary: hexColorSchema,
-	accent: hexColorSchema,
-	success: hexColorSchema,
-	warning: hexColorSchema,
-	destructive: hexColorSchema,
-	background: hexColorSchema,
-	surface: hexColorSchema,
-	surfaceAlt: hexColorSchema,
-	muted: hexColorSchema,
-	text: hexColorSchema,
-	border: hexColorSchema
-}).strict().transform((value) => value);
-function normalizePaletteHex(value) {
-	if (!NORMALIZABLE_HEX_REGEX.test(value)) return null;
-	const normalized = value.toLowerCase();
-	if (normalized.length === 7) return normalized;
-	const triplet = normalized.slice(1);
-	const red = triplet.charAt(0);
-	const green = triplet.charAt(1);
-	const blue = triplet.charAt(2);
-	return `#${red}${red}${green}${green}${blue}${blue}`;
-}
-function paletteColorsFromEntries(entries) {
-	const values = {};
-	for (const entry of entries) {
-		const parsedRole = paletteTokenNameSchema.safeParse(entry.name);
-		if (!parsedRole.success) return {
-			ok: false,
-			error: {
-				kind: "unknown-role",
-				role: entry.name
-			}
-		};
-		const role = parsedRole.data;
-		if (values[role] !== void 0) return {
-			ok: false,
-			error: {
-				kind: "duplicate-role",
-				role
-			}
-		};
-		const hex = normalizePaletteHex(entry.hex);
-		if (!hex) return {
-			ok: false,
-			error: {
-				kind: "invalid-color",
-				role,
-				value: entry.hex
-			}
-		};
-		values[role] = hex;
-	}
-	const missing = PALETTE_TOKEN_NAMES.filter((role) => values[role] === void 0);
-	if (missing.length > 0) return {
-		ok: false,
-		error: {
-			kind: "missing-roles",
-			roles: missing
-		}
-	};
-	return {
-		ok: true,
-		colors: paletteColorsSchema.parse(values)
-	};
-}
-function requirePaletteColorsFromEntries(entries) {
-	const result = paletteColorsFromEntries(entries);
-	if (result.ok) return result.colors;
-	throw new Error(`Invalid complete palette: ${result.error.kind}`);
-}
-//#endregion
 //#region ../theme-core/src/site-styles/styleTags.ts
 /**
 * Descriptive style-axis metadata for button personalities and palette
@@ -6950,6 +6956,71 @@ const brandLedJewel = defineCuratedPalette({
 		}
 	]
 });
+const brandLedSpruce = defineCuratedPalette({
+	id: "brand-led-spruce",
+	name: "Brand-led — Spruce",
+	description: "Spruce-ink primary and moss secondary with an amber accent over a green-mist ground and hairline sage borders.",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		era: "editorial"
+	},
+	mode: "light",
+	colors: [
+		{
+			name: "primary",
+			hex: "#14312b"
+		},
+		{
+			name: "secondary",
+			hex: "#356a59"
+		},
+		{
+			name: "accent",
+			hex: "#f08a4b"
+		},
+		{
+			name: "success",
+			hex: "#356a59"
+		},
+		{
+			name: "warning",
+			hex: "#f08a4b"
+		},
+		{
+			name: "destructive",
+			hex: "#b5561f"
+		},
+		{
+			name: "background",
+			hex: "#ecefe9"
+		},
+		{
+			name: "surface",
+			hex: "#ffffff"
+		},
+		{
+			name: "surfaceAlt",
+			hex: "#f4f6f1"
+		},
+		{
+			name: "muted",
+			hex: "#5c6a64"
+		},
+		{
+			name: "text",
+			hex: "#1c2a26"
+		},
+		{
+			name: "primaryForeground",
+			hex: "#f4f7f1"
+		},
+		{
+			name: "border",
+			hex: "#d7ddd2"
+		}
+	]
+});
 const brandLedBurgundyGold = defineCuratedPalette({
 	id: "brand-led-burgundy-gold",
 	name: "Brand-led — Burgundy Gold",
@@ -7489,6 +7560,7 @@ const curatedPalettes = [
 	brandLedWarm,
 	brandLedJewel,
 	brandLedBurgundyGold,
+	brandLedSpruce,
 	defineCuratedPalette({
 		id: "warm-neutral-clay",
 		name: "Warm Neutral — Clay",
@@ -8540,6 +8612,10 @@ const buttonBorderSchema = z$1.object({
 	widthClass: z$1.string(),
 	colorToken: themeColorTokenSchema
 });
+const buttonVariantAffordanceSchema = z$1.object({
+	iconId: z$1.string().min(1),
+	colorToken: themeColorTokenSchema.optional()
+});
 const variantShadowSchema = z$1.object({
 	elevation: z$1.enum([
 		"none",
@@ -8593,7 +8669,8 @@ const buttonVariantSchema = z$1.object({
 	border: buttonBorderSchema.optional(),
 	hoverBackgroundToken: z$1.string().optional(),
 	effects: variantEffectsSchema.optional(),
-	sizes: variantSizeOverridesSchema.optional()
+	sizes: variantSizeOverridesSchema.optional(),
+	affordance: buttonVariantAffordanceSchema.optional()
 });
 const buttonSystemSchema = z$1.object({
 	global: buttonGlobalSettingsSchema,
@@ -9137,6 +9214,136 @@ const editorialLink = defineButtonPersonality({
 	}
 });
 //#endregion
+//#region ../theme-core/src/buttons/personalities/flat-ink.ts
+/**
+* Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
+* amber accent climax, all completely flat (no drop shadow) with a modest
+* radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
+* physiotherapy voice. The primary shifts to the secondary (moss) on hover and
+* every variant lifts 2px; the amber accent is meant to be used sparingly as
+* the page's one conversion climax.
+*/
+const flatInk = defineButtonPersonality({
+	id: "flat-ink",
+	name: "Flat Ink",
+	description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		motion: "subtle",
+		era: "editorial"
+	},
+	buttonSystem: {
+		global: {
+			cornerStyle: "rounded",
+			shadow: "low",
+			textTransform: "none",
+			fontWeight: 600,
+			borderWidth: 1,
+			typography: "body",
+			letterSpacing: "tight",
+			paddingPreset: "default",
+			hoverTransform: "lift",
+			hoverColor: "none"
+		},
+		sizes: {
+			sm: {
+				padding: "0.625rem 1.125rem",
+				fontSize: "text-sm"
+			},
+			md: { padding: "0.8125rem 1.375rem" },
+			lg: {
+				padding: "0.9375rem 1.625rem",
+				fontSize: "text-lg"
+			},
+			xl: {
+				padding: "1.0625rem 2rem",
+				fontSize: "text-xl"
+			}
+		},
+		variants: [
+			{
+				id: "primary",
+				name: "Primary",
+				enabled: true,
+				priority: 1,
+				background: {
+					type: "solid",
+					colorToken: "primary"
+				},
+				textColorToken: "primaryForeground",
+				borderRadius: "rounded-lg",
+				affordance: {
+					iconId: "ArrowRight",
+					colorToken: "accent"
+				},
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}, {
+					effectId: "background-on-hover",
+					options: { colorToken: "secondary" }
+				}] }
+			},
+			{
+				id: "secondary",
+				name: "Secondary",
+				enabled: true,
+				priority: 2,
+				background: { type: "transparent" },
+				textColorToken: "primary",
+				borderRadius: "rounded-lg",
+				border: {
+					widthClass: "border",
+					colorToken: "border"
+				},
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}, {
+					effectId: "background-on-hover",
+					options: { colorToken: "surfaceAlt" }
+				}] }
+			},
+			{
+				id: "accent",
+				name: "Accent",
+				enabled: true,
+				priority: 3,
+				background: {
+					type: "solid",
+					colorToken: "accent"
+				},
+				textColorToken: "accentForeground",
+				borderRadius: "rounded-lg",
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				affordance: {
+					iconId: "ArrowRight",
+					colorToken: "accentForeground"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}] }
+			}
+		]
+	}
+});
+//#endregion
 //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
 /**
 * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
@@ -9907,6 +10114,7 @@ const buttonPersonalities = [
 	editorialLink,
 	pebble,
 	inkStamp,
+	flatInk,
 	brushedWash,
 	showtimePill,
 	joyStamp,
@@ -10837,6 +11045,13 @@ const legacyHeaderLookAliases = defineExactCatalog()([
 			styleId: asHeaderStyleId("minimal")
 		}
 	},
+	{
+		lookId: asHeaderLookId("classic-centered-nav"),
+		selection: {
+			layoutId: asHeaderLayoutId("classic"),
+			styleId: asHeaderStyleId("fine-line")
+		}
+	},
 	{
 		lookId: asHeaderLookId("brand-solid"),
 		selection: {
@@ -10907,6 +11122,50 @@ function getCompatibleHeaderStyleIds(layoutId) {
 		return isHeaderStyleCompatibleWithLayout(getHeaderStyleOrThrow(styleId), layoutId);
 	});
 }
+function applyNavTypography(style, typography) {
+	switch (typography) {
+		case "plain": return style;
+		case "heading": return {
+			...style,
+			typography: "heading",
+			fontWeight: "medium",
+			letterSpacing: "wide"
+		};
+		case "quiet-caps": return {
+			...style,
+			textTransform: "uppercase",
+			textSize: "sm",
+			letterSpacing: "wide"
+		};
+		case "brand-caps": return {
+			...style,
+			textTransform: "uppercase",
+			textSize: "sm",
+			letterSpacing: "wider"
+		};
+		default: return assertNever$19(typography, "Unhandled header nav typography");
+	}
+}
+function underlineNavLinkStyle(colorToken, underlineColorToken, typography = "plain") {
+	return applyNavTypography({
+		name: "Underline grow",
+		typography: "body",
+		fontWeight: "medium",
+		textTransform: "none",
+		italic: false,
+		colorToken,
+		padding: "compact",
+		paddingX: "compact",
+		borderRadius: "none",
+		effects: { hover: [{
+			effectId: "nav-underline",
+			options: {
+				style: "grow",
+				...underlineColorToken ? { colorToken: underlineColorToken } : {}
+			}
+		}] }
+	}, typography);
+}
 function themedHeaderShadow(theme) {
 	switch (theme.shadow.elevation) {
 		case "none": return;
@@ -11006,6 +11265,38 @@ function cleanBaseHeader(theme) {
 		ctaGap: "default"
 	};
 }
+function classicCenteredNavHeader(theme) {
+	return {
+		...baseHeader(theme),
+		variant: "classic",
+		navPlacement: "center",
+		positioning: "sticky",
+		shrinkOnScroll: false,
+		background: {
+			type: "color",
+			color: "surface"
+		},
+		textColor: "text",
+		navColor: "text",
+		navStyle: "underline-grow",
+		navWeight: "medium",
+		navLinkStyle: underlineNavLinkStyle("text", "accent"),
+		border: {
+			style: "solid",
+			width: "thin",
+			position: "bottom",
+			colorToken: "border"
+		},
+		ctaTreatment: "primary",
+		ctaVariant: resolveHeaderCtaVariant(theme, "primary"),
+		ctaGap: "default",
+		logoText: {
+			mobileMaxWidth: "sm",
+			mobileWrapLines: 1,
+			hideOnShrink: false
+		}
+	};
+}
 function serifLineHeader(theme) {
 	return {
 		...baseHeader(theme),
@@ -11170,6 +11461,21 @@ const headerLookCatalog = defineExactCatalog()([
 		logoAccommodations: inlineClassicLogoAccommodations,
 		compile: cleanBaseHeader
 	},
+	{
+		id: asHeaderLookId("classic-centered-nav"),
+		label: "Centered nav",
+		visualTreatment: "solid-neutral",
+		layoutBehavior: "sticky",
+		configuration: {
+			structure: "inline-classic",
+			treatment: "solid-neutral",
+			behavior: "sticky"
+		},
+		openingRequirement: "none",
+		maxRecommendedNavItems: 6,
+		logoAccommodations: inlineClassicLogoAccommodations,
+		compile: classicCenteredNavHeader
+	},
 	{
 		id: asHeaderLookId("brand-solid"),
 		label: "Brand solid",
@@ -12332,6 +12638,74 @@ const typographyPresets = [
 				}
 			}
 		}
+	}),
+	defineTypographyPreset({
+		id: "typography-preset:fulcrum",
+		name: "Fulcrum",
+		description: "Newsreader serif headings over an IBM Plex Sans body, with an IBM Plex Mono eyebrow role for uppercase kickers and mono captions.",
+		defaultFonts: {
+			body: "IBM Plex Sans, system-ui, -apple-system, sans-serif",
+			heading: "Newsreader, Georgia, \"Times New Roman\", serif"
+		},
+		recommendedFonts: {
+			body: [
+				"IBM Plex Sans",
+				"Source Sans 3",
+				"Inter"
+			],
+			heading: [
+				"Newsreader",
+				"Source Serif 4",
+				"Lora"
+			]
+		},
+		slotPolicies: {
+			body: bodyReadablePolicy,
+			heading: displayHeadingPolicy
+		},
+		typography: {
+			body: {
+				family: "IBM Plex Sans, system-ui, -apple-system, sans-serif",
+				size: "lg",
+				weight: "regular",
+				lineHeight: "relaxed",
+				letterSpacing: "normal"
+			},
+			headings: {
+				default: {
+					family: "Newsreader, Georgia, \"Times New Roman\", serif",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					colorToken: "primary",
+					italic: null,
+					case: null
+				},
+				h1: {
+					size: "2xl",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					italic: null
+				},
+				h2: {
+					size: "xl",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					italic: null
+				},
+				h3: {
+					size: "md",
+					weight: "semibold",
+					lineHeight: "normal",
+					letterSpacing: "normal",
+					italic: null
+				}
+			},
+			scale: "spacious",
+			eyebrow: { family: "IBM Plex Mono, ui-monospace, \"SF Mono\", monospace" }
+		}
 	})
 ];
 new Map(typographyPresets.map((preset) => [preset.id, preset]));
@@ -14075,7 +14449,53 @@ function generateDefaultButtonSystem(theme) {
 	};
 }
 //#endregion
+//#region ../theme-core/src/buttons/affordanceIcons.ts
+/**
+* Affordance icon path data for CSS-emitted button affordances.
+*
+* A button variant may declare a trailing `affordance` icon (see
+* `ButtonVariantAffordance`). The generated button CSS renders that icon as a
+* masked `::after` pseudo-element, so the personality supplies it to every
+* button of the variant without per-node authoring.
+*
+* Icons live in the `@riverbankcms/blocks` registry, but the button CSS is
+* generated here in theme-core, so this module carries a small, curated copy of
+* the *affordance-eligible* icon path data (arrows/chevrons — the action-oriented
+* subset). The `d` values below are duplicated verbatim from the matching entries
+* in `blocks/src/system/icons/svg.tsx`; ids match the registry ids exactly so a
+* node-level `trailingIcon` and a personality `affordance` share one id space.
+*
+* Keep this set intentionally tiny. It is not the full CTA icon set — only the
+* shapes that read as a trailing affordance.
+*/
+/** Registry icon id → the SVG path `d` fragments composing that icon. */
+const AFFORDANCE_ICON_PATHS = {
+	ArrowRight: ["M5 12h14", "m13 6 6 6-6 6"],
+	ArrowLeft: ["M19 12H5", "m11 6-6 6 6 6"],
+	ChevronRight: ["m9 18 6-6-6-6"],
+	ChevronLeft: ["m15 18-6-6 6-6"],
+	ChevronDown: ["m6 9 6 6 6-6"],
+	ArrowUpRight: ["M7 17 17 7", "M7 7h10v10"]
+};
+/**
+* Build a `data:image/svg+xml,...` URL for an affordance icon, suitable for use
+* as a CSS `mask-image`. The stroke is painted solid black so the mask's alpha
+* traces the icon outline; the visible colour is supplied separately by the
+* `::after` rule's `background-color`. Returns `null` for unknown ids.
+*/
+function affordanceIconMaskUrl(iconId) {
+	const paths = AFFORDANCE_ICON_PATHS[iconId];
+	if (!paths || paths.length === 0) return null;
+	return `data:image/svg+xml,${`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>${paths.map((d) => `<path d='${d}'/>`).join("")}</svg>`.replace(/"/g, "'").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ")}`;
+}
+//#endregion
 //#region ../theme-core/src/buttons/generateButtonCss.ts
+/**
+* Class the `button` runtime node adds when it renders its own trailing icon,
+* so a node-level icon suppresses the personality's CSS `::after` affordance
+* (node overrides personality). Shared so generator and renderer can't drift.
+*/
+const AFFORDANCE_SUPPRESS_CLASS = "rb-affordance-off";
 const BUTTON_SIZE_NAMES = buttonSizeNameSchema.options;
 /**
 * Letter spacing token → CSS value.
@@ -14170,10 +14590,40 @@ function variantChunks(variant, global, themeSizes, themeId, tokens, theme) {
 	out.push(variantFocusVisibleRule(variantId, themeId));
 	const effects = variantEffectsCss(variant, themeId, tokens, theme);
 	if (effects) out.push({ raw: effects });
+	const affordance = variantAffordanceRule(variant, selector, tokens);
+	if (affordance) out.push(affordance);
 	out.push(...variantDisabledRules(variantId, themeId));
 	out.push(...variantSizeRules(variant, variantId, themeSizes, themeId));
 	return out;
 }
+/**
+* Emit the optional trailing affordance icon as a masked `::after`.
+*
+* Only variants that declare `affordance` with a known icon id produce a rule —
+* every other variant is byte-identical to before. The `:not(.rb-affordance-off)`
+* guard lets a `button` node that renders its own trailing icon suppress this
+* one (node overrides personality). Colour comes from the affordance token, or
+* `currentColor` (the button text colour) when no token is given.
+*/
+function variantAffordanceRule(variant, selector, tokens) {
+	const affordance = variant.affordance;
+	if (!affordance) return null;
+	const maskUrl = affordanceIconMaskUrl(affordance.iconId);
+	if (!maskUrl) return null;
+	const color = affordance.colorToken ? tokens.getColor(affordance.colorToken) : "currentColor";
+	const mask = `url("${maskUrl}") no-repeat center / contain`;
+	return rule(`${selector}:not(.${AFFORDANCE_SUPPRESS_CLASS})::after`, [
+		["content", "\"\""],
+		["display", "inline-block"],
+		["width", "1em"],
+		["height", "1em"],
+		["margin-inline-start", "0.5em"],
+		["flex", "0 0 auto"],
+		["background-color", color],
+		["-webkit-mask", mask],
+		["mask", mask]
+	]);
+}
 function parseButtonVariantIdForCss(value) {
 	const variantId = parseThemeButtonVariantId(value);
 	if (!variantId) throw new Error("Button variant id must be a non-empty string");
@@ -14555,18 +15005,65 @@ function generateDefaultCardSystem(theme) {
 	return { variants: [defaultVariant, alternativeVariant] };
 }
 //#endregion
-//#region ../theme-core/src/status/contextualColors.ts
-const STATUS_MUTED_COLOR_VAR = "--rb-status-muted-color";
-const DEFAULT_STATUS_MUTED_COLOR = "rgb(var(--tb-mutedText))";
-const SURFACE_MUTED_STATUS_COLOR = "color-mix(in oklab, currentColor, transparent 18%)";
-function statusMutedColorValue() {
-	return `var(${STATUS_MUTED_COLOR_VAR}, ${DEFAULT_STATUS_MUTED_COLOR})`;
+//#region ../theme-core/src/surfaces/foregroundRoles.ts
+const SURFACE_FOREGROUND_ROLES = [
+	"text",
+	"heading",
+	"link",
+	"supporting"
+];
+//#endregion
+//#region ../theme-core/src/surfaces/foregroundContract.ts
+const SURFACE_FOREGROUND_CSS_VARS = {
+	text: "--rb-surface-text-color",
+	heading: "--rb-surface-heading-color",
+	link: "--rb-surface-link-color",
+	supporting: "--rb-surface-supporting-color"
+};
+const DEFAULT_SURFACE_TEXT_COLOR = "rgb(var(--tb-text, 17 24 39))";
+const DEFAULT_ROLE_FALLBACKS = {
+	text: DEFAULT_SURFACE_TEXT_COLOR,
+	heading: DEFAULT_SURFACE_TEXT_COLOR,
+	link: "rgb(var(--tb-primary, var(--tb-text, 17 24 39)))",
+	supporting: "rgb(var(--tb-mutedText, 100 116 139))"
+};
+function requireSurfaceColorValue(role, value) {
+	const normalized = value.trim();
+	if (normalized.length === 0) throw new RangeError(`Surface foreground ${role} must be a non-empty CSS color.`);
+	return normalized;
 }
-function statusMutedColorDeclaration() {
-	return `color: ${statusMutedColorValue()};`;
+function completeSurfaceForegrounds(input) {
+	const text = requireSurfaceColorValue("text", input.text);
+	return {
+		text,
+		heading: input.heading === void 0 ? text : requireSurfaceColorValue("heading", input.heading),
+		link: input.link === void 0 ? text : requireSurfaceColorValue("link", input.link),
+		supporting: input.supporting === void 0 ? text : requireSurfaceColorValue("supporting", input.supporting)
+	};
+}
+function surfaceForegroundValue(role, outsideProviderFallback = DEFAULT_ROLE_FALLBACKS[role]) {
+	const roleVariable = SURFACE_FOREGROUND_CSS_VARS[role];
+	const fallback = requireSurfaceColorValue("fallback", outsideProviderFallback);
+	if (role === "text") return `var(${roleVariable}, ${fallback})`;
+	return `var(${roleVariable}, var(${SURFACE_FOREGROUND_CSS_VARS.text}, ${fallback}))`;
+}
+function surfaceForegroundValueWithOpacity(role, opacityPercent) {
+	if (!Number.isFinite(opacityPercent) || opacityPercent < 0 || opacityPercent > 100) throw new RangeError("Surface foreground opacity must be between 0 and 100.");
+	return `color-mix(in srgb, ${surfaceForegroundValue(role)} ${opacityPercent}%, transparent)`;
 }
-function contextualMutedStatusColorDeclaration(value) {
-	return `${STATUS_MUTED_COLOR_VAR}: ${value}`;
+function surfaceForegroundStyle(input) {
+	const foregrounds = completeSurfaceForegrounds(input);
+	return {
+		color: foregrounds.text,
+		[SURFACE_FOREGROUND_CSS_VARS.text]: foregrounds.text,
+		[SURFACE_FOREGROUND_CSS_VARS.heading]: foregrounds.heading,
+		[SURFACE_FOREGROUND_CSS_VARS.link]: foregrounds.link,
+		[SURFACE_FOREGROUND_CSS_VARS.supporting]: foregrounds.supporting
+	};
+}
+function surfaceForegroundDeclarations(input) {
+	const foregrounds = completeSurfaceForegrounds(input);
+	return [`color: ${foregrounds.text}`, ...SURFACE_FOREGROUND_ROLES.map((role) => `${SURFACE_FOREGROUND_CSS_VARS[role]}: ${foregrounds[role]}`)];
 }
 //#endregion
 //#region ../theme-core/src/cards/generateCardCss.ts
@@ -14653,8 +15150,10 @@ function generateVariantCSS(variant, themeId, tokens, theme) {
 		const direction = GRADIENT_DIRECTION_MAP$1[variant.background.direction] || "to right";
 		rules.push(`background: linear-gradient(${direction}, ${fromColor}, ${toColor})`);
 	} else rules.push(`background: transparent`);
-	if (variant.foregroundToken) rules.push(`color: ${tokens.getColor(variant.foregroundToken)}`);
-	rules.push(contextualMutedStatusColorDeclaration(SURFACE_MUTED_STATUS_COLOR));
+	if (variant.background.type !== "transparent") {
+		const foreground = tokens.getColor(variant.foregroundToken ?? "text");
+		rules.push(...surfaceForegroundDeclarations({ text: foreground }));
+	}
 	if (variant.accentEdge) {
 		const side = ACCENT_EDGE_SIDE_MAP$1[variant.accentEdge.edge];
 		const width = ACCENT_EDGE_WIDTH_MAP$1[variant.accentEdge.width];
@@ -15015,11 +15514,31 @@ const gradientStopSchema = z$1.object({
 	position: z$1.number().min(0).max(100)
 });
 /**
-* Gradient configuration
+* Radial gradient shape. Optional; defaults to `circle` (the historical shape)
+* so existing radial gradients are byte-identical.
+*
+* Named `RadialGradientShape` to avoid clashing with `styles/gradients.ts`'s
+* `GradientShape` (which names the gradient *kind*: linear/radial/conic).
+*/
+const radialGradientShapeSchema = z$1.enum(["circle", "ellipse"]);
+/**
+* Gradient configuration.
+*
+* `type` is optional and defaults to `'linear'` so gradients persisted without a
+* type (or with an explicit `'linear'`) render exactly as before. `'radial'` and
+* `'conic'` are additive kinds:
+*   - linear: `angle` (degrees)
+*   - radial: optional `shape` (circle/ellipse) + `position`
+*   - conic:  optional `angle` (from-angle, degrees) + `position`
 */
 const gradientConfigSchema = z$1.object({
-	type: z$1.enum(["linear", "radial"]),
+	type: z$1.enum([
+		"linear",
+		"radial",
+		"conic"
+	]).default("linear"),
 	angle: z$1.number().min(0).max(360).optional(),
+	shape: radialGradientShapeSchema.optional(),
 	position: z$1.string().optional(),
 	stops: z$1.array(gradientStopSchema).min(2)
 });
@@ -15558,9 +16077,17 @@ function parseToken(source) {
 	if (parts.kind === "invalid") return { token: source };
 	return {
 		token: parts.token,
-		alpha: parts.opacityPercent === null ? void 0 : parts.opacityPercent / 100
+		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
 	};
 }
+const SURFACE_TEXT_ROLE_BY_TOKEN = {
+	text: "text",
+	heading: "heading",
+	mutedText: "supporting"
+};
+function surfaceRoleForTextToken(token) {
+	return Object.prototype.hasOwnProperty.call(SURFACE_TEXT_ROLE_BY_TOKEN, token) ? SURFACE_TEXT_ROLE_BY_TOKEN[token] : null;
+}
 /**
 * Converts a theme color token to a CSS rgb value.
 * This is the primary function for applying theme colors to CSS properties.
@@ -15574,11 +16101,26 @@ function parseToken(source) {
 * rgbColorValue('raw:transparent') // => 'transparent'
 */
 function rgbColorValue(token) {
-	const { token: baseToken, alpha, raw } = parseToken(token);
+	const { token: baseToken, opacityPercent, raw } = parseToken(token);
 	if (raw) return raw;
 	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
-	if (alpha === void 0) return `rgb(var(${cssVar}))`;
-	return `rgb(var(${cssVar}) / ${alpha})`;
+	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
+	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
+}
+/**
+* Converts a theme color token to a CSS variable reference.
+* Note: This returns the base variable without rgb() wrapper, ignoring opacity.
+*
+* @param token - Theme color token
+* @returns CSS variable reference
+*
+* @example
+* cssVarValue('primary') // => 'var(--tb-primary)'
+* cssVarValue('surface/95') // => 'var(--tb-surface)' (opacity ignored)
+*/
+function cssVarValue(token) {
+	const { token: baseToken } = parseToken(token);
+	return `var(${COLOR_VAR_PREFIX}${baseToken})`;
 }
 /**
 * Creates a backgroundColor style object from a theme token.
@@ -15596,6 +16138,9 @@ function backgroundColorStyle(token) {
 * @returns CSSProperties with color
 */
 function textColorStyle(token) {
+	const parsed = parseToken(token);
+	const surfaceRole = parsed.raw ? null : surfaceRoleForTextToken(parsed.token);
+	if (surfaceRole) return { color: parsed.opacityPercent === void 0 ? surfaceForegroundValue(surfaceRole) : surfaceForegroundValueWithOpacity(surfaceRole, parsed.opacityPercent) };
 	return { color: rgbColorValue(token) };
 }
 /**
@@ -16002,6 +16547,7 @@ const typographyScaleSchema = z$1.enum([
 	"majorThird",
 	"perfectFourth"
 ]);
+const eyebrowTypographyStyleSchema = z$1.object({ family: z$1.string().min(1) });
 const typographySchema = z$1.object({
 	body: bodyTypographyStyleSchema,
 	headings: z$1.object({
@@ -16014,7 +16560,8 @@ const typographySchema = z$1.object({
 		h6: headingTypographyOverridesSchema.optional()
 	}),
 	scale: typographyScaleSchema,
-	proseLinkStyle: proseLinkStyleSchema.optional()
+	proseLinkStyle: proseLinkStyleSchema.optional(),
+	eyebrow: eyebrowTypographyStyleSchema.optional()
 });
 const spaceSchema = z$1.enum([
 	"comfortable",
@@ -16039,7 +16586,8 @@ const shadow = z$1.object({
 		"soft",
 		"hard"
 	]).nullable(),
-	position: z$1.enum(["bottom", "bottom-right"]).default("bottom")
+	position: z$1.enum(["bottom", "bottom-right"]).default("bottom"),
+	colorToken: themeColorTokenSchema.optional()
 });
 const border = z$1.object({
 	width: z$1.enum([
@@ -16284,6 +16832,7 @@ const headerSchema = z$1.object({
 	navWeight: navFontWeight.default("medium"),
 	navTypography: z$1.enum(["body", "heading"]).optional(),
 	navTextSize: navLinkStyleSchema.shape.textSize,
+	navPlacement: z$1.enum(["end", "center"]).optional(),
 	container: headerContainerSchema,
 	border: headerBorderSchema,
 	shadow: componentShadowSchema.optional(),
@@ -16775,7 +17324,8 @@ const curatedSiteStyleIdValues = [
 	"site-style:bold-launch",
 	"site-style:south-west-twerk-school",
 	"site-style:kirtan-ornate",
-	"site-style:original-joy"
+	"site-style:original-joy",
+	"site-style:fulcrum"
 ];
 const quietBudget = {
 	accentDensity: "low",
@@ -18229,6 +18779,104 @@ const curatedSiteStyles = [
 			buttonChoice("showtime-pill")
 		],
 		paletteRecommendations: [paletteRecommendation("warm-dark-ember")]
+	}),
+	defineCuratedSiteStyle({
+		id: "site-style:fulcrum",
+		name: "Fulcrum",
+		headingDecoration: {
+			family: "short-center-rule",
+			colorToken: "accent"
+		},
+		description: "Spruce-ink and moss with an amber climax, Newsreader serif over IBM Plex Sans, hairline sage borders and flat buttons — a grounded, editorial physiotherapy skin.",
+		generationBrief: "Use a calm, clinician-led voice: precise, reassuring and specific rather than clinical-cold. Lead with the assessment-treatment-rehab journey, mono uppercase eyebrows for practical labels (hours, registrations, appointment windows), Newsreader serif headings over IBM Plex Sans body, and a single amber call to action as the page climax. Keep proof concrete (registrations, same-week appointments, return-to-activity outcomes) and avoid spa or hard-sell wellness language or medical claims.",
+		siteCreatorSelection: {
+			kind: "site_creator_keyword_heuristic",
+			priority: 28
+		},
+		selectionKeywordRules: [
+			{
+				kind: "substring",
+				value: "physiotherap"
+			},
+			{
+				kind: "word",
+				value: "physio"
+			},
+			{
+				kind: "phrase",
+				value: "sports injury"
+			},
+			{
+				kind: "phrase",
+				value: "rehab clinic"
+			},
+			{
+				kind: "substring",
+				value: "musculoskeletal"
+			},
+			{
+				kind: "phrase",
+				value: "sports therapy"
+			}
+		],
+		tokenRecipes: {
+			palette: "brand-led",
+			contrast: "standard",
+			radius: "rounded",
+			shadow: "subtle",
+			typography: "serif-editorial",
+			spacing: "airy",
+			motion: "subtle"
+		},
+		compositionBudget: quietBudget,
+		typographyPresetChoices: [
+			typographyChoice("typography-preset:fulcrum"),
+			typographyChoice("typography-preset:editorial-serif"),
+			typographyChoice("typography-preset:modern-sans")
+		],
+		defaultTypographyPresetId: "typography-preset:fulcrum",
+		themeOverrides: {
+			shadow: { colorToken: "primary" },
+			accordions: {
+				background: null,
+				spacing: "comfortable",
+				corners: "square",
+				border: null,
+				shadow: null,
+				icon: {
+					style: "plus-minus",
+					position: "right",
+					size: "md",
+					colorToken: "accent"
+				},
+				trigger: {
+					textColorToken: "primary",
+					fontWeight: "medium",
+					fontFamily: "heading",
+					fontScale: "md"
+				},
+				hover: { textColorToken: "secondary" },
+				content: { textColorToken: "muted" }
+			},
+			testimonialQuote: serifDisplayQuote
+		},
+		recommendedHeaderLookIds: [
+			"classic-centered-nav",
+			"serif-line",
+			"centered-calm",
+			"clean-base"
+		],
+		recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
+		buttonPersonalityChoices: [
+			buttonChoice("flat-ink"),
+			buttonChoice("confident-chip"),
+			buttonChoice("editorial-link")
+		],
+		paletteRecommendations: [
+			paletteRecommendation("brand-led-spruce"),
+			paletteRecommendation("warm-neutral-forest"),
+			paletteRecommendation("soft-natural-sage")
+		]
 	})
 ];
 const curatedSiteStylesById = new Map(curatedSiteStyles.map((style) => [style.id, style]));
@@ -20364,7 +21012,7 @@ function resolveBackgroundColorValue(value, context) {
 	return resolveThemeColorReferenceValue(value, { palette: context.theme?.palette });
 }
 //#endregion
-//#region ../blocks/src/system/transforms/registry/_utils/sectionForegroundStyles.ts
+//#region ../blocks/src/system/transforms/registry/_utils/surfaceForegroundStyles.ts
 function readColorToken(input, key) {
 	const value = input[key];
 	return typeof value === "string" && value.trim().length > 0 ? value.trim() : null;
@@ -20373,18 +21021,17 @@ function resolveOptionalForegroundColor(value, context) {
 	if (!value) return null;
 	return resolveBackgroundColorValue(value, context);
 }
-function resolveSectionForegroundStyles(value, context) {
+function resolveSurfaceForegroundStyles(value, context) {
 	if (!value || typeof value !== "object") return {};
 	const input = value;
 	const resolvedText = resolveOptionalForegroundColor(readColorToken(input, "textColor"), context);
 	if (!resolvedText) return {};
-	return {
-		color: resolvedText,
-		"--section-text-color": resolvedText,
-		"--section-heading-color": resolveOptionalForegroundColor(readColorToken(input, "headingColor"), context) ?? resolvedText,
-		"--section-link-color": resolveOptionalForegroundColor(readColorToken(input, "linkColor"), context) ?? resolvedText,
-		"--section-supporting-color": resolveOptionalForegroundColor(readColorToken(input, "supportingColor"), context) ?? resolvedText
-	};
+	return { ...surfaceForegroundStyle({
+		text: resolvedText,
+		heading: resolveOptionalForegroundColor(readColorToken(input, "headingColor"), context) ?? void 0,
+		link: resolveOptionalForegroundColor(readColorToken(input, "linkColor"), context) ?? void 0,
+		supporting: resolveOptionalForegroundColor(readColorToken(input, "supportingColor"), context) ?? void 0
+	}) };
 }
 //#endregion
 //#region ../blocks/src/system/transforms/registry/boxStyles.ts
@@ -20722,67 +21369,12 @@ const containerStylesResolveBoxClassName = {
 	}
 };
 /**
-* Resolves section text color style object.
-*
-* The value should be the `_sectionStyles.background.textColor` token.
-* Returns an empty object when unset so the section inherits text color.
-*
-* Outputs both `color` and `--section-text-color` CSS variable so that
-* headings (which have explicit color rules in typography CSS) can inherit
-* the section's text color via the CSS variable cascade.
-*/
-const sectionTextColorStyleTransform = {
-	id: "sectionStyles.resolveTextColorStyle",
-	kind: "formatter",
-	summary: "Resolve section text color token into a style object",
-	run: (value, options, context) => {
-		const fallbackToken = options?.fallbackToken;
-		if (typeof value === "string" && value.trim()) {
-			const colorValue = resolveBackgroundColorValue(value.trim(), context);
-			return {
-				color: colorValue,
-				"--section-text-color": colorValue
-			};
-		}
-		if (typeof fallbackToken === "string" && fallbackToken.trim()) {
-			const colorValue = resolveBackgroundColorValue(fallbackToken.trim(), context);
-			return {
-				color: colorValue,
-				"--section-text-color": colorValue
-			};
-		}
-		return {};
-	}
-};
-/**
-* Resolves section heading color style object.
-*
-* The value should be the `_sectionStyles.background.headingColor` token.
-* Returns an empty object when unset so headings inherit from textColor or default.
-*
-* Outputs `--section-heading-color` CSS variable which typography CSS can use
-* to style headings differently from body text within a section.
-*/
-const sectionHeadingColorStyleTransform = {
-	id: "sectionStyles.resolveHeadingColorStyle",
-	kind: "formatter",
-	summary: "Resolve section heading color token into a style object",
-	run: (value, options, context) => {
-		const fallbackToken = options?.fallbackToken;
-		if (typeof value === "string" && value.trim()) return { "--section-heading-color": resolveBackgroundColorValue(value.trim(), context) };
-		if (typeof fallbackToken === "string" && fallbackToken.trim()) return { "--section-heading-color": resolveBackgroundColorValue(fallbackToken.trim(), context) };
-		return {};
-	}
-};
-/**
-* Resolves section foreground colors from the background object.
+* Resolves surface foreground colors from the background object.
 *
 * The value should be the full `_sectionStyles.background` object.
 * Outputs:
-* - `color` and `--section-text-color` from background.textColor
-* - `--section-heading-color` from background.headingColor (falls back to textColor if not set)
-* - `--section-link-color` from background.linkColor (falls back to textColor if not set)
-* - `--section-supporting-color` from background.supportingColor (falls back to textColor if not set)
+* - `color` and the complete `--rb-surface-*-color` contract
+* - optional roles fall back atomically to background.textColor
 *
 * This combined transform replaces separate foreground color transforms
 * when both need to be applied to the same style prop.
@@ -20790,8 +21382,8 @@ const sectionHeadingColorStyleTransform = {
 const sectionColorsStyleTransform = {
 	id: "sectionStyles.resolveColorsStyle",
 	kind: "formatter",
-	summary: "Resolve section foreground colors into a style object",
-	run: (value, _options, context) => resolveSectionForegroundStyles(value, context)
+	summary: "Resolve surface foreground colors into a style object",
+	run: (value, _options, context) => resolveSurfaceForegroundStyles(value, context)
 };
 /**
 * Maps semantic gap values to theme-aware gap classes.
@@ -20830,8 +21422,6 @@ const boxStylesTransforms = [
 	sectionClassNameTransform,
 	containerStylesResolveClassName,
 	containerStylesResolveBoxClassName,
-	sectionTextColorStyleTransform,
-	sectionHeadingColorStyleTransform,
 	sectionColorsStyleTransform,
 	{
 		id: "boxStyles.semanticGap",
@@ -21599,7 +22189,29 @@ const ctaRowFragment = defineFragment({
 	fields: [createCtasRepeater({
 		label: "Calls to action",
 		itemLabel: "CTA",
-		maxItems: 3
+		maxItems: 3,
+		button: { variants: [
+			{
+				value: "primary",
+				label: "Primary"
+			},
+			{
+				value: "secondary",
+				label: "Secondary"
+			},
+			{
+				value: "outline",
+				label: "Outline"
+			},
+			{
+				value: "link",
+				label: "Link"
+			},
+			{
+				value: "accent",
+				label: "Accent"
+			}
+		] }
 	})],
 	layout: [ctaRow({
 		collectionPath: "content.ctas",
@@ -21880,6 +22492,55 @@ function buildGridCardsLayout(className) {
 	return el("div", { className }, buildResponsiveGridCards());
 }
 /**
+* Build a single "featured editorial" testimonial card.
+*
+* This card type deliberately renders NO avatar/headshot: an amber quote mark,
+* the quote body, then the author name and a context line. Colour + surface
+* treatment is driven entirely by `variantClass` (see testimonials.css):
+*   - `rb-testimonials-fe-card--feature` → spruce-ink card (dark primary bg)
+*   - `rb-testimonials-fe-card--plain`   → white surface card
+*
+* Extra modifiers (`repeat`, `when`) are forwarded to the card node so the
+* caller can drive first-vs-rest branching.
+*/
+function buildFeaturedEditorialCard(variantClass, ...mods) {
+	const quoteMark = text({
+		as: "span",
+		className: "rb-testimonials-fe-qmark",
+		"aria-hidden": "true"
+	}, props({ value: "“" }));
+	const quote = richText({ className: "rb-testimonials-fe-quote rb-max-w-none" }, bind("testimonial.content.body"), when("testimonial.content.body"));
+	const meta = el("div", { className: "rb-testimonials-fe-meta" }, [text({
+		as: "strong",
+		className: "rb-testimonials-fe-name"
+	}, bind("testimonial.content.name", { fallback: "Anonymous" })), text({
+		as: "span",
+		className: "rb-testimonials-fe-context"
+	}, when("testimonial.content.jobTitle"), bind("testimonial.content.jobTitle"))]);
+	return el("div", { className: `rb-testimonials-fe-card ${variantClass}` }, [
+		quoteMark,
+		quote,
+		meta
+	], ...mods);
+}
+/**
+* Build the "featured editorial" layout: an asymmetric two-column arrangement
+* where the FIRST testimonial is a large featured (spruce-ink) card and the
+* remaining testimonials stack as white cards beside it.
+*
+* First-vs-rest branching is done without an offset primitive: the featured
+* card uses `repeat(..., { limit: 1 })` (entry 0 only), and the rest column
+* repeats over every entry but skips index 0 via `when("tIndex", { equals: 0,
+* not: true })`. The `$when` guard is re-evaluated per repeated item with the
+* index scope in context, so entry 0 produces no node in the rest column.
+*/
+function buildFeaturedEditorialLayout() {
+	return el("div", { className: "rb-testimonials-fe-grid" }, [buildFeaturedEditorialCard("rb-testimonials-fe-card--feature", repeat("data.entries", "testimonial", { limit: 1 })), el("div", { className: "rb-testimonials-fe-col" }, [buildFeaturedEditorialCard("rb-testimonials-fe-card--plain", repeat("data.entries", "testimonial", { indexName: "tIndex" }), when("tIndex", {
+		equals: 0,
+		not: true
+	}))])]);
+}
+/**
 * Fragment definition for testimonials carousel.
 * Provides field definitions and data loader configuration.
 *
@@ -25371,7 +26032,7 @@ const defaultLayout = styledSection({
 	children: styledContainer({
 		baseClassName: "rb-relative rb-isolate",
 		children: stack({
-			gap: "xl",
+			gap: "lg",
 			className: "rb-w-full rb-max-w-4xl rb-mx-auto"
 		}, [headingLayout, accordionLayout])
 	}),
@@ -25388,7 +26049,7 @@ const questionColumnsLayout = styledSection({
 	children: styledContainer({
 		baseClassName: "rb-relative rb-isolate",
 		children: stack({
-			gap: "xl",
+			gap: "lg",
 			className: "rb-w-full"
 		}, [headingLayout, questionColumnsAccordionLayout])
 	}),
@@ -25553,7 +26214,26 @@ const formattingTransforms = [
 	arrayLengthTransform,
 	jsonArrayTransform,
 	csvTransform,
-	marqueeLoopTransform
+	marqueeLoopTransform,
+	{
+		id: "value.mapToken",
+		kind: "formatter",
+		summary: "Map a state/enum value to a theme token colour (rgb(var(--tb-<role>)))",
+		schema: z$1.object({
+			/**
+			* Maps an input state/enum value (stringified) to a theme token ROLE name
+			* (e.g. `secondary`, `accent`, `muted`, `border`). The role is wrapped to
+			* `rgb(var(--tb-<role>))` so the result drops straight into a `style` binding.
+			*/
+			cases: z$1.record(z$1.string(), z$1.string()),
+			/** Role used when the value matches no case. Omit to yield `undefined`. */
+			fallback: z$1.string().optional()
+		}),
+		run: (value, options) => {
+			const role = options.cases[String(value)] ?? options.fallback;
+			return role ? `rgb(var(--tb-${role}))` : void 0;
+		}
+	}
 ];
 //#endregion
 //#region ../blocks/src/system/transforms/registry/ui.ts
@@ -26197,6 +26877,26 @@ const headerLogoTextVisibleTransform = {
 		return resolveHeaderBrandDisplay(asPartialObject(value)) !== "logo-only";
 	}
 };
+/**
+* Selects which classic-layout nav row should render.
+*
+* - `'inline'`  → classic variant with the historical logo-left / nav-right row
+* - `'centered'`→ classic variant with a centred (flex-1) nav and a right CTA
+* - `'other'`   → not a classic variant (centered/floating/transparent handle it)
+*
+* Consumed by the site-header block's `$when` gates so the two classic rows are
+* mutually exclusive without introducing a new top-level header variant.
+*/
+const classicNavModeTransform = {
+	id: "layout.classicNavMode",
+	kind: "formatter",
+	summary: "Resolve which classic-layout nav row to render",
+	run: (value) => {
+		const header = asPartialObject(value);
+		if (header?.variant !== "classic") return "other";
+		return header?.navPlacement === "center" ? "centered" : "inline";
+	}
+};
 const maxWidthClassTransform = {
 	id: "layout.maxWidthClass",
 	kind: "string",
@@ -26379,8 +27079,9 @@ const footerRootStyleTransform = {
 				styleParts.push(backgroundColorStyle(token));
 			}
 		}
-		if (visuals.textColorOverride) styleParts.push({ color: visuals.textColorOverride });
-		else if (visuals.textColorToken) styleParts.push(textColorStyle(visuals.textColorToken));
+		const foreground = visuals.textColorOverride ?? (visuals.textColorToken ? rgbColorValue(visuals.textColorToken) : null);
+		if (!visuals.isTransparent && foreground) styleParts.push(surfaceForegroundStyle({ text: foreground }));
+		else if (foreground) styleParts.push({ color: foreground });
 		styleParts.push(borderColorStyle("border"));
 		return mergeStyles(...styleParts);
 	}
@@ -26466,18 +27167,16 @@ const footerBottomBarStyleTransform = {
 		const styleParts = [];
 		const background = bottomBar?.background;
 		if (background?.type === "color") styleParts.push(backgroundColorStyle(background.color ?? "surface"));
-		if (bottomBar?.textColor) styleParts.push(textColorStyle(bottomBar.textColor));
 		const borderColorToken = bottomBar?.borderTop?.colorToken;
 		if (borderColorToken) styleParts.push(borderColorStyle(borderColorToken));
 		else styleParts.push(borderColorStyle("border"));
 		const borderWidth = bottomBar?.borderTop?.width;
 		if (borderWidth && borderWidth !== "none") styleParts.push({ borderTopWidth: borderWidth === "thin" ? "1px" : borderWidth === "medium" ? "2px" : "3px" });
 		else if (borderWidth === "none") styleParts.push({ borderTopWidth: "0px" });
-		if (!bottomBar?.textColor) {
-			const visuals = resolveBackgroundVisualStyles(extractBackgroundColorToken(background, "surface"), context.theme);
-			if (visuals.textColorOverride) styleParts.push({ color: visuals.textColorOverride });
-			else if (visuals.textColorToken) styleParts.push(textColorStyle(visuals.textColorToken));
-		}
+		const visuals = resolveBackgroundVisualStyles(extractBackgroundColorToken(background, "surface"), context.theme);
+		const foreground = bottomBar?.textColor ? rgbColorValue(bottomBar.textColor) : visuals.textColorOverride ?? (visuals.textColorToken ? rgbColorValue(visuals.textColorToken) : null);
+		if (background?.type === "color" && foreground) styleParts.push(surfaceForegroundStyle({ text: foreground }));
+		else if (foreground && bottomBar?.textColor) styleParts.push({ color: foreground });
 		return mergeStyles(...styleParts);
 	}
 };
@@ -26612,6 +27311,7 @@ const layoutTransforms = [
 	headerLogoClassTransform,
 	headerLogoMediaClassTransform,
 	headerLogoTextVisibleTransform,
+	classicNavModeTransform,
 	footerRootClassTransform,
 	headerRootStyleTransform,
 	headerSectionBackgroundTransform,
@@ -27039,7 +27739,18 @@ const classicLayout = inline({
 	logoRow,
 	createNavRow(`rb-ml-auto ${desktopOnlyDisplay("flex")} rb-gap-6`),
 	headerCta
-], when("$root.theme.header.variant", { equals: "classic" }));
+], whenTransformed$1("$root.theme.header", "layout.classicNavMode", "inline"));
+const classicCenteredNavLayout = inline({
+	className: bindProp("$root.theme.header.maxWidth", {
+		transforms: pipe(tx("layout.maxWidthClass", { base: `rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-items-center rb-gap-6` })),
+		fallback: `rb-container rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-items-center rb-gap-6`
+	}),
+	align: "center"
+}, [
+	logoRow,
+	createNavRow(`rb-flex-1 rb-justify-center ${desktopOnlyDisplay("flex")} rb-gap-6`, "center"),
+	headerCta
+], whenTransformed$1("$root.theme.header", "layout.classicNavMode", "centered"));
 const centeredLayout = stack({
 	gap: "md",
 	align: "center",
@@ -27114,6 +27825,7 @@ const siteHeaderManifest = createBlockManifest({
 	}, [
 		mobileHeaderBar,
 		classicLayout,
+		classicCenteredNavLayout,
 		centeredLayout,
 		transparentLayout,
 		floatingLayout,
@@ -27323,7 +28035,7 @@ const footerLayout = section$1({
 	style: { $bind: {
 		from: "$root.theme.footer",
 		transforms: [{ id: "layout.footerRootStyle" }],
-		fallback: mergeStyles(backgroundColorStyle("surface"), textColorStyle("text"), borderColorStyle("border"))
+		fallback: mergeStyles(backgroundColorStyle("surface"), surfaceForegroundStyle({ text: "rgb(var(--tb-text))" }), borderColorStyle("border"))
 	} }
 }, [
 	simpleFooterLayout,
@@ -27378,7 +28090,7 @@ const backgroundImageClassName = "rb-absolute rb-inset-0 rb-z-neg-10 rb-h-full r
 */
 const wrapVariant$2 = (variantLayout) => styledSection({
 	children: styledContainer({ children: stack({
-		gap: "xl",
+		gap: "lg",
 		className: "rb-relative"
 	}, [...testimonialsHeadingFragment.layout, variantLayout]) }),
 	baseClass: "",
@@ -27404,6 +28116,26 @@ const splitGridLayout = styledSection({
 	spacing: "comfortable",
 	imageClassName: backgroundImageClassName
 });
+const featuredEditorialLayout = styledSection({
+	children: styledContainer({
+		baseClassName: "rb-relative rb-isolate",
+		children: stack({
+			gap: "lg",
+			className: "rb-relative"
+		}, [el("div", { className: "rb-testimonials-fe-head" }, [text({
+			as: "h2",
+			className: "rb-text-left",
+			headingDecoration: "off"
+		}, when("content.heading"), bind("content.heading")), el("div", { className: "rb-testimonials-fe-leadin" }, [text({
+			as: "p",
+			className: "rb-prose",
+			style: textColorStyle("mutedText")
+		}, when("content.subheading"), bind("content.subheading"))])]), buildFeaturedEditorialLayout()])
+	}),
+	baseClass: "",
+	spacing: "comfortable",
+	imageClassName: backgroundImageClassName
+});
 const additionalFields = parseFieldDefinitions([
 	...testimonialsHeadingFragment.fields,
 	{
@@ -27491,6 +28223,7 @@ const testimonialsBlockDefinition = {
 			carousel: carouselLayout$1,
 			grid: gridLayout$1,
 			"split-grid": splitGridLayout,
+			"featured-editorial": featuredEditorialLayout,
 			highlight: highlightLayout
 		},
 		defaultVariant: "carousel",
@@ -27510,6 +28243,11 @@ const testimonialsBlockDefinition = {
 				description: "Heading on the left with testimonial cards on the right",
 				icon: "PanelLeft"
 			},
+			"featured-editorial": {
+				label: "Featured editorial",
+				description: "A large featured ink quote beside a column of stacked cards (no avatars)",
+				icon: "Quote"
+			},
 			highlight: {
 				label: "Highlight",
 				description: "A single, centered testimonial with no carousel",
@@ -28033,7 +28771,7 @@ function grid$2(props, children) {
 const cardsLayout = styledSection({
 	children: styledContainer({
 		rootType: "stack",
-		rootProps: { gap: "xl" },
+		rootProps: { gap: "lg" },
 		children: [stack({
 			gap: "sm",
 			className: "rb-feature-cards-heading rb-mx-auto rb-max-w-3xl rb-text-center"
@@ -30016,8 +30754,11 @@ const recoverEmptyDescriptionWhenActive = {
 	kind: "recover-empty-when-active",
 	placeholder: "Add description"
 };
-function eventSectionHeaderLayoutNodes() {
-	return [text({ as: "h2" }, bind("content.heading"), when("content.heading", { authoringPresence: recoverEmptyHeadingWhenActive })), richText({ className: "rb-prose rb-max-w-none" }, bind("content.description"), when("content.description", { authoringPresence: recoverEmptyDescriptionWhenActive }))];
+function eventSectionHeaderLayoutNodes(options = {}) {
+	const headingNode = text({ as: "h2" }, bind("content.heading"), when("content.heading", { authoringPresence: recoverEmptyHeadingWhenActive }));
+	const descriptionNode = richText({ className: "rb-prose rb-max-w-none" }, bind("content.description"), when("content.description", { authoringPresence: recoverEmptyDescriptionWhenActive }));
+	if (options.splitClassName) return [el("div", { className: options.splitClassName }, [headingNode, descriptionNode])];
+	return [headingNode, descriptionNode];
 }
 //#endregion
 //#region ../blocks/src/system/blocks/shop.shared.ts
@@ -30084,7 +30825,8 @@ const eventCalendarDisplayModeValues = [
 	"combined",
 	"calendar",
 	"list",
-	"timetable"
+	"timetable",
+	"week-board"
 ];
 const eventCalendarDefaultViewValues = ["month", "week"];
 const eventCalendarListLayoutValues = [
@@ -32503,6 +33245,40 @@ function getEventAvailability(event) {
 		isFull: false
 	};
 }
+/**
+* Derive the three-state availability status (available / filling / waitlist)
+* plus a short pill label. Builds on {@link getEventAvailability} so the
+* capacity math (availableSpots with a `capacity - registeredCount` fallback)
+* stays consistent with the binary helper used elsewhere.
+*/
+function getEventAvailabilityStatus(event, options) {
+	const threshold = options?.fillingThreshold ?? 2;
+	const { available, isFull } = getEventAvailability(event);
+	if (available == null) return {
+		status: "available",
+		available: null,
+		isFull: false,
+		label: null
+	};
+	if (isFull) return {
+		status: "waitlist",
+		available: 0,
+		isFull: true,
+		label: event.waitlistEnabled ? "Waitlist" : "Full"
+	};
+	if (available <= threshold) return {
+		status: "filling",
+		available,
+		isFull: false,
+		label: `${available} left`
+	};
+	return {
+		status: "available",
+		available,
+		isFull: false,
+		label: `${available} places`
+	};
+}
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/events/shared/utils.ts
 /**
@@ -35063,7 +35839,7 @@ const eventCalendarLayout = [styledSection({
 	children: styledContainer({
 		rootType: "stack",
 		rootProps: { gap: "lg" },
-		children: [...eventSectionHeaderLayoutNodes(), el("event-calendar", withApiBindings({
+		children: [...eventSectionHeaderLayoutNodes({ splitClassName: "event-section-head event-section-head--split" }), el("event-calendar", withApiBindings({
 			events: { $bind: { from: "data.events" } },
 			stage: { $bind: {
 				from: "$root.previewStage",
@@ -35174,6 +35950,10 @@ const eventCalendarAdditionalFields = [
 				value: "timetable",
 				label: "Timetable"
 			},
+			{
+				value: "week-board",
+				label: "Week board"
+			},
 			{
 				value: "list",
 				label: "List"
@@ -35356,7 +36136,8 @@ const eventCalendarAdditionalFields = [
 				oneOf: [
 					"combined",
 					"calendar",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}
 		}
@@ -35459,7 +36240,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}
 		}
@@ -35494,7 +36276,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, {
 				field: "showFilters",
@@ -35517,7 +36300,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, {
 				field: "showFilters",
@@ -35540,7 +36324,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, {
 				field: "showFilters",
@@ -35562,7 +36347,8 @@ const eventCalendarAdditionalFields = [
 				oneOf: [
 					"combined",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, { allOf: [{
 				field: "variant",
@@ -35738,6 +36524,7 @@ const eventCalendarVariants = {
 	combined: eventCalendarLayout[0],
 	calendar: eventCalendarLayout[0],
 	timetable: eventCalendarLayout[0],
+	"week-board": eventCalendarLayout[0],
 	list: eventCalendarLayout[0]
 };
 const eventCalendarContentShape = {
@@ -35751,6 +36538,7 @@ const eventCalendarContentShape = {
 				{ value: "combined" },
 				{ value: "calendar" },
 				{ value: "timetable" },
+				{ value: "week-board" },
 				{ value: "list" }
 			]
 		},
@@ -35817,6 +36605,7 @@ const eventCalendarBlockDefinition = {
 			combined: { label: "Combined" },
 			calendar: { label: "Calendar" },
 			timetable: { label: "Timetable" },
+			"week-board": { label: "Week board" },
 			list: { label: "List" }
 		}
 	}, eventCalendarContentShape),
@@ -41338,6 +42127,12 @@ const systemBlockDefinitions = [
 				family: "centered",
 				weight: "featured",
 				bias: "soft"
+			}),
+			layoutProfile({
+				variantKey: "featured-editorial",
+				family: "split",
+				weight: "featured",
+				bias: "soft"
 			})
 		]
 	})),
@@ -41470,6 +42265,11 @@ const systemBlockDefinitions = [
 				variantKey: "timetable",
 				family: "stack",
 				weight: "standard"
+			}),
+			layoutProfile({
+				variantKey: "week-board",
+				family: "stack",
+				weight: "standard"
 			})
 		]
 	})),
@@ -41827,7 +42627,15 @@ function gradientToCss(config, tokens) {
 	const stops = config.stops.map((stop) => {
 		return `${tokens[stop.color] ?? "#000000"} ${stop.position}%`;
 	}).join(", ");
-	if (config.type === "radial") return `radial-gradient(circle at ${config.position ?? "center"}, ${stops})`;
+	const type = config.type ?? "linear";
+	if (type === "radial") {
+		const position = config.position ?? "center";
+		return `radial-gradient(${config.shape ?? "circle"} at ${position}, ${stops})`;
+	}
+	if (type === "conic") {
+		const position = config.position ?? "center";
+		return `conic-gradient(from ${config.angle ?? 0}deg at ${position}, ${stops})`;
+	}
 	return `linear-gradient(${config.angle ?? 180}deg, ${stops})`;
 }
 //#endregion
@@ -41905,8 +42713,8 @@ const backgroundTransforms = [
 	{
 		id: "background.resolveColorsStyle",
 		kind: "formatter",
-		summary: "Resolve section foreground colors from a background object into scoped CSS vars",
-		run: (value, _options, context) => resolveSectionForegroundStyles(value, context)
+		summary: "Resolve surface foreground colors from a background object into scoped CSS vars",
+		run: (value, _options, context) => resolveSurfaceForegroundStyles(value, context)
 	},
 	{
 		id: "background.resolveAllowOverflow",
@@ -42526,21 +43334,53 @@ function Inline({ as: Comp = "div", gap = "md", align = "center", justify = "sta
 }
 //#endregion
 //#region ../blocks/src/primitives/layout/Grid.tsx
+/** Utility class for a numeric column COUNT at a given breakpoint. */
+const COL_COUNT_CLASS = {
+	base: (n) => `rb-grid-cols-${n}`,
+	sm: (n) => `rb-sm-grid-cols-${n}`,
+	md: (n) => `rb-md-grid-cols-${n}`,
+	lg: (n) => `rb-lg-grid-cols-${n}`,
+	xl: (n) => `rb-xl-grid-cols-${n}`
+};
+/** Inline custom property read by the `.rb-grid-tracks` utility per breakpoint. */
+const TRACK_VAR = {
+	base: "--rb-gtc-base",
+	sm: "--rb-gtc-sm",
+	md: "--rb-gtc-md",
+	lg: "--rb-gtc-lg",
+	xl: "--rb-gtc-xl"
+};
+const GRID_BREAKPOINTS = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
 function Grid({ as: Comp = "div", cols = {
 	base: 1,
 	md: 2
-}, gap = "md", className, children, "data-slot": dataSlot, ...rest }) {
-	const colsObj = typeof cols === "number" ? { base: cols } : cols;
-	const colClasses = [
-		colsObj.base && `rb-grid-cols-${colsObj.base}`,
-		colsObj.sm && `rb-sm-grid-cols-${colsObj.sm}`,
-		colsObj.md && `rb-md-grid-cols-${colsObj.md}`,
-		colsObj.lg && `rb-lg-grid-cols-${colsObj.lg}`,
-		colsObj.xl && `rb-xl-grid-cols-${colsObj.xl}`
-	];
+}, gap = "md", className, style, children, "data-slot": dataSlot, ...rest }) {
+	const colsObj = typeof cols === "number" || typeof cols === "string" ? { base: cols } : cols;
+	const colClasses = [];
+	const trackVars = {};
+	let hasTracks = false;
+	for (const bp of GRID_BREAKPOINTS) {
+		const value = colsObj[bp];
+		if (value == null) continue;
+		if (typeof value === "string") {
+			trackVars[TRACK_VAR[bp]] = value;
+			hasTracks = true;
+		} else colClasses.push(COL_COUNT_CLASS[bp](value));
+	}
+	const mergedStyle = hasTracks ? {
+		...trackVars,
+		...style
+	} : style;
 	return /* @__PURE__ */ jsx(Comp, {
 		...rest,
-		className: clsx("rb-grid", colClasses, {
+		style: mergedStyle,
+		className: clsx("rb-grid", hasTracks && "rb-grid-tracks", colClasses, {
 			"rb-gap-0": gap === "none",
 			"rb-gap-1": gap === "xs",
 			"rb-gap-2": gap === "sm",
@@ -42777,119 +43617,6 @@ function Text$1({ as: Comp = "span", children, className = "", path, maxLength:
 	});
 }
 //#endregion
-//#region ../blocks/src/system/runtime/nodes/richText-coerce.ts
-function coerceRichTextDoc(value) {
-	const raw = unwrapRichTextRoot(value);
-	if (typeof raw === "string") return createRichTextDocFromMarkdown(raw);
-	if (isRecord$26(raw) && typeof raw.type === "string") return raw;
-	return null;
-}
-//#endregion
-//#region ../blocks/src/system/runtime/nodes/renderInlineText.tsx
-function renderInlineText(value) {
-	return value.map((run, index) => renderRun(run, index));
-}
-function renderRun(run, key) {
-	return (run.marks ?? []).reduceRight((child, mark, index) => renderMark(mark, `${String(key)}-${index}`, child), run.text);
-}
-function renderMark(mark, key, child) {
-	switch (mark.kind) {
-		case "strong": return /* @__PURE__ */ jsx("strong", { children: child }, key);
-		case "emphasis": return /* @__PURE__ */ jsx("em", { children: child }, key);
-		case "accent": return /* @__PURE__ */ jsx("span", {
-			className: `rb-inline-text-accent rb-inline-text-accent-${mark.tone}`,
-			children: child
-		}, key);
-		case "highlight": return /* @__PURE__ */ jsx("span", {
-			className: `rb-inline-text-highlight rb-inline-text-highlight-${mark.tone}`,
-			children: child
-		}, key);
-	}
-}
-//#endregion
-//#region ../blocks/src/system/runtime/nodes/basic.tsx
-const TextNode = ({ value, children, blockId: _blockId, blockKind: _blockKind, blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, inlineTextFallbackPath, ...rest }) => {
-	const inlineText = parseInlineTextFromUnknown(value);
-	if (inlineText.ok && !isInlineTextEmpty(inlineText.value)) return /* @__PURE__ */ jsx(Text$1, {
-		...rest,
-		children: renderInlineText(inlineText.value)
-	});
-	const fallbackValue = inlineTextFallbackPath ? readStringPath(blockContent, inlineTextFallbackPath) : null;
-	return /* @__PURE__ */ jsx(Text$1, {
-		...rest,
-		children: fallbackValue ?? textNodeContent(value) ?? children
-	});
-};
-function textNodeContent(value) {
-	if (value === null || value === void 0) return null;
-	if (typeof value === "string" || typeof value === "number") return value;
-	return null;
-}
-function readStringPath(source, path) {
-	const value = getAtPath(source, path);
-	return typeof value === "string" ? value : null;
-}
-const RichTextNode = ({ value, blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...rest }) => {
-	return /* @__PURE__ */ jsx(RichText$2, {
-		doc: coerceRichTextDoc(value) ?? void 0,
-		...rest
-	});
-};
-const ButtonNode = ({ value, children, href, variantId = "primary", size = "md", disabled, type = "button", target, rel, linkRequired = false, blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, className, ...rest }) => {
-	const content = value ?? children;
-	if (!content) {
-		console.warn("[ButtonNode] No content to render - value and children are both empty");
-		return null;
-	}
-	const resolvedHref = typeof href === "string" ? href.trim() : "";
-	if (linkRequired && resolvedHref.length === 0) {
-		if (process.env.NODE_ENV === "development") console.warn("[ButtonNode] Missing href for link-required button");
-		return null;
-	}
-	const resolvedVariantId = parseThemeButtonVariantId(variantId);
-	const combinedClassName = resolvedVariantId ? themeButtonClassName({
-		variant: resolvedVariantId,
-		size,
-		extraClassName: className
-	}) : className;
-	if (resolvedHref) return /* @__PURE__ */ jsx("a", {
-		href: resolvedHref,
-		target,
-		rel,
-		className: combinedClassName,
-		...rest,
-		children: content
-	});
-	return /* @__PURE__ */ jsx("button", {
-		type,
-		disabled,
-		className: combinedClassName,
-		...rest,
-		children: content
-	});
-};
-const LinkNode = ({ href, children, className, target, rel, linkRequired = false, blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...rest }) => {
-	if (!children) return null;
-	const resolvedHref = typeof href === "string" ? href.trim() : "";
-	if (resolvedHref.length === 0) {
-		if (linkRequired && process.env.NODE_ENV === "development") console.warn("[LinkNode] Missing href for link-required link");
-		if (linkRequired) return null;
-		return /* @__PURE__ */ jsx("span", {
-			className,
-			...rest,
-			children
-		});
-	}
-	return /* @__PURE__ */ jsx("a", {
-		href: resolvedHref,
-		className,
-		target,
-		rel,
-		...rest,
-		children
-	});
-};
-//#endregion
 //#region ../blocks/src/system/icons/cta.ts
 /**
 * Curated icon set for CTA/button icons.
@@ -42988,6 +43715,171 @@ function getIconComponent(name) {
 	return getCtaIconComponent(name) ?? getSemanticIconComponent(name);
 }
 //#endregion
+//#region ../blocks/src/system/runtime/nodes/buttonAffordance.ts
+function normalize(value) {
+	const trimmed = typeof value === "string" ? value.trim() : "";
+	return trimmed.length > 0 ? trimmed : null;
+}
+/**
+* Resolve the trailing affordance a button should render. Node overrides
+* personality; returns `null` when nothing is configured.
+*/
+function resolveButtonAffordance(input) {
+	const nodeIcon = normalize(input.trailingIcon);
+	if (nodeIcon) {
+		const colorToken = normalize(input.trailingIconColorToken);
+		return {
+			iconId: nodeIcon,
+			source: "node",
+			...colorToken ? { colorToken } : {}
+		};
+	}
+	const personality = input.personalityAffordance;
+	const personalityIcon = normalize(personality?.iconId);
+	if (personality && personalityIcon) {
+		const colorToken = normalize(personality.colorToken);
+		return {
+			iconId: personalityIcon,
+			source: "personality",
+			...colorToken ? { colorToken } : {}
+		};
+	}
+	return null;
+}
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/richText-coerce.ts
+function coerceRichTextDoc(value) {
+	const raw = unwrapRichTextRoot(value);
+	if (typeof raw === "string") return createRichTextDocFromMarkdown(raw);
+	if (isRecord$26(raw) && typeof raw.type === "string") return raw;
+	return null;
+}
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/renderInlineText.tsx
+function renderInlineText(value) {
+	return value.map((run, index) => renderRun(run, index));
+}
+function renderRun(run, key) {
+	return (run.marks ?? []).reduceRight((child, mark, index) => renderMark(mark, `${String(key)}-${index}`, child), run.text);
+}
+function renderMark(mark, key, child) {
+	switch (mark.kind) {
+		case "strong": return /* @__PURE__ */ jsx("strong", { children: child }, key);
+		case "emphasis": return /* @__PURE__ */ jsx("em", { children: child }, key);
+		case "accent": return /* @__PURE__ */ jsx("span", {
+			className: `rb-inline-text-accent rb-inline-text-accent-${mark.tone}`,
+			children: child
+		}, key);
+		case "highlight": return /* @__PURE__ */ jsx("span", {
+			className: `rb-inline-text-highlight rb-inline-text-highlight-${mark.tone}`,
+			children: child
+		}, key);
+	}
+}
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/basic.tsx
+const TextNode = ({ value, children, blockId: _blockId, blockKind: _blockKind, blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, inlineTextFallbackPath, ...rest }) => {
+	const inlineText = parseInlineTextFromUnknown(value);
+	if (inlineText.ok && !isInlineTextEmpty(inlineText.value)) return /* @__PURE__ */ jsx(Text$1, {
+		...rest,
+		children: renderInlineText(inlineText.value)
+	});
+	const fallbackValue = inlineTextFallbackPath ? readStringPath(blockContent, inlineTextFallbackPath) : null;
+	return /* @__PURE__ */ jsx(Text$1, {
+		...rest,
+		children: fallbackValue ?? textNodeContent(value) ?? children
+	});
+};
+function textNodeContent(value) {
+	if (value === null || value === void 0) return null;
+	if (typeof value === "string" || typeof value === "number") return value;
+	return null;
+}
+function readStringPath(source, path) {
+	const value = getAtPath(source, path);
+	return typeof value === "string" ? value : null;
+}
+const RichTextNode = ({ value, blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...rest }) => {
+	return /* @__PURE__ */ jsx(RichText$2, {
+		doc: coerceRichTextDoc(value) ?? void 0,
+		...rest
+	});
+};
+/**
+* Render the resolved trailing affordance icon. Colour is applied via a theme
+* CSS var so it recolours with the palette; the icon stroke uses `currentColor`.
+*/
+function renderTrailingAffordanceIcon(affordance) {
+	if (!affordance) return null;
+	const Icon = getIconComponent(affordance.iconId);
+	if (!Icon) return null;
+	return /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		className: "rb-ml-2 rb-h-4 rb-w-4 rb-inline-block",
+		style: affordance.colorToken ? { color: `rgb(var(--tb-${affordance.colorToken}))` } : void 0
+	});
+}
+const ButtonNode = ({ value, children, href, variantId = "primary", size = "md", disabled, type = "button", target, rel, linkRequired = false, trailingIcon, trailingIconColorToken, personalityAffordance, blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, className, ...rest }) => {
+	const content = value ?? children;
+	if (!content) {
+		console.warn("[ButtonNode] No content to render - value and children are both empty");
+		return null;
+	}
+	const affordanceIcon = renderTrailingAffordanceIcon(resolveButtonAffordance({
+		trailingIcon,
+		trailingIconColorToken,
+		personalityAffordance
+	}));
+	const resolvedHref = typeof href === "string" ? href.trim() : "";
+	if (linkRequired && resolvedHref.length === 0) {
+		if (process.env.NODE_ENV === "development") console.warn("[ButtonNode] Missing href for link-required button");
+		return null;
+	}
+	const extraClassName = affordanceIcon ? [className, AFFORDANCE_SUPPRESS_CLASS].filter(Boolean).join(" ") : className;
+	const resolvedVariantId = parseThemeButtonVariantId(variantId);
+	const combinedClassName = resolvedVariantId ? themeButtonClassName({
+		variant: resolvedVariantId,
+		size,
+		extraClassName
+	}) : extraClassName;
+	if (resolvedHref) return /* @__PURE__ */ jsxs("a", {
+		href: resolvedHref,
+		target,
+		rel,
+		className: combinedClassName,
+		...rest,
+		children: [content, affordanceIcon]
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type,
+		disabled,
+		className: combinedClassName,
+		...rest,
+		children: [content, affordanceIcon]
+	});
+};
+const LinkNode = ({ href, children, className, target, rel, linkRequired = false, blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...rest }) => {
+	if (!children) return null;
+	const resolvedHref = typeof href === "string" ? href.trim() : "";
+	if (resolvedHref.length === 0) {
+		if (linkRequired && process.env.NODE_ENV === "development") console.warn("[LinkNode] Missing href for link-required link");
+		if (linkRequired) return null;
+		return /* @__PURE__ */ jsx("span", {
+			className,
+			...rest,
+			children
+		});
+	}
+	return /* @__PURE__ */ jsx("a", {
+		href: resolvedHref,
+		className,
+		target,
+		rel,
+		...rest,
+		children
+	});
+};
+//#endregion
 //#region ../blocks/src/system/runtime/nodes/icon.tsx
 const IconNode = ({ value, title, className, blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...rest }) => {
 	const parsedValue = parseBlockIconValue(value);
@@ -43685,6 +44577,77 @@ function SpinnerNode({ className, size = "md", color, strokeWidth = 3, srLabel,
 		}) : null]
 	});
 }
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/svg.tsx
+/**
+* Turn paint props into a CSS style object. Colour values pass through as-is so
+* they may reference theme tokens via `var()`, which only resolves in a CSS
+* property context (not in a bare presentation attribute).
+*/
+function paintStyle(shape) {
+	const style = {};
+	if (shape.fill !== void 0) style.fill = shape.fill;
+	if (shape.stroke !== void 0) style.stroke = shape.stroke;
+	if (shape.strokeWidth !== void 0) style.strokeWidth = shape.strokeWidth;
+	if (shape.fillOpacity !== void 0) style.fillOpacity = shape.fillOpacity;
+	if (shape.strokeOpacity !== void 0) style.strokeOpacity = shape.strokeOpacity;
+	if (shape.strokeLinecap !== void 0) style.strokeLinecap = shape.strokeLinecap;
+	if (shape.strokeLinejoin !== void 0) style.strokeLinejoin = shape.strokeLinejoin;
+	if (shape.strokeDasharray !== void 0) style.strokeDasharray = shape.strokeDasharray;
+	return style;
+}
+function renderShape(shape, key) {
+	const style = paintStyle(shape);
+	switch (shape.kind) {
+		case "path": return /* @__PURE__ */ jsx("path", {
+			d: shape.d,
+			style
+		}, key);
+		case "ellipse": return /* @__PURE__ */ jsx("ellipse", {
+			cx: shape.cx,
+			cy: shape.cy,
+			rx: shape.rx,
+			ry: shape.ry,
+			style
+		}, key);
+		case "circle": return /* @__PURE__ */ jsx("circle", {
+			cx: shape.cx,
+			cy: shape.cy,
+			r: shape.r,
+			style
+		}, key);
+		case "rect": return /* @__PURE__ */ jsx("rect", {
+			x: shape.x,
+			y: shape.y,
+			width: shape.width,
+			height: shape.height,
+			rx: shape.rx,
+			ry: shape.ry,
+			style
+		}, key);
+		case "line": return /* @__PURE__ */ jsx("line", {
+			x1: shape.x1,
+			y1: shape.y1,
+			x2: shape.x2,
+			y2: shape.y2,
+			style
+		}, key);
+		default: return null;
+	}
+}
+const SvgNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, viewBox, width, height, className, style, ariaHidden = true, shapes }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox,
+		width,
+		height,
+		className,
+		style,
+		"aria-hidden": ariaHidden,
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		children: (Array.isArray(shapes) ? shapes : []).map((shape, index) => renderShape(shape, index))
+	});
+};
 function isRecord$13(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -48919,6 +49882,154 @@ const WeekAgendaView = ({ days, events, showCapacity, emptyMessage = "No events
 	});
 };
 //#endregion
+//#region ../blocks/src/system/runtime/nodes/events/shared/WeekBoardView.tsx
+const SHORT_DAY_NAMES = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+const LEGEND_ITEMS = [
+	{
+		status: "available",
+		label: "Places available"
+	},
+	{
+		status: "filling",
+		label: "Filling up"
+	},
+	{
+		status: "waitlist",
+		label: "Waitlist"
+	}
+];
+/**
+* Format an event's start–end as a compact range, merging the shared meridiem.
+* "6:00 PM" + "7:00 PM" -> "6:00 – 7:00 PM"; "9:30 AM" + "10:15 AM" -> "9:30 – 10:15 AM".
+*/
+function formatCompactTimeRange(event) {
+	const timeZone = event.timeZone ?? null;
+	const start = formatTime(event.startsAt, { timeZone });
+	const end = formatTime(event.endsAt, { timeZone });
+	const startMeridiem = start.slice(-2);
+	const endMeridiem = end.slice(-2);
+	if ((startMeridiem === "AM" || startMeridiem === "PM") && startMeridiem === endMeridiem) return `${start.slice(0, -3).trim()} – ${end}`;
+	return `${start} – ${end}`;
+}
+const WeekBoardCard = ({ event, showCapacity }) => {
+	const linkProps = resolveEventLinkProps(event);
+	const { status, label } = getEventAvailabilityStatus(event);
+	const pill = showCapacity ? label : null;
+	return /* @__PURE__ */ jsxs("a", {
+		...linkProps,
+		className: "event-week-board-card",
+		"data-status": status,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "event-week-board-card-title",
+				children: event.title
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "event-week-board-card-time",
+				children: formatCompactTimeRange(event)
+			}),
+			pill ? /* @__PURE__ */ jsx("span", {
+				className: "event-week-board-card-pill",
+				"data-status": status,
+				children: pill
+			}) : null
+		]
+	});
+};
+/**
+* WeekBoardView
+*
+* Compact "class day-board": day columns side by side (one card per class per
+* day), a legend of the three availability states, and a footer CTA. Collapses
+* to a stacked list on mobile. Repurposes the week-grouped agenda data as a
+* board rather than an hour-positioned timetable grid.
+*/
+const WeekBoardView = ({ days, events, showCapacity, emptyMessage = "No classes scheduled this week", title = "The week ahead", footerNote = "New to a class? We'll check it's right for you first.", ctaLabel = "Reserve a place", ctaHref = null, buttonVariant = "outline" }) => {
+	const eventsByDate = groupEventsByDate(events);
+	const hasAnyEvents = days.some((date) => (eventsByDate.get(formatDateKey(date)) ?? []).length > 0);
+	const ctaClassName = themeButtonClassName({
+		variant: buttonVariant,
+		size: "sm"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "event-calendar event-calendar--week-board",
+		"data-block": "event-calendar",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "event-week-board",
+			style: { "--event-week-board-cols": String(days.length) },
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "event-week-board-top",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "event-week-board-title",
+						children: title
+					}), /* @__PURE__ */ jsx("div", {
+						className: "event-week-board-legend",
+						"aria-hidden": "true",
+						children: LEGEND_ITEMS.map((item) => /* @__PURE__ */ jsxs("span", {
+							className: "event-week-board-legend-item",
+							children: [/* @__PURE__ */ jsx("i", {
+								className: "event-week-board-legend-dot",
+								"data-status": item.status
+							}), item.label]
+						}, item.status))
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "event-week-board-grid",
+					children: days.map((date) => {
+						const dateKey = formatDateKey(date);
+						const dayEvents = eventsByDate.get(dateKey) ?? [];
+						const today = isToday(date);
+						return /* @__PURE__ */ jsxs("div", {
+							className: clsx("event-week-board-day", dayEvents.length === 0 && "event-week-board-day--empty", today && "event-week-board-day--today"),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "event-week-board-day-head",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "event-week-board-day-abbr",
+									children: SHORT_DAY_NAMES[date.getDay()]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "event-week-board-day-num",
+									children: date.getDate()
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "event-week-board-day-body",
+								children: dayEvents.map((event) => /* @__PURE__ */ jsx(WeekBoardCard, {
+									event,
+									showCapacity
+								}, event.occurrenceId || event.id))
+							})]
+						}, dateKey);
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "event-week-board-foot",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "event-week-board-foot-note",
+						children: hasAnyEvents ? footerNote : emptyMessage
+					}), ctaHref ? /* @__PURE__ */ jsx("a", {
+						className: ctaClassName,
+						href: ctaHref,
+						children: ctaLabel
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: ctaClassName,
+						children: ctaLabel
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
 //#region ../blocks/src/system/runtime/nodes/events/shared/timetableModel.ts
 /**
 * Event-domain adapter over @riverbankcms/calendar.
@@ -49353,6 +50464,16 @@ function renderTimetableSsr(display) {
 		})]
 	});
 }
+function renderWeekBoardSsr(display) {
+	return /* @__PURE__ */ jsx(WeekBoardView, {
+		days: getWeekCalendarDayTuple(/* @__PURE__ */ new Date(), display.startOfWeek),
+		events: [...display.events],
+		showCapacity: display.showCapacity,
+		emptyMessage: display.emptyMessage,
+		ctaLabel: display.buttonText,
+		buttonVariant: display.buttonVariant
+	});
+}
 function formatHourLabel(hour) {
 	if (hour === 0) return "12 AM";
 	if (hour === 12) return "12 PM";
@@ -49379,6 +50500,9 @@ const EventCalendarSSR = (props) => {
 		case "timetable":
 			content = renderTimetableSsr(display);
 			break;
+		case "week-board":
+			content = renderWeekBoardSsr(display);
+			break;
 		case "calendar":
 			content = renderCalendarSsr(display);
 			break;
@@ -49950,6 +51074,7 @@ typedObjectKeys(runtimeBackedBlockServerEntries);
 const serverComponentRegistry = {
 	div: DivNode,
 	figure: FigureNode,
+	svg: SvgNode,
 	section: SectionNode,
 	headerSection: header_section_server_default,
 	stack: StackNode,
@@ -51450,6 +52575,8 @@ function formatFontFamily(family, fallback = "sans-serif") {
 function generateShadowCssVars(theme) {
 	const level = theme.shadow.elevation;
 	const soft = theme.shadow.softness !== "crisp";
+	const tintVar = theme.shadow.colorToken ? cssVarValue(theme.shadow.colorToken) : null;
+	const shadowColor = (a) => tintVar ? `rgb(${tintVar} / ${a})` : `rgba(0, 0, 0, ${a})`;
 	const base = {
 		sm: [{
 			y: 1,
@@ -51509,7 +52636,7 @@ function generateShadowCssVars(theme) {
 	const blurMul = soft ? 1.2 : 1;
 	const alphaMul = soft ? .9 : 1.05;
 	const fmt = (layers) => layers.map((l) => {
-		return `0 ${Math.round(l.y * scale)}px ${Math.round(l.blur * scale * blurMul)}px ${Math.round(l.spread * scale)}px rgba(0, 0, 0, ${Math.max(0, Math.min(1, +(l.a * alphaMul).toFixed(3)))})`;
+		return `0 ${Math.round(l.y * scale)}px ${Math.round(l.blur * scale * blurMul)}px ${Math.round(l.spread * scale)}px ${shadowColor(Math.max(0, Math.min(1, +(l.a * alphaMul).toFixed(3))))}`;
 	}).join(", ");
 	return {
 		"--shadow-sm": fmt(base.sm),
@@ -51575,7 +52702,13 @@ function generateAccordionCss({ themeId, theme, accordionSystem }) {
 	const questionColumnsLastItemSelector = `${questionColumnsItemSelector}:last-child`;
 	const questionColumnsTriggerSelector = `${questionColumnsItemSelector} .accordion-trigger`;
 	const rootRules = [];
-	if (accordionSystem.background) rootRules.push(`background-color: ${rgbColorValue(accordionSystem.background.colorToken)}`);
+	if (accordionSystem.background) {
+		rootRules.push(`background-color: ${rgbColorValue(accordionSystem.background.colorToken)}`);
+		rootRules.push(...surfaceForegroundDeclarations({
+			text: rgbColorValue(accordionSystem.content.textColorToken),
+			heading: rgbColorValue(accordionSystem.trigger.textColorToken)
+		}));
+	}
 	const borderRadius = CORNER_MAP$2[accordionSystem.corners ?? theme.corners];
 	rootRules.push(`border-radius: ${borderRadius}`);
 	if (accordionSystem.border) {
@@ -53159,7 +54292,7 @@ ${root} .status-error { color: rgb(var(--tb-destructive)); }
 ${root} .status-success { color: rgb(var(--tb-success)); }
 ${root} .status-warning { color: rgb(var(--tb-warning)); }
 ${root} .status-info { color: rgb(var(--tb-info)); }
-${root} .status-muted { ${statusMutedColorDeclaration()} }`);
+${root} .status-muted { color: ${surfaceForegroundValue("supporting")}; }`);
 	cssBlocks.push(`/* Alert containers */
 ${root} .alert {
   padding: 1rem;
@@ -53297,6 +54430,9 @@ ${root} .step-connector {
 }
 //#endregion
 //#region ../theme-core/src/typography/generateTypographyCss.ts
+function globalHeadingColorFallback(level) {
+	return `var(--hc-h${level}, var(--hc-heading, ${DEFAULT_SURFACE_TEXT_COLOR}))`;
+}
 /**
 * Generate typography CSS for heading elements.
 *
@@ -53325,7 +54461,7 @@ ${root} :where(h1) {
   font-style: var(--fi-h1, var(--fi-heading, normal));
   letter-spacing: var(--ls-h1, var(--ls-heading));
   line-height: var(--lh-h1, var(--lh-heading));
-  color: var(--section-heading-color, var(--section-text-color, var(--hc-h1, var(--hc-heading, inherit))));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(1))};
 }
 
 ${root} :where(h2) {
@@ -53334,7 +54470,7 @@ ${root} :where(h2) {
   font-style: var(--fi-h2, var(--fi-heading, normal));
   letter-spacing: var(--ls-h2, var(--ls-heading));
   line-height: var(--lh-h2, var(--lh-heading));
-  color: var(--section-heading-color, var(--section-text-color, var(--hc-h2, var(--hc-heading, inherit))));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(2))};
 }
 
 ${root} :where(h3) {
@@ -53343,7 +54479,7 @@ ${root} :where(h3) {
   font-style: var(--fi-h3, var(--fi-heading, normal));
   letter-spacing: var(--ls-h3, var(--ls-heading));
   line-height: var(--lh-h3, var(--lh-heading));
-  color: var(--section-heading-color, var(--section-text-color, var(--hc-h3, var(--hc-heading, inherit))));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(3))};
 }
 
 ${root} :where(h4) {
@@ -53352,7 +54488,7 @@ ${root} :where(h4) {
   font-style: var(--fi-h4, var(--fi-heading, normal));
   letter-spacing: var(--ls-h4, var(--ls-heading));
   line-height: var(--lh-h4, var(--lh-heading));
-  color: var(--section-heading-color, var(--section-text-color, var(--hc-h4, var(--hc-heading, inherit))));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(4))};
 }
 
 ${root} :where(h5) {
@@ -53361,7 +54497,7 @@ ${root} :where(h5) {
   font-style: var(--fi-h5, var(--fi-heading, normal));
   letter-spacing: var(--ls-h5, var(--ls-heading));
   line-height: var(--lh-h5, var(--lh-heading));
-  color: var(--section-heading-color, var(--section-text-color, var(--hc-h5, var(--hc-heading, inherit))));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(5))};
 }
 
 ${root} :where(h6) {
@@ -53370,7 +54506,7 @@ ${root} :where(h6) {
   font-style: var(--fi-h6, var(--fi-heading, normal));
   letter-spacing: var(--ls-h6, var(--ls-heading));
   line-height: var(--lh-h6, var(--lh-heading));
-  color: var(--section-heading-color, var(--section-text-color, var(--hc-h6, var(--hc-heading, inherit))));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(6))};
 }`);
 	cssBlocks.push(`/* Display variant for hero/splash headings */
 ${root} :where(.heading-display) {
@@ -53769,6 +54905,7 @@ const THEME_RADIUS_CSS_VARS = {
 	block: "--rb-block-radius",
 	button: "--rb-button-radius",
 	input: "--rb-input-radius",
+	panel: "--rb-panel-radius",
 	legacyCard: "--radius-card",
 	legacyControl: "--radius-control"
 };
@@ -53850,6 +54987,10 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="customer-portal"]
   /* Modal (shared rb-modal classes) */
   --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.35);
   --rb-modal-bg: var(--cp-card-bg);
+  --rb-modal-text: var(--cp-text);
+  --rb-modal-heading: var(--cp-text);
+  --rb-modal-link: var(--cp-primary);
+  --rb-modal-supporting: var(--cp-muted);
   --rb-modal-border: var(--cp-card-border);
   --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));
   --rb-modal-radius: var(--cp-card-radius);
@@ -54564,6 +55705,7 @@ function buildThemeCssVars(theme) {
 	const inputSystem = resolveThemeInputSystem(theme);
 	const blockRadius = mapBlockRadius(theme.corners);
 	const buttonRadius = mapButtonRadius(theme.corners);
+	const panelRadius = mapPanelRadius(theme.corners);
 	const inputRadius = mapInputRadius(inputSystem.base.corners, theme.corners);
 	return {
 		...generateCssVars(theme.palette),
@@ -54572,6 +55714,7 @@ function buildThemeCssVars(theme) {
 		...generateShadowCssVars(theme),
 		["--font-heading"]: formatFontFamily(typography.headings.default.family),
 		["--font-body"]: formatFontFamily(typography.body.family),
+		["--font-eyebrow"]: typography.eyebrow?.family ? formatFontFamily(typography.eyebrow.family) : "var(--font-body)",
 		["--font-weight-heading"]: mapWeight(typography.headings.default.weight),
 		["--font-weight-body"]: mapWeight(typography.body.weight),
 		...typography.headings.h1.weight ? { ["--fw-h1"]: mapWeight(typography.headings.h1.weight) } : {},
@@ -54622,12 +55765,13 @@ function buildThemeCssVars(theme) {
 		["--fs-h3-fluid"]: sized.h3Fluid,
 		["--fs-h1-display"]: sized.h1Display,
 		["--fs-h1-display-fluid"]: sized.h1DisplayFluid,
-		["--shadow-elev"]: mapShadow(shadow.elevation, shadow.softness, shadow.position || "bottom"),
+		["--shadow-elev"]: mapShadow(shadow.elevation, shadow.softness, shadow.position || "bottom", shadow.colorToken),
 		["--space-mult"]: mapSpaceMult(space),
 		["--motion-duration"]: mapMotionDuration(motion.level),
 		["--motion-ease"]: mapMotionEasing(motion.easing ?? "standard"),
 		["--rt-space-y"]: mapRhythm(space),
 		[THEME_RADIUS_CSS_VARS.block]: blockRadius,
+		[THEME_RADIUS_CSS_VARS.panel]: panelRadius,
 		["--rb-block-transition"]: mapBlockTransition(motion.level),
 		[THEME_RADIUS_CSS_VARS.button]: buttonRadius,
 		["--rb-border-width"]: mapBorderWidth(border.width),
@@ -54681,20 +55825,22 @@ function mapWeight(w) {
 		bold: 700
 	}[w];
 }
-function mapShadow(level, softness, position = "bottom") {
+function mapShadow(level, softness, position = "bottom", colorToken) {
 	if (level === "none") return "none";
+	const tintVar = colorToken ? cssVarValue(colorToken) : null;
+	const shadowColor = (a) => tintVar ? `rgb(${tintVar} / ${a})` : `rgba(0,0,0,${a})`;
 	const offset = {
 		low: 2,
 		medium: 4,
 		high: 6
 	}[level];
 	const xOffset = position === "bottom-right" ? offset : 0;
-	if (softness === "hard") return `${xOffset}px ${offset}px 0 0 rgba(0,0,0,1)`;
+	if (softness === "hard") return `${xOffset}px ${offset}px 0 0 ${shadowColor("1")}`;
 	const soft = softness !== "crisp";
 	switch (level) {
-		case "low": return soft ? `${xOffset}px 1px 2px rgba(0,0,0,.06)` : `${xOffset}px 1px 1px rgba(0,0,0,.12)`;
-		case "medium": return soft ? `${xOffset}px 10px 20px rgba(0,0,0,.08)` : `${xOffset}px 6px 12px rgba(0,0,0,.16)`;
-		case "high": return soft ? `${xOffset}px 25px 50px rgba(0,0,0,.18)` : `${xOffset}px 20px 30px rgba(0,0,0,.28)`;
+		case "low": return soft ? `${xOffset}px 1px 2px ${shadowColor(".06")}` : `${xOffset}px 1px 1px ${shadowColor(".12")}`;
+		case "medium": return soft ? `${xOffset}px 10px 20px ${shadowColor(".08")}` : `${xOffset}px 6px 12px ${shadowColor(".16")}`;
+		case "high": return soft ? `${xOffset}px 25px 50px ${shadowColor(".18")}` : `${xOffset}px 20px 30px ${shadowColor(".28")}`;
 	}
 }
 function mapSpaceMult(space) {
@@ -54741,6 +55887,21 @@ function mapBlockRadius(corners) {
 	}[corners];
 }
 /**
+* Map corner style to large-panel radius CSS value (Tier 2 `--rb-panel-radius`).
+* Derived from the same `corners` enum, one step more generous than the
+* block/card radius so large surfaces can carry a softer corner without a new
+* schema field. `rounded` lands on 20px (1.25rem), matching the physio mockup's
+* large-panel radius.
+*/
+function mapPanelRadius(corners) {
+	return {
+		square: "0",
+		soft: "0.75rem",
+		rounded: "1.25rem",
+		pill: "2rem"
+	}[corners];
+}
+/**
 * Map motion level to block transition duration.
 * These are Tier 2 vars used consistently across blocks.
 */
@@ -55724,8 +56885,12 @@ const containerResponsiveThemeCss = `/*
     text-transform: uppercase;
   }
 
-  /* Eyebrow text - small uppercase labels for section introductions */
+  /* Eyebrow text - small uppercase labels for section introductions.
+     font-family resolves to the optional eyebrow/mono font role, falling back
+     to the body font when the theme sets none (so existing themes are
+     unchanged). */
   .rb-eyebrow {
+    font-family: var(--font-eyebrow, var(--font-body));
     font-size: 0.875rem;
     font-weight: 600;
     letter-spacing: 0.025em;
@@ -55740,11 +56905,11 @@ const containerResponsiveThemeCss = `/*
     width: fit-content;
     align-items: center;
     justify-content: center;
-    border: 1px solid color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 46%, transparent);
+    border: 1px solid color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 46%, transparent);
     border-radius: 9999px;
-    background: color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
+    background: color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);
     padding: 0.5rem 1rem;
-    color: var(--section-text-color, rgb(var(--tb-text)));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     line-height: 1;
   }
   .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {
@@ -56246,6 +57411,58 @@ const containerResponsiveThemeCss = `/*
       }
     }
 
+}
+
+  /*
+   * Responsive fractional grid tracks (rb-grid-tracks).
+   *
+   * Asymmetric AND responsive grid-template-columns, driven by inline custom
+   * properties the Grid primitive sets per breakpoint from string track
+   * templates:
+   *   --rb-gtc-base / --rb-gtc-sm / --rb-gtc-md / --rb-gtc-lg / --rb-gtc-xl
+   * Each breakpoint falls back to the next smaller one, so only the breakpoints
+   * an author actually sets take effect (e.g. base '1fr' + lg '1fr 0.9fr'
+   * collapses to a single column below lg). Authored here (not per node) so the
+   * @media -> @container conversion (container responsive mode) applies too.
+   */
+  .rb-grid-tracks {
+    grid-template-columns: var(--rb-gtc-base, 1fr);
+  }
+  @container rb-site (min-width: 640px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-sm, var(--rb-gtc-base, 1fr));
+      }
+    }
+
+}
+  @container rb-site (min-width: 768px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)));
+      }
+    }
+
+}
+  @container rb-site (min-width: 1024px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr))));
+      }
+    }
+
+}
+  @container rb-site (min-width: 1280px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-xl, var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)))));
+      }
+    }
+
 }
 
   /* Alignment */
@@ -57450,6 +58667,11 @@ const containerResponsiveThemeCss = `/*
   :where(.theme-scope) .rb-modal {
     width: min(var(--rb-modal-max-width, 560px), 100%);
     background: var(--rb-modal-bg, rgb(var(--tb-surface)));
+    color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));
+    --rb-surface-text-color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));
+    --rb-surface-heading-color: var(--rb-modal-heading, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
+    --rb-surface-link-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
+    --rb-surface-supporting-color: var(--rb-modal-supporting, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
     border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
     border-radius: var(--rb-modal-radius, var(--radius-card));
     box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
@@ -57469,7 +58691,7 @@ const containerResponsiveThemeCss = `/*
     font-family: var(--font-heading);
     font-size: 1.0625rem;
     font-weight: 600;
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));
   }
 
   :where(.theme-scope) .rb-modal__close {
@@ -57479,7 +58701,7 @@ const containerResponsiveThemeCss = `/*
     height: 2.25rem;
     padding: 0;
     line-height: 1;
-    color: rgb(var(--tb-mutedText));
+    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
     cursor: pointer;
     display: grid;
     place-items: center;
@@ -57487,7 +58709,7 @@ const containerResponsiveThemeCss = `/*
   }
 
   :where(.theme-scope) .rb-modal__close:hover {
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     background: rgba(var(--tb-border), 0.2);
   }
 
@@ -57498,7 +58720,7 @@ const containerResponsiveThemeCss = `/*
 
   :where(.theme-scope) .rb-modal__body {
     padding: 0.875rem 1rem 1rem;
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     font-size: 0.9375rem;
     line-height: 1.45;
   }
@@ -57658,7 +58880,7 @@ const containerResponsiveThemeCss = `/*
     & h6 {
       font-family: var(--font-heading);
       /* Color is set by generateTypographyCss.ts with full cascade:
-       --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */
+       --rb-surface-heading-color -> --rb-surface-text-color -> --hc-hN -> --hc-heading -> global text */
       font-weight: var(--font-weight-heading);
       text-transform: var(--tt-heading);
       font-variant-caps: var(--fv-heading);
@@ -57806,7 +59028,7 @@ const containerResponsiveThemeCss = `/*
 
   /* Neutral prose uses theme text color by default */
   :where(.theme-scope) .rb-prose-neutral {
-    color: var(--section-text-color, rgb(var(--tb-text)));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   }
 
   :where(.theme-scope) .rb-prose p,
@@ -57840,8 +59062,14 @@ const containerResponsiveThemeCss = `/*
 
   :where(.theme-scope) .rb-prose a {
     --rb-prose-effective-link-color: var(
-      --section-link-color,
-      var(--rb-prose-link-color, rgb(var(--tb-primary)))
+      --rb-surface-link-color,
+      var(
+        --rb-surface-text-color,
+        var(
+          --rb-prose-link-color,
+          rgb(var(--tb-primary, var(--tb-text, 17 24 39)))
+        )
+      )
     );
     color: var(--rb-prose-effective-link-color);
     text-decoration-line: var(--rb-prose-link-decoration-line, underline);
@@ -57852,14 +59080,11 @@ const containerResponsiveThemeCss = `/*
     );
     text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
     text-decoration-color: var(
-      --section-link-decoration-color,
-      var(
-        --rb-prose-link-decoration-color,
-        color-mix(
-          in srgb,
-          var(--rb-prose-effective-link-color) 35%,
-          transparent
-        )
+      --rb-prose-link-decoration-color,
+      color-mix(
+        in srgb,
+        var(--rb-prose-effective-link-color) 35%,
+        transparent
       )
     );
     transition:
@@ -57883,7 +59108,7 @@ const containerResponsiveThemeCss = `/*
 
   :where(.theme-scope) .rb-prose blockquote {
     /* Blockquotes use muted text color */
-    color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
     border-left-color: rgb(var(--tb-border));
   }
 
@@ -58917,6 +60142,10 @@ const containerResponsiveThemeCss = `/*
   :where(.theme-scope) .card-surface {
     background: rgb(var(--tb-surface));
     color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-text-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-heading-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-link-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-supporting-color: rgb(var(--tb-onSurface, var(--tb-text)));
     border: 1px solid rgb(var(--tb-border));
     border-radius: var(--radius-card);
     box-shadow: var(--shadow-elev);
@@ -59060,6 +60289,10 @@ const containerResponsiveThemeCss = `/*
   padding: clamp(1rem, 2vw, 1.5rem);
   background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
   color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-text-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-heading-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-link-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-supporting-color: var(--rb-reg-on-surface-muted, var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)))));
   transition: border-color var(--rb-block-transition, 150ms) ease;
   width: 100%;
   max-width: 800px;
@@ -62147,6 +63380,350 @@ const containerResponsiveThemeCss = `/*
 }
 }
 
+/* -----------------------------------------------------------------------------
+ * Week Board View
+ * Compact "class day-board": day columns side by side, one card per class,
+ * three-state availability (available / filling / waitlist), and a footer CTA.
+ * ----------------------------------------------------------------------------- */
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board {
+  /* Status accent tokens — map the three availability states onto theme colours.
+   * available -> secondary, filling -> accent, waitlist -> muted text. */
+  --ec-status-available: rgb(var(--tb-secondary));
+  --ec-status-filling: rgb(var(--tb-accent));
+  --ec-status-waitlist: rgba(var(--tb-text), 0.4);
+  --event-week-board-cols: 7;
+
+  border: 1px solid var(--ec-border);
+  border-radius: var(--rb-block-radius);
+  background-color: var(--ec-surface);
+  color: var(--ec-text);
+  overflow: hidden;
+  box-shadow: 0 14px 34px -24px rgba(var(--tb-text), 0.35);
+}
+
+/* Top bar: title + legend */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1.1rem 1.5rem;
+  background-color: var(--ec-header-bg);
+  border-bottom: 1px solid var(--ec-border-subtle);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgb(var(--tb-primary));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend {
+  display: flex;
+  align-items: center;
+  gap: 1.1rem;
+  flex-wrap: wrap;
+  font-size: 0.6875rem;
+  letter-spacing: 0.03em;
+  opacity: 0.75;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="available"] {
+  background-color: var(--ec-status-available);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="filling"] {
+  background-color: var(--ec-status-filling);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="waitlist"] {
+  background-color: var(--ec-status-waitlist);
+}
+
+/* Day columns grid */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--event-week-board-cols), minmax(0, 1fr));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day {
+  display: flex;
+  flex-direction: column;
+  min-height: 15rem;
+  /* Tabular column rule. Driven by the theme border tokens so borderless site
+   * styles (border.width: 'none' -> --rb-border-width: 0) render no grid at all,
+   * while hairline/thin/thick themes get a crisp full-strength divider. */
+  border-right: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day:last-child {
+  border-right: none;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.9rem 0.9rem 0.65rem;
+  /* Header-row underline — same border-token gating as the column rules. */
+  border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--today .event-week-board-day-head {
+  background-color: var(--ec-today-bg);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-abbr {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.65;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--today .event-week-board-day-abbr {
+  opacity: 1;
+  color: var(--ec-today-text);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-num {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  opacity: 0.5;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  padding: 0.9rem;
+  flex: 1;
+}
+
+/* Class card */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: 0.8rem 0.85rem;
+  border: 1px solid var(--ec-border-subtle);
+  border-left: 3px solid var(--ec-status-available);
+  border-radius: calc(var(--rb-block-radius) / 1.5);
+  background-color: var(--ec-surface);
+  color: inherit;
+  text-decoration: none;
+  transition:
+    transform var(--rb-block-transition) ease,
+    box-shadow var(--rb-block-transition) ease,
+    border-color var(--rb-block-transition) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card[data-status="filling"] {
+  border-left-color: var(--ec-status-filling);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card[data-status="waitlist"] {
+  border-left-color: var(--ec-status-waitlist);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px -8px rgba(var(--tb-text), 0.28);
+  border-color: rgba(var(--tb-primary), 0.4);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card:focus-visible {
+  outline: 2px solid rgb(var(--tb-primary));
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-title {
+  font-family: var(--font-heading, inherit);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-time {
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+  opacity: 0.7;
+}
+
+/* Capacity pill */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  /* Available (default): a calm neutral/muted pill — not a coloured outline.
+   * Filling -> amber and waitlist -> muted outline are handled by the
+   * data-status overrides below. */
+  border: 1px solid var(--ec-border);
+  background-color: rgba(var(--tb-text), 0.06);
+  color: rgba(var(--tb-text), 0.62);
+  border-color: var(--ec-border);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill[data-status="filling"] {
+  background-color: rgba(var(--tb-accent), 0.14);
+  color: var(--ec-status-filling);
+  border-color: rgba(var(--tb-accent), 0.32);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill[data-status="waitlist"] {
+  background-color: transparent;
+  color: rgba(var(--tb-text), 0.6);
+  border-color: var(--ec-border);
+}
+
+/* Footer */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1.1rem 1.5rem;
+  background-color: var(--ec-header-bg);
+  border-top: 1px solid var(--ec-border-subtle);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-foot-note {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+
+/* Responsive: collapse day columns to a stacked list on narrow viewports */
+@container rb-site (max-width: 1023px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-grid {
+    grid-template-columns: 1fr;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day {
+    min-height: 0;
+    border-right: none;
+    border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day:last-child {
+    border-bottom: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--empty {
+    display: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-head {
+    border-bottom: none;
+    padding-bottom: 0.25rem;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-body {
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding-top: 0.35rem;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+    flex: 1 1 14rem;
+  }
+}
+}
+
+@container rb-site (max-width: 639px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend {
+    display: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+    flex: 1 1 100%;
+  }
+}
+}
+
+/* -----------------------------------------------------------------------------
+ * Week-board section band
+ * Give the whole week-board section (head + panel) a subtle surface band so it
+ * reads as a distinct zone from the page — the "testimonials band" pattern.
+ * Painted as a pseudo-element above the section's fallback background layer
+ * (z-index -10) but behind the content, so no block-content wiring is needed.
+ * Surface + hairline rules are token-referenced: on a borderless site style
+ * (--rb-border-width: 0) the band keeps its surface tint but drops the rules.
+ * ----------------------------------------------------------------------------- */
+:where(.theme-scope) [data-slot="section"]:has(.event-calendar--week-board)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -9;
+  background-color: rgb(var(--tb-surfaceAlt));
+  border-block: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+  pointer-events: none;
+}
+
+/* -----------------------------------------------------------------------------
+ * Event section head — split (heading left, intro right)
+ * Rendered by the block frame (outside [data-block="event-calendar"]) via
+ * eventSectionHeaderLayoutNodes({ splitClassName }). Lays the heading and its
+ * supporting intro out as a two-column head on wide viewports, stacking on
+ * narrow ones. The section band above provides the distinct background.
+ * ----------------------------------------------------------------------------- */
+:where(.theme-scope) .event-section-head--split {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: clamp(1.5rem, 4vw, 3.5rem);
+  flex-wrap: wrap;
+}
+
+:where(.theme-scope) .event-section-head--split > :where(h1, h2, h3) {
+  margin: 0;
+}
+
+:where(.theme-scope) .event-section-head--split > .rb-prose {
+  flex: 1 1 22rem;
+  max-width: 34rem;
+  margin: 0;
+}
+
+@container rb-site (max-width: 767px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .event-section-head--split {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  :where(.theme-scope) .event-section-head--split > .rb-prose {
+    flex-basis: auto;
+  }
+}
+}
+
 /* -----------------------------------------------------------------------------
  * Event Calendar Modals
  * Modal overlays for event details and day events list
@@ -62574,7 +64151,7 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) .rb-inline-text-accent-contrast {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 :where(.theme-scope) .rb-inline-text-highlight {
@@ -62585,7 +64162,7 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) .rb-inline-text-highlight-soft {
-  background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
+  background: color-mix(in oklab, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);
 }
 
 :where(.theme-scope) .rb-inline-text-highlight-accent {
@@ -62604,7 +64181,7 @@ const containerResponsiveThemeCss = `/*
 
 /* Eyebrow - color only (typography via .rb-eyebrow) */
 :where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 /* Subheadline - supporting text below headline */
@@ -62614,7 +64191,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
   font-size: 1.125rem;
-  color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
 }
 
 @container rb-site (min-width: 640px) {
@@ -62705,7 +64282,7 @@ const containerResponsiveThemeCss = `/*
 
 /* CTA content/body text */
 :where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
-  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
 }
 
 /* CTA button row container */
@@ -62805,7 +64382,7 @@ const containerResponsiveThemeCss = `/*
 /* Form intro text */
 :where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
   font-size: 1rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 /* =============================================================================
@@ -63164,6 +64741,10 @@ const containerResponsiveThemeCss = `/*
   --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
   --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));
   --rb-modal-z-index: 20000;
+  --rb-modal-text: rgb(var(--tb-text, 17 24 39));
+  --rb-modal-heading: rgb(var(--tb-text, 17 24 39));
+  --rb-modal-link: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-modal-supporting: rgb(var(--tb-mutedText, 100 116 139));
   --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));
   --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));
 }
@@ -63221,6 +64802,11 @@ const containerResponsiveThemeCss = `/*
 /* Product card */
 :where(.theme-scope) .shop__card {
   background: rgb(var(--tb-surface));
+  color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
   padding: 1.5rem;
@@ -63375,6 +64961,11 @@ const containerResponsiveThemeCss = `/*
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
   background: rgb(var(--tb-surface));
+  color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
 }
 
 :where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--success {
@@ -63447,6 +65038,11 @@ const containerResponsiveThemeCss = `/*
   margin: 0 auto;
   padding: 2rem;
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -63575,6 +65171,11 @@ const containerResponsiveThemeCss = `/*
   padding: 3rem 2rem;
   text-align: center;
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px dashed var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -63587,6 +65188,11 @@ const containerResponsiveThemeCss = `/*
 /* Card */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-card {
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
   padding: 1.25rem;
@@ -63751,6 +65357,11 @@ const containerResponsiveThemeCss = `/*
 /* Table */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table-wrap {
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -64312,6 +65923,143 @@ const containerResponsiveThemeCss = `/*
 }
 
 
+/* =============================================================================
+ * Variant: featured-editorial
+ *
+ * An asymmetric layout: a large featured (spruce-ink) quote card beside a
+ * column of stacked white cards. Renders NO avatars. Colours are palette
+ * tokens only. Node structure is built in testimonialsCarousel.ts.
+ * ============================================================================= */
+
+/* Section head: heading left, lead-in line to the right; stacks on mobile. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.875rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-leadin {
+  max-width: 30rem;
+}
+
+@container rb-site (min-width: 768px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-head {
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+}
+}
+
+/* Card grid: featured (wider) beside the stacked column. Single column on
+ * small screens. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.25rem;
+  align-items: stretch;
+}
+
+@container rb-site (min-width: 1024px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-grid {
+    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  }
+}
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-col {
+  display: grid;
+  gap: 1.25rem;
+  align-content: start;
+}
+
+/* Base card (white surface) */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: var(--rb-block-radius);
+  padding: 1.875rem 1.875rem 1.625rem;
+  background: rgb(var(--tb-surface));
+  border: 1px solid rgba(var(--tb-border), 0.9);
+  box-shadow: 0 1px 2px rgba(var(--tb-shadow, 0 0 0), 0.05);
+}
+
+/* Featured (spruce-ink) card */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature {
+  padding: 2.5rem;
+  background: rgb(var(--tb-primary));
+  border-color: transparent;
+  color: rgb(var(--tb-onPrimary));
+}
+
+/* Amber quote mark, oversized serif */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-qmark {
+  display: block;
+  height: 1.6rem;
+  font-family: var(--font-heading, Georgia, serif);
+  font-style: italic;
+  font-size: 3.375rem;
+  line-height: 0.6;
+  color: rgb(var(--tb-secondary));
+}
+
+/* Quote body. The inner <p> is targeted directly (not via :where) so the
+ * serif display font and sizing win over the theme's base paragraph rule. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-quote {
+  flex: 1 1 auto;
+  margin-top: 1.25rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-quote p {
+  margin: 0;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 1.15rem;
+  line-height: 1.5;
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-quote p {
+  color: rgb(var(--tb-onPrimary));
+  font-size: clamp(1.375rem, 2.4vw, 1.6875rem);
+  line-height: 1.42;
+  letter-spacing: -0.01em;
+}
+
+/* Attribution: name (bold) + context line, no avatar */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 1.625rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-name {
+  font-weight: 600;
+  font-size: 0.97rem;
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-context {
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  color: rgb(var(--tb-mutedText));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-name {
+  color: rgb(var(--tb-onPrimary));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-context {
+  color: rgb(var(--tb-onPrimary));
+  opacity: 0.7;
+}
+
+
 /* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */
 :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {
   height: var(--rb-testimonial-carousel-arrow-size);
@@ -65458,7 +67206,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-subtitle {
   font-size: 1rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   opacity: 0.85;
 }
 
@@ -65507,7 +67255,7 @@ const containerResponsiveThemeCss = `/*
   margin-top: 0.75rem;
   font-size: 1rem;
   line-height: 1.6;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   text-align: center;
 }
 
@@ -65589,7 +67337,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .form-copy-intro,
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .newsletter-copy-subtitle {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .contact-newsletter-info {
@@ -65987,7 +67735,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) .event-compact-row-title {
   margin: 0;
-  color: var(--section-heading-color, rgb(var(--tb-primary, 0 0 0)));
+  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39)))));
   font-family: var(--font-heading, var(--font-body, inherit));
   font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
   font-weight: 400;
@@ -66649,27 +68397,41 @@ const containerResponsiveThemeCss = `/*
   background: rgb(var(--tb-surface));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {
+  background: rgb(var(--tb-surface));
   color: rgb(var(--tb-onSurface));
+  --rb-surface-text-color: rgb(var(--tb-onSurface));
+  --rb-surface-heading-color: rgb(var(--tb-onSurface));
+  --rb-surface-link-color: rgb(var(--tb-onSurface));
+  --rb-surface-supporting-color: rgb(var(--tb-onSurface));
 }
 
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {
   background: rgb(var(--tb-secondary));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {
+  background: rgb(var(--tb-secondary));
   color: rgb(var(--tb-onSecondary));
+  --rb-surface-text-color: rgb(var(--tb-onSecondary));
+  --rb-surface-heading-color: rgb(var(--tb-onSecondary));
+  --rb-surface-link-color: rgb(var(--tb-onSecondary));
+  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));
 }
 
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {
   background: rgb(var(--tb-primary));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {
+  background: rgb(var(--tb-primary));
   color: rgb(var(--tb-onPrimary));
+  --rb-surface-text-color: rgb(var(--tb-onPrimary));
+  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
+  --rb-surface-link-color: rgb(var(--tb-onPrimary));
+  --rb-surface-supporting-color: rgb(var(--tb-onPrimary));
 }
 
-/* Body copy carries an inline muted colour from the block; force it to the
- * card's on-colour so it reads on every block (inline style needs !important). */
+/* Keep the intended visual hierarchy; the body color itself now resolves via
+ * the nearest surface provider instead of requiring an inline override. */
 :where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {
-  color: inherit !important;
   opacity: 0.9;
 }