@riverbankcms/sdk 0.98.0 → 0.99.0

package/dist/server/next.mjs

@@ -5742,6 +5742,14 @@ var ENDPOINT_DEFINITIONS = {
     responseKind: "json",
     errors: []
   },
+  adminResolveSiteBillingManualReview: {
+    path: "/admin/sites/{siteId}/billing/manual-reviews/{reviewId}/resolve",
+    method: "POST",
+    tags: ["admin", "site-{siteId}", "billing"],
+    auth: "admin",
+    responseKind: "json",
+    errors: []
+  },
   // Admin GSC/SEO endpoints
   adminGscVerifyStart: {
     path: "/admin/seo/gsc/properties/verify/start",
@@ -13409,6 +13417,79 @@ var TokenResolver = class {
   }
 };
 
+// ../theme-core/src/interactive/generateBaseCSS.ts
+var FONT_WEIGHT_MAP = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+function generateBaseInteractiveCSS(options) {
+  const {
+    typography,
+    padding,
+    borderRadius,
+    includeTransition = true,
+    includeFlexCenter = false,
+    borderWidth
+  } = options;
+  const rules = [];
+  if (typography.fontWeight !== void 0) {
+    const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP[typography.fontWeight];
+    rules.push(`font-weight: ${weight};`);
+  }
+  if (typography.typography === "heading") {
+    rules.push(`font-family: var(--font-heading);`);
+    rules.push(`letter-spacing: var(--ls-heading);`);
+  } else if (typography.typography === "body") {
+    rules.push(`font-family: var(--font-body);`);
+  }
+  if (typography.italic) {
+    rules.push(`font-style: italic;`);
+  }
+  if (typography.textTransform && typography.textTransform !== "none") {
+    rules.push(`text-transform: ${typography.textTransform};`);
+  }
+  if (padding) {
+    if (borderWidth && borderWidth !== "0px") {
+      const paddingParts = padding.split(" ");
+      const verticalPadding = paddingParts[0] || "0.5rem";
+      const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
+      rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
+      rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
+    } else {
+      rules.push(`padding: ${padding};`);
+    }
+  }
+  if (borderRadius) {
+    rules.push(`border-radius: ${borderRadius};`);
+  }
+  if (includeTransition) {
+    rules.push(`transition: all 200ms ease;`);
+  }
+  if (includeFlexCenter) {
+    rules.push(`display: inline-flex;`);
+    rules.push(`align-items: center;`);
+    rules.push(`justify-content: center;`);
+    rules.push(`cursor: pointer;`);
+  }
+  return rules;
+}
+function generateInteractiveChildInheritanceCSS(selector) {
+  return `
+${selector} * {
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+}
+`;
+}
+
 // ../theme-core/src/buttons/effects/presets/background.ts
 var darkenBackgroundEffect = {
   id: "darken-background",
@@ -14903,7 +14984,9 @@ function resolveAliasSource(enabled) {
 function variantChunks(variant, global, themeSizes, themeId, tokens, theme) {
   const out = [];
   const variantId = parseButtonVariantIdForCss(variant.id);
-  out.push(variantBaseRule(variant, variantId, global, themeId, tokens, theme));
+  const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
+  out.push(variantBaseRule(variant, selector, global, tokens, theme));
+  out.push({ raw: generateInteractiveChildInheritanceCSS(selector) });
   const hoverBg = variantHoverBackgroundRule(variant, variantId, global, themeId, tokens);
   if (hoverBg) out.push(hoverBg);
   out.push(variantFocusVisibleRule(variantId, themeId));
@@ -14920,8 +15003,7 @@ function parseButtonVariantIdForCss(value) {
   }
   return variantId;
 }
-function variantBaseRule(variant, variantId, global, themeId, tokens, theme) {
-  const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
+function variantBaseRule(variant, selector, global, tokens, theme) {
   const decls = [];
   decls.push(["font-weight", String(global.fontWeight)]);
   decls.push(["font-family", resolveFontFamily(global)]);
@@ -15557,15 +15639,16 @@ var joyStamp = defineButtonPersonality({
       // 700, matching the mockup's chunky button labels.
       typography: "heading",
       fontWeight: 700,
+      fontSize: "text-lg",
       borderWidth: 2,
       hoverTransform: "none",
       hoverColor: "none"
     },
     sizes: {
-      sm: { padding: "0.625rem 1.25rem", fontSize: "text-sm" },
-      md: { padding: "0.875rem 1.75rem", fontSize: "text-base" },
-      lg: { padding: "1.125rem 2.25rem", fontSize: "text-lg" },
-      xl: { padding: "1.25rem 2.75rem", fontSize: "text-xl" }
+      sm: { padding: "0.625rem 1.25rem", fontSize: "text-base" },
+      md: { padding: "0.875rem 1.75rem", fontSize: "text-lg" },
+      lg: { padding: "1.125rem 2.25rem", fontSize: "text-xl" },
+      xl: { padding: "1.25rem 2.75rem", fontSize: "text-2xl" }
     },
     variants: [
       {
@@ -16143,6 +16226,20 @@ function generateDefaultCardSystem(theme) {
   };
 }
 
+// ../theme-core/src/status/contextualColors.ts
+var STATUS_MUTED_COLOR_VAR = "--rb-status-muted-color";
+var DEFAULT_STATUS_MUTED_COLOR = "rgb(var(--tb-mutedText))";
+var SURFACE_MUTED_STATUS_COLOR = "color-mix(in oklab, currentColor, transparent 18%)";
+function statusMutedColorValue() {
+  return `var(${STATUS_MUTED_COLOR_VAR}, ${DEFAULT_STATUS_MUTED_COLOR})`;
+}
+function statusMutedColorDeclaration() {
+  return `color: ${statusMutedColorValue()};`;
+}
+function contextualMutedStatusColorDeclaration(value) {
+  return `${STATUS_MUTED_COLOR_VAR}: ${value}`;
+}
+
 // ../theme-core/src/cards/generateCardCss.ts
 var PER_CORNER_RADIUS_MAP = {
   square: "0",
@@ -16216,6 +16313,7 @@ function generateVariantCSS(variant, themeId, tokens, theme) {
   if (variant.foregroundToken) {
     rules.push(`color: ${tokens.getColor(variant.foregroundToken)}`);
   }
+  rules.push(contextualMutedStatusColorDeclaration(SURFACE_MUTED_STATUS_COLOR));
   if (variant.accentEdge) {
     const side = ACCENT_EDGE_SIDE_MAP[variant.accentEdge.edge];
     const width = ACCENT_EDGE_WIDTH_MAP[variant.accentEdge.width];
@@ -16474,7 +16572,7 @@ var LABEL_FONT_SIZE_MAP = {
   base: "1rem"
   // 16px
 };
-var FONT_WEIGHT_MAP = {
+var FONT_WEIGHT_MAP2 = {
   regular: "400",
   medium: "500",
   semibold: "600",
@@ -47593,14 +47691,27 @@ function BookingFormSSR({
   return /* @__PURE__ */ jsxs15(
     "div",
     {
-      className: `booking-form-ssr ${className ?? ""}`.trim(),
+      className: `rb-reg-surface booking-form-ssr ${display.state === "missing" ? "" : "ab-shell "}${className ?? ""}`.trim(),
       ...getIslandRootProps("booking-form", blockId),
+      "aria-busy": display.state === "missing" ? void 0 : true,
+      "aria-label": display.state === "missing" ? void 0 : "Loading booking form",
+      role: display.state === "missing" ? void 0 : "status",
       children: [
         /* @__PURE__ */ jsx29(IslandPropsScript, { value: islandProps }),
-        /* @__PURE__ */ jsx29("div", { className: "booking-form-ssr__summary", children: display.state === "missing" ? /* @__PURE__ */ jsx29("p", { className: "booking-form-ssr__error", children: display.message }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
-          /* @__PURE__ */ jsx29("strong", { children: display.submitLabel }),
-          display.successMessage ? /* @__PURE__ */ jsx29("p", { className: "booking-form-ssr__success", children: display.successMessage }) : null
-        ] }) }),
+        display.state === "missing" ? /* @__PURE__ */ jsx29("div", { className: "alert alert-error", role: "alert", children: /* @__PURE__ */ jsx29("p", { className: "ab-text", children: display.message }) }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
+          /* @__PURE__ */ jsx29("span", { className: "rb-sr-only", children: "Loading booking form..." }),
+          /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx29("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--md" }),
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--sm" })
+            ] }) }),
+            /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--lg" }),
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--xs" })
+            ] }),
+            /* @__PURE__ */ jsx29("div", { className: "rb-wizard-actions", children: /* @__PURE__ */ jsx29("div", { className: "ab-shell-button", children: display.submitLabel }) })
+          ] })
+        ] }),
         children
       ]
     }
@@ -50252,20 +50363,38 @@ function EventRegistrationShell({
     "div",
     {
       id: EVENT_REGISTRATION_ANCHOR_ID,
-      className: "er-container er-registration-shell",
+      className: "rb-reg-surface er-container er-registration-shell",
       "aria-busy": "true",
       role: "status",
       children: /* @__PURE__ */ jsxs38("div", { className: "er-payment-layout er-payment-layout--no-sidebar", children: [
         /* @__PURE__ */ jsxs38("div", { className: "er-payment-layout-main", children: [
-          /* @__PURE__ */ jsx54("div", { className: "er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("ol", { className: "er-steps", children: display.stepLabels.map((label, index) => {
+          /* @__PURE__ */ jsx54("div", { className: "rb-steps-nav er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("ol", { className: "rb-steps er-steps", children: display.stepLabels.map((label, index) => {
             const isActive = index === 0;
-            return /* @__PURE__ */ jsxs38("li", { className: "er-step", children: [
-              /* @__PURE__ */ jsx54("span", { className: cx("er-step-circle", isActive && "er-step-circle--active"), children: index + 1 }),
-              /* @__PURE__ */ jsx54("span", { className: cx("er-step-label", isActive && "er-step-label--active"), children: label }),
-              index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx54("span", { className: "er-step-connector" }) : null
+            return /* @__PURE__ */ jsxs38("li", { className: "rb-step er-step", children: [
+              /* @__PURE__ */ jsx54(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-circle er-step-circle",
+                    isActive && "rb-step-circle--active er-step-circle--active"
+                  ),
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsx54(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-label er-step-label",
+                    isActive && "rb-step-label--active er-step-label--active"
+                  ),
+                  children: label
+                }
+              ),
+              index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx54("span", { className: "rb-step-connector er-step-connector" }) : null
             ] }, label);
           }) }) }),
-          /* @__PURE__ */ jsxs38("div", { className: "er-stack", children: [
+          /* @__PURE__ */ jsxs38("div", { className: "rb-reg-stack er-stack", children: [
             /* @__PURE__ */ jsxs38("div", { children: [
               /* @__PURE__ */ jsx54("p", { className: "er-registration-shell__eyebrow", children: "Registration" }),
               /* @__PURE__ */ jsx54("h3", { className: "er-title er-registration-shell__title", children: display.titleText }),
@@ -50273,20 +50402,20 @@ function EventRegistrationShell({
             ] }),
             /* @__PURE__ */ jsxs38("div", { className: "er-event-grid er-registration-shell__cards", "aria-hidden": "true", children: [
               /* @__PURE__ */ jsxs38("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--lg" }),
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--sm" })
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--lg er-registration-shell__line er-registration-shell__line--lg" }),
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--sm er-registration-shell__line er-registration-shell__line--sm" })
               ] }),
               /* @__PURE__ */ jsxs38("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
               ] })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsx54("div", { className: "er-payment-layout-footer", children: /* @__PURE__ */ jsxs38("div", { className: "er-summary-bar er-registration-shell__summary", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsxs38("div", { className: "er-summary-bar-info", children: [
-            /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-            /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+            /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+            /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
           ] }),
           /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__button-placeholder", children: display.summaryButtonText })
         ] }) })
@@ -50305,6 +50434,7 @@ function FeedbackMessage({
   tone,
   children,
   className,
+  id,
   title,
   titleClassName,
   bodyClassName,
@@ -50316,6 +50446,7 @@ function FeedbackMessage({
   return /* @__PURE__ */ jsxs39(
     "div",
     {
+      id,
       className,
       "data-feedback-tone": tone,
       role,
@@ -52493,7 +52624,7 @@ function generateInputCss({
   const labelSelector = `${rootSelector} .form-label`;
   const labelRules = [];
   labelRules.push(`color: ${rgbColorValue(inputSystem.label.textColorToken)}`);
-  labelRules.push(`font-weight: ${FONT_WEIGHT_MAP[inputSystem.label.fontWeight]}`);
+  labelRules.push(`font-weight: ${FONT_WEIGHT_MAP2[inputSystem.label.fontWeight]}`);
   labelRules.push(`font-size: ${LABEL_FONT_SIZE_MAP[inputSystem.label.fontSize]}`);
   if (inputSystem.label.textTransform && inputSystem.label.textTransform !== "none") {
     labelRules.push(`text-transform: ${inputSystem.label.textTransform}`);
@@ -52734,67 +52865,6 @@ function generateDefaultInputSystem(theme) {
   };
 }
 
-// ../theme-core/src/interactive/generateBaseCSS.ts
-var FONT_WEIGHT_MAP2 = {
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-function generateBaseInteractiveCSS(options) {
-  const {
-    typography,
-    padding,
-    borderRadius,
-    includeTransition = true,
-    includeFlexCenter = false,
-    borderWidth
-  } = options;
-  const rules = [];
-  if (typography.fontWeight !== void 0) {
-    const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP2[typography.fontWeight];
-    rules.push(`font-weight: ${weight};`);
-  }
-  if (typography.typography === "heading") {
-    rules.push(`font-family: var(--font-heading);`);
-    rules.push(`letter-spacing: var(--ls-heading);`);
-  } else if (typography.typography === "body") {
-    rules.push(`font-family: var(--font-body);`);
-  }
-  if (typography.italic) {
-    rules.push(`font-style: italic;`);
-  }
-  if (typography.textTransform && typography.textTransform !== "none") {
-    rules.push(`text-transform: ${typography.textTransform};`);
-  }
-  if (padding) {
-    if (borderWidth && borderWidth !== "0px") {
-      const paddingParts = padding.split(" ");
-      const verticalPadding = paddingParts[0] || "0.5rem";
-      const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
-      rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
-      rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
-      rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
-      rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
-    } else {
-      rules.push(`padding: ${padding};`);
-    }
-  }
-  if (borderRadius) {
-    rules.push(`border-radius: ${borderRadius};`);
-  }
-  if (includeTransition) {
-    rules.push(`transition: all 200ms ease;`);
-  }
-  if (includeFlexCenter) {
-    rules.push(`display: inline-flex;`);
-    rules.push(`align-items: center;`);
-    rules.push(`justify-content: center;`);
-    rules.push(`cursor: pointer;`);
-  }
-  return rules;
-}
-
 // ../theme-core/src/navigation/generateNavLinkCSS.ts
 function generateNavLinkCSS(options) {
   const { themeId, tokens, theme, style, className } = options;
@@ -52881,14 +52951,7 @@ ${activeSelector} {
 }
 `);
   }
-  cssChunks.push(`
-${selector} * {
-  font-family: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-}
-`);
+  cssChunks.push(generateInteractiveChildInheritanceCSS(selector));
   return cssChunks.join("");
 }
 function buildTextContrastShadow(input) {
@@ -54185,7 +54248,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 { color: rgb(var(--tb-mutedText)); }`);
+${root} .status-muted { ${statusMutedColorDeclaration()} }`);
   cssBlocks.push(`/* Alert containers */
 ${root} .alert {
   padding: 1rem;
@@ -54501,6 +54564,34 @@ ${root} {
   /* Order summary */
   --er-summary-bg: rgba(var(--tb-primary), 0.1);
   --er-summary-border: rgb(var(--tb-border));
+
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's documented
+     Tier 3 vars so existing --er-* overrides keep working unchanged. */
+  --rb-reg-radius: var(--er-radius);
+  --rb-reg-border: var(--er-border);
+  --rb-reg-border-hover: var(--er-border-hover);
+  --rb-reg-border-selected: var(--er-border-selected);
+  --rb-reg-bg-selected: var(--er-payment-bg-selected);
+  --rb-reg-option-bg: var(--er-control-bg);
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: var(--er-on-surface);
+  --rb-reg-on-surface-muted: var(--er-on-surface-muted);
+  --rb-reg-on-surface-subtle: var(--er-on-surface-subtle);
+  --rb-reg-on-surface-faint: var(--er-on-surface-faint);
+  --rb-reg-check-bg: var(--er-check-bg);
+  --rb-reg-check-text: var(--er-check-text);
+  --rb-reg-step-active: var(--er-step-active);
+  --rb-reg-step-completed: var(--er-step-completed);
+  --rb-reg-step-inactive: var(--er-step-inactive);
+  --rb-reg-step-text: var(--er-step-text);
+  --rb-reg-step-text-active: var(--er-step-text-active);
+  --rb-reg-step-connector: var(--er-step-connector);
+  --rb-reg-summary-bg: var(--er-surface-muted);
+  --rb-reg-summary-border: var(--er-border);
+  --rb-reg-focus-ring: var(--er-focus-ring);
+  --rb-reg-shell-line: var(--er-shell-line);
 }
 `;
 }
@@ -54633,25 +54724,40 @@ ${root} {
   --ab-info-bg: rgba(var(--tb-info), 0.1);
   --ab-info-text: rgb(var(--tb-info));
 
-  /* Loading/muted states */
+  /* Muted summary state */
   --ab-muted-bg: rgba(var(--tb-text), 0.05);
-  --ab-muted-text: rgba(var(--tb-text), 0.6);
-  --ab-spinner-color: rgb(var(--tb-primary));
 
-  /* Form elements */
-  --ab-input-border: rgb(var(--tb-border));
+  /* Focus ring used by shared registration-surface controls */
   --ab-input-focus-ring: rgba(var(--tb-primary), 0.3);
 
-  /* Buttons */
-  --ab-btn-primary-bg: rgb(var(--tb-primary));
-  --ab-btn-primary-text: rgb(var(--tb-background));
-  --ab-btn-primary-hover: rgba(var(--tb-primary), 0.9);
-  --ab-btn-secondary-border: rgb(var(--tb-border));
-  --ab-btn-secondary-hover: rgba(var(--tb-text), 0.05);
-
-  /* Text opacity levels */
-  --ab-text-muted-opacity: 0.6;
-  --ab-text-faint-opacity: 0.4;
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's Tier 3 vars
+     (palette tokens where no --ab-* var exists) so --ab-* overrides keep
+     working as the block adopts the shared classes. */
+  --rb-reg-radius: var(--ab-card-radius, var(--rb-block-radius));
+  --rb-reg-border: var(--ab-card-border);
+  --rb-reg-border-hover: var(--ab-card-border-hover);
+  --rb-reg-border-selected: var(--ab-card-border-selected);
+  --rb-reg-bg-selected: var(--ab-card-bg-selected);
+  --rb-reg-option-bg: transparent;
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
+  --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --rb-reg-check-bg: var(--ab-check-bg);
+  --rb-reg-check-text: var(--ab-check-text);
+  --rb-reg-step-active: rgb(var(--tb-primary));
+  --rb-reg-step-completed: rgb(var(--tb-success));
+  --rb-reg-step-inactive: rgb(var(--tb-mutedText));
+  --rb-reg-step-text: rgb(255 255 255);
+  --rb-reg-step-text-active: rgb(var(--tb-primaryText, 255 255 255));
+  --rb-reg-step-connector: rgba(var(--tb-border), 0.5);
+  --rb-reg-summary-bg: var(--ab-muted-bg);
+  --rb-reg-summary-border: var(--ab-card-border);
+  --rb-reg-focus-ring: var(--ab-input-focus-ring);
+  --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
 }
 `;
 }
@@ -54942,6 +55048,35 @@ ${root} {
   /* Summary */
   --cr-summary-bg: rgba(var(--tb-primary), 0.1);
   --cr-summary-border: rgb(var(--tb-border));
+
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's Tier 3 vars
+     (palette tokens where no --cr-* var exists) so existing --cr-* overrides
+     keep working unchanged. */
+  --rb-reg-radius: var(--rb-block-radius);
+  --rb-reg-border: var(--cr-border);
+  --rb-reg-border-hover: var(--cr-border-hover);
+  --rb-reg-border-selected: var(--cr-border-selected);
+  --rb-reg-bg-selected: var(--cr-payment-bg-selected);
+  --rb-reg-option-bg: rgb(var(--tb-background));
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: var(--cr-on-surface);
+  --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --rb-reg-check-bg: var(--cr-check-bg);
+  --rb-reg-check-text: var(--cr-check-text);
+  --rb-reg-step-active: var(--cr-step-active);
+  --rb-reg-step-completed: var(--cr-step-completed);
+  --rb-reg-step-inactive: var(--cr-step-inactive);
+  --rb-reg-step-text: var(--cr-step-text);
+  --rb-reg-step-text-active: var(--cr-step-text-active);
+  --rb-reg-step-connector: var(--cr-step-connector);
+  --rb-reg-summary-bg: var(--cr-summary-bg);
+  --rb-reg-summary-border: var(--cr-summary-border);
+  --rb-reg-focus-ring: var(--cr-focus-ring);
+  --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
 }
 `;
 }
@@ -56221,6 +56356,8 @@ var MemoBlockSection = React6.memo(
           occurrenceContext: dataContext?.occurrenceContext ?? null,
           entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
           contentEntry: dataContext?.contentEntry ?? null,
+          pageSurface: dataContext?.pageSurface ?? null,
+          subject: dataContext?.subject ?? null,
           supabaseUrl: dataContext?.supabaseUrl,
           imageResolveContext: resolvedImageResolveContext,
           blockId: block.id ?? null,
@@ -56349,6 +56486,8 @@ var MemoBlockSection = React6.memo(
         occurrenceContext: dataContext?.occurrenceContext ?? null,
         entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
         contentEntry: dataContext?.contentEntry ?? null,
+        pageSurface: dataContext?.pageSurface ?? null,
+        subject: dataContext?.subject ?? null,
         supabaseUrl: dataContext?.supabaseUrl,
         imageResolveContext: resolvedImageResolveContext,
         blockId: block.id ?? null,
@@ -56376,7 +56515,9 @@ var MemoBlockSection = React6.memo(
             // Occurrence and content entry context for template pages
             occurrenceContext: dataContext?.occurrenceContext ?? null,
             entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
-            contentEntry: dataContext?.contentEntry ?? null
+            contentEntry: dataContext?.contentEntry ?? null,
+            pageSurface: dataContext?.pageSurface ?? null,
+            subject: dataContext?.subject ?? null
           }
         };
         const blockBindings = block.bindings;
@@ -59721,13 +59862,36 @@ var containerResponsiveThemeCss = `/*
  */
 
 /* =============================================================================
- * Shared: Registration Terminal State Icons
- * Used by event-registration and course-registration blocks.
+ * Shared: Registration Surface (issue 1174)
+ *
+ * Wizard-surface primitives shared by the event-registration,
+ * course-registration and appointment-booking blocks: surface container,
+ * selectable option cards, step indicator, wizard actions row, on-surface
+ * text ramp, layout stacks, summary box and skeleton shell lines.
+ *
+ * Uses:
+ * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks
+ * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;
+ *   canonical name list in blocks/registrationSurfaceVars.ts)
+ *
+ * Defaults intentionally match the event-registration (issue 1089) values; blocks
+ * that need to preserve a different look override in their own block CSS,
+ * which is imported after this file (cascade order is the override contract \u2014
+ * all selectors here are zero-specificity \`:where()\`).
  *
- * Layout rules only \u2014 block-specific colors are defined in each block's CSS
- * via scoped \`.rb-state-icon--{variant}\` rules.
+ * Layout-only \`.rb-state-icon\` rules (formerly registration-shared.css) live
+ * here too; block CSS provides the \`.rb-state-icon--{variant}\` colors.
+ *
+ * Naming: component-like primitives follow the existing bare \`rb-\` shared
+ * precedent (\`.rb-state-icon\`, \`.rb-tile\`): \`.rb-option-card\`, \`.rb-step-*\`,
+ * \`.rb-wizard-actions\`, \`.rb-on-surface\`, \`.rb-shell-*\`. Container/layout
+ * pieces that would otherwise collide with the global \`.rb-*\` utility layer
+ * are namespaced \`rb-reg-*\` (\`.rb-reg-surface\`, \`.rb-reg-stack\`, ...). All of
+ * them are scoped to the three registration blocks either way.
  * ============================================================================= */
 
+/* Terminal state icon (layout only \u2014 colors are per-block) */
 :where(.theme-scope) .rb-state-icon {
   width: 4rem;
   height: 4rem;
@@ -59743,112 +59907,346 @@ var containerResponsiveThemeCss = `/*
   height: 2rem;
 }
 
-/* =============================================================================
- * Block: Event Registration (pilot #76)
- * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
- * =============================================================================
- */
-
-:where(.theme-scope) :where([data-block="event-registration"]) {
-  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
-  --rb-event-tile-bg: var(--er-event-card-bg);
-  --rb-event-tile-border: var(--er-border);
-  --rb-event-tile-border-width: var(--er-event-card-border-width);
-  --rb-event-tile-border-hover: var(--er-border-hover);
-  --rb-event-tile-border-selected: var(--er-border-selected);
-  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);
-  --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);
-  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
-  --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
-  --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
-  --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
-  --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);
-  --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
-}
-
-/* Container */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--er-border);
+/* Surface container */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
   padding: clamp(1rem, 2vw, 1.5rem);
-  background: rgb(var(--tb-surface));
-  color: var(--er-on-surface);
-  transition: border-color var(--rb-block-transition) ease;
+  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))));
+  transition: border-color var(--rb-block-transition, 150ms) ease;
   width: 100%;
   max-width: 800px;
   margin-inline: 0;
 }
 
-/* SSR shell / required-island fallback */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
-  min-height: 24rem;
+/* Selectable option card */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-option-bg, transparent);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--rb-block-transition, 150ms) ease,
+              background-color var(--rb-block-transition, 150ms) ease,
+              box-shadow var(--rb-block-transition, 150ms) ease;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__steps {
-  margin-bottom: 1.25rem;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:hover:not(:disabled):not([aria-disabled="true"]) {
+  border-color: var(--rb-reg-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
+  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08));
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__eyebrow {
-  margin: 0 0 0.35rem;
-  color: var(--er-on-surface-subtle);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  line-height: 1.2;
-  text-transform: uppercase;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:focus-visible {
+  outline: 2px solid var(--rb-reg-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+  outline-offset: 2px;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__title {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--selected {
+  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+  background-color: var(--rb-reg-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.08));
+  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled:hover {
+  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  box-shadow: none;
+}
+
+/* Check indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+/* Step indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps-nav {
+  margin-bottom: 1.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
   margin: 0;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__copy {
-  margin: 0.35rem 0 0;
-  max-width: 36rem;
-  line-height: 1.45;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__cards {
-  margin-top: 0.25rem;
-  overflow: hidden;
-  border: 1px solid var(--er-border);
-  border-radius: var(--rb-block-radius);
-  background: var(--er-control-bg);
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--rb-reg-step-inactive, rgb(var(--tb-mutedText, 100 116 139)));
+  color: var(--rb-reg-step-text, rgb(var(--tb-primaryForeground, 255 255 255)));
+  transition: background-color var(--rb-block-transition, 150ms) ease;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__card {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--active {
+  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--completed {
+  background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-check {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-connector {
+  width: 2rem;
+  height: 2px;
+  background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+  font-size: 0.75rem;
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  display: none;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label--active {
+  font-weight: 500;
+}
+
+@container rb-site (min-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+    display: inline;
+  }
+}
+}
+
+/* Wizard actions row */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+/* When there's only one action (no back button), push it to the right */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions > :only-child {
+  margin-inline-start: auto;
+}
+
+/* On-surface text ramp */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface {
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--muted {
+  color: var(--rb-reg-on-surface-muted, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.7));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--subtle {
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--faint {
+  color: var(--rb-reg-on-surface-faint, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.5));
+}
+
+/* Layout stacks */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack--sm {
+  gap: 0.75rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row--between {
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-grid {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.75rem;
+}
+
+/* Summary box */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-summary {
   padding: 1rem;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);
+  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));
+  background: var(--rb-reg-summary-bg, rgba(var(--tb-muted, 241 245 249), 0.42));
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line {
+/* Skeleton shell lines */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line {
   height: 0.75rem;
   border-radius: 9999px;
   background: linear-gradient(
     90deg,
-    var(--er-shell-line),
-    rgba(var(--tb-primary), 0.12),
-    var(--er-shell-line)
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22)),
+    rgba(var(--tb-primary, 17 24 39), 0.12),
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22))
   );
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--lg {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--lg {
   width: min(26rem, 82%);
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--md {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--md {
   width: min(19rem, 68%);
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--sm {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--sm {
   width: min(14rem, 52%);
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--xs {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--xs {
   width: min(10rem, 42%);
 }
 
+/* Skeleton block (rectangular placeholder, pulses) */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22));
+  animation: rb-reg-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes rb-reg-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+    animation: none;
+  }
+}
+
+/* =============================================================================
+ * Block: Event Registration (pilot #76)
+ * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
+ * =============================================================================
+ */
+
+:where(.theme-scope) :where([data-block="event-registration"]) {
+  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
+  --rb-event-tile-bg: var(--er-event-card-bg);
+  --rb-event-tile-border: var(--er-border);
+  --rb-event-tile-border-width: var(--er-event-card-border-width);
+  --rb-event-tile-border-hover: var(--er-border-hover);
+  --rb-event-tile-border-selected: var(--er-border-selected);
+  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);
+  --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);
+  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
+  --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);
+  --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
+}
+
+/* Container: styled by the shared .rb-reg-surface (registration-surface.css);
+   .er-container remains in markup as a hook and for the overlay/embedded
+   variants below. */
+
+/* SSR shell / required-island fallback */
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
+  min-height: 24rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__steps {
+  margin-bottom: 1.25rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__eyebrow {
+  margin: 0 0 0.35rem;
+  color: var(--er-on-surface-subtle);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__title {
+  margin: 0;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__copy {
+  margin: 0.35rem 0 0;
+  max-width: 36rem;
+  line-height: 1.45;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__cards {
+  margin-top: 0.25rem;
+  overflow: hidden;
+  border: 1px solid var(--er-border);
+  border-radius: var(--rb-block-radius);
+  background: var(--er-control-bg);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__card {
+  display: grid;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+/* Shell skeleton lines: styled by the shared .rb-shell-line family
+   (registration-surface.css); legacy classes remain in markup as hooks. */
+
 :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__summary {
   align-items: center;
   border-radius: calc(var(--rb-block-radius) * 0.75);
@@ -59924,13 +60322,8 @@ var containerResponsiveThemeCss = `/*
   color: var(--er-capacity-soldout-text);
 }
 
-/* Selected event summary */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-event-summary {
-  padding: 1rem;
-  border-radius: calc(var(--rb-block-radius) * 0.75);
-  border: 1px solid var(--er-border);
-  background: var(--er-surface-muted);
-}
+/* Selected event summary: superseded by the shared .rb-reg-summary
+   (registration-surface.css); no markup emitted .er-event-summary anymore. */
 
 /* Ticket counter */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-ticket-counter-group {
@@ -60136,7 +60529,7 @@ var containerResponsiveThemeCss = `/*
   opacity: 1;
 }
 
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--success {
   background: var(--er-success-bg);
   color: var(--er-success-text);
@@ -60292,16 +60685,8 @@ var containerResponsiveThemeCss = `/*
   text-align: center;
 }
 
-/* Layout */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack--sm {
-  gap: 0.75rem;
-}
+/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row
+   (registration-surface.css); legacy classes remain in markup as hooks. */
 
 /* Event/date selection rows */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
@@ -60310,17 +60695,6 @@ var containerResponsiveThemeCss = `/*
   gap: 0;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row--between {
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
 :where(.theme-scope) :where([data-block="event-registration"]) .er-center {
   text-align: center;
   padding: 2rem;
@@ -60332,18 +60706,8 @@ var containerResponsiveThemeCss = `/*
   margin-bottom: 1rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 1.5rem;
-}
-
-/* When there's only one button (no back), push to the right */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions > :only-child {
-  margin-inline-start: auto;
-}
+/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);
+   .er-actions remains in markup as a hook. */
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-button-with-spinner {
   display: inline-flex;
@@ -60595,23 +60959,8 @@ var containerResponsiveThemeCss = `/*
   color: var(--er-on-surface-faint);
 }
 
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background: var(--er-check-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--er-check-text);
-}
+/* Checkmark indicator: styled by the shared .rb-option-check
+   (registration-surface.css); .er-check remains in markup as a hook. */
 
 /* Payment summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-summary {
@@ -60659,78 +61008,12 @@ var containerResponsiveThemeCss = `/*
   margin-bottom: 1.5rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: var(--er-step-inactive);
-  color: var(--er-step-text);
-  transition: background-color var(--rb-block-transition) ease;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--active {
-  background: var(--er-step-active);
-  color: var(--er-step-text-active);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--completed {
-  background: var(--er-step-completed);
-  color: var(--er-step-text-active);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-check {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector {
-  width: 2rem;
-  height: 2px;
-  background: var(--er-step-connector);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector--completed {
-  background: var(--er-step-connector);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-  font-size: 0.75rem;
-  color: var(--er-on-surface);
-  display: none;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label--active {
-  font-weight: 500;
-}
-
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-    display: inline;
-  }
-}
-}
+/* Step indicator internals: styled by the shared .rb-steps / .rb-step-*
+   family (registration-surface.css) via the --rb-reg-step-* mappings in the
+   event-registration var generator; er-* classes remain in markup as hooks.
+   Note: .er-steps-nav above is intentionally retained \u2014 its source position
+   keeps the wizard's 1.5rem step margin winning over the SSR shell's
+   1.25rem .er-registration-shell__steps override. */
 
 /* Sticky order summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
@@ -62963,295 +63246,420 @@ var containerResponsiveThemeCss = `/*
 
 /* =============================================================================
  * Block: Appointment Booking
+ *
+ * Structural styling comes from the shared registration-surface layer
+ * (registration-surface.css): surface container, option cards + check,
+ * step indicator, wizard actions, on-surface text ramp, stacks, summary box
+ * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped
+ * from this block's --ab-* Tier 3 vars by its var generator.
+ *
+ * Inputs use the theme-generated form-* classes; feedback boxes use the
+ * theme-generated alert / alert-{tone} classes. Only genuinely
+ * booking-specific rules live here.
+ *
  * Uses:
- * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)
- * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Tier 1 vars: --tb-* (from theme palette)
  * - Tier 3 vars: --ab-* (from appointment-booking var generator)
  * =============================================================================
  */
 
-/* Main container */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-container {
-  width: 100%;
+/* Typography helpers */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
-/* Stack layout utilities */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--sm {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
+  font-size: 0.875rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--xs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--sm {
+  font-size: 0.75rem;
 }
 
-/* Row layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+/* Centered state (loading / terminal panels) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
+  text-align: center;
+  padding: 2rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row--between {
-  justify-content: space-between;
+/* Terminal state title (below the state icon) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-terminal-title {
+  margin: 0.75rem 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+/* State icon color variants (layout from registration-surface.css) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--success {
+  background: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
+  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
+}
+
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--error {
+  background: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
+  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
 }
 
-/* Grid layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-grid {
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--info {
+  background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
+  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
+}
+
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--warning {
+  background: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
+  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
+}
+
+/* Payment option summary rows (label/value lines inside an option card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-option-rows {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.125rem;
 }
 
-/* Center layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
-  text-align: center;
-  padding: 2rem;
+/* Date/time pill grids (selection pills extend .rb-option-card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-/* Typography */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
-  font-size: 1.5rem;
-  font-weight: 700;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-date-pill {
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.5rem 0.875rem;
+  min-width: 4.25rem;
+  text-align: center;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-time-pill {
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.875rem;
+  min-width: 5.5rem;
   font-size: 0.875rem;
   font-weight: 500;
+  text-align: center;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
-  font-size: 0.875rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-caption {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--sm {
-  font-size: 0.75rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.2;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
-  opacity: var(--ab-text-muted-opacity, 0.6);
+/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell {
+  min-height: 18rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
-  opacity: var(--ab-text-faint-opacity, 0.4);
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell-button {
+  display: inline-flex;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);
+  background: rgb(var(--tb-primary, 17 24 39));
+  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
 }
 
-/* Selection cards (service, resource, time slot) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card {
-  position: relative;
-  padding: 1rem;
-  border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  text-align: left;
-  background: transparent;
+/* Inline text-link button (e.g. "Load more dates") */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
+  display: inline;
+  color: rgb(var(--tb-primary, 17 24 39));
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  text-decoration: underline;
   cursor: pointer;
-  transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card:hover {
-  border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link:hover {
+  text-decoration: none;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card--selected {
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));
+/* Altcha wrapper */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
+  margin-top: 1rem;
 }
 
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background-color: var(--ab-check-bg, rgb(var(--tb-primary, 17 24 39)));
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* =============================================================================
+ * Shared: Inline Text Marks
+ * =============================================================================
+ */
+
+:where(.theme-scope) .rb-inline-text-accent,
+:where(.theme-scope) .rb-inline-text-highlight {
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));
+:where(.theme-scope) .rb-inline-text-accent-accent {
+  color: rgb(var(--tb-accent));
 }
 
-/* Info box (service summary) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-info-box {
-  padding: 1rem;
-  border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
+:where(.theme-scope) .rb-inline-text-accent-brand {
+  color: rgb(var(--tb-primary));
 }
 
-/* Alert states */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert {
-  padding: 0.75rem 1rem;
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  font-size: 0.875rem;
+:where(.theme-scope) .rb-inline-text-accent-contrast {
+  color: var(--section-text-color, rgb(var(--tb-text)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--success {
-  background-color: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
-  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
+:where(.theme-scope) .rb-inline-text-highlight {
+  border-radius: 0.22em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  padding: 0.02em 0.12em;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--error {
-  background-color: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
-  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
+:where(.theme-scope) .rb-inline-text-highlight-soft {
+  background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--warning {
-  background-color: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
-  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
+:where(.theme-scope) .rb-inline-text-highlight-accent {
+  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--info {
-  background-color: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
-  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
+:where(.theme-scope) .rb-inline-text-highlight-brand {
+  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);
 }
 
-/* Form elements */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
+/* =============================================================================
+ * Block: Hero (Phase 2)
+ * Uses theme palette vars directly (no Tier 3 vars needed)
+ * =============================================================================
+ */
+
+/* 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)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-required {
-  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
-  margin-left: 0.125rem;
+/* Subheadline - supporting text below headline */
+:where(.theme-scope) :where([data-block="hero"]) .hero-headline {
+  text-wrap: balance;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));
-  background: transparent;
-  font-size: 0.875rem;
-  transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;
+: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))));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea:focus {
-  outline: none;
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+@container rb-site (min-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
+    font-size: 1.25rem;
+  }
+}
 }
 
-/* Buttons */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1.5rem;
-  border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;
+/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-headline {
+  font-size: clamp(2rem, 4vw, 3rem);
+  line-height: 1.12;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary {
-  flex: 1;
-  background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));
-  color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));
-  border: none;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-subheadline {
+  font-size: clamp(1rem, 1.2vw, 1.25rem);
+  line-height: 1.55;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary:hover:not(:disabled) {
-  background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-headline {
+  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
+  line-height: 1.06;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary {
-  background: transparent;
-  border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-subheadline {
+  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
+  line-height: 1.55;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary:hover:not(:disabled) {
-  background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline {
+  font-size: clamp(3.5rem, 7.2vw, 6.25rem);
+  line-height: 1;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link {
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: underline;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-subheadline {
+  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
+  line-height: 1.5;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link:hover {
-  text-decoration: none;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline {
+  font-size: clamp(4.25rem, 10vw, 8.5rem);
+  line-height: 0.94;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-subheadline {
+  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
+  line-height: 1.45;
 }
 
-/* Actions row */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-actions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {
+  font-size: clamp(3.5rem, 7.5vw, 6.5rem);
 }
 
-/* Skeleton loading */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-skeleton {
-  height: 2.5rem;
-  width: 100%;
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  animation: ab-pulse 1.5s ease-in-out infinite;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
+  font-size: clamp(3rem, 6vw, 5.25rem);
+  line-height: 1.02;
 }
 
-@keyframes ab-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
+@container rb-site (max-width: 639px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
+    font-size: clamp(2.5rem, 11vw, 3.5rem);
+    line-height: 1.05;
   }
 }
+}
 
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-field {
+/* =============================================================================
+ * Shared: Heading Group (used by CTA, single-button, etc.)
+ * =============================================================================
+ */
+
+/* Eyebrow - color only (typography via .rb-eyebrow) */
+:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {
+  color: rgb(var(--tb-mutedText));
+}
+
+/* =============================================================================
+ * Block: CTA (Phase 2)
+ * =============================================================================
+ */
+
+/* CTA content/body text */
+:where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
+  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+}
+
+/* CTA button row container */
+:where(.theme-scope) :where([data-block="cta-full"]) .cta-row {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
-/* Altcha wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
-  margin-top: 1rem;
+/* =============================================================================
+ * Block: Body Text (content block, Phase 2)
+ *
+ * Style contract:
+ * - Variant styling is keyed off \`data-block-variant\` on the PageRenderer wrapper.
+ * - Prose sizing comes from \`rb-prose-*\` (theme-aware) in \`packages/blocks/src/theme/styles.css\`.
+ * =============================================================================
+ */
+
+/* Body copy rich text container */
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container {
+  max-width: 48rem;
+  margin-left: 0;
+  margin-right: auto;
 }
 
-/* Link button (inline text link) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
-  display: inline;
-  margin-left: 0.5rem;
-  color: rgb(var(--tb-primary, 17 24 39));
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  text-decoration: underline;
-  cursor: pointer;
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container.rb-items-center {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link:hover {
-  text-decoration: none;
+/* Body copy rich text */
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body {
+  color: inherit;
+}
+
+/* Ensure editing mode doesn't silently change typography inside ProseMirror */
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body :where(.ProseMirror) {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* Variant: Intro (centered, wider container, larger text, relaxed leading) */
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-container {
+  max-width: 60rem;
+}
+
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
+  font-size: var(--rb-prose-lg-font-size);
+  line-height: var(--rb-prose-lg-line-height);
+}
+
+@container rb-site (min-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
+    font-size: var(--rb-prose-xl-sm-font-size);
+    line-height: var(--rb-prose-xl-sm-line-height);
+  }
+}
+}
+
+/* Variant: Narrow (left-aligned, shorter line length) */
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="narrow"]) .body-copy-container {
+  max-width: 34rem;
+  margin-left: 0;
+  margin-right: auto;
+}
+
+/* Override prose sizing via theme-aware vars (see styles.css) */
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) {
+  /* Mobile-first: use rb-prose-lg sizing below 640px */
+  --rb-prose-lg-font-size: clamp(
+    calc(var(--fs-body, 16px) * 1.35),
+    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),
+    calc(var(--fs-body, 16px) * 1.6)
+  );
+  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);
+
+  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */
+  --rb-prose-xl-sm-font-size: clamp(
+    calc(var(--fs-body, 16px) * 1.55),
+    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),
+    calc(var(--fs-body, 16px) * 1.8)
+  );
+  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);
+}
+
+/* =============================================================================
+ * Block: Form (formCopy fragment, Phase 2)
+ * =============================================================================
+ */
+
+/* Form title */
+:where(.theme-scope) :where([data-block="form"]) .form-copy-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+/* 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)));
 }
 
 /* =============================================================================
@@ -63341,261 +63749,6 @@ var containerResponsiveThemeCss = `/*
   margin-top: 0.5rem;
 }
 
-/* =============================================================================
- * Shared: Inline Text Marks
- * =============================================================================
- */
-
-:where(.theme-scope) .rb-inline-text-accent,
-:where(.theme-scope) .rb-inline-text-highlight {
-  font: inherit;
-  letter-spacing: inherit;
-  text-transform: inherit;
-}
-
-:where(.theme-scope) .rb-inline-text-accent-accent {
-  color: rgb(var(--tb-accent));
-}
-
-:where(.theme-scope) .rb-inline-text-accent-brand {
-  color: rgb(var(--tb-primary));
-}
-
-:where(.theme-scope) .rb-inline-text-accent-contrast {
-  color: var(--section-text-color, rgb(var(--tb-text)));
-}
-
-:where(.theme-scope) .rb-inline-text-highlight {
-  border-radius: 0.22em;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-  padding: 0.02em 0.12em;
-}
-
-:where(.theme-scope) .rb-inline-text-highlight-soft {
-  background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
-}
-
-:where(.theme-scope) .rb-inline-text-highlight-accent {
-  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);
-}
-
-:where(.theme-scope) .rb-inline-text-highlight-brand {
-  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);
-}
-
-/* =============================================================================
- * Block: Hero (Phase 2)
- * Uses theme palette vars directly (no Tier 3 vars needed)
- * =============================================================================
- */
-
-/* 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)));
-}
-
-/* Subheadline - supporting text below headline */
-:where(.theme-scope) :where([data-block="hero"]) .hero-headline {
-  text-wrap: balance;
-}
-
-: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))));
-}
-
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
-    font-size: 1.25rem;
-  }
-}
-}
-
-/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-headline {
-  font-size: clamp(2rem, 4vw, 3rem);
-  line-height: 1.12;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-subheadline {
-  font-size: clamp(1rem, 1.2vw, 1.25rem);
-  line-height: 1.55;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-headline {
-  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
-  line-height: 1.06;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-subheadline {
-  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
-  line-height: 1.55;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline {
-  font-size: clamp(3.5rem, 7.2vw, 6.25rem);
-  line-height: 1;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-subheadline {
-  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
-  line-height: 1.5;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline {
-  font-size: clamp(4.25rem, 10vw, 8.5rem);
-  line-height: 0.94;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-subheadline {
-  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
-  line-height: 1.45;
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {
-  font-size: clamp(3.5rem, 7.5vw, 6.5rem);
-}
-
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
-  font-size: clamp(3rem, 6vw, 5.25rem);
-  line-height: 1.02;
-}
-
-@container rb-site (max-width: 639px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline,
-  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline,
-  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
-  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
-    font-size: clamp(2.5rem, 11vw, 3.5rem);
-    line-height: 1.05;
-  }
-}
-}
-
-/* =============================================================================
- * Shared: Heading Group (used by CTA, single-button, etc.)
- * =============================================================================
- */
-
-/* Eyebrow - color only (typography via .rb-eyebrow) */
-:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {
-  color: rgb(var(--tb-mutedText));
-}
-
-/* =============================================================================
- * Block: CTA (Phase 2)
- * =============================================================================
- */
-
-/* CTA content/body text */
-:where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
-  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
-}
-
-/* CTA button row container */
-:where(.theme-scope) :where([data-block="cta-full"]) .cta-row {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/* =============================================================================
- * Block: Body Text (content block, Phase 2)
- *
- * Style contract:
- * - Variant styling is keyed off \`data-block-variant\` on the PageRenderer wrapper.
- * - Prose sizing comes from \`rb-prose-*\` (theme-aware) in \`packages/blocks/src/theme/styles.css\`.
- * =============================================================================
- */
-
-/* Body copy rich text container */
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container {
-  max-width: 48rem;
-  margin-left: 0;
-  margin-right: auto;
-}
-
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container.rb-items-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Body copy rich text */
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body {
-  color: inherit;
-}
-
-/* Ensure editing mode doesn't silently change typography inside ProseMirror */
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body :where(.ProseMirror) {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-/* Variant: Intro (centered, wider container, larger text, relaxed leading) */
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-container {
-  max-width: 60rem;
-}
-
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
-  font-size: var(--rb-prose-lg-font-size);
-  line-height: var(--rb-prose-lg-line-height);
-}
-
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
-    font-size: var(--rb-prose-xl-sm-font-size);
-    line-height: var(--rb-prose-xl-sm-line-height);
-  }
-}
-}
-
-/* Variant: Narrow (left-aligned, shorter line length) */
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="narrow"]) .body-copy-container {
-  max-width: 34rem;
-  margin-left: 0;
-  margin-right: auto;
-}
-
-/* Override prose sizing via theme-aware vars (see styles.css) */
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) {
-  /* Mobile-first: use rb-prose-lg sizing below 640px */
-  --rb-prose-lg-font-size: clamp(
-    calc(var(--fs-body, 16px) * 1.35),
-    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),
-    calc(var(--fs-body, 16px) * 1.6)
-  );
-  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);
-
-  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */
-  --rb-prose-xl-sm-font-size: clamp(
-    calc(var(--fs-body, 16px) * 1.55),
-    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),
-    calc(var(--fs-body, 16px) * 1.8)
-  );
-  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);
-}
-
-/* =============================================================================
- * Block: Form (formCopy fragment, Phase 2)
- * =============================================================================
- */
-
-/* Form title */
-:where(.theme-scope) :where([data-block="form"]) .form-copy-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-/* 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)));
-}
-
 /* =============================================================================
  * Block-Level Override Utilities
  *
@@ -65212,14 +65365,11 @@ var containerResponsiveThemeCss = `/*
   --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);
 }
 
-/* Container */
+/* Container: base styling comes from the shared .rb-reg-surface
+   (registration-surface.css); these overrides preserve course
+   registration's pre-extraction look (fixed padding, centered). */
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--cr-border);
   padding: 1.5rem;
-  background: rgb(var(--tb-surface));
-  color: var(--cr-on-surface);
-  max-width: 50rem; /* 800px */
   margin-inline: auto;
 }
 
@@ -65896,7 +66046,7 @@ var containerResponsiveThemeCss = `/*
   padding: 2rem 1rem;
 }
 
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--success {
   background: var(--cr-success-bg);
   color: var(--cr-success-text);
@@ -69795,6 +69945,10 @@ var MultiPageUpdateResponse = z76.object({
 function isSupportedLoaderEndpoint2(endpoint) {
   return SUPPORTED_LOADER_ENDPOINTS.includes(endpoint);
 }
+var defaultPrefetchBlockDataDeps = {
+  prefetchBlockDataCore: prefetchBlockData,
+  normalizeLoaderParams
+};
 var ENTRY_REF_KEYS = [
   "identifier",
   "entryIdentifier",
@@ -70057,18 +70211,27 @@ async function getPublicWeeklySlotAvailability({ client, params }) {
   });
 }
 async function prefetchBlockData2(page, context, client, options) {
+  return prefetchBlockDataWithDeps(
+    defaultPrefetchBlockDataDeps,
+    page,
+    context,
+    client,
+    options
+  );
+}
+async function prefetchBlockDataWithDeps(deps, page, context, client, options) {
   const { customBlocks } = options ?? {};
   const customBlockMap = new Map(
     (customBlocks ?? []).map((block) => [block.id, block])
   );
-  return prefetchBlockData(page, context, {
+  return deps.prefetchBlockDataCore(page, context, {
     apiClient: async ({ endpoint, params }) => {
       if (!isSupportedLoaderEndpoint2(endpoint)) {
         throw new Error(
           `Unsupported loader endpoint: ${endpoint}. SDK only supports: ${SUPPORTED_LOADER_ENDPOINTS.join(", ")}`
         );
       }
-      const resolvedParams = normalizeLoaderParams(endpoint, params, context);
+      const resolvedParams = deps.normalizeLoaderParams(endpoint, params, context);
       return await loaderAdapters[endpoint]({ client, params: resolvedParams });
     },
     isValidEndpoint: isSupportedLoaderEndpoint2,
@@ -70528,12 +70691,18 @@ function selectBlocksForDeclaredEntrySlot(input) {
 }
 
 // src/rendering/helpers/loadContent.ts
+var defaultLoadContentDeps = {
+  prefetchBlockData: prefetchBlockData2
+};
 function isPageContent(result) {
   return result.type === "page";
 }
 function isEntryContent(result) {
   return result.type === "entry";
 }
+function isPageSurfaceContent(result) {
+  return result.type === "pageSurface";
+}
 function isContentLoadNotFoundError(error) {
   if (typeof error !== "object" || error === null || !("status" in error)) {
     return false;
@@ -70544,6 +70713,9 @@ function getRejectedReason(result) {
   return result.reason;
 }
 async function loadContent(params) {
+  return loadContentWithDeps(defaultLoadContentDeps, params);
+}
+async function loadContentWithDeps(deps, params) {
   const {
     client,
     siteId,
@@ -70572,7 +70744,7 @@ async function loadContent(params) {
   }
   const site = siteResult.value;
   const contentResponse = contentResult.value;
-  return loadContentFromContentResponse({
+  return loadContentFromContentResponseWithDeps(deps, {
     client,
     siteId,
     site,
@@ -70580,8 +70752,14 @@ async function loadContent(params) {
     preview
   });
 }
-async function loadContentFromContentResponse(params) {
-  const { client, siteId, site, contentResponse, preview = false } = params;
+async function loadContentFromContentResponseWithDeps(deps, params) {
+  const {
+    client,
+    siteId,
+    site,
+    contentResponse,
+    preview = false
+  } = params;
   const support = buildSiteRenderSupport(
     site,
     collectMediaAssetSidecar(contentResponse.mediaAssets)
@@ -70611,6 +70789,7 @@ async function loadContentFromContentResponse(params) {
       entry,
       { siteId, preview },
       client,
+      deps,
       { customBlocks: support.customBlocks }
     );
     return {
@@ -70682,6 +70861,7 @@ async function loadContentFromContentResponse(params) {
       pagePurpose: "page-surface-template",
       context: { siteId, preview },
       client,
+      deps,
       options: { customBlocks: support.customBlocks }
     });
     return {
@@ -70724,7 +70904,7 @@ async function loadContentFromContentResponse(params) {
     purpose: pageData.purpose,
     blocks: pageData.blocks
   });
-  const resolvedData = await prefetchBlockData2(
+  const resolvedData = await deps.prefetchBlockData(
     pageOutline,
     {
       siteId,
@@ -70773,7 +70953,7 @@ function isEntryResponse(response) {
 function isPageSurfaceResponse(response) {
   return response.type === "pageSurface";
 }
-async function processEntryTemplate(templates, entrySlots, entry, context, client, options) {
+async function processEntryTemplate(templates, entrySlots, entry, context, client, deps, options) {
   return processTemplatePage({
     templates,
     slotContent: entrySlots,
@@ -70795,6 +70975,7 @@ async function processEntryTemplate(templates, entrySlots, entry, context, clien
     pagePurpose: "entry-template",
     context,
     client,
+    deps,
     options
   });
 }
@@ -70815,7 +70996,7 @@ async function processTemplatePage(input) {
     purpose: input.pagePurpose,
     blocks
   };
-  const resolvedData = await prefetchBlockData2(
+  const resolvedData = await input.deps.prefetchBlockData(
     templatePage,
     {
       siteId: input.context.siteId,
@@ -71105,6 +71286,8 @@ function PageContent({
         occurrenceContext: dataContext?.occurrenceContext ?? null,
         entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
         contentEntry: dataContext?.contentEntry ?? null,
+        pageSurface: dataContext?.pageSurface ?? null,
+        subject: dataContext?.subject ?? null,
         editableRouteMetadataFieldIds: dataContext?.editableRouteMetadataFieldIds ?? null,
         previewStage: dataContext?.previewStage,
         supabaseUrl,
@@ -72199,7 +72382,7 @@ var CircuitOpenError = class extends Error {
 };
 
 // src/version.ts
-var SDK_VERSION = "0.98.0";
+var SDK_VERSION = "0.99.0";
 
 // src/next/content-load-failure.ts
 var SdkContentLoadError = RiverbankContentLoadError;
@@ -72418,6 +72601,7 @@ function createCatchAllPage(options) {
     getClient,
     config,
     preview: previewOption,
+    contentContract: contentContractOption = "compat",
     blockOverrides,
     siteUrl,
     beforeRender,
@@ -72431,6 +72615,9 @@ function createCatchAllPage(options) {
   const enablePortal = enablePortalOption ?? config.enablePortal ?? false;
   const preview = previewOption ?? detectPreviewFromClient(getClient);
   const contentTypes = (config.content?.contentTypes ?? []).map(toRoutingInfo);
+  function resolveContentContract(path) {
+    return typeof contentContractOption === "function" ? contentContractOption({ path, preview }) : contentContractOption;
+  }
   async function resolveRequestContext() {
     if (!getRequestContext) return void 0;
     try {
@@ -72484,7 +72671,8 @@ function createCatchAllPage(options) {
             client,
             siteId: config.siteId,
             path: contentPath,
-            preview
+            preview,
+            contentContract: resolveContentContract(contentPath)
           });
           return contentFound(content);
         } catch (error) {
@@ -72621,63 +72809,66 @@ function createCatchAllPage(options) {
       console.warn(themeResult.warning);
     }
     const resolvedTheme = themeResult.theme;
-    let rendered;
-    if (isPageContent(content)) {
+    const renderPageComponent = async (args) => {
       const resolvedBlockOverrides = await resolveBlockOverridesForPage(
         blockOverrides,
-        content.page
+        args.page
       );
-      rendered = /* @__PURE__ */ jsx70(
+      return /* @__PURE__ */ jsx70(
         Page,
         {
-          page: content.page,
+          page: args.page,
           theme: resolvedTheme,
-          siteId: content.siteId,
+          siteId: args.content.siteId,
           apiBaseUrl,
           portalToken,
-          resolvedData: content.resolvedData,
-          bookingOfferingPresets: content.bookingOfferingPresets,
+          resolvedData: args.content.resolvedData,
+          bookingOfferingPresets: args.content.bookingOfferingPresets,
           blockOverrides: resolvedBlockOverrides,
-          sdkConfig: content.sdkConfig,
-          supabaseUrl: content.supabaseUrl,
-          mediaAssets: content.mediaAssets,
+          sdkConfig: args.content.sdkConfig,
+          supabaseUrl: args.content.supabaseUrl,
+          mediaAssets: args.content.mediaAssets,
           themeRuntime,
-          dataContext: {
-            previewStage: preview ? "preview" : "published"
-          }
+          dataContext: args.dataContext
         }
       );
+    };
+    let rendered;
+    if (isPageContent(content)) {
+      rendered = await renderPageComponent({
+        page: content.page,
+        content,
+        dataContext: {
+          previewStage: preview ? "preview" : "published"
+        }
+      });
     } else if (isEntryContent(content)) {
       if (!content.templatePage) {
         return notFound();
       }
-      const resolvedBlockOverrides = await resolveBlockOverridesForPage(
-        blockOverrides,
-        content.templatePage
-      );
-      rendered = /* @__PURE__ */ jsx70(
-        Page,
-        {
-          page: content.templatePage,
-          theme: resolvedTheme,
-          siteId: content.siteId,
-          apiBaseUrl,
-          portalToken,
-          resolvedData: content.resolvedData,
-          bookingOfferingPresets: content.bookingOfferingPresets,
-          blockOverrides: resolvedBlockOverrides,
-          sdkConfig: content.sdkConfig,
-          supabaseUrl: content.supabaseUrl,
-          mediaAssets: content.mediaAssets,
-          themeRuntime,
-          dataContext: {
-            contentEntry: content.dataContext.contentEntry,
-            occurrenceContext,
-            entrySubrouteContext,
-            previewStage: preview ? "preview" : "published"
-          }
+      rendered = await renderPageComponent({
+        page: content.templatePage,
+        content,
+        dataContext: {
+          contentEntry: content.dataContext.contentEntry,
+          occurrenceContext,
+          entrySubrouteContext,
+          previewStage: preview ? "preview" : "published"
         }
-      );
+      });
+    } else if (isPageSurfaceContent(content)) {
+      if (!content.templatePage) {
+        return notFound();
+      }
+      rendered = await renderPageComponent({
+        page: content.templatePage,
+        content,
+        dataContext: {
+          pageSurface: content.dataContext.pageSurface,
+          subject: content.dataContext.subject,
+          previewStage: preview ? "preview" : "published"
+        }
+      });
     } else {
       return notFound();
     }
@@ -72748,6 +72939,9 @@ function createCatchAllPage(options) {
       const page = isPageContent(content) ? content.page : isEntryContent(content) ? {
         name: content.entry.metaTitle ?? content.entry.title,
         purpose: content.entry.metaDescription ?? void 0
+      } : isPageSurfaceContent(content) ? {
+        name: content.pageSurface.metaTitle ?? content.pageSurface.title,
+        purpose: content.pageSurface.metaDescription ?? void 0
       } : { name: "Page" };
       const metadataGenerator = preview ? generatePreviewMetadata : generatePageMetadata;
       const metadataOverrides = getEntrySubrouteMetadataOverrides({
@@ -73689,7 +73883,14 @@ function resolveAuth(config) {
     'Authentication configuration is required. Provide either `auth` (recommended) or `apiKey` (deprecated). For public endpoints without auth, use: { auth: { type: "none" } }'
   );
 }
+var defaultRiverbankClientDeps = {
+  createBearerAPIClient,
+  createInternalAPIClient
+};
 function createRiverbankClient(config) {
+  return createRiverbankClientWithDeps(defaultRiverbankClientDeps, config);
+}
+function createRiverbankClientWithDeps(deps, config) {
   if (!config.baseUrl) {
     throw new Error(
       "baseUrl is required when creating a Riverbank client. Expected format: https://dashboard.example.com/api (must include /api path)"
@@ -73732,7 +73933,7 @@ function createRiverbankClient(config) {
       keyType = "preview";
       break;
   }
-  const baseApiClient = authConfig.type === "none" ? createInternalAPIClient(config.baseUrl) : authConfig.type === "api-key" ? createBearerAPIClient(authConfig.key, config.baseUrl) : createBearerAPIClient(authConfig.token, config.baseUrl);
+  const baseApiClient = authConfig.type === "none" ? deps.createInternalAPIClient(config.baseUrl) : authConfig.type === "api-key" ? deps.createBearerAPIClient(authConfig.key, config.baseUrl) : deps.createBearerAPIClient(authConfig.token, config.baseUrl);
   const apiClient = withDefaultHeaders(baseApiClient, config.defaultHeaders);
   const cache = new SimpleCache({
     maxSize: cacheMaxSize,