@riverbankcms/sdk 0.77.0 → 0.78.0

package/dist/styles/index.css

@@ -136,6 +136,12 @@
   }
 
   /* Display */
+  .rb-min-h-screen {
+    min-height: 100vh;
+  }
+  .rb-min-h-full {
+    min-height: 100%;
+  }
   .rb-block {
     display: block;
   }
@@ -454,9 +460,21 @@
   }
 
   /* Grid */
+  .rb-grid-rows-main-footer {
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
   .rb-grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .rb-row-start-1 {
+    grid-row-start: 1;
+  }
+  .rb-row-start-2 {
+    grid-row-start: 2;
+  }
+  .rb-col-start-1 {
+    grid-column-start: 1;
+  }
   .rb-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -692,6 +710,17 @@
     padding-top: 2.5rem;
     padding-bottom: 2.5rem;
   }
+  :where(.theme-scope)
+    [data-site-document-layout-mode="header-overlay"]
+    [data-rb-reserved-surface].rb-reserved-surface-main {
+    padding-top: calc(var(--rb-reserved-surface-header-offset, 5.5rem) + 2.5rem);
+  }
+  .rb-preview-editor-offset {
+    padding-bottom: calc(
+      var(--builder-editor-chrome-offset, 0px) +
+      var(--builder-preview-banner-offset, 0px)
+    );
+  }
   .rb-py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
@@ -1651,9 +1680,9 @@
 
 
 @layer rb-theme {
-/* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */
-:root {
-  /* --tb-primary: 17 24 39;
+  /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */
+  :root {
+    /* --tb-primary: 17 24 39;
   --tb-text: 17 24 39;
   --tb-muted: 107 114 128;
   --tb-bg: 255 255 255;
@@ -1675,159 +1704,172 @@
 
   --motion-duration: 180ms;
   --motion-ease: cubic-bezier(.2,.8,.2,1); */
-}
+  }
 
-/* -------------------------------------------------------------------------- */
-/* Shared: Modal                                                             */
-/* -------------------------------------------------------------------------- */
+  /* -------------------------------------------------------------------------- */
+  /* Shared: Modal                                                             */
+  /* -------------------------------------------------------------------------- */
 
-:where(.theme-scope) .rb-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--rb-modal-z-index, 20000);
-  display: grid;
-  place-items: center;
-  padding: 1rem;
-  /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */
-  background-color: rgba(0, 0, 0, 0.6);
-  background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));
-}
+  :where(.theme-scope) .rb-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--rb-modal-z-index, 20000);
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+    /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */
+    background-color: rgba(0, 0, 0, 0.6);
+    background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));
+  }
 
-:where(.theme-scope) .rb-modal {
-  width: min(var(--rb-modal-max-width, 560px), 100%);
-  background: var(--rb-modal-bg, rgb(var(--tb-surface)));
-  border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
-  border-radius: var(--rb-modal-radius, var(--radius-card));
-  box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
-}
+  :where(.theme-scope) .rb-modal {
+    width: min(var(--rb-modal-max-width, 560px), 100%);
+    background: var(--rb-modal-bg, rgb(var(--tb-surface)));
+    border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
+    border-radius: var(--rb-modal-radius, var(--radius-card));
+    box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
+  }
 
-:where(.theme-scope) .rb-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 1rem 0.75rem;
-  border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
-}
+  :where(.theme-scope) .rb-modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1rem 0.75rem;
+    border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
+  }
 
-:where(.theme-scope) .rb-modal__title {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: 1.0625rem;
-  font-weight: 600;
-  color: rgb(var(--tb-text));
-}
+  :where(.theme-scope) .rb-modal__title {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: rgb(var(--tb-text));
+  }
 
-:where(.theme-scope) .rb-modal__close {
-  background: transparent;
-  border: none;
-  width: 2.25rem;
-  height: 2.25rem;
-  padding: 0;
-  line-height: 1;
-  color: rgb(var(--tb-mutedText));
-  cursor: pointer;
-  display: grid;
-  place-items: center;
-  border-radius: var(--radius-control);
-}
+  :where(.theme-scope) .rb-modal__close {
+    background: transparent;
+    border: none;
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    line-height: 1;
+    color: rgb(var(--tb-mutedText));
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    border-radius: var(--radius-control);
+  }
 
-:where(.theme-scope) .rb-modal__close:hover {
-  color: rgb(var(--tb-text));
-  background: rgba(var(--tb-border), 0.2);
-}
+  :where(.theme-scope) .rb-modal__close:hover {
+    color: rgb(var(--tb-text));
+    background: rgba(var(--tb-border), 0.2);
+  }
 
-:where(.theme-scope) .rb-modal__close:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
-}
+  :where(.theme-scope) .rb-modal__close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
+  }
 
-:where(.theme-scope) .rb-modal__body {
-  padding: 0.875rem 1rem 1rem;
-  color: rgb(var(--tb-text));
-  font-size: 0.9375rem;
-  line-height: 1.45;
-}
+  :where(.theme-scope) .rb-modal__body {
+    padding: 0.875rem 1rem 1rem;
+    color: rgb(var(--tb-text));
+    font-size: 0.9375rem;
+    line-height: 1.45;
+  }
+
+  /* -------------------------------------------------------------------------- */
+  /* Shared: Site document overlay header clearance                             */
+  /* -------------------------------------------------------------------------- */
+
+  :where(.theme-scope) :where([data-site-document-overlay-content='true']) :where([data-block]):first-of-type > :where([data-slot='section']) > :where(.rb-container) {
+    padding-top: calc(var(--site-overlay-header-clearance, 0px) + var(--site-overlay-opening-content-extra-pad, 0px));
+  }
 
-/* -------------------------------------------------------------------------- */
-/* Header: Mobile nav overlay transitions                                      */
-/* -------------------------------------------------------------------------- */
+  /* -------------------------------------------------------------------------- */
+  /* Header: Mobile nav overlay transitions                                      */
+  /* -------------------------------------------------------------------------- */
 
-/* Keep the overlay in the DOM so we can transition opacity/transform.
+  /* Keep the overlay in the DOM so we can transition opacity/transform.
    JS toggles `aria-hidden` + `inert` (via enhancer), and CSS uses pointer-events
    to prevent interaction while closed. */
-.nav-mobile-overlay {
-  pointer-events: none;
-  /* Prevent transformed children (panel) from creating viewport scrollbars
+  .nav-mobile-overlay {
+    pointer-events: none;
+    /* Prevent transformed children (panel) from creating viewport scrollbars
      during enter/exit transitions. */
-  overflow: hidden;
-}
-
-.nav-mobile-overlay[aria-hidden="false"] {
-  pointer-events: auto;
-}
+    overflow: hidden;
+  }
 
-.nav-mobile-overlay .nav-mobile-backdrop {
-  opacity: 0;
-  transition: opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
-}
+  .nav-mobile-overlay[aria-hidden='false'] {
+    pointer-events: auto;
+  }
 
-.nav-mobile-overlay[aria-hidden="false"] .nav-mobile-backdrop {
-  opacity: 1;
-}
+  .nav-mobile-overlay .nav-mobile-backdrop {
+    opacity: 0;
+    transition: opacity var(--motion-duration, 180ms)
+      var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+  }
 
-.nav-mobile-overlay .nav-mobile-panel {
-  opacity: 0;
-  transform: translate3d(12px, 0, 0);
-  overflow-x: hidden;
-  transition:
-    opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
-    transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
-  will-change: opacity, transform;
-}
+  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-backdrop {
+    opacity: 1;
+  }
 
-.nav-mobile-overlay[aria-hidden="false"] .nav-mobile-panel {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-}
+  .nav-mobile-overlay .nav-mobile-panel {
+    opacity: 0;
+    transform: translate3d(12px, 0, 0);
+    overflow-x: hidden;
+    transition:
+      opacity var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
+      transform var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+    will-change: opacity, transform;
+  }
 
-/* -------------------------------------------------------------------------- */
-/* Header: Mobile toggle hamburger -> X                                       */
-/* -------------------------------------------------------------------------- */
+  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-panel {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 
-.nav-mobile-toggle .nav-mobile-bar {
-  transform-origin: center;
-  transition:
-    transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
-    opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
-  will-change: transform, opacity;
-}
+  /* -------------------------------------------------------------------------- */
+  /* Header: Mobile toggle hamburger -> X                                       */
+  /* -------------------------------------------------------------------------- */
 
-.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-top {
-  transform: translateY(6px) rotate(45deg);
-}
+  .nav-mobile-toggle .nav-mobile-bar {
+    transform-origin: center;
+    transition:
+      transform var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
+      opacity var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+    will-change: transform, opacity;
+  }
 
-.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-middle {
-  opacity: 0;
-}
+  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-top {
+    transform: translateY(6px) rotate(45deg);
+  }
 
-.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-bottom {
-  transform: translateY(-6px) rotate(-45deg);
-}
+  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-middle {
+    opacity: 0;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .nav-mobile-overlay .nav-mobile-backdrop,
-  .nav-mobile-overlay .nav-mobile-panel {
-    transition: none;
-    transform: none;
+  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-bottom {
+    transform: translateY(-6px) rotate(-45deg);
   }
 
-  .nav-mobile-toggle .nav-mobile-bar {
-    transition: none;
+  @media (prefers-reduced-motion: reduce) {
+    .nav-mobile-overlay .nav-mobile-backdrop,
+    .nav-mobile-overlay .nav-mobile-panel {
+      transition: none;
+      transform: none;
+    }
+
+    .nav-mobile-toggle .nav-mobile-bar {
+      transition: none;
+    }
   }
-}
 
-/*
+  /*
  * Theme Scope Styles
  *
  * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them
@@ -1837,782 +1879,830 @@
  * Example: `h4 { color: white; }` will override `:where(:where(.theme-scope)) h4`
  */
 
-:where(:where(.theme-scope)) {
-  font-family: var(--font-body);
-  letter-spacing: var(--ls-body);
-  line-height: var(--lh-body);
-  font-weight: var(--font-weight-body);
-
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    font-family: var(--font-heading);
-    /* Color is set by generateTypographyCss.ts with full cascade:
+  :where(:where(.theme-scope)) {
+    font-family: var(--font-body);
+    letter-spacing: var(--ls-body);
+    line-height: var(--lh-body);
+    font-weight: var(--font-weight-body);
+
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6 {
+      font-family: var(--font-heading);
+      /* Color is set by generateTypographyCss.ts with full cascade:
        --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */
-    font-weight: var(--font-weight-heading);
-    text-transform: var(--tt-heading);
-    font-variant-caps: var(--fv-heading);
+      font-weight: var(--font-weight-heading);
+      text-transform: var(--tt-heading);
+      font-variant-caps: var(--fv-heading);
+    }
   }
-}
 
-/* Heading typographic overrides (fallback to defaults when not provided) */
-:where(:where(.theme-scope)) h1 {
-  letter-spacing: var(--ls-h1, var(--ls-heading));
-  line-height: var(--lh-h1, var(--lh-heading));
-  font-weight: var(--fw-h1, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h2 {
-  letter-spacing: var(--ls-h2, var(--ls-heading));
-  line-height: var(--lh-h2, var(--lh-heading));
-  font-weight: var(--fw-h2, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h3 {
-  letter-spacing: var(--ls-h3, var(--ls-heading));
-  line-height: var(--lh-h3, var(--lh-heading));
-  font-weight: var(--fw-h3, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h4,
-:where(:where(.theme-scope)) h5,
-:where(:where(.theme-scope)) h6 {
-  letter-spacing: var(--ls-heading);
-  line-height: var(--lh-heading);
-}
-:where(:where(.theme-scope)) h4 {
-  font-weight: var(--fw-h4, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h5 {
-  font-weight: var(--fw-h5, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h6 {
-  font-weight: var(--fw-h6, var(--font-weight-heading));
-}
+  /* Heading typographic overrides (fallback to defaults when not provided) */
+  :where(:where(.theme-scope)) h1 {
+    letter-spacing: var(--ls-h1, var(--ls-heading));
+    line-height: var(--lh-h1, var(--lh-heading));
+    font-weight: var(--fw-h1, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h2 {
+    letter-spacing: var(--ls-h2, var(--ls-heading));
+    line-height: var(--lh-h2, var(--lh-heading));
+    font-weight: var(--fw-h2, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h3 {
+    letter-spacing: var(--ls-h3, var(--ls-heading));
+    line-height: var(--lh-h3, var(--lh-heading));
+    font-weight: var(--fw-h3, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h4,
+  :where(:where(.theme-scope)) h5,
+  :where(:where(.theme-scope)) h6 {
+    letter-spacing: var(--ls-heading);
+    line-height: var(--lh-heading);
+  }
+  :where(:where(.theme-scope)) h4 {
+    font-weight: var(--fw-h4, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h5 {
+    font-weight: var(--fw-h5, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h6 {
+    font-weight: var(--fw-h6, var(--font-weight-heading));
+  }
 
-/* Rich text element spacing based on theme rhythm */
-:where(.theme-scope) .rb-prose h1 {
-  margin-top: calc(var(--rt-space-y) * 1.6);
-  margin-bottom: calc(var(--rt-space-y) * 0.8);
-}
-:where(.theme-scope) .rb-prose h2 {
-  margin-top: calc(var(--rt-space-y) * 1.4);
-  margin-bottom: calc(var(--rt-space-y) * 0.7);
-}
-:where(.theme-scope) .rb-prose h3 {
-  margin-top: calc(var(--rt-space-y) * 1.2);
-  margin-bottom: calc(var(--rt-space-y) * 0.6);
-}
-:where(.theme-scope) .rb-prose h4 {
-  margin-top: calc(var(--rt-space-y) * 1);
-  margin-bottom: calc(var(--rt-space-y) * 0.5);
-}
-:where(.theme-scope) .rb-prose h5 {
-  margin-top: calc(var(--rt-space-y) * 0.9);
-  margin-bottom: calc(var(--rt-space-y) * 0.45);
-}
-:where(.theme-scope) .rb-prose h6 {
-  margin-top: calc(var(--rt-space-y) * 0.8);
-  margin-bottom: calc(var(--rt-space-y) * 0.4);
-}
-:where(.theme-scope) .rb-prose p {
-  margin: var(--rt-space-y) 0;
-}
-:where(.theme-scope) .rb-prose img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: calc(var(--rt-space-y) * 1) 0;
-}
-:where(.theme-scope) .rb-prose ul,
-:where(.theme-scope) .rb-prose ol {
-  margin: var(--rt-space-y) 0;
-  padding-left: 1.25rem;
-}
-:where(.theme-scope) .rb-prose ul {
-  list-style-type: disc;
-}
-:where(.theme-scope) .rb-prose ol {
-  list-style-type: decimal;
-}
-:where(.theme-scope) .rb-prose ul ul {
-  list-style-type: circle;
-}
-:where(.theme-scope) .rb-prose ul ul ul {
-  list-style-type: square;
-}
-:where(.theme-scope) .rb-prose ol ol {
-  list-style-type: lower-alpha;
-}
-:where(.theme-scope) .rb-prose ol ol ol {
-  list-style-type: lower-roman;
-}
-:where(.theme-scope) .rb-prose blockquote {
-  margin: calc(var(--rt-space-y) * 1) 0;
-  padding-left: 1rem;
-  border-left: 3px solid rgb(var(--tb-border));
-}
-:where(.theme-scope) .rb-prose > :first-child {
-  margin-top: 0;
-}
-:where(.theme-scope) .rb-prose > :last-child {
-  margin-bottom: 0;
-}
+  /* Rich text element spacing based on theme rhythm */
+  :where(.theme-scope) .rb-prose h1 {
+    margin-top: calc(var(--rt-space-y) * 1.6);
+    margin-bottom: calc(var(--rt-space-y) * 0.8);
+  }
+  :where(.theme-scope) .rb-prose h2 {
+    margin-top: calc(var(--rt-space-y) * 1.4);
+    margin-bottom: calc(var(--rt-space-y) * 0.7);
+  }
+  :where(.theme-scope) .rb-prose h3 {
+    margin-top: calc(var(--rt-space-y) * 1.2);
+    margin-bottom: calc(var(--rt-space-y) * 0.6);
+  }
+  :where(.theme-scope) .rb-prose h4 {
+    margin-top: calc(var(--rt-space-y) * 1);
+    margin-bottom: calc(var(--rt-space-y) * 0.5);
+  }
+  :where(.theme-scope) .rb-prose h5 {
+    margin-top: calc(var(--rt-space-y) * 0.9);
+    margin-bottom: calc(var(--rt-space-y) * 0.45);
+  }
+  :where(.theme-scope) .rb-prose h6 {
+    margin-top: calc(var(--rt-space-y) * 0.8);
+    margin-bottom: calc(var(--rt-space-y) * 0.4);
+  }
+  :where(.theme-scope) .rb-prose p {
+    margin: var(--rt-space-y) 0;
+  }
+  :where(.theme-scope) .rb-prose img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: calc(var(--rt-space-y) * 1) 0;
+  }
+  :where(.theme-scope) .rb-prose ul,
+  :where(.theme-scope) .rb-prose ol {
+    margin: var(--rt-space-y) 0;
+    padding-left: 1.25rem;
+  }
+  :where(.theme-scope) .rb-prose ul {
+    list-style-type: disc;
+  }
+  :where(.theme-scope) .rb-prose ol {
+    list-style-type: decimal;
+  }
+  :where(.theme-scope) .rb-prose ul ul {
+    list-style-type: circle;
+  }
+  :where(.theme-scope) .rb-prose ul ul ul {
+    list-style-type: square;
+  }
+  :where(.theme-scope) .rb-prose ol ol {
+    list-style-type: lower-alpha;
+  }
+  :where(.theme-scope) .rb-prose ol ol ol {
+    list-style-type: lower-roman;
+  }
+  :where(.theme-scope) .rb-prose blockquote {
+    margin: calc(var(--rt-space-y) * 1) 0;
+    padding-left: 1rem;
+    border-left: 3px solid rgb(var(--tb-border));
+  }
+  :where(.theme-scope) .rb-prose > :first-child {
+    margin-top: 0;
+  }
+  :where(.theme-scope) .rb-prose > :last-child {
+    margin-bottom: 0;
+  }
 
-/* Prose color overrides - use theme CSS variables instead of hardcoded colors
+  /* Prose color overrides - use theme CSS variables instead of hardcoded colors
  * This makes prose elements automatically adapt to light/dark themes */
-:where(.theme-scope) .rb-prose {
-  /* Body text inherits from parent, which should already have theme color */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose {
+    /* Body text inherits from parent, which should already have theme color */
+    color: inherit;
+  }
 
-/* Prose size variants (theme-aware, CSS-only) */
-:where(.theme-scope) {
-  /* Body scale + rhythm come from the active theme runtime (ThemeScope) */
-  --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);
-  --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);
+  /* Prose size variants (theme-aware, CSS-only) */
+  :where(.theme-scope) {
+    /* Body scale + rhythm come from the active theme runtime (ThemeScope) */
+    --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);
+    --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);
 
-  --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);
-  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);
+    --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);
+    --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);
 
-  /* Applied at >= 640px; below that, rb-prose-lg is typically used */
-  --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);
-  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);
-}
+    /* Applied at >= 640px; below that, rb-prose-lg is typically used */
+    --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);
+    --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);
+  }
 
-:where(.theme-scope) .rb-prose-sm {
-  font-size: var(--rb-prose-sm-font-size);
-  line-height: var(--rb-prose-sm-line-height);
-}
-:where(.theme-scope) .rb-prose-lg {
-  font-size: var(--rb-prose-lg-font-size);
-  line-height: var(--rb-prose-lg-line-height);
-}
-@media (min-width: 640px) {
-  :where(.theme-scope) .rb-prose-xl-sm {
-    font-size: var(--rb-prose-xl-sm-font-size);
-    line-height: var(--rb-prose-xl-sm-line-height);
+  :where(.theme-scope) .rb-prose-sm {
+    font-size: var(--rb-prose-sm-font-size);
+    line-height: var(--rb-prose-sm-line-height);
+  }
+  :where(.theme-scope) .rb-prose-lg {
+    font-size: var(--rb-prose-lg-font-size);
+    line-height: var(--rb-prose-lg-line-height);
+  }
+  @media (min-width: 640px) {
+    :where(.theme-scope) .rb-prose-xl-sm {
+      font-size: var(--rb-prose-xl-sm-font-size);
+      line-height: var(--rb-prose-xl-sm-line-height);
+    }
   }
-}
 
-/* Neutral prose uses theme text color by default */
-:where(.theme-scope) .rb-prose-neutral {
-  color: rgb(var(--tb-text));
-}
+  /* Neutral prose uses theme text color by default */
+  :where(.theme-scope) .rb-prose-neutral {
+    color: rgb(var(--tb-text));
+  }
 
-:where(.theme-scope) .rb-prose p,
-:where(.theme-scope) .rb-prose li {
-  /* Body text uses inherited color (set by fragment via textColorStyle) */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose p,
+  :where(.theme-scope) .rb-prose li {
+    /* Body text uses inherited color (set by fragment via textColorStyle) */
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose h1,
-:where(.theme-scope) .rb-prose h2,
-:where(.theme-scope) .rb-prose h3,
-:where(.theme-scope) .rb-prose h4,
-:where(.theme-scope) .rb-prose h5,
-:where(.theme-scope) .rb-prose h6 {
-  /* Headings inherit from parent or use theme text color */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose h1,
+  :where(.theme-scope) .rb-prose h2,
+  :where(.theme-scope) .rb-prose h3,
+  :where(.theme-scope) .rb-prose h4,
+  :where(.theme-scope) .rb-prose h5,
+  :where(.theme-scope) .rb-prose h6 {
+    /* Headings inherit from parent or use theme text color */
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose strong,
-:where(.theme-scope) .rb-prose b {
-  /* Bold text inherits color but increases weight */
-  color: inherit;
-  font-weight: 600;
-}
+  :where(.theme-scope) .rb-prose strong,
+  :where(.theme-scope) .rb-prose b {
+    /* Bold text inherits color but increases weight */
+    color: inherit;
+    font-weight: 600;
+  }
 
-:where(.theme-scope) .rb-prose em,
-:where(.theme-scope) .rb-prose i {
-  /* Italic text inherits color */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose em,
+  :where(.theme-scope) .rb-prose i {
+    /* Italic text inherits color */
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose a {
-  /* Global prose link style with theme-level overrides */
-  color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
-  text-decoration-line: var(--rb-prose-link-decoration-line, underline);
-  text-decoration-style: var(--rb-prose-link-underline-style, solid);
-  text-decoration-thickness: var(--rb-prose-link-underline-thickness, from-font);
-  text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
-  text-decoration-color: var(--rb-prose-link-decoration-color, rgba(var(--tb-primary), 0.3));
-  transition:
-    color 150ms ease,
-    text-decoration-color 150ms ease;
-}
+  :where(.theme-scope) .rb-prose a {
+    /* Global prose link style with theme-level overrides */
+    color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
+    text-decoration-line: var(--rb-prose-link-decoration-line, underline);
+    text-decoration-style: var(--rb-prose-link-underline-style, solid);
+    text-decoration-thickness: var(
+      --rb-prose-link-underline-thickness,
+      from-font
+    );
+    text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
+    text-decoration-color: var(
+      --rb-prose-link-decoration-color,
+      rgba(var(--tb-primary), 0.3)
+    );
+    transition:
+      color 150ms ease,
+      text-decoration-color 150ms ease;
+  }
 
-:where(.theme-scope) .rb-prose a:hover {
-  color: var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))));
-  text-decoration-color: var(
-    --rb-prose-link-hover-decoration-color,
-    var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))))
-  );
-}
+  :where(.theme-scope) .rb-prose a:hover {
+    color: var(
+      --rb-prose-link-hover-color,
+      var(--rb-prose-link-color, rgb(var(--tb-primary)))
+    );
+    text-decoration-color: var(
+      --rb-prose-link-hover-decoration-color,
+      var(
+        --rb-prose-link-hover-color,
+        var(--rb-prose-link-color, rgb(var(--tb-primary)))
+      )
+    );
+  }
 
-:where(.theme-scope) .rb-prose blockquote {
-  /* Blockquotes use muted text color */
-  color: rgb(var(--tb-mutedText));
-  border-left-color: rgb(var(--tb-border));
-}
+  :where(.theme-scope) .rb-prose blockquote {
+    /* Blockquotes use muted text color */
+    color: rgb(var(--tb-mutedText));
+    border-left-color: rgb(var(--tb-border));
+  }
 
-:where(.theme-scope) .fragment-quote-body blockquote {
-  /* Quote fragment should not get the generic prose blockquote left border/indent. */
-  border-left: 0;
-  padding-left: 0;
-}
+  :where(.theme-scope) .fragment-quote-body blockquote {
+    /* Quote fragment should not get the generic prose blockquote left border/indent. */
+    border-left: 0;
+    padding-left: 0;
+  }
 
-:where(.theme-scope) .rb-columns-equal-height {
-  /* Needed so we can use container query units (`cqw`) for width-based tile sizing. */
-  container-type: inline-size;
+  :where(.theme-scope) .rb-columns-equal-height {
+    /* Needed so we can use container query units (`cqw`) for width-based tile sizing. */
+    container-type: inline-size;
 
-  --rb-columns-cols: var(--rb-columns-cols-mobile, 1);
-  --rb-columns-gap: var(--rb-semantic-gap, 0px);
-  --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);
+    --rb-columns-cols: var(--rb-columns-cols-mobile, 1);
+    --rb-columns-gap: var(--rb-semantic-gap, 0px);
+    --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);
 
-  --rb-columns-tile-w: calc(
-    (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) / var(--rb-columns-cols)
-  );
-  --rb-columns-tile-h: calc(var(--rb-columns-tile-w) * var(--rb-columns-tile-ar));
-}
+    --rb-columns-tile-w: calc(
+      (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) /
+        var(--rb-columns-cols)
+    );
+    --rb-columns-tile-h: calc(
+      var(--rb-columns-tile-w) * var(--rb-columns-tile-ar)
+    );
+  }
 
-@media (min-width: 768px) {
-  :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
+  @media (min-width: 768px) {
+    :where(.theme-scope) .rb-columns-equal-height {
+      --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
+    }
   }
-}
 
-@media (min-width: 1024px) {
-  :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
+  @media (min-width: 1024px) {
+    :where(.theme-scope) .rb-columns-equal-height {
+      --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
+    }
   }
-}
 
-@media (min-width: 1280px) {
-  :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
+  @media (min-width: 1280px) {
+    :where(.theme-scope) .rb-columns-equal-height {
+      --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
+    }
   }
-}
 
-:where(.theme-scope) .rb-columns-equal-height > * {
-  height: var(--rb-columns-tile-h);
-}
+  :where(.theme-scope) .rb-columns-equal-height > * {
+    height: var(--rb-columns-tile-h);
+  }
 
-:where(.theme-scope) .rb-columns-equal-height > .rb-h-full {
-  /*
+  :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {
+    /*
     Grid items commonly include `rb-h-full` (height: 100%) to stretch within
     their row. In equal-height mode we instead want a fixed tile height so the
     spanning editorial tile doesn't become taller due to its larger width +
     aspect-ratio.
   */
-  height: var(--rb-columns-tile-h);
-  min-height: var(--rb-columns-tile-h);
-  max-height: var(--rb-columns-tile-h);
-}
+    height: var(--rb-columns-tile-h);
+    min-height: var(--rb-columns-tile-h);
+    max-height: var(--rb-columns-tile-h);
+  }
 
-:where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
+  :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
 
-:where(.theme-scope) .rb-columns-equal-height .fragment-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+  :where(.theme-scope) .rb-columns-equal-height .fragment-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-:where(.theme-scope) .rb-prose code {
-  /* Inline code uses text color with surface background */
-  color: inherit;
-  background-color: rgba(var(--tb-surface), 0.5);
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-  font-size: 0.875em;
-}
+  :where(.theme-scope) .rb-prose code {
+    /* Inline code uses text color with surface background */
+    color: inherit;
+    background-color: rgba(var(--tb-surface), 0.5);
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-size: 0.875em;
+  }
 
-:where(.theme-scope) .rb-prose pre {
-  /* Code blocks */
-  background-color: rgb(var(--tb-surface));
-  color: rgb(var(--tb-text));
-  border: 1px solid rgb(var(--tb-border));
-  border-radius: 0.5rem;
-  padding: 1rem;
-  overflow-x: auto;
-}
+  :where(.theme-scope) .rb-prose pre {
+    /* Code blocks */
+    background-color: rgb(var(--tb-surface));
+    color: rgb(var(--tb-text));
+    border: 1px solid rgb(var(--tb-border));
+    border-radius: 0.5rem;
+    padding: 1rem;
+    overflow-x: auto;
+  }
 
-:where(.theme-scope) .rb-prose pre code {
-  /* Code inside pre blocks */
-  background-color: transparent;
-  padding: 0;
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose pre code {
+    /* Code inside pre blocks */
+    background-color: transparent;
+    padding: 0;
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose hr {
-  /* Horizontal rules */
-  border-color: rgb(var(--tb-border));
-}
+  :where(.theme-scope) .rb-prose hr {
+    /* Horizontal rules */
+    border-color: rgb(var(--tb-border));
+  }
 
-:where(.theme-scope) .rb-prose ul > li::marker,
-:where(.theme-scope) .rb-prose ol > li::marker {
-  /* List markers use muted text color */
-  color: rgb(var(--tb-mutedText));
-}
+  :where(.theme-scope) .rb-prose ul > li::marker,
+  :where(.theme-scope) .rb-prose ol > li::marker {
+    /* List markers use muted text color */
+    color: rgb(var(--tb-mutedText));
+  }
 
-/*
+  /*
 /* Density helpers */
-:where(.theme-scope) .section-pad {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-}
-:where(.theme-scope)[data-density="airy"] .section-pad {
-  padding-top: 4.5rem;
-  padding-bottom: 4.5rem;
-}
-:where(.theme-scope)[data-density="compact"] .section-pad {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-:where(.theme-scope) .rounded-control {
-  border-radius: var(--radius-control);
-}
-:where(.theme-scope) .rounded-card {
-  border-radius: var(--radius-card);
-}
+  :where(.theme-scope) .section-pad {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+  :where(.theme-scope)[data-density='airy'] .section-pad {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+  :where(.theme-scope)[data-density='compact'] .section-pad {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
 
-:where(.theme-scope) .shadow-elev {
-  box-shadow: var(--shadow-elev);
-}
+  :where(.theme-scope) .rounded-control {
+    border-radius: var(--radius-control);
+  }
+  :where(.theme-scope) .rounded-card {
+    border-radius: var(--radius-card);
+  }
 
-:where(.theme-scope) .font-heading {
-  font-family: var(--font-heading);
-}
-:where(.theme-scope) .font-body {
-  font-family: var(--font-body);
-}
+  :where(.theme-scope) .shadow-elev {
+    box-shadow: var(--shadow-elev);
+  }
 
-:where(.theme-scope) .text-h1 {
-  font-size: var(--fs-h1);
-  line-height: 1.1;
-}
-:where(.theme-scope) .text-h2 {
-  font-size: var(--fs-h2);
-  line-height: 1.15;
-}
-:where(.theme-scope) .text-h3 {
-  font-size: var(--fs-h3);
-  line-height: 1.2;
-}
-:where(.theme-scope) .text-body-size {
-  font-size: var(--fs-body);
-}
+  :where(.theme-scope) .font-heading {
+    font-family: var(--font-heading);
+  }
+  :where(.theme-scope) .font-body {
+    font-family: var(--font-body);
+  }
 
-:where(.theme-scope) .transition-theme {
-  transition: all var(--motion-duration) var(--motion-ease);
-}
-:where(.theme-scope) .transition-theme-standard {
-  transition: all var(--motion-duration) var(--motion-ease);
-}
-:where(.theme-scope) .transition-theme-subtle {
-  transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);
-}
-:where(.theme-scope) .transition-theme-expressive {
-  transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);
-}
+  :where(.theme-scope) .text-h1 {
+    font-size: var(--fs-h1);
+    line-height: 1.1;
+  }
+  :where(.theme-scope) .text-h2 {
+    font-size: var(--fs-h2);
+    line-height: 1.15;
+  }
+  :where(.theme-scope) .text-h3 {
+    font-size: var(--fs-h3);
+    line-height: 1.2;
+  }
+  :where(.theme-scope) .text-body-size {
+    font-size: var(--fs-body);
+  }
 
-/* Shade tokens (50..950) for primary */
-:where(.theme-scope) .from-primary-50 {
-  --rb-gradient-from: rgb(var(--tb-primary-50)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-50 {
-  --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-100 {
-  --rb-gradient-from: rgb(var(--tb-primary-100))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-100 {
-  --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-200 {
-  --rb-gradient-from: rgb(var(--tb-primary-200))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-200 {
-  --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-300 {
-  --rb-gradient-from: rgb(var(--tb-primary-300))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-300 {
-  --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-400 {
-  --rb-gradient-from: rgb(var(--tb-primary-400))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-400 {
-  --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-500 {
-  --rb-gradient-from: rgb(var(--tb-primary-500))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-500 {
-  --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-600 {
-  --rb-gradient-from: rgb(var(--tb-primary-600))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-600 {
-  --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-700 {
-  --rb-gradient-from: rgb(var(--tb-primary-700))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-700 {
-  --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-800 {
-  --rb-gradient-from: rgb(var(--tb-primary-800))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-800 {
-  --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-900 {
-  --rb-gradient-from: rgb(var(--tb-primary-900))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-900 {
-  --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-950 {
-  --rb-gradient-from: rgb(var(--tb-primary-950))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-950 {
-  --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
-}
-
-/* Shade tokens (50..950) for secondary */
-:where(.theme-scope) .from-secondary-50 {
-  --rb-gradient-from: rgb(var(--tb-secondary-50))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-50 {
-  --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-100 {
-  --rb-gradient-from: rgb(var(--tb-secondary-100))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-100 {
-  --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-200 {
-  --rb-gradient-from: rgb(var(--tb-secondary-200))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-200 {
-  --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-300 {
-  --rb-gradient-from: rgb(var(--tb-secondary-300))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-300 {
-  --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-400 {
-  --rb-gradient-from: rgb(var(--tb-secondary-400))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-400 {
-  --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-500 {
-  --rb-gradient-from: rgb(var(--tb-secondary-500))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-500 {
-  --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-600 {
-  --rb-gradient-from: rgb(var(--tb-secondary-600))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-600 {
-  --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-700 {
-  --rb-gradient-from: rgb(var(--tb-secondary-700))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-700 {
-  --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-800 {
-  --rb-gradient-from: rgb(var(--tb-secondary-800))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-800 {
-  --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-900 {
-  --rb-gradient-from: rgb(var(--tb-secondary-900))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-900 {
-  --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-950 {
-  --rb-gradient-from: rgb(var(--tb-secondary-950))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-950 {
-  --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
-}
-
-/* Shade tokens (50..950) for accent */
-:where(.theme-scope) .from-accent-50 {
-  --rb-gradient-from: rgb(var(--tb-accent-50)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-50 {
-  --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-100 {
-  --rb-gradient-from: rgb(var(--tb-accent-100)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-100 {
-  --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-200 {
-  --rb-gradient-from: rgb(var(--tb-accent-200)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-200 {
-  --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-300 {
-  --rb-gradient-from: rgb(var(--tb-accent-300)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-300 {
-  --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-400 {
-  --rb-gradient-from: rgb(var(--tb-accent-400)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-400 {
-  --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-500 {
-  --rb-gradient-from: rgb(var(--tb-accent-500)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-500 {
-  --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-600 {
-  --rb-gradient-from: rgb(var(--tb-accent-600)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-600 {
-  --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-700 {
-  --rb-gradient-from: rgb(var(--tb-accent-700)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-700 {
-  --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-800 {
-  --rb-gradient-from: rgb(var(--tb-accent-800)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-800 {
-  --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-900 {
-  --rb-gradient-from: rgb(var(--tb-accent-900)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-900 {
-  --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-950 {
-  --rb-gradient-from: rgb(var(--tb-accent-950)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-950 {
-  --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
-}
+  :where(.theme-scope) .transition-theme {
+    transition: all var(--motion-duration) var(--motion-ease);
+  }
+  :where(.theme-scope) .transition-theme-standard {
+    transition: all var(--motion-duration) var(--motion-ease);
+  }
+  :where(.theme-scope) .transition-theme-subtle {
+    transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);
+  }
+  :where(.theme-scope) .transition-theme-expressive {
+    transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);
+  }
 
-/* Shade tokens (50..950) for neutral */
-:where(.theme-scope) .from-neutral-50 {
-  --rb-gradient-from: rgb(var(--tb-neutral-50)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-50 {
-  --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-100 {
-  --rb-gradient-from: rgb(var(--tb-neutral-100))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-100 {
-  --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-200 {
-  --rb-gradient-from: rgb(var(--tb-neutral-200))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-200 {
-  --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-300 {
-  --rb-gradient-from: rgb(var(--tb-neutral-300))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-300 {
-  --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-400 {
-  --rb-gradient-from: rgb(var(--tb-neutral-400))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-400 {
-  --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-500 {
-  --rb-gradient-from: rgb(var(--tb-neutral-500))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-500 {
-  --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-600 {
-  --rb-gradient-from: rgb(var(--tb-neutral-600))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-600 {
-  --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-700 {
-  --rb-gradient-from: rgb(var(--tb-neutral-700))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-700 {
-  --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-800 {
-  --rb-gradient-from: rgb(var(--tb-neutral-800))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-800 {
-  --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-900 {
-  --rb-gradient-from: rgb(var(--tb-neutral-900))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-900 {
-  --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-950 {
-  --rb-gradient-from: rgb(var(--tb-neutral-950))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-950 {
-  --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
-}
-
-/* =================================================================
+  /* Shade tokens (50..950) for primary */
+  :where(.theme-scope) .from-primary-50 {
+    --rb-gradient-from: rgb(var(--tb-primary-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-50 {
+    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-100 {
+    --rb-gradient-from: rgb(var(--tb-primary-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-100 {
+    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-200 {
+    --rb-gradient-from: rgb(var(--tb-primary-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-200 {
+    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-300 {
+    --rb-gradient-from: rgb(var(--tb-primary-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-300 {
+    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-400 {
+    --rb-gradient-from: rgb(var(--tb-primary-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-400 {
+    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-500 {
+    --rb-gradient-from: rgb(var(--tb-primary-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-500 {
+    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-600 {
+    --rb-gradient-from: rgb(var(--tb-primary-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-600 {
+    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-700 {
+    --rb-gradient-from: rgb(var(--tb-primary-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-700 {
+    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-800 {
+    --rb-gradient-from: rgb(var(--tb-primary-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-800 {
+    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-900 {
+    --rb-gradient-from: rgb(var(--tb-primary-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-900 {
+    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-950 {
+    --rb-gradient-from: rgb(var(--tb-primary-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-950 {
+    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
+  }
+
+  /* Shade tokens (50..950) for secondary */
+  :where(.theme-scope) .from-secondary-50 {
+    --rb-gradient-from: rgb(var(--tb-secondary-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-50 {
+    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-100 {
+    --rb-gradient-from: rgb(var(--tb-secondary-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-100))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-100 {
+    --rb-gradient-to: rgb(var(--tb-secondary-100))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-200 {
+    --rb-gradient-from: rgb(var(--tb-secondary-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-200))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-200 {
+    --rb-gradient-to: rgb(var(--tb-secondary-200))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-300 {
+    --rb-gradient-from: rgb(var(--tb-secondary-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-300))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-300 {
+    --rb-gradient-to: rgb(var(--tb-secondary-300))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-400 {
+    --rb-gradient-from: rgb(var(--tb-secondary-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-400))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-400 {
+    --rb-gradient-to: rgb(var(--tb-secondary-400))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-500 {
+    --rb-gradient-from: rgb(var(--tb-secondary-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-500))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-500 {
+    --rb-gradient-to: rgb(var(--tb-secondary-500))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-600 {
+    --rb-gradient-from: rgb(var(--tb-secondary-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-600))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-600 {
+    --rb-gradient-to: rgb(var(--tb-secondary-600))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-700 {
+    --rb-gradient-from: rgb(var(--tb-secondary-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-700))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-700 {
+    --rb-gradient-to: rgb(var(--tb-secondary-700))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-800 {
+    --rb-gradient-from: rgb(var(--tb-secondary-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-800))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-800 {
+    --rb-gradient-to: rgb(var(--tb-secondary-800))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-900 {
+    --rb-gradient-from: rgb(var(--tb-secondary-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-900))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-900 {
+    --rb-gradient-to: rgb(var(--tb-secondary-900))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-950 {
+    --rb-gradient-from: rgb(var(--tb-secondary-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-950))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-950 {
+    --rb-gradient-to: rgb(var(--tb-secondary-950))
+      var(--rb-gradient-to-position);
+  }
+
+  /* Shade tokens (50..950) for accent */
+  :where(.theme-scope) .from-accent-50 {
+    --rb-gradient-from: rgb(var(--tb-accent-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-50 {
+    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-100 {
+    --rb-gradient-from: rgb(var(--tb-accent-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-100 {
+    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-200 {
+    --rb-gradient-from: rgb(var(--tb-accent-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-200 {
+    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-300 {
+    --rb-gradient-from: rgb(var(--tb-accent-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-300 {
+    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-400 {
+    --rb-gradient-from: rgb(var(--tb-accent-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-400 {
+    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-500 {
+    --rb-gradient-from: rgb(var(--tb-accent-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-500 {
+    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-600 {
+    --rb-gradient-from: rgb(var(--tb-accent-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-600 {
+    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-700 {
+    --rb-gradient-from: rgb(var(--tb-accent-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-700 {
+    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-800 {
+    --rb-gradient-from: rgb(var(--tb-accent-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-800 {
+    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-900 {
+    --rb-gradient-from: rgb(var(--tb-accent-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-900 {
+    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-950 {
+    --rb-gradient-from: rgb(var(--tb-accent-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-950 {
+    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
+  }
+
+  /* Shade tokens (50..950) for neutral */
+  :where(.theme-scope) .from-neutral-50 {
+    --rb-gradient-from: rgb(var(--tb-neutral-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-50 {
+    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-100 {
+    --rb-gradient-from: rgb(var(--tb-neutral-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-100 {
+    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-200 {
+    --rb-gradient-from: rgb(var(--tb-neutral-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-200 {
+    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-300 {
+    --rb-gradient-from: rgb(var(--tb-neutral-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-300 {
+    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-400 {
+    --rb-gradient-from: rgb(var(--tb-neutral-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-400 {
+    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-500 {
+    --rb-gradient-from: rgb(var(--tb-neutral-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-500 {
+    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-600 {
+    --rb-gradient-from: rgb(var(--tb-neutral-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-600 {
+    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-700 {
+    --rb-gradient-from: rgb(var(--tb-neutral-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-700 {
+    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-800 {
+    --rb-gradient-from: rgb(var(--tb-neutral-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-800 {
+    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-900 {
+    --rb-gradient-from: rgb(var(--tb-neutral-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-900 {
+    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-950 {
+    --rb-gradient-from: rgb(var(--tb-neutral-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-950 {
+    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
+  }
+
+  /* =================================================================
    Header System Class Naming Conventions
 
    rb-header-*    Utility-style classes set in site-header.ts layouts
@@ -2625,236 +2715,236 @@
                   (nav-dropdown, nav-mobile-panel, nav-underline-grow)
    ================================================================= */
 
-/* =================================================================
+  /* =================================================================
    Header Layout Padding
 
    Padding is controlled entirely by CSS based on variant class.
    This ensures shrink headers look identical to non-shrink before scroll.
    ================================================================= */
 
-/* Prevent scroll anchoring feedback loops when the header height transitions.
+  /* Prevent scroll anchoring feedback loops when the header height transitions.
    In some browsers, resizing a sticky header near the top can cause the UA to
    adjust scroll position ("scroll anchoring"), which then flips the
    `header-scrolled` threshold logic back and forth. */
-:where(.theme-scope) .block-site-header {
-  overflow-anchor: none;
-}
+  :where(.theme-scope) .block-site-header {
+    overflow-anchor: none;
+  }
 
-/* Base padding for horizontal variants (classic, transparent) */
-:where(.theme-scope) .rb-header-layout {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  transition: padding 300ms var(--motion-ease, ease);
-}
+  /* Base padding for horizontal variants (classic, transparent) */
+  :where(.theme-scope) .rb-header-layout {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    transition: padding 300ms var(--motion-ease, ease);
+  }
 
-/* Vertical variants need more breathing room
+  /* Vertical variants need more breathing room
    Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */
-:where(.theme-scope) .header-variant-centered .rb-header-layout,
-:where(.theme-scope) .header-variant-editorial .rb-header-layout {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
+  :where(.theme-scope) .header-variant-centered .rb-header-layout {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
 
-/* Floating variant - compact padding */
-:where(.theme-scope) .header-variant-floating .rb-header-layout {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
+  /* Floating variant - compact padding */
+  :where(.theme-scope) .header-variant-floating .rb-header-layout {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
 
-/* =================================================================
+  /* =================================================================
    Header Shrink-on-Scroll
 
    Only applies when .rb-header-shrink is present AND user has scrolled.
    No changes until scroll - shrink header = non-shrink header initially.
    ================================================================= */
 
-/* Scrolled state - reduce padding */
-:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
+  /* Scrolled state - reduce padding */
+  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
 
-/* Vertical variants get gentler reduction
+  /* Vertical variants get gentler reduction
    Note: Both classes are on Section, rb-header-layout on inner div */
-:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-centered .rb-header-layout,
-:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-editorial .rb-header-layout {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-centered
+    .rb-header-layout {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
 
-/* Floating variant */
-:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-floating .rb-header-layout {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
+  /* Floating variant */
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-floating
+    .rb-header-layout {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
 
-/* =================================================================
+  /* =================================================================
    Logo & Title Sizing
 
    Font sizes controlled here, not via utility classes, so shrink
    transitions work (utility classes would override :where()).
    ================================================================= */
 
-/* Logo image sizing */
-:where(.theme-scope) .rb-header-logo-sm {
-  height: 2.5rem;
-  transition: height 300ms var(--motion-ease, ease);
-}
-:where(.theme-scope) .rb-header-logo-lg {
-  height: 3rem;
-  transition: height 300ms var(--motion-ease, ease);
-}
-
-/* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
-:where(.theme-scope) .header-logo-text {
-  font-size: 1.125rem; /* matches rb-text-lg */
-  line-height: 1.75rem;
-  transition: font-size 300ms var(--motion-ease, ease);
-}
+  /* Logo image sizing */
+  :where(.theme-scope) .rb-header-logo-sm {
+    height: 2.5rem;
+    transition: height 300ms var(--motion-ease, ease);
+  }
+  :where(.theme-scope) .rb-header-logo-lg {
+    height: 3rem;
+    transition: height 300ms var(--motion-ease, ease);
+  }
 
-/* Mobile: reduce site title size (~30%) to keep header compact */
-@media (max-width: 767px) {
+  /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
   :where(.theme-scope) .header-logo-text {
-    font-size: 0.8rem;
-    line-height: 1.25rem;
+    font-size: 1.125rem; /* matches rb-text-lg */
+    line-height: 1.75rem;
+    transition: font-size 300ms var(--motion-ease, ease);
   }
 
-  :where(.theme-scope) .header-variant-centered .header-logo-text,
-  :where(.theme-scope) .header-variant-editorial .header-logo-text {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+  /* Mobile: reduce site title size (~30%) to keep header compact */
+  @media (max-width: 767px) {
+    :where(.theme-scope) .header-logo-text {
+      font-size: 0.8rem;
+      line-height: 1.25rem;
+    }
+
+    :where(.theme-scope) .header-variant-centered .header-logo-text {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
   }
-}
 
-/* Centered/editorial variants use larger title */
-:where(.theme-scope) .header-variant-centered .header-logo-text,
-:where(.theme-scope) .header-variant-editorial .header-logo-text {
-  font-size: 1.25rem; /* matches rb-text-xl */
-  line-height: 1.75rem;
-}
+  /* Centered variant uses larger title */
+  :where(.theme-scope) .header-variant-centered .header-logo-text {
+    font-size: 1.25rem; /* matches rb-text-xl */
+    line-height: 1.75rem;
+  }
 
-/* =================================================================
+  /* =================================================================
    Shrink on Scroll - Logo & Title
    ================================================================= */
 
-:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {
-  height: 2rem;
-}
-:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {
-  height: 2.5rem;
-}
-:where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
-  font-size: 0.875rem;
-}
-
-@media (max-width: 767px) {
+  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {
+    height: 2rem;
+  }
+  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {
+    height: 2.5rem;
+  }
   :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
-    font-size: 0.75rem;
+    font-size: 0.875rem;
   }
-}
 
-/* =================================================================
+  @media (max-width: 767px) {
+    :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
+      font-size: 0.75rem;
+    }
+  }
+
+  /* =================================================================
    Accessibility: Reduced Motion
    ================================================================= */
 
-@media (prefers-reduced-motion: reduce) {
-  :where(.theme-scope) .rb-header-layout,
-  :where(.theme-scope) .rb-header-logo-sm,
-  :where(.theme-scope) .rb-header-logo-lg,
-  :where(.theme-scope) .header-logo-text {
-    transition: none;
+  @media (prefers-reduced-motion: reduce) {
+    :where(.theme-scope) .rb-header-layout,
+    :where(.theme-scope) .rb-header-logo-sm,
+    :where(.theme-scope) .rb-header-logo-lg,
+    :where(.theme-scope) .header-logo-text {
+      transition: none;
+    }
   }
-}
 
-/* Nav underline-grow animation (used by navStyle: "underline-grow" in site-header.ts) */
-:where(.theme-scope) .nav-underline-grow {
-  position: relative;
-  overflow: visible;
-}
-:where(.theme-scope) .nav-underline-grow::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: var(--nav-underline-offset, -0.35em);
-  width: 100%;
-  height: 2px;
-  background-color: currentColor;
-  transform: scaleX(0);
-  transform-origin: left center;
-  transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);
-}
-:where(.theme-scope) .nav-underline-grow:hover::after,
-:where(.theme-scope)
-  .nav-underline-grow.nav-underline-active[data-active="true"]::after {
-  transform: scaleX(1);
-}
-:where(.theme-scope) .nav-underline-offset-tight {
-  --nav-underline-offset: -0.2em;
-}
-:where(.theme-scope) .nav-underline-offset-normal {
-  --nav-underline-offset: -0.3em;
-}
-:where(.theme-scope) .nav-underline-offset-loose {
-  --nav-underline-offset: -0.45em;
-}
+  /* Nav underline-grow animation (used by navStyle: "underline-grow" in site-header.ts) */
+  :where(.theme-scope) .nav-underline-grow {
+    position: relative;
+    overflow: visible;
+  }
+  :where(.theme-scope) .nav-underline-grow::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: var(--nav-underline-offset, -0.35em);
+    width: 100%;
+    height: 2px;
+    background-color: currentColor;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);
+  }
+  :where(.theme-scope) .nav-underline-grow:hover::after,
+  :where(.theme-scope)
+    .nav-underline-grow.nav-underline-active[data-active='true']::after {
+    transform: scaleX(1);
+  }
+  :where(.theme-scope) .nav-underline-offset-tight {
+    --nav-underline-offset: -0.2em;
+  }
+  :where(.theme-scope) .nav-underline-offset-normal {
+    --nav-underline-offset: -0.3em;
+  }
+  :where(.theme-scope) .nav-underline-offset-loose {
+    --nav-underline-offset: -0.45em;
+  }
 
-:where(.theme-scope) .card-surface {
-  background: rgb(var(--tb-surface));
-  color: rgb(var(--tb-onSurface, var(--tb-text)));
-  border: 1px solid rgb(var(--tb-border));
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-elev);
-}
-:where(.theme-scope) .media-rounded {
-  border-radius: var(--radius-card);
-}
+  :where(.theme-scope) .card-surface {
+    background: rgb(var(--tb-surface));
+    color: rgb(var(--tb-onSurface, var(--tb-text)));
+    border: 1px solid rgb(var(--tb-border));
+    border-radius: var(--radius-card);
+    box-shadow: var(--shadow-elev);
+  }
+  :where(.theme-scope) .media-rounded {
+    border-radius: var(--radius-card);
+  }
 
-:where(.theme-scope) .is-placeholder::after {
-  content: "Placeholder";
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  font-size: 11px;
-  background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);
-  color: rgb(var(--tb-text));
-  padding: 0.15rem 0.35rem;
-  border-radius: 4px;
-  opacity: 0.85;
-}
+  :where(.theme-scope) .is-placeholder::after {
+    content: 'Placeholder';
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    font-size: 11px;
+    background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);
+    color: rgb(var(--tb-text));
+    padding: 0.15rem 0.35rem;
+    border-radius: 4px;
+    opacity: 0.85;
+  }
 
-/* Status badges - theme-aware styling for capacity indicators */
-:where(.theme-scope) .badge-status {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-}
+  /* Status badges - theme-aware styling for capacity indicators */
+  :where(.theme-scope) .badge-status {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125rem 0.625rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
 
-/* All badges use a subtle theme-aware style by default */
-:where(.theme-scope) .badge-status-available {
-  background-color: rgba(var(--tb-secondary), 0.15);
-  color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
-}
+  /* All badges use a subtle theme-aware style by default */
+  :where(.theme-scope) .badge-status-available {
+    background-color: rgba(var(--tb-secondary), 0.15);
+    color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
+  }
 
-:where(.theme-scope) .badge-status-low {
-  background-color: rgba(var(--tb-accent), 0.15);
-  color: rgb(var(--tb-accent-700, var(--tb-accent)));
-}
+  :where(.theme-scope) .badge-status-low {
+    background-color: rgba(var(--tb-accent), 0.15);
+    color: rgb(var(--tb-accent-700, var(--tb-accent)));
+  }
 
-:where(.theme-scope) .badge-status-sold-out {
-  background-color: rgba(var(--tb-text), 0.1);
-  color: rgb(var(--tb-mutedText));
-}
+  :where(.theme-scope) .badge-status-sold-out {
+    background-color: rgba(var(--tb-text), 0.1);
+    color: rgb(var(--tb-mutedText));
+  }
 
-/* Event list empty state - theme-aware */
-:where(.theme-scope) .event-list-empty {
-  background-color: rgb(var(--tb-surface));
-  color: rgb(var(--tb-onSurface, var(--tb-text)));
-  border-color: rgb(var(--tb-border));
-}
+  /* Event list empty state - theme-aware */
+  :where(.theme-scope) .event-list-empty {
+    background-color: rgb(var(--tb-surface));
+    color: rgb(var(--tb-onSurface, var(--tb-text)));
+    border-color: rgb(var(--tb-border));
+  }
 } /* end @layer rb-theme */
 
 
@@ -3331,17 +3421,103 @@
   border-radius: var(--rb-block-radius);
   background: transparent;
   cursor: pointer;
-  transition: border-color var(--rb-block-transition) ease,
-              background-color var(--rb-block-transition) ease;
+  transition: border-color var(--rb-block-transition) ease,
+              background-color var(--rb-block-transition) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option:hover {
+  border-color: var(--er-payment-border-hover);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option--selected {
+  border-color: var(--er-payment-border-selected);
+  background-color: var(--er-payment-bg-selected);
+}
+
+/* Discount code entry */
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount {
+  margin-top: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__form {
+  display: grid;
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__toggle {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: rgb(var(--tb-primary));
+  cursor: pointer;
+  font-size: 0.875rem;
+  text-decoration: underline;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__toggle:hover {
+  text-decoration: none;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__input {
+  flex: 1;
+  border-radius: calc(var(--rb-block-radius) * 0.6);
+  border: 1px solid var(--er-border);
+  padding: 0.5rem 0.75rem;
+  background: rgb(var(--tb-background));
+  color: rgb(var(--tb-foreground));
+  font-size: 0.875rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__input:focus {
+  outline: 2px solid var(--er-focus-ring);
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__remove {
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  color: var(--er-on-surface);
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__apply {
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  color: var(--er-on-surface);
+  cursor: pointer;
+  opacity: 0.8;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option:hover {
-  border-color: var(--er-payment-border-hover);
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__remove:hover {
+  opacity: 1;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option--selected {
-  border-color: var(--er-payment-border-selected);
-  background-color: var(--er-payment-bg-selected);
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__apply:hover {
+  opacity: 1;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--er-on-surface-muted);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__feedback {
+  margin: 0;
+  font-size: 0.875rem;
 }
 
 /* Visually hide native radio but keep focusable (sr-only pattern) */
@@ -5693,7 +5869,7 @@
   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(--radius-control, var(--rb-block-radius, 1rem)));
+  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;
@@ -5928,6 +6104,67 @@
   }
 }
 
+/* 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.5rem, 5vw, 4rem);
+  line-height: 1.08;
+}
+
+: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(3rem, 6vw, 5rem);
+  line-height: 1.04;
+}
+
+: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(3.5rem, 8vw, 6.5rem);
+  line-height: 0.98;
+}
+
+: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(3rem, 6.5vw, 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(2.75rem, 5.5vw, 4.5rem);
+  line-height: 1.05;
+}
+
+@media (max-width: 639px) {
+  :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.)
  * =============================================================================
@@ -6323,6 +6560,8 @@
   --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
   --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));
   --rb-modal-z-index: 20000;
+  --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));
+  --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));
 }
 
 :where(.theme-scope) .shop--empty {
@@ -6340,7 +6579,7 @@
   background-color: rgba(var(--tb-destructive), 0.1);
   color: rgb(var(--tb-destructive));
   padding: 0.75rem 1rem;
-  border-radius: var(--radius-control, 0.375rem);
+  border-radius: var(--shop-control-radius);
   margin-bottom: 1rem;
   font-size: 0.875rem;
 }
@@ -6379,7 +6618,7 @@
 :where(.theme-scope) .shop__card {
   background: rgb(var(--tb-surface));
   border: 1px solid rgb(var(--tb-border));
-  border-radius: var(--radius-card, 0.5rem);
+  border-radius: var(--shop-card-radius);
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
@@ -6485,7 +6724,7 @@
   background-color: rgba(var(--tb-destructive), 0.1);
   color: rgb(var(--tb-destructive));
   padding: 0.625rem 0.75rem;
-  border-radius: var(--radius-control, 0.375rem);
+  border-radius: var(--shop-control-radius);
   font-size: 0.875rem;
   margin-bottom: 1rem;
 }
@@ -6528,7 +6767,7 @@
   padding: 1.5rem 1rem;
   margin-bottom: 1.25rem;
   border: 1px solid rgb(var(--tb-border));
-  border-radius: var(--radius-card);
+  border-radius: var(--shop-card-radius);
   background: rgb(var(--tb-surface));
 }
 
@@ -6603,7 +6842,7 @@
   padding: 2rem;
   background: var(--cp-card-bg);
   border: 1px solid var(--cp-card-border);
-  border-radius: var(--radius-card);
+  border-radius: var(--cp-card-radius);
 }
 
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__title {
@@ -6673,7 +6912,7 @@
 /* Alerts */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert {
   padding: 1rem 1.25rem;
-  border-radius: var(--radius-control);
+  border-radius: var(--cp-control-radius);
   font-size: 0.9375rem;
   line-height: 1.4;
   border-left: 4px solid transparent;
@@ -6731,7 +6970,7 @@
   text-align: center;
   background: var(--cp-card-bg);
   border: 1px dashed var(--cp-card-border);
-  border-radius: var(--radius-card);
+  border-radius: var(--cp-card-radius);
 }
 
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-empty__text {
@@ -6743,7 +6982,7 @@
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-card {
   background: var(--cp-card-bg);
   border: 1px solid var(--cp-card-border);
-  border-radius: var(--radius-card);
+  border-radius: var(--cp-card-radius);
   padding: 1.25rem;
 }
 
@@ -6861,7 +7100,7 @@
   /* Use tiles as a mini "details grid" rather than event occurrence selection. */
   --rb-event-tile-bg: var(--cp-card-bg);
   --rb-event-tile-border: var(--cp-card-border);
-  --rb-event-tile-radius: var(--radius-control);
+  --rb-event-tile-radius: var(--cp-control-radius);
 
   display: flex;
   flex-direction: column;
@@ -6907,7 +7146,7 @@
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table-wrap {
   background: var(--cp-card-bg);
   border: 1px solid var(--cp-card-border);
-  border-radius: var(--radius-card);
+  border-radius: var(--cp-card-radius);
 }
 
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table {
@@ -8318,6 +8557,11 @@
   margin-top: 0.5rem;
 }
 
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__form {
+  display: grid;
+  gap: 0.5rem;
+}
+
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__toggle {
   background: transparent;
   border: 0;
@@ -8332,10 +8576,14 @@
   text-decoration: none;
 }
 
-:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__field {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__row {
   display: flex;
   gap: 0.5rem;
-  margin-top: 0.5rem;
 }
 
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__input {
@@ -8361,10 +8609,33 @@
   opacity: 0.6;
 }
 
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__apply {
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__remove:hover {
   opacity: 1;
 }
 
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__apply:hover {
+  opacity: 1;
+}
+
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__hint {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__feedback {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
 /* =============================================================================
  * Altcha (Spam Protection)
  * =============================================================================
@@ -8807,16 +9078,36 @@
  * ============================================================================= */
 
 :where(.theme-scope) .event-listing-compact-container {
-  width: min(100%, 56rem);
+  --event-compact-divider-color: color-mix(
+    in oklab,
+    rgb(var(--tb-border, 229 231 235)),
+    rgb(var(--tb-text, 17 24 39)) 4%
+  );
+
+  width: min(100%, 92rem);
   margin-inline: auto;
+  overflow: hidden;
+  border: 1px solid var(--event-compact-divider-color);
+  border-radius: 1rem;
+  background: rgb(var(--tb-background, 255 255 255));
+  box-shadow: 0 1.25rem 3.5rem rgba(var(--tb-shadow), 0.08);
+}
+
+:where(.theme-scope) .rb-event-list-treatment-lined-panel .event-listing-compact-container {
+  --event-compact-divider-color: color-mix(
+    in oklab,
+    rgb(var(--tb-border, 229 231 235)),
+    rgb(var(--tb-text, 17 24 39)) 8%
+  );
 }
 
 :where(.theme-scope) .event-compact-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: clamp(5.5rem, 8vw, 8rem) minmax(0, 1fr) clamp(15rem, 24vw, 21rem);
   align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));
+  min-height: 8.75rem;
+  padding: 1.55rem clamp(1.5rem, 3vw, 2.6rem);
+  border-bottom: 1px solid var(--event-compact-divider-color);
   transition: background-color 150ms ease;
 }
 
@@ -8825,70 +9116,210 @@
 }
 
 :where(.theme-scope) .event-compact-row:hover {
-  background-color: rgba(var(--tb-primary, 0 0 0), 0.04);
+  background-color: rgba(var(--tb-primary, 0 0 0), 0.035);
 }
 
-:where(.theme-scope) .event-compact-row-content {
-  flex: 1;
+:where(.theme-scope) .event-compact-row-date {
+  display: grid;
+  grid-template-rows: 1rem minmax(2.7rem, auto) 1rem;
+  place-items: center;
+  gap: 0.35rem;
   min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  padding-right: clamp(1rem, 2vw, 1.75rem);
+  text-align: center;
+  text-decoration: none;
+}
+
+:where(.theme-scope) .event-compact-row-date-weekday,
+:where(.theme-scope) .event-compact-row-date-month {
+  display: grid;
+  place-items: center;
+  block-size: 1rem;
+  color: rgb(var(--tb-primary, 0 0 0));
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0.08em;
+}
+
+:where(.theme-scope) .event-compact-row-date-day {
+  display: grid;
+  place-items: center;
+  min-block-size: clamp(2.7rem, 4.5vw, 3.7rem);
+  color: rgb(var(--tb-text, 17 24 39));
+  font-family: var(--font-heading, var(--font-body, inherit));
+  font-size: clamp(2.3rem, 4.2vw, 3.35rem);
+  font-weight: 400;
+  line-height: 1;
 }
 
-:where(.theme-scope) .event-compact-row-top {
+:where(.theme-scope) .event-compact-row-content {
+  min-width: 0;
   display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  justify-content: center;
+  padding-inline: clamp(1.4rem, 3vw, 3.2rem);
+  border-left: 1px solid var(--event-compact-divider-color);
 }
 
 :where(.theme-scope) .event-compact-row-title {
-  font-weight: 600;
-  font-size: 0.9375rem;
-  line-height: 1.3;
-  white-space: nowrap;
+  margin: 0;
+  color: rgb(var(--tb-text, 17 24 39));
+  font-family: var(--font-heading, var(--font-body, inherit));
+  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
+  font-weight: 400;
+  line-height: 1.05;
   overflow: hidden;
   text-overflow: ellipsis;
-  min-width: 0;
-  flex: 1;
-}
-
-:where(.theme-scope) .event-compact-row-datetime {
-  font-size: 0.8125rem;
-  opacity: 0.7;
   white-space: nowrap;
-  flex-shrink: 0;
 }
 
-:where(.theme-scope) .event-compact-row-bottom {
+:where(.theme-scope) .event-compact-row-meta {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  font-size: 0.8125rem;
-  opacity: 0.7;
+  gap: 0.9rem;
+  min-width: 0;
+  color: rgb(var(--tb-text, 17 24 39));
+  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
+  line-height: 1.35;
 }
 
 :where(.theme-scope) .event-compact-row-venue {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+:where(.theme-scope) .event-compact-row-venue svg {
+  width: 1.05em;
+  height: 1.05em;
 }
 
+:where(.theme-scope) .event-compact-row-teacher,
 :where(.theme-scope) .event-compact-row-price {
-  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.9rem;
+}
+
+:where(.theme-scope) .event-compact-row-teacher::before,
+:where(.theme-scope) .event-compact-row-price::before {
+  content: "";
+  width: 0.18rem;
+  height: 0.18rem;
+  border-radius: 9999px;
+  background: currentColor;
+}
+
+:where(.theme-scope) .event-compact-row-price {
+  color: rgb(var(--tb-secondary, var(--tb-primary, 0 0 0)));
+  font-weight: 600;
+}
+
+:where(.theme-scope) .event-compact-row-action {
+  display: grid;
+  align-content: center;
+  gap: 1rem;
+  height: 100%;
+  padding-left: clamp(1.5rem, 3vw, 3.2rem);
+  border-left: 1px solid var(--event-compact-divider-color);
+}
+
+:where(.theme-scope) .event-compact-row-datetime {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: rgb(var(--tb-text, 17 24 39));
+  font-size: clamp(0.9375rem, 1.45vw, 1.0625rem);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+:where(.theme-scope) .event-compact-row-datetime svg {
+  width: 1.1em;
+  height: 1.1em;
+  flex-shrink: 0;
 }
 
 :where(.theme-scope) .event-compact-row-status {
+  color: rgb(var(--tb-muted, var(--tb-text, 17 24 39)));
   font-weight: 500;
-  opacity: 0.8;
 }
 
 :where(.theme-scope) .event-compact-row-cta {
-  flex-shrink: 0;
+  width: min(100%, 15rem);
+  min-height: 2.7rem;
+  justify-content: space-between;
+  gap: 1rem;
+  border-radius: 9999px;
+  padding-inline: 1.25rem 1rem;
   white-space: nowrap;
 }
 
+:where(.theme-scope) .event-compact-row-cta svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  :where(.theme-scope) .event-listing-compact-container {
+    border-radius: 0.875rem;
+  }
+
+  :where(.theme-scope) .event-compact-row {
+    grid-template-columns: 4.75rem minmax(0, 1fr);
+    min-height: 0;
+    padding: 1.25rem;
+    row-gap: 1.1rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-date {
+    padding-right: 0.9rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-date-day {
+    font-size: 2.35rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-content {
+    gap: 0.75rem;
+    padding-left: 1.1rem;
+    padding-right: 0;
+  }
+
+  :where(.theme-scope) .event-compact-row-title {
+    font-size: clamp(1.35rem, 8vw, 1.9rem);
+    white-space: normal;
+  }
+
+  :where(.theme-scope) .event-compact-row-meta {
+    flex-wrap: wrap;
+    gap: 0.5rem 0.8rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-action {
+    grid-column: 1 / -1;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.85rem;
+    padding-left: 0;
+    padding-top: 1rem;
+    border-left: none;
+    border-top: 1px solid var(--event-compact-divider-color);
+  }
+
+  :where(.theme-scope) .event-compact-row-datetime {
+    white-space: normal;
+  }
+
+  :where(.theme-scope) .event-compact-row-cta {
+    width: 100%;
+  }
+}
+
 
 :where(.theme-scope) .section-state__callout {
   text-align: center;
@@ -8939,3 +9370,65 @@
 }
 
 
+/* =============================================================================
+ * Shared: Heading Decorations
+ * =============================================================================
+ */
+
+:where(.theme-scope) .rb-heading-decoration {
+  display: block;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+
+:where(.theme-scope) .rb-heading-decoration-placement-after-heading {
+  margin-top: 0.35rem;
+}
+
+:where(.theme-scope) .rb-heading-decoration-placement-under-centered-heading {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:where(.theme-scope) .rb-heading-decoration-organic-squiggle {
+  width: clamp(5.5rem, 15vw, 9rem);
+  height: 1.1rem;
+  background-color: currentColor;
+  opacity: 0.9;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+:where(.theme-scope) .rb-heading-decoration-short-center-rule {
+  width: 4.5rem;
+  height: 0.125rem;
+  border-radius: 999px;
+  background-color: currentColor;
+  opacity: 0.75;
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-text {
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-primary {
+  color: rgb(var(--tb-primary));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-secondary {
+  color: rgb(var(--tb-secondary));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-accent {
+  color: rgb(var(--tb-accent));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-border {
+  color: rgb(var(--tb-border));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-muted {
+  color: rgb(var(--tb-mutedText));
+}
+
+