@riverbankcms/sdk 0.145.0 → 0.147.0

package/dist/_dts/theme-core/src/generated/containerResponsiveThemeCss.d.ts

@@ -2,4 +2,4 @@
  * Auto-generated by scripts/generate-container-responsive-css.ts
  * Do not edit by hand.
  */
-export declare const containerResponsiveThemeCss = "/*\n * Blocks Theme CSS\n *\n * Import order matters for CSS cascade.\n * SDK bundler (packages/sdk/tsup.config.ts) parses this file to determine bundle order.\n *\n * Layer order: rb-theme (lowest priority) < rb-utilities (highest priority)\n * This allows utility classes like .rb-text-sm to override theme defaults.\n *\n * 1. Layer order declaration\n * 2. RB utilities (@layer rb-utilities) - highest priority, overrides theme\n * 3. Core theme styles (@layer rb-theme) - typography, prose, gradients\n * 4. Accordion animations - keyframes and animation rules\n * 5. Block-specific static CSS - all block styling\n */\n@layer rb-theme, rb-utilities;\n\n/*\n * RB Utilities (CSS-only)\n *\n * Lightweight, hand-maintained utility classes used by block runtime markup.\n * These replace Tailwind utility usage without requiring Tailwind CLI/runtime.\n */\n\n@layer rb-utilities {\n  /* Screen-reader only */\n  .rb-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* Labels */\n  .rb-label {\n    font-size: 0.75rem;\n    line-height: 1rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  /* Eyebrow text - small uppercase labels for section introductions.\n     Each property resolves from the optional eyebrow typographic role\n     (--fs/--fw/--ls/--tt-eyebrow, emitted only when the theme sets them),\n     with the historical hardcoded values as fallbacks so existing themes\n     are unchanged. font-family falls back to the body font likewise. */\n  .rb-eyebrow {\n    font-family: var(--font-eyebrow, var(--font-body));\n    font-size: var(--fs-eyebrow, 0.875rem);\n    font-weight: var(--fw-eyebrow, 600);\n    letter-spacing: var(--ls-eyebrow, 0.025em);\n    text-transform: var(--tt-eyebrow, uppercase);\n  }\n  .rb-eyebrow-treatment-accent {\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill {\n    align-self: center;\n    display: inline-flex;\n    width: fit-content;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 46%, transparent);\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n    padding: 0.5rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    line-height: 1;\n  }\n  .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {\n    border-color: rgb(var(--tb-accent));\n    border-width: 2px;\n    background: rgb(var(--tb-onAccent, 255 255 255) / 0.7);\n    padding: 0.85rem 1.25rem;\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill-bounce {\n    animation: rb-eyebrow-pill-bounce 2s ease-in-out infinite;\n    margin: 0 auto 1.5rem;\n    transform-origin: center;\n    will-change: transform;\n  }\n  @keyframes rb-eyebrow-pill-bounce {\n    0% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n    50% {\n      transform: none;\n      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    }\n    100% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .rb-eyebrow-treatment-pill-bounce {\n      animation: none;\n      will-change: auto;\n    }\n  }\n\n  /* Caption text - small secondary text for captions and metadata (non-uppercase) */\n  .rb-caption {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    font-weight: 400;\n  }\n\n  /* Media shape treatments */\n  .rb-media-shape-square,\n  .rb-media-shape-rounded,\n  .rb-media-shape-circle,\n  .rb-media-shape-arch {\n    overflow: hidden;\n  }\n  .rb-media-shape-square {\n    border-radius: 0;\n  }\n  .rb-media-shape-rounded {\n    border-radius: var(--rb-media-shape-radius, 1rem);\n  }\n  .rb-media-shape-circle {\n    border-radius: 9999px;\n  }\n  .rb-media-shape-arch {\n    border-radius: 9999px 9999px var(--rb-media-shape-arch-base-radius, 0.125rem)\n      var(--rb-media-shape-arch-base-radius, 0.125rem);\n  }\n\n  /* Navigation typography */\n  .rb-nav-text {\n    font-size: 0.875rem;\n    font-weight: 500;\n  }\n  .rb-nav-text-mobile {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  /* Display */\n  .rb-min-h-screen {\n    min-height: 100vh;\n  }\n  .rb-min-h-full {\n    min-height: 100%;\n  }\n  .rb-block {\n    display: block;\n  }\n  .rb-inline-block {\n    display: inline-block;\n  }\n  .rb-flex {\n    display: flex;\n  }\n  .rb-inline-flex {\n    display: inline-flex;\n  }\n  .rb-grid {\n    display: grid;\n  }\n  .rb-hidden {\n    display: none;\n  }\n  .rb-isolate {\n    isolation: isolate;\n  }\n\n  /* Position */\n  .rb-relative {\n    position: relative;\n  }\n  .rb-absolute {\n    position: absolute;\n  }\n  .rb-fixed {\n    position: fixed;\n  }\n  .rb-sticky {\n    position: sticky;\n  }\n  .rb-inset-0 {\n    inset: 0;\n  }\n  .rb-top-0 {\n    top: 0;\n  }\n  .rb-top-4 {\n    top: 1rem;\n  }\n  .rb-top-full {\n    top: 100%;\n  }\n  .rb-top-1\\/2 {\n    top: 50%;\n  }\n  .rb-bottom-0 {\n    bottom: 0;\n  }\n  .rb-left-0 {\n    left: 0;\n  }\n  .rb-left-1\\/2 {\n    left: 50%;\n  }\n  .rb-right-0 {\n    right: 0;\n  }\n\n  /* Anchors (background positioning helpers) */\n  .rb-anchor-center {\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n  .rb-anchor-top {\n    left: 50%;\n    top: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-bottom {\n    left: 50%;\n    bottom: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-left {\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-right {\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-top-left {\n    left: 0;\n    top: 0;\n  }\n  .rb-anchor-top-right {\n    right: 0;\n    top: 0;\n  }\n  .rb-anchor-bottom-left {\n    left: 0;\n    bottom: 0;\n  }\n  .rb-anchor-bottom-right {\n    right: 0;\n    bottom: 0;\n  }\n\n  /* Z-index */\n  .rb-z-neg-10 {\n    z-index: -10;\n  }\n  .rb-z-0 {\n    z-index: 0;\n  }\n  .rb-z-10 {\n    z-index: 10;\n  }\n  .rb-z-40 {\n    z-index: 40;\n  }\n  .rb-z-50 {\n    z-index: 50;\n  }\n\n  /* Sizing */\n  .rb-w-auto {\n    width: auto;\n  }\n  .rb-w-full {\n    width: 100%;\n  }\n  .rb-w-calc-100-minus-2rem {\n    width: calc(100% - 2rem);\n  }\n  .rb-w-4 {\n    width: 1rem;\n  }\n  .rb-w-5 {\n    width: 1.25rem;\n  }\n  .rb-w-10 {\n    width: 2.5rem;\n  }\n  .rb-w-12 {\n    width: 3rem;\n  }\n  .rb-w-24 {\n    width: 6rem;\n  }\n  .rb-h-0\\.5 {\n    height: 0.125rem;\n  }\n  .rb-h-4 {\n    height: 1rem;\n  }\n  .rb-h-8 {\n    height: 2rem;\n  }\n  .rb-h-10 {\n    height: 2.5rem;\n  }\n  .rb-h-12 {\n    height: 3rem;\n  }\n  .rb-h-16 {\n    height: 4rem;\n  }\n  .rb-h-24 {\n    height: 6rem;\n  }\n  .rb-h-32 {\n    height: 8rem;\n  }\n  .rb-h-48 {\n    height: 12rem;\n  }\n  .rb-h-56 {\n    height: 14rem;\n  }\n  .rb-h-auto {\n    height: auto;\n  }\n  .rb-h-full {\n    height: 100%;\n  }\n  .rb-section-min-h-banner {\n    min-height: clamp(16rem, 34svh, 24rem);\n  }\n  .rb-section-min-h-hero {\n    min-height: clamp(32rem, 62svh, 44rem);\n  }\n  .rb-section-min-h-immersive {\n    min-height: clamp(38rem, 78svh, 54rem);\n  }\n  .rb-section-min-h-banner > .rb-container,\n  .rb-section-min-h-hero > .rb-container,\n  .rb-section-min-h-immersive > .rb-container {\n    min-height: inherit;\n  }\n  .rb-min-w-0 {\n    min-width: 0;\n  }\n  .rb-min-w-12rem {\n    min-width: 12rem;\n  }\n  .rb-max-w-none {\n    max-width: none;\n  }\n  .rb-max-w-xl {\n    max-width: 36rem;\n  }\n  .rb-max-w-2xl {\n    max-width: 42rem;\n  }\n  .rb-max-w-3xl {\n    max-width: 48rem;\n  }\n  .rb-max-w-4xl {\n    max-width: 56rem;\n  }\n  .rb-max-w-5xl {\n    max-width: 64rem;\n  }\n  .rb-max-w-6xl {\n    max-width: 72rem;\n  }\n  .rb-max-w-7xl {\n    max-width: 80rem;\n  }\n  .rb-max-w-prose {\n    max-width: 65ch;\n  }\n  .rb-aspect-video {\n    aspect-ratio: 16 / 9;\n  }\n\n  /* Flex */\n  .rb-flex-1 {\n    flex: 1 1 0%;\n  }\n  .rb-flex-col {\n    flex-direction: column;\n  }\n  .rb-flex-row {\n    flex-direction: row;\n  }\n  .rb-flex-wrap {\n    flex-wrap: wrap;\n  }\n  .rb-basis-full {\n    flex-basis: 100%;\n  }\n  .rb-basis-1-2 {\n    flex-basis: 50%;\n  }\n  .rb-basis-1-3 {\n    flex-basis: 33.333333%;\n  }\n  .rb-basis-1-4 {\n    flex-basis: 25%;\n  }\n  .rb-basis-1-5 {\n    flex-basis: 20%;\n  }\n  .rb-basis-1-6 {\n    flex-basis: 16.666667%;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-md-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-md-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-md-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-md-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-md-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-lg-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-lg-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-lg-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-lg-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-lg-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  .rb-shrink-0 {\n    flex-shrink: 0;\n  }\n  .rb-flex-shrink-0 {\n    flex-shrink: 0;\n  }\n\n  /* Grid */\n  .rb-grid-rows-main-footer {\n    grid-template-rows: minmax(0, 1fr) auto;\n  }\n  .rb-grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .rb-row-start-1 {\n    grid-row-start: 1;\n  }\n  .rb-row-start-2 {\n    grid-row-start: 2;\n  }\n  .rb-col-start-1 {\n    grid-column-start: 1;\n  }\n  .rb-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .rb-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .rb-grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-md-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-5 {\n        grid-template-columns: repeat(5, minmax(0, 1fr));\n      }\n      .rb-lg-w-3\\/4 {\n        width: 75%;\n      }\n      .rb-lg-col-span-1 {\n        grid-column: span 1 / span 1;\n      }\n      .rb-lg-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n      .rb-lg-col-span-3 {\n        grid-column: span 3 / span 3;\n      }\n      .rb-lg-col-span-4 {\n        grid-column: span 4 / span 4;\n      }\n      .rb-lg-col-span-5 {\n        grid-column: span 5 / span 5;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-xl-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n\n  /*\n   * Responsive fractional grid tracks (rb-grid-tracks).\n   *\n   * Asymmetric AND responsive grid-template-columns, driven by inline custom\n   * properties the Grid primitive sets per breakpoint from string track\n   * templates:\n   *   --rb-gtc-base / --rb-gtc-sm / --rb-gtc-md / --rb-gtc-lg / --rb-gtc-xl\n   * Each breakpoint falls back to the next smaller one, so only the breakpoints\n   * an author actually sets take effect (e.g. base '1fr' + lg '1fr 0.9fr'\n   * collapses to a single column below lg). Authored here (not per node) so the\n   * @media -> @container conversion (container responsive mode) applies too.\n   */\n  .rb-grid-tracks {\n    grid-template-columns: var(--rb-gtc-base, 1fr);\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-sm, var(--rb-gtc-base, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr))));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-xl, var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)))));\n      }\n    }\n\n}\n\n  /* Alignment */\n  .rb-items-start {\n    align-items: flex-start;\n  }\n  .rb-items-center {\n    align-items: center;\n  }\n  .rb-items-end {\n    align-items: flex-end;\n  }\n  .rb-items-stretch {\n    align-items: stretch;\n  }\n  .rb-items-baseline {\n    align-items: baseline;\n  }\n  .rb-justify-start {\n    justify-content: flex-start;\n  }\n  .rb-justify-center {\n    justify-content: center;\n  }\n  .rb-justify-end {\n    justify-content: flex-end;\n  }\n  .rb-justify-between {\n    justify-content: space-between;\n  }\n\n  /* Gap / spacing */\n  .rb-gap-0 {\n    gap: 0;\n  }\n  .rb-gap-1 {\n    gap: 0.25rem;\n  }\n  .rb-gap-2 {\n    gap: 0.5rem;\n  }\n  .rb-gap-3 {\n    gap: 0.75rem;\n  }\n  .rb-gap-4 {\n    gap: 1rem;\n  }\n  .rb-gap-5 {\n    gap: 1.25rem;\n  }\n  .rb-gap-6 {\n    gap: 1.5rem;\n  }\n  .rb-gap-8 {\n    gap: 2rem;\n  }\n  .rb-gap-10 {\n    gap: 2.5rem;\n  }\n  .rb-gap-x-6 {\n    column-gap: 1.5rem;\n  }\n  .rb-gap-x-8 {\n    column-gap: 2rem;\n  }\n  .rb-gap-y-3 {\n    row-gap: 0.75rem;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-gap-0 {\n        gap: 0;\n      }\n      .rb-md-gap-10 {\n        gap: 2.5rem;\n      }\n    }\n\n}\n\n  .rb-space-y-1 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.25rem;\n  }\n  .rb-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.5rem;\n  }\n  .rb-space-y-3 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.75rem;\n  }\n  .rb-space-y-6 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 1.5rem;\n  }\n\n  /* Padding */\n  .rb-p-0 {\n    padding: 0;\n  }\n  .rb-p-2 {\n    padding: 0.5rem;\n  }\n  .rb-p-3 {\n    padding: 0.75rem;\n  }\n  .rb-p-4 {\n    padding: 1rem;\n  }\n  .rb-p-5 {\n    padding: 1.25rem;\n  }\n  .rb-p-6 {\n    padding: 1.5rem;\n  }\n  .rb-p-8 {\n    padding: 2rem;\n  }\n  .rb-p-12 {\n    padding: 3rem;\n  }\n  .rb-px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n  .rb-px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .rb-pl-4 {\n    padding-left: 1rem;\n  }\n  .rb-py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .rb-py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem;\n  }\n  .rb-py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .rb-py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n  .rb-py-4 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .rb-py-6 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .rb-py-10 {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n  /* Clearance for a surface that is not an authored block page.\n     An authored page gets this through its opening block's container (see the\n     overlay-clearance rule in styles.css). A reserved surface or a system\n     destination page has no such block, so it consumes the same variable here.\n     Marked with one class rather than per-surface selectors, because the last\n     two additions to this family were both missed and shipped overlapping. */\n  :where(.theme-scope)\n    [data-site-document-layout-mode=\"header-overlay\"]\n    .rb-overlay-clearance-surface {\n    padding-top: calc(\n      var(--site-overlay-header-clearance, 5.5rem) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n  .rb-preview-editor-offset {\n    padding-bottom: calc(\n      var(--builder-editor-chrome-offset, 0px) +\n      var(--builder-preview-banner-offset, 0px)\n    );\n  }\n  .rb-py-12 {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n  .rb-py-16 {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  .rb-pb-4 {\n    padding-bottom: 1rem;\n  }\n  .rb-pb-6 {\n    padding-bottom: 1.5rem;\n  }\n  .rb-pt-4 {\n    padding-top: 1rem;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-py-16 {\n        padding-top: 4rem;\n        padding-bottom: 4rem;\n      }\n      .rb-sm-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-sm-p-6 {\n        padding: 1.5rem;\n      }\n      .rb-sm-flex {\n        display: flex;\n      }\n      .rb-sm-block {\n        display: block;\n      }\n      .rb-sm-inline {\n        display: inline;\n      }\n      .rb-sm-inline-block {\n        display: inline-block;\n      }\n      .rb-sm-inline-flex {\n        display: inline-flex;\n      }\n      .rb-sm-grid {\n        display: grid;\n      }\n      .rb-sm-hidden {\n        display: none;\n      }\n      .rb-sm-flex-row {\n        flex-direction: row;\n      }\n      .rb-sm-items-start {\n        align-items: flex-start;\n      }\n      .rb-sm-items-center {\n        align-items: center;\n      }\n      .rb-sm-justify-between {\n        justify-content: space-between;\n      }\n      .rb-sm-p-8 {\n        padding: 2rem;\n      }\n      .rb-sm-text-lg {\n        font-size: 1.125rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-xl {\n        font-size: 1.25rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-4xl {\n        font-size: 2.25rem;\n        line-height: 2.5rem;\n      }\n\n      .rb-sm-w-auto {\n        width: auto;\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-md-py-24 {\n        padding-top: 6rem;\n        padding-bottom: 6rem;\n      }\n      .rb-md-w-1\\/3 {\n        width: 33.333333%;\n      }\n\n      .rb-md-flex {\n        display: flex;\n      }\n      .rb-md-block {\n        display: block;\n      }\n      .rb-md-inline {\n        display: inline;\n      }\n      .rb-md-inline-block {\n        display: inline-block;\n      }\n      .rb-md-inline-flex {\n        display: inline-flex;\n      }\n      .rb-md-grid {\n        display: grid;\n      }\n      .rb-md-hidden {\n        display: none;\n      }\n      .rb-md-flex-row {\n        flex-direction: row;\n      }\n      .rb-md-flex-row-reverse {\n        flex-direction: row-reverse;\n      }\n      .rb-md-items-start {\n        align-items: flex-start;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-flex {\n        display: flex;\n      }\n      .rb-lg-block {\n        display: block;\n      }\n      .rb-lg-inline {\n        display: inline;\n      }\n      .rb-lg-inline-block {\n        display: inline-block;\n      }\n      .rb-lg-inline-flex {\n        display: inline-flex;\n      }\n      .rb-lg-grid {\n        display: grid;\n      }\n      .rb-lg-hidden {\n        display: none;\n      }\n      .rb-lg-flex-row {\n        flex-direction: row;\n      }\n      .rb-lg-items-center {\n        align-items: center;\n      }\n    }\n\n}\n\n  /* Margin */\n  .rb-m-0 {\n    margin: 0;\n  }\n  .rb-mx-auto {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .rb-ml-auto {\n    margin-left: auto;\n  }\n  .rb-mt-auto {\n    margin-top: auto;\n  }\n  .rb-mt-0\\.5 {\n    margin-top: 0.125rem;\n  }\n  .rb-mt-1 {\n    margin-top: 0.25rem;\n  }\n  .rb-mt-2 {\n    margin-top: 0.5rem;\n  }\n  .rb-mt-4 {\n    margin-top: 1rem;\n  }\n  .rb-mt-6 {\n    margin-top: 1.5rem;\n  }\n  .rb-mt-8 {\n    margin-top: 2rem;\n  }\n  .rb-mt-10 {\n    margin-top: 2.5rem;\n  }\n  .rb-mt-12 {\n    margin-top: 3rem;\n  }\n  .rb-mb-1 {\n    margin-bottom: 0.25rem;\n  }\n  .rb-mb-2 {\n    margin-bottom: 0.5rem;\n  }\n  .rb-mb-3 {\n    margin-bottom: 0.75rem;\n  }\n  .rb-mb-4 {\n    margin-bottom: 1rem;\n  }\n  .rb-mb-8 {\n    margin-bottom: 2rem;\n  }\n  .rb-ml-1 {\n    margin-left: 0.25rem;\n  }\n  .rb-ml-2 {\n    margin-left: 0.5rem;\n  }\n  .rb-ml-6 {\n    margin-left: 1.5rem;\n  }\n  .rb-mr-2 {\n    margin-right: 0.5rem;\n  }\n\n  /* Borders */\n  .rb-border {\n    border-width: 1px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-0 {\n    border-width: 0;\n  }\n  .rb-border-2 {\n    border-width: 2px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-3 {\n    border-width: 3px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-b {\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-border-t {\n    border-top-width: 1px;\n    border-top-style: solid;\n    border-top-color: rgb(var(--tb-border));\n  }\n  .rb-border-dashed {\n    border-style: dashed;\n  }\n  .rb-border-current {\n    border-color: currentColor;\n  }\n  .rb-border-transparent {\n    border-color: transparent;\n  }\n  .rb-border-b-2 {\n    border-bottom-width: 2px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-last-border-b-0:last-child {\n    border-bottom-width: 0;\n  }\n\n  /* Radius */\n  .rb-rounded-none {\n    border-radius: 0;\n  }\n  .rb-rounded-sm {\n    border-radius: 0.125rem;\n  }\n  .rb-rounded {\n    border-radius: 0.25rem;\n  }\n  .rb-rounded-md {\n    border-radius: 0.375rem;\n  }\n  .rb-rounded-lg {\n    border-radius: 0.5rem;\n  }\n  .rb-rounded-xl {\n    border-radius: 0.75rem;\n  }\n  .rb-rounded-2xl {\n    border-radius: 1rem;\n  }\n  .rb-rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rb-rounded-full {\n    border-radius: 9999px;\n  }\n\n  /* Shadow */\n  /*\n   * Shadows are theme-driven via CSS variables:\n   * - `--shadow-sm|md|lg|xl|2xl` for size-specific utilities\n   * - `--shadow-elev` as a generic fallback (used by bridge/runtime defaults)\n   */\n  .rb-shadow-sm {\n    box-shadow: var(--shadow-sm, var(--shadow-elev));\n  }\n  .rb-shadow-md {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n  .rb-shadow-lg {\n    box-shadow: var(--shadow-lg, var(--shadow-elev));\n  }\n  .rb-shadow-xl {\n    box-shadow: var(--shadow-xl, var(--shadow-elev));\n  }\n  .rb-shadow-2xl {\n    box-shadow: var(--shadow-2xl, var(--shadow-xl, var(--shadow-elev)));\n  }\n  .hover\\:rb-shadow-md:hover {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n\n  /* Overflow */\n  .rb-overflow-hidden {\n    overflow: hidden;\n  }\n  .rb-overflow-visible {\n    overflow: visible;\n  }\n  .rb-overflow-x-auto {\n    overflow-x: auto;\n  }\n  .rb-overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  /* Layout */\n  .rb-break-inside-avoid {\n    break-inside: avoid;\n    page-break-inside: avoid;\n    -webkit-column-break-inside: avoid;\n  }\n\n  /* Scroll snap */\n  .rb-snap-x {\n    scroll-snap-type: x var(--rb-scroll-snap-strictness, mandatory);\n  }\n  .rb-snap-mandatory {\n    --rb-scroll-snap-strictness: mandatory;\n  }\n  .rb-snap-start {\n    scroll-snap-align: start;\n  }\n\n  /* Background */\n  .rb-bg-transparent {\n    background-color: transparent;\n  }\n  .rb-bg-current {\n    background-color: currentColor;\n  }\n  .rb-bg-black-40 {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .rb-bg-surface {\n    background-color: rgb(var(--tb-surface));\n  }\n  .rb-bg-background {\n    background-color: rgb(var(--tb-background));\n  }\n\n  /* Typography */\n  .rb-text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .rb-text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n  .rb-text-base {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n  .rb-text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-xl {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n  .rb-text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n  .rb-font-medium {\n    font-weight: 500;\n  }\n  .rb-font-semibold {\n    font-weight: 600;\n  }\n  .rb-font-bold {\n    font-weight: 700;\n  }\n  .rb-font-mono {\n    font-family:\n      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n  }\n  .rb-leading-relaxed {\n    line-height: 1.625;\n  }\n  .rb-tracking-tight {\n    letter-spacing: -0.025em;\n  }\n  .rb-tracking-wide {\n    letter-spacing: 0.025em;\n  }\n  .rb-text-left {\n    text-align: left;\n  }\n  .rb-text-center {\n    text-align: center;\n  }\n  .rb-text-right {\n    text-align: right;\n  }\n\n  /* Text decoration */\n  .rb-no-underline {\n    text-decoration: none;\n  }\n  .rb-underline {\n    text-decoration-line: underline;\n  }\n  .rb-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .rb-nav-underline:hover,\n  .rb-nav-underline[data-active=\"true\"],\n  .rb-nav-underline[aria-current=\"page\"] {\n    text-decoration: underline;\n  }\n  .rb-nav-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n\n  .rb-uppercase {\n    text-transform: uppercase;\n  }\n  .rb-truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Opacity */\n  .rb-opacity-0 {\n    opacity: 0;\n  }\n  .rb-opacity-30 {\n    opacity: 0.3;\n  }\n  .rb-opacity-50 {\n    opacity: 0.5;\n  }\n  .rb-opacity-60 {\n    opacity: 0.6;\n  }\n  .rb-opacity-70 {\n    opacity: 0.7;\n  }\n  .rb-opacity-75 {\n    opacity: 0.75;\n  }\n  .rb-opacity-80 {\n    opacity: 0.8;\n  }\n  .rb-opacity-90 {\n    opacity: 0.9;\n  }\n  .rb-opacity-100 {\n    opacity: 1;\n  }\n  .rb-hover-opacity-80:hover {\n    opacity: 0.8;\n  }\n\n  /* Pointer events */\n  .rb-pointer-events-none {\n    pointer-events: none;\n  }\n  .rb-pointer-events-auto {\n    pointer-events: auto;\n  }\n\n  /* Cursor */\n  .rb-cursor-pointer {\n    cursor: pointer;\n  }\n  .rb-cursor-default {\n    cursor: default;\n  }\n  .rb-cursor-wait {\n    cursor: wait;\n  }\n\n  /* Transitions */\n  .rb-transition-all {\n    transition-property: all;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-colors {\n    transition-property:\n      color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-transform {\n    transition-property: transform;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-duration-200 {\n    transition-duration: 200ms;\n  }\n  .rb-duration-300 {\n    transition-duration: 300ms;\n  }\n  .rb-duration-500 {\n    transition-duration: 500ms;\n  }\n  .rb-ease-in-out {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @keyframes rb-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .rb-animate-spin {\n    animation: rb-spin 1s linear infinite;\n  }\n\n  /* Spinner (themeable via currentColor) */\n  .rb-spinner {\n    --rb-spinner-size: 2rem;\n    --rb-spinner-duration: 0.9s;\n    --rb-spinner-track-color: rgba(var(--tb-foreground), 0.15);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--rb-spinner-size);\n    height: var(--rb-spinner-size);\n    color: rgb(var(--tb-primary));\n    animation: rb-spin var(--rb-spinner-duration) linear infinite;\n  }\n\n  .rb-spinner svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .rb-spinner--inherit {\n    color: inherit;\n  }\n\n  .rb-spinner--xs {\n    --rb-spinner-size: 0.75rem;\n  }\n\n  .rb-spinner--sm {\n    --rb-spinner-size: 1rem;\n  }\n\n  .rb-spinner--md {\n    --rb-spinner-size: 2rem;\n  }\n\n  .rb-spinner--lg {\n    --rb-spinner-size: 4rem;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-spinner {\n      animation-duration: 1.5s;\n    }\n  }\n\n  @keyframes rb-marquee {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(calc(-50% - (var(--rb-marquee-gap, 2rem) / 2)));\n    }\n  }\n  .rb-animate-marquee {\n    animation: rb-marquee var(--rb-marquee-duration, 40s) linear infinite;\n    animation-direction: var(--rb-marquee-direction, normal);\n    gap: var(--rb-marquee-gap, 2rem);\n  }\n  .rb-marquee-pause-on-hover:hover .rb-animate-marquee {\n    animation-play-state: paused;\n  }\n\n  .rb-image-gallery-marquee {\n    overflow: hidden;\n    width: 100%;\n  }\n\n  @container rb-site (max-width: 639px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-image-gallery-marquee {\n        overflow-x: auto;\n        overflow-y: hidden;\n        -webkit-overflow-scrolling: touch;\n        touch-action: pan-x;\n        scrollbar-width: none;\n      }\n\n      .rb-image-gallery-marquee::-webkit-scrollbar {\n        display: none;\n      }\n\n      /* Let users swipe smoothly without fighting autoplay while interacting. */\n      .rb-image-gallery-marquee:active .rb-animate-marquee,\n      .rb-image-gallery-marquee:focus-within .rb-animate-marquee {\n        animation-play-state: paused;\n      }\n\n      .rb-container-full.rb-image-gallery-marquee-container {\n        padding-left: 0;\n        padding-right: 0;\n      }\n\n      /* Marquee variant: keep images in color on mobile for legibility. */\n      .rb-image-gallery-marquee-container .rb-filter-grayscale,\n      .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {\n        filter: none;\n      }\n\n      .rb-image-gallery-marquee-container\n        .rb-filter-grayscale-hover-reveal:hover {\n        filter: none;\n      }\n    }\n\n}\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-animate-marquee {\n      animation: none !important;\n      transform: none !important;\n    }\n    .rb-image-gallery-marquee {\n      overflow-x: auto;\n      overflow-y: hidden;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n\n  /* Filters */\n  .rb-filter-grayscale {\n    filter: grayscale(100%);\n  }\n  .rb-filter-grayscale-hover-reveal {\n    filter: grayscale(100%);\n    transition: filter 500ms ease;\n  }\n  .rb-filter-grayscale-hover-reveal:hover {\n    filter: grayscale(0%);\n  }\n  .rb-filter-sepia {\n    filter: sepia(100%);\n  }\n\n  /* Transforms */\n  .rb-transform-gpu {\n    transform: translateZ(0);\n  }\n  .rb-will-change-transform {\n    will-change: transform;\n  }\n  .rb-translate-x-neg-1\\/2 {\n    transform: translateX(-50%);\n  }\n  .rb-hover-scale-105:hover {\n    transform: scale(1.05);\n  }\n  .rb-hover-scale-125:hover {\n    transform: scale(1.25);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .rb-motion-safe-hover-scale-105:hover {\n      transform: scale(1.05);\n    }\n  }\n\n  /* Object fit */\n  .rb-object-cover {\n    object-fit: cover;\n  }\n  .rb-object-contain {\n    object-fit: contain;\n  }\n  .rb-bg-motion-fixed-frame {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100svh;\n  }\n  .rb-bg-motion-fixed-frame-scope {\n    -webkit-clip-path: inset(0);\n    clip-path: inset(0);\n  }\n  @media (hover: none), (prefers-reduced-motion: reduce) {\n    .rb-bg-motion-fixed-frame {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  /* Line clamp */\n  .rb-line-clamp-2,\n  .rb-line-clamp-3,\n  .rb-line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n  }\n  .rb-line-clamp-2 {\n    -webkit-line-clamp: 2;\n  }\n  .rb-line-clamp-3 {\n    -webkit-line-clamp: 3;\n  }\n  .rb-line-clamp-4 {\n    -webkit-line-clamp: 4;\n  }\n\n  /* Typography */\n  .rb-italic {\n    font-style: italic;\n  }\n\n  /* Container helpers */\n  .rb-container {\n    max-width: 80rem;\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-full {\n    width: 100%;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-bleed {\n    width: 100%;\n    max-width: none;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container,\n      .rb-container-full {\n        padding-left: 1.5rem;\n        padding-right: 1.5rem;\n      }\n    }\n\n}\n\n  /* Flex alignment */\n  .rb-self-start {\n    align-self: flex-start;\n  }\n\n  /* Semantic spacing tokens (replaces Tailwind maps in src/system/spacing.ts) */\n  .rb-section-pad-none {\n    --rb-section-pad-y: 0rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-compact {\n    --rb-section-pad-y: 1.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-cozy {\n    --rb-section-pad-y: 2.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-medium {\n    --rb-section-pad-y: 3rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-comfortable {\n    --rb-section-pad-y: 4rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-spacious {\n    --rb-section-pad-y: 5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-section-pad-compact {\n        --rb-section-pad-y: 2rem;\n      }\n      .rb-section-pad-cozy {\n        --rb-section-pad-y: 3.5rem;\n      }\n      .rb-section-pad-medium {\n        --rb-section-pad-y: 4rem;\n      }\n      .rb-section-pad-comfortable {\n        --rb-section-pad-y: 5rem;\n      }\n      .rb-section-pad-spacious {\n        --rb-section-pad-y: 7rem;\n      }\n    }\n\n}\n\n  .rb-container-pad-none {\n    --rb-card-pad: 0rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-compact {\n    --rb-card-pad: 1rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-cozy {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-medium {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-comfortable {\n    --rb-card-pad: 2rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-spacious {\n    --rb-card-pad: 2.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container-pad-compact {\n        --rb-card-pad: 1.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-cozy {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-medium {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-comfortable {\n        --rb-card-pad: 2.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-spacious {\n        --rb-card-pad: 3.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n    }\n\n}\n\n  /* Semantic gap tokens (theme-aware via --space-mult) */\n  .rb-gap-semantic-none {\n    --rb-semantic-gap: 0px;\n    gap: 0;\n  }\n  .rb-gap-semantic-compact {\n    --rb-semantic-gap: calc(1rem * var(--space-mult, 1));\n    gap: calc(1rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-cozy {\n    --rb-semantic-gap: calc(1.75rem * var(--space-mult, 1));\n    gap: calc(1.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-medium {\n    --rb-semantic-gap: calc(2.75rem * var(--space-mult, 1));\n    gap: calc(2.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-comfortable {\n    --rb-semantic-gap: calc(4.5rem * var(--space-mult, 1));\n    gap: calc(4.5rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-spacious {\n    --rb-semantic-gap: calc(6.5rem * var(--space-mult, 1));\n    gap: calc(6.5rem * var(--space-mult, 1));\n  }\n\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-gap-semantic-compact {\n        --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));\n        gap: calc(1.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-cozy {\n        --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));\n        gap: calc(2.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-medium {\n        --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));\n        gap: calc(3.5rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-comfortable {\n        --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));\n        gap: calc(5.75rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-spacious {\n        --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));\n        gap: calc(8.75rem * var(--space-mult, 1));\n      }\n    }\n\n}\n\n  /* Backdrop blur helpers */\n  .rb-backdrop-blur {\n    backdrop-filter: blur(10px);\n  }\n  @supports not (\n    (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))\n  ) {\n    .rb-backdrop-blur {\n      backdrop-filter: none;\n    }\n  }\n}\n\n@layer rb-theme {\n  /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */\n  :root {\n    /* --tb-primary: 17 24 39;\n  --tb-text: 17 24 39;\n  --tb-muted: 107 114 128;\n  --tb-bg: 255 255 255;\n  --tb-surface: 248 250 252;\n  --tb-border: 229 231 235;\n\n  --radius-control: 12px;\n  --radius-card: 12px;\n\n  --shadow-elev: 0 1px 2px rgba(0,0,0,.06);\n\n  --fs-h1: 32px;\n  --fs-h2: 24px;\n  --fs-h3: 20px;\n  --fs-body: 16px;\n\n  --font-heading: ui-sans-serif, system-ui, sans-serif;\n  --font-body: ui-sans-serif, system-ui, sans-serif;\n\n  --motion-duration: 180ms;\n  --motion-ease: cubic-bezier(.2,.8,.2,1); */\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Modal                                                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .rb-modal-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--rb-modal-z-index, 20000);\n    display: grid;\n    place-items: center;\n    padding: 1rem;\n    /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */\n    background-color: rgba(0, 0, 0, 0.6);\n    background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));\n  }\n\n  :where(.theme-scope) .rb-modal {\n    width: min(var(--rb-modal-max-width, 560px), 100%);\n    background: var(--rb-modal-bg, rgb(var(--tb-surface)));\n    color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-text-color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-heading-color: var(--rb-modal-heading, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-supporting-color: var(--rb-modal-supporting, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n    border-radius: var(--rb-modal-radius, var(--radius-card));\n    box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));\n  }\n\n  :where(.theme-scope) .rb-modal__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 1rem 1rem 0.75rem;\n    border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n  }\n\n  :where(.theme-scope) .rb-modal__title {\n    margin: 0;\n    font-family: var(--font-heading);\n    font-size: 1.0625rem;\n    font-weight: 600;\n    color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));\n  }\n\n  :where(.theme-scope) .rb-modal__close {\n    background: transparent;\n    border: none;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    line-height: 1;\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    cursor: pointer;\n    display: grid;\n    place-items: center;\n    border-radius: var(--radius-control);\n  }\n\n  :where(.theme-scope) .rb-modal__close:hover {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    background: rgba(var(--tb-border), 0.2);\n  }\n\n  :where(.theme-scope) .rb-modal__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);\n  }\n\n  :where(.theme-scope) .rb-modal__body {\n    padding: 0.875rem 1rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    font-size: 0.9375rem;\n    line-height: 1.45;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Site document overlay header clearance                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container {\n    --rb-opening-content-clearance: calc(\n      var(--site-overlay-header-clearance, 0px) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container:not([class*='rb-container-pad-']) {\n    padding-top: var(--rb-opening-content-clearance, 0px);\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container\n    :where([class*='rb-container-pad-']) {\n    --rb-opening-content-clearance: 0px;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile nav overlay transitions                                      */\n  /* -------------------------------------------------------------------------- */\n\n  /* Keep the overlay in the DOM so we can transition opacity/transform.\n   JS toggles `aria-hidden` + `inert` (via enhancer), and CSS uses pointer-events\n   to prevent interaction while closed. */\n  .nav-mobile-overlay {\n    pointer-events: none;\n    /* Prevent transformed children (panel) from creating viewport scrollbars\n     during enter/exit transitions. */\n    overflow: hidden;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] {\n    pointer-events: auto;\n  }\n\n  .nav-mobile-overlay .nav-mobile-backdrop {\n    opacity: 0;\n    transition: opacity var(--motion-duration, 180ms)\n      var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-backdrop {\n    opacity: 1;\n  }\n\n  .nav-mobile-overlay .nav-mobile-panel {\n    opacity: 0;\n    transform: translate3d(12px, 0, 0);\n    overflow-x: hidden;\n    transition:\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: opacity, transform;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-panel {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile toggle hamburger -> X                                       */\n  /* -------------------------------------------------------------------------- */\n\n  .nav-mobile-toggle .nav-mobile-bar {\n    transform-origin: center;\n    transition:\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: transform, opacity;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-top {\n    transform: translateY(6px) rotate(45deg);\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-middle {\n    opacity: 0;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-bottom {\n    transform: translateY(-6px) rotate(-45deg);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-mobile-overlay .nav-mobile-backdrop,\n    .nav-mobile-overlay .nav-mobile-panel {\n      transition: none;\n      transform: none;\n    }\n\n    .nav-mobile-toggle .nav-mobile-bar {\n      transition: none;\n    }\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile floating/glass backing                                      */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .header-variant-floating .header-mobile-bar {\n    align-items: flex-start;\n    margin-top: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-variant-floating .nav-mobile-toggle {\n    border: 1px solid rgb(var(--tb-border) / 0.82);\n    background: rgb(var(--tb-surface) / 0.96);\n    color: rgb(var(--tb-text));\n    box-shadow: none;\n  }\n\n  /*\n * Theme Scope Styles\n *\n * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them\n * zero specificity. This allows SDK site custom styles to easily override\n * theme defaults without needing !important or high-specificity selectors.\n *\n * Example: `h4 { color: white; }` will override `:where(:where(.theme-scope)) h4`\n */\n\n  :where(:where(.theme-scope)) {\n    font-family: var(--font-body);\n    letter-spacing: var(--ls-body);\n    line-height: var(--lh-body);\n    font-weight: var(--font-weight-body);\n\n    & h1,\n    & h2,\n    & h3,\n    & h4,\n    & h5,\n    & h6 {\n      font-family: var(--font-heading);\n      /* Color is set by generateTypographyCss.ts with full cascade:\n       --rb-surface-heading-color -> --rb-surface-text-color -> --hc-hN -> --hc-heading -> global text */\n      font-weight: var(--font-weight-heading);\n      text-transform: var(--tt-heading);\n      font-variant-caps: var(--fv-heading);\n    }\n  }\n\n  /* Heading typographic overrides (fallback to defaults when not provided) */\n  :where(:where(.theme-scope)) h1 {\n    letter-spacing: var(--ls-h1, var(--ls-heading));\n    line-height: var(--lh-h1, var(--lh-heading));\n    font-weight: var(--fw-h1, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h2 {\n    letter-spacing: var(--ls-h2, var(--ls-heading));\n    line-height: var(--lh-h2, var(--lh-heading));\n    font-weight: var(--fw-h2, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h3 {\n    letter-spacing: var(--ls-h3, var(--ls-heading));\n    line-height: var(--lh-h3, var(--lh-heading));\n    font-weight: var(--fw-h3, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h4,\n  :where(:where(.theme-scope)) h5,\n  :where(:where(.theme-scope)) h6 {\n    letter-spacing: var(--ls-heading);\n    line-height: var(--lh-heading);\n  }\n  :where(:where(.theme-scope)) h4 {\n    font-weight: var(--fw-h4, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h5 {\n    font-weight: var(--fw-h5, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h6 {\n    font-weight: var(--fw-h6, var(--font-weight-heading));\n  }\n\n  /* Rich text element spacing based on theme rhythm */\n  :where(.theme-scope) .rb-prose h1 {\n    margin-top: calc(var(--rt-space-y) * 1.6);\n    margin-bottom: calc(var(--rt-space-y) * 0.8);\n  }\n  :where(.theme-scope) .rb-prose h2 {\n    margin-top: calc(var(--rt-space-y) * 1.4);\n    margin-bottom: calc(var(--rt-space-y) * 0.7);\n  }\n  :where(.theme-scope) .rb-prose h3 {\n    margin-top: calc(var(--rt-space-y) * 1.2);\n    margin-bottom: calc(var(--rt-space-y) * 0.6);\n  }\n  :where(.theme-scope) .rb-prose h4 {\n    margin-top: calc(var(--rt-space-y) * 1);\n    margin-bottom: calc(var(--rt-space-y) * 0.5);\n  }\n  :where(.theme-scope) .rb-prose h5 {\n    margin-top: calc(var(--rt-space-y) * 0.9);\n    margin-bottom: calc(var(--rt-space-y) * 0.45);\n  }\n  :where(.theme-scope) .rb-prose h6 {\n    margin-top: calc(var(--rt-space-y) * 0.8);\n    margin-bottom: calc(var(--rt-space-y) * 0.4);\n  }\n  :where(.theme-scope) .rb-prose p {\n    margin: var(--rt-space-y) 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:last-child {\n    margin-bottom: 0;\n  }\n  :where(.theme-scope) .rb-prose img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n    margin: calc(var(--rt-space-y) * 1) 0;\n  }\n  :where(.theme-scope) .rb-prose ul,\n  :where(.theme-scope) .rb-prose ol {\n    margin: var(--rt-space-y) 0;\n    padding-left: 1.25rem;\n  }\n  :where(.theme-scope) .rb-prose ul {\n    list-style-type: disc;\n  }\n  :where(.theme-scope) .rb-prose ol {\n    list-style-type: decimal;\n  }\n  :where(.theme-scope) .rb-prose ul ul {\n    list-style-type: circle;\n  }\n  :where(.theme-scope) .rb-prose ul ul ul {\n    list-style-type: square;\n  }\n  :where(.theme-scope) .rb-prose ol ol {\n    list-style-type: lower-alpha;\n  }\n  :where(.theme-scope) .rb-prose ol ol ol {\n    list-style-type: lower-roman;\n  }\n  :where(.theme-scope) .rb-prose blockquote {\n    margin: calc(var(--rt-space-y) * 1) 0;\n    padding-left: 1rem;\n    border-left: 3px solid rgb(var(--tb-border));\n  }\n  :where(.theme-scope) .rb-prose > :first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Prose color overrides - use theme CSS variables instead of hardcoded colors\n * This makes prose elements automatically adapt to light/dark themes */\n  :where(.theme-scope) .rb-prose {\n    /* Body text inherits from parent, which should already have theme color */\n    color: inherit;\n  }\n\n  /* Prose size variants (theme-aware, CSS-only) */\n  :where(.theme-scope) {\n    /* Body scale + rhythm come from the active theme runtime (ThemeScope) */\n    --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);\n    --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);\n\n    --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);\n    --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);\n\n    /* Applied at >= 640px; below that, rb-prose-lg is typically used */\n    --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);\n    --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);\n  }\n\n  :where(.theme-scope) .rb-prose-sm {\n    font-size: var(--rb-prose-sm-font-size);\n    line-height: var(--rb-prose-sm-line-height);\n  }\n  :where(.theme-scope) .rb-prose-lg {\n    font-size: var(--rb-prose-lg-font-size);\n    line-height: var(--rb-prose-lg-line-height);\n  }\n  @container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-prose-xl-sm {\n      font-size: var(--rb-prose-xl-sm-font-size);\n      line-height: var(--rb-prose-xl-sm-line-height);\n    }\n}\n}\n\n  /* Neutral prose uses theme text color by default */\n  :where(.theme-scope) .rb-prose-neutral {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  }\n\n  :where(.theme-scope) .rb-prose p,\n  :where(.theme-scope) .rb-prose li {\n    /* Body text uses inherited color (set by fragment via textColorStyle) */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose h1,\n  :where(.theme-scope) .rb-prose h2,\n  :where(.theme-scope) .rb-prose h3,\n  :where(.theme-scope) .rb-prose h4,\n  :where(.theme-scope) .rb-prose h5,\n  :where(.theme-scope) .rb-prose h6 {\n    /* Headings inherit from parent or use theme text color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose strong,\n  :where(.theme-scope) .rb-prose b {\n    /* Bold text inherits color but increases weight */\n    color: inherit;\n    font-weight: 600;\n  }\n\n  :where(.theme-scope) .rb-prose em,\n  :where(.theme-scope) .rb-prose i {\n    /* Italic text inherits color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose a {\n    --rb-prose-effective-link-color: var(\n      --rb-surface-link-color,\n      var(\n        --rb-surface-text-color,\n        var(\n          --rb-prose-link-color,\n          rgb(var(--tb-primary, var(--tb-text, 17 24 39)))\n        )\n      )\n    );\n    color: var(--rb-prose-effective-link-color);\n    text-decoration-line: var(--rb-prose-link-decoration-line, underline);\n    text-decoration-style: var(--rb-prose-link-underline-style, solid);\n    text-decoration-thickness: var(\n      --rb-prose-link-underline-thickness,\n      from-font\n    );\n    text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);\n    text-decoration-color: var(\n      --rb-prose-link-decoration-color,\n      color-mix(\n        in srgb,\n        var(--rb-prose-effective-link-color) 35%,\n        transparent\n      )\n    );\n    transition:\n      color 150ms ease,\n      text-decoration-color 150ms ease;\n  }\n\n  :where(.theme-scope) .rb-prose a:hover {\n    color: var(\n      --rb-prose-link-hover-color,\n      var(--rb-prose-effective-link-color)\n    );\n    text-decoration-color: var(\n      --rb-prose-link-hover-decoration-color,\n      var(\n        --rb-prose-link-hover-color,\n        var(--rb-prose-effective-link-color)\n      )\n    );\n  }\n\n  :where(.theme-scope) .rb-prose blockquote {\n    /* Blockquotes use muted text color */\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    border-left-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .fragment-quote-body blockquote {\n    /* Quote fragment should not get the generic prose blockquote left border/indent. */\n    border-left: 0;\n    padding-left: 0;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height {\n    /* Needed so we can use container query units (`cqw`) for width-based tile sizing. */\n    container-type: inline-size;\n\n    --rb-columns-cols: var(--rb-columns-cols-mobile, 1);\n    --rb-columns-gap: var(--rb-semantic-gap, 0px);\n    --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);\n\n    --rb-columns-tile-w: calc(\n      (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) /\n        var(--rb-columns-cols)\n    );\n    --rb-columns-tile-h: calc(\n      var(--rb-columns-tile-w) * var(--rb-columns-tile-ar)\n    );\n  }\n\n  @container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1280px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));\n    }\n}\n}\n\n  :where(.theme-scope) .rb-columns-equal-height > * {\n    height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {\n    /*\n    Grid items commonly include `rb-h-full` (height: 100%) to stretch within\n    their row. In equal-height mode we instead want a fixed tile height so the\n    spanning editorial tile doesn't become taller due to its larger width +\n    aspect-ratio.\n  */\n    height: var(--rb-columns-tile-h);\n    min-height: var(--rb-columns-tile-h);\n    max-height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :where(.theme-scope) .rb-prose code {\n    /* Inline code uses text color with surface background */\n    color: inherit;\n    background-color: rgba(var(--tb-surface), 0.5);\n    padding: 0.125rem 0.25rem;\n    border-radius: 0.25rem;\n    font-size: 0.875em;\n  }\n\n  :where(.theme-scope) .rb-prose pre {\n    /* Code blocks */\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-text));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: 0.5rem;\n    padding: 1rem;\n    overflow-x: auto;\n  }\n\n  :where(.theme-scope) .rb-prose pre code {\n    /* Code inside pre blocks */\n    background-color: transparent;\n    padding: 0;\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose hr {\n    /* Horizontal rules */\n    border-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .rb-prose ul > li::marker,\n  :where(.theme-scope) .rb-prose ol > li::marker {\n    /* List markers use muted text color */\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /*\n/* Density helpers */\n  :where(.theme-scope) .section-pad {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  :where(.theme-scope)[data-density='airy'] .section-pad {\n    padding-top: 4.5rem;\n    padding-bottom: 4.5rem;\n  }\n  :where(.theme-scope)[data-density='compact'] .section-pad {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n\n  :where(.theme-scope) .rounded-control {\n    border-radius: var(--radius-control);\n  }\n  :where(.theme-scope) .rounded-card {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .shadow-elev {\n    box-shadow: var(--shadow-elev);\n  }\n\n  :where(.theme-scope) .font-heading {\n    font-family: var(--font-heading);\n  }\n  :where(.theme-scope) .font-body {\n    font-family: var(--font-body);\n  }\n\n  :where(.theme-scope) .text-h1 {\n    font-size: var(--fs-h1);\n    line-height: 1.1;\n  }\n  :where(.theme-scope) .text-h2 {\n    font-size: var(--fs-h2);\n    line-height: 1.15;\n  }\n  :where(.theme-scope) .text-h3 {\n    font-size: var(--fs-h3);\n    line-height: 1.2;\n  }\n  :where(.theme-scope) .text-body-size {\n    font-size: var(--fs-body);\n  }\n\n  :where(.theme-scope) .transition-theme {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-standard {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-subtle {\n    transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-expressive {\n    transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);\n  }\n\n  /* Shade tokens (50..950) for primary */\n  :where(.theme-scope) .from-primary-50 {\n    --rb-gradient-from: rgb(var(--tb-primary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-50 {\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-100 {\n    --rb-gradient-from: rgb(var(--tb-primary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-100 {\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-200 {\n    --rb-gradient-from: rgb(var(--tb-primary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-200 {\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-300 {\n    --rb-gradient-from: rgb(var(--tb-primary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-300 {\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-400 {\n    --rb-gradient-from: rgb(var(--tb-primary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-400 {\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-500 {\n    --rb-gradient-from: rgb(var(--tb-primary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-500 {\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-600 {\n    --rb-gradient-from: rgb(var(--tb-primary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-600 {\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-700 {\n    --rb-gradient-from: rgb(var(--tb-primary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-700 {\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-800 {\n    --rb-gradient-from: rgb(var(--tb-primary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-800 {\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-900 {\n    --rb-gradient-from: rgb(var(--tb-primary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-900 {\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-950 {\n    --rb-gradient-from: rgb(var(--tb-primary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-950 {\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for secondary */\n  :where(.theme-scope) .from-secondary-50 {\n    --rb-gradient-from: rgb(var(--tb-secondary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-50 {\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-100 {\n    --rb-gradient-from: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-100 {\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-200 {\n    --rb-gradient-from: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-200 {\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-300 {\n    --rb-gradient-from: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-300 {\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-400 {\n    --rb-gradient-from: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-400 {\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-500 {\n    --rb-gradient-from: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-500 {\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-600 {\n    --rb-gradient-from: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-600 {\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-700 {\n    --rb-gradient-from: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-700 {\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-800 {\n    --rb-gradient-from: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-800 {\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-900 {\n    --rb-gradient-from: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-900 {\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-950 {\n    --rb-gradient-from: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-950 {\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for accent */\n  :where(.theme-scope) .from-accent-50 {\n    --rb-gradient-from: rgb(var(--tb-accent-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-50 {\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-100 {\n    --rb-gradient-from: rgb(var(--tb-accent-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-100 {\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-200 {\n    --rb-gradient-from: rgb(var(--tb-accent-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-200 {\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-300 {\n    --rb-gradient-from: rgb(var(--tb-accent-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-300 {\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-400 {\n    --rb-gradient-from: rgb(var(--tb-accent-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-400 {\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-500 {\n    --rb-gradient-from: rgb(var(--tb-accent-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-500 {\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-600 {\n    --rb-gradient-from: rgb(var(--tb-accent-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-600 {\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-700 {\n    --rb-gradient-from: rgb(var(--tb-accent-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-700 {\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-800 {\n    --rb-gradient-from: rgb(var(--tb-accent-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-800 {\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-900 {\n    --rb-gradient-from: rgb(var(--tb-accent-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-900 {\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-950 {\n    --rb-gradient-from: rgb(var(--tb-accent-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-950 {\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for neutral */\n  :where(.theme-scope) .from-neutral-50 {\n    --rb-gradient-from: rgb(var(--tb-neutral-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-50 {\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-100 {\n    --rb-gradient-from: rgb(var(--tb-neutral-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-100 {\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-200 {\n    --rb-gradient-from: rgb(var(--tb-neutral-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-200 {\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-300 {\n    --rb-gradient-from: rgb(var(--tb-neutral-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-300 {\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-400 {\n    --rb-gradient-from: rgb(var(--tb-neutral-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-400 {\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-500 {\n    --rb-gradient-from: rgb(var(--tb-neutral-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-500 {\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-600 {\n    --rb-gradient-from: rgb(var(--tb-neutral-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-600 {\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-700 {\n    --rb-gradient-from: rgb(var(--tb-neutral-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-700 {\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-800 {\n    --rb-gradient-from: rgb(var(--tb-neutral-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-800 {\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-900 {\n    --rb-gradient-from: rgb(var(--tb-neutral-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-900 {\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-950 {\n    --rb-gradient-from: rgb(var(--tb-neutral-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-950 {\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n  }\n\n  /* =================================================================\n   Header System Class Naming Conventions\n\n   rb-header-*    Utility-style classes set in site-header.ts layouts\n                  (rb-header-layout, rb-header-logo-sm, rb-header-logo-lg)\n\n   header-*       State/semantic classes set by transforms or runtime\n                  (header-root, header-scrolled, header-variant-*, header-logo-text)\n\n   nav-*          Navigation component classes (dropdowns, mobile, underlines)\n                  (nav-dropdown, nav-mobile-panel, nav-underline-grow)\n   ================================================================= */\n\n  /* =================================================================\n   Header Layout Padding\n\n   Padding is controlled entirely by CSS based on variant class.\n   This ensures shrink headers look identical to non-shrink before scroll.\n   ================================================================= */\n\n  /* Prevent scroll anchoring feedback loops when the header height transitions.\n   In some browsers, resizing a sticky header near the top can cause the UA to\n   adjust scroll position (\"scroll anchoring\"), which then flips the\n   `header-scrolled` threshold logic back and forth. */\n  :where(.theme-scope) .block-site-header {\n    overflow-anchor: none;\n  }\n\n  /* Base padding for horizontal variants (classic) */\n  :where(.theme-scope) .rb-header-layout {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    transition: padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope)\n    .header-variant-classic\n    .rb-header-layout:has(.header-logo-accommodation-popout-badge) {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants need more breathing room\n   Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */\n  :where(.theme-scope) .header-variant-centered .rb-header-layout {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n\n  /* Floating variant - compact padding */\n  :where(.theme-scope) .header-variant-floating .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* =================================================================\n   Header Shrink-on-Scroll\n\n   Only applies when .rb-header-shrink is present AND user has scrolled.\n   No changes until scroll - shrink header = non-shrink header initially.\n   ================================================================= */\n\n  /* Scrolled state - reduce padding */\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants get gentler reduction\n   Note: Both classes are on Section, rb-header-layout on inner div */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* Floating variant */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-floating\n    .rb-header-layout {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  /* =================================================================\n   Logo & Title Sizing\n\n   Font sizes controlled here, not via utility classes, so shrink\n   transitions work (utility classes would override :where()).\n   ================================================================= */\n\n  /* Logo image sizing */\n  :where(.theme-scope) .rb-header-logo-sm {\n    height: 2.5rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n  :where(.theme-scope) .rb-header-logo-lg {\n    height: 3rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-sm {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-lg {\n    height: 3rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-sm {\n    height: 3.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-lg {\n    height: 4.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-sm {\n    height: 7.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-lg {\n    height: 8rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-plate,\n  :where(.theme-scope) .header-logo-accommodation-centered-badge,\n  :where(.theme-scope) .header-logo-accommodation-popout-badge,\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    border-radius: var(--radius-md, 0.5rem);\n    background: var(--color-surface, #fff);\n    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));\n    padding: 0.5rem;\n    transition:\n      margin 300ms var(--motion-ease, ease),\n      padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-popout-badge {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -1.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-logo-size-display.header-logo-accommodation-popout-badge {\n    margin-block: 0 -4rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-plate,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-popout-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-centered-masthead,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-masthead {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -2.75rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    padding: 0.75rem 1rem;\n  }\n\n  /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */\n  :where(.theme-scope) .header-logo-text {\n    font-size: 1.125rem; /* matches rb-text-lg */\n    line-height: 1.75rem;\n    margin-inline: -0.18em;\n    padding-inline: 0.18em;\n    transition: font-size 300ms var(--motion-ease, ease);\n  }\n\n  /* Centered variant uses larger title */\n  :where(.theme-scope) .header-variant-centered .header-logo-text {\n    font-size: 1.25rem; /* matches rb-text-xl */\n    line-height: 1.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-size-compact .header-logo-text {\n    font-size: 0.95rem;\n    line-height: 1.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous .header-logo-text {\n    font-size: 1.35rem;\n    line-height: 1.9rem;\n  }\n  :where(.theme-scope) .header-logo-size-display .header-logo-text {\n    font-size: 1.75rem;\n    line-height: 2.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-compact\n    .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-standard\n    .header-logo-text {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-generous\n    .header-logo-text {\n    font-size: 1.6rem;\n    line-height: 2rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-display\n    .header-logo-text {\n    font-size: 2.1rem;\n    line-height: 2.5rem;\n  }\n\n  /* Mobile: reduce site title size to keep header compact */\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .header-logo-text,\n    :where(.theme-scope) .header-logo-size-standard .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-compact .header-logo-text {\n      font-size: 0.75rem;\n      line-height: 1.15rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-generous .header-logo-text {\n      font-size: 1rem;\n      line-height: 1.4rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-display .header-logo-text {\n      font-size: 1.25rem;\n      line-height: 1.65rem;\n    }\n\n    :where(.theme-scope) .header-variant-centered .header-logo-text,\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-standard\n      .header-logo-text {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-compact\n      .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.2rem;\n    }\n\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-generous\n      .header-logo-text {\n      font-size: 1.125rem;\n      line-height: 1.5rem;\n    }\n\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-display\n      .header-logo-text {\n      font-size: 1.35rem;\n      line-height: 1.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Shrink on Scroll - Logo & Title\n   ================================================================= */\n\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-sm {\n    height: 2.75rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-lg {\n    height: 3.25rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-sm,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-lg {\n    height: 3.75rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {\n    font-size: 0.875rem;\n  }\n\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .header-logo-size-generous.rb-header-logo-sm,\n    :where(.theme-scope) .header-logo-size-generous.rb-header-logo-lg {\n      height: 3rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope) .header-logo-size-display.rb-header-logo-lg {\n      height: 5.5rem;\n    }\n\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-lg {\n      height: 3.5rem;\n    }\n\n    :where(.theme-scope) .header-logo-accommodation-popout-badge {\n      margin-block: 0;\n    }\n\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-plate,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-popout-badge,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-badge,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead {\n      position: relative;\n      z-index: 1;\n      margin-block: 0 -2.75rem;\n    }\n\n    :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {\n      font-size: 0.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Accessibility: Reduced Motion\n   ================================================================= */\n\n  @media (prefers-reduced-motion: reduce) {\n    :where(.theme-scope) .rb-header-layout,\n    :where(.theme-scope) .rb-header-logo-sm,\n    :where(.theme-scope) .rb-header-logo-lg,\n    :where(.theme-scope) .header-logo-text {\n      transition: none;\n    }\n  }\n\n  /* Nav underline-grow animation (used by navStyle: \"underline-grow\" in site-header.ts) */\n  :where(.theme-scope) .nav-underline-grow {\n    position: relative;\n    overflow: visible;\n  }\n  :where(.theme-scope) .nav-underline-grow::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: var(--nav-underline-offset, -0.35em);\n    width: 100%;\n    height: 2px;\n    background-color: currentColor;\n    transform: scaleX(0);\n    transform-origin: left center;\n    transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);\n  }\n  :where(.theme-scope) .nav-underline-grow:hover::after,\n  :where(.theme-scope)\n    .nav-underline-grow.nav-underline-active[data-active='true']::after {\n    transform: scaleX(1);\n  }\n  :where(.theme-scope) .nav-underline-offset-tight {\n    --nav-underline-offset: -0.2em;\n  }\n  :where(.theme-scope) .nav-underline-offset-normal {\n    --nav-underline-offset: -0.3em;\n  }\n  :where(.theme-scope) .nav-underline-offset-loose {\n    --nav-underline-offset: -0.45em;\n  }\n\n  :where(.theme-scope) .card-surface {\n    background: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-text-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-heading-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-supporting-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: var(--radius-card);\n    box-shadow: var(--shadow-elev);\n  }\n  :where(.theme-scope) .media-rounded {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .is-placeholder::after {\n    content: 'Placeholder';\n    position: absolute;\n    top: 0.5rem;\n    left: 0.5rem;\n    font-size: 11px;\n    background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);\n    color: rgb(var(--tb-text));\n    padding: 0.15rem 0.35rem;\n    border-radius: 4px;\n    opacity: 0.85;\n  }\n\n  /* Status badges - theme-aware styling for capacity indicators */\n  :where(.theme-scope) .badge-status {\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.625rem;\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.25rem;\n  }\n\n  /* All badges use a subtle theme-aware style by default */\n  :where(.theme-scope) .badge-status-available {\n    background-color: rgba(var(--tb-secondary), 0.15);\n    color: rgb(var(--tb-secondary-700, var(--tb-secondary)));\n  }\n\n  :where(.theme-scope) .badge-status-low {\n    background-color: rgba(var(--tb-accent), 0.15);\n    color: rgb(var(--tb-accent-700, var(--tb-accent)));\n  }\n\n  :where(.theme-scope) .badge-status-sold-out {\n    background-color: rgba(var(--tb-text), 0.1);\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /* Event list empty state - theme-aware */\n  :where(.theme-scope) .event-list-empty {\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border-color: rgb(var(--tb-border));\n  }\n} /* end @layer rb-theme */\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"open\"] {\n  animation: accordion-down 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"closed\"] {\n  animation: accordion-up 0.3s cubic-bezier(0.4, 0, 1, 1);\n}\n\n/*\n * Block Static CSS Modules\n *\n * IMPORTANT: Import order is part of the cascade contract.\n * Keep these imports in the same order as the original monolithic file,\n * and add new modules at the end unless you are intentionally changing cascade.\n */\n\n/* =============================================================================\n * Shared: Registration Surface (issue 1174)\n *\n * Wizard-surface primitives shared by the event-registration,\n * appointment-booking blocks: surface container,\n * selectable option cards, step indicator, wizard actions row, on-surface\n * text ramp, layout stacks, summary box and skeleton shell lines.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;\n *   canonical name list in blocks/registrationSurfaceVars.ts)\n *\n * Defaults intentionally match the event-registration (issue 1089) values; blocks\n * that need to preserve a different look override in their own block CSS,\n * which is imported after this file (cascade order is the override contract \u2014\n * all selectors here are zero-specificity `:where()`).\n *\n * Layout-only `.rb-state-icon` rules (formerly registration-shared.css) live\n * here too; block CSS provides the `.rb-state-icon--{variant}` colors.\n *\n * Naming: component-like primitives follow the existing bare `rb-` shared\n * precedent (`.rb-state-icon`, `.rb-tile`): `.rb-option-card`, `.rb-step-*`,\n * `.rb-wizard-actions`, `.rb-on-surface`, `.rb-shell-*`. Container/layout\n * pieces that would otherwise collide with the global `.rb-*` utility layer\n * are namespaced `rb-reg-*` (`.rb-reg-surface`, `.rb-reg-stack`, ...). All of\n * them are scoped to the three registration blocks either way.\n * ============================================================================= */\n\n/* Terminal state icon (layout only \u2014 colors are per-block) */\n:where(.theme-scope) .rb-state-icon {\n  width: 4rem;\n  height: 4rem;\n  margin: 0 auto 1rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) .rb-state-icon svg {\n  width: 2rem;\n  height: 2rem;\n}\n\n/* Surface container */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-surface {\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  padding: clamp(1rem, 2vw, 1.5rem);\n  background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-text-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-heading-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-link-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-supporting-color: var(--rb-reg-on-surface-muted, var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)))));\n  transition: border-color var(--rb-block-transition, 150ms) ease;\n  width: 100%;\n  max-width: 800px;\n  margin-inline: 0;\n}\n\n/* The panel paints its own opaque surface, so it also has to break the button\n * colour contract it inherits. An enclosing section that sits on a brand band\n * publishes `--rb-action-*` variables resolved against *that* band \u2014 on Anna's\n * therapy page a ghost primary: transparent background, white label. Those\n * variables inherit, so without this reset a Continue button inside the light\n * form panel renders white-on-white and only appears on hover.\n *\n * Resetting to `initial` sends each button back to the generated fallback in\n * its own rule (`var(--rb-action-\u2026, rgb(var(--tb-primary)))`), which is the\n * theme's standard button resolved against a normal surface \u2014 correct here,\n * because this panel *is* a normal surface.\n *\n * Mirrors `contextualButtonSurfaceResetStyles()` in theme-core/buttons; the\n * pairing is pinned by registration-surface-action-reset.test.ts. */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-surface {\n  --rb-action-primary-base-background-color: initial;\n  --rb-action-primary-base-background-image: initial;\n  --rb-action-primary-base-color: initial;\n  --rb-action-primary-hover-background-color: initial;\n  --rb-action-primary-hover-background-image: initial;\n  --rb-action-primary-hover-color: initial;\n  --rb-action-primary-focus-background-color: initial;\n  --rb-action-primary-focus-background-image: initial;\n  --rb-action-primary-focus-color: initial;\n  --rb-action-primary-active-background-color: initial;\n  --rb-action-primary-active-background-image: initial;\n  --rb-action-primary-active-color: initial;\n  --rb-action-primary-disabled-background-color: initial;\n  --rb-action-primary-disabled-background-image: initial;\n  --rb-action-primary-disabled-color: initial;\n  --rb-action-primary-base-outline: initial;\n  --rb-action-primary-base-outline-offset: initial;\n  --rb-action-primary-focus-outline: initial;\n  --rb-action-primary-focus-outline-offset: initial;\n  --rb-action-primary-focus-box-shadow: initial;\n\n  --rb-action-secondary-base-background-color: initial;\n  --rb-action-secondary-base-background-image: initial;\n  --rb-action-secondary-base-color: initial;\n  --rb-action-secondary-hover-background-color: initial;\n  --rb-action-secondary-hover-background-image: initial;\n  --rb-action-secondary-hover-color: initial;\n  --rb-action-secondary-focus-background-color: initial;\n  --rb-action-secondary-focus-background-image: initial;\n  --rb-action-secondary-focus-color: initial;\n  --rb-action-secondary-active-background-color: initial;\n  --rb-action-secondary-active-background-image: initial;\n  --rb-action-secondary-active-color: initial;\n  --rb-action-secondary-disabled-background-color: initial;\n  --rb-action-secondary-disabled-background-image: initial;\n  --rb-action-secondary-disabled-color: initial;\n  --rb-action-secondary-base-outline: initial;\n  --rb-action-secondary-base-outline-offset: initial;\n  --rb-action-secondary-focus-outline: initial;\n  --rb-action-secondary-focus-outline-offset: initial;\n  --rb-action-secondary-focus-box-shadow: initial;\n\n  --rb-action-outline-base-background-color: initial;\n  --rb-action-outline-base-background-image: initial;\n  --rb-action-outline-base-color: initial;\n  --rb-action-outline-hover-background-color: initial;\n  --rb-action-outline-hover-background-image: initial;\n  --rb-action-outline-hover-color: initial;\n  --rb-action-outline-focus-background-color: initial;\n  --rb-action-outline-focus-background-image: initial;\n  --rb-action-outline-focus-color: initial;\n  --rb-action-outline-active-background-color: initial;\n  --rb-action-outline-active-background-image: initial;\n  --rb-action-outline-active-color: initial;\n  --rb-action-outline-disabled-background-color: initial;\n  --rb-action-outline-disabled-background-image: initial;\n  --rb-action-outline-disabled-color: initial;\n  --rb-action-outline-base-outline: initial;\n  --rb-action-outline-base-outline-offset: initial;\n  --rb-action-outline-focus-outline: initial;\n  --rb-action-outline-focus-outline-offset: initial;\n  --rb-action-outline-focus-box-shadow: initial;\n\n  --rb-action-ghost-base-background-color: initial;\n  --rb-action-ghost-base-background-image: initial;\n  --rb-action-ghost-base-color: initial;\n  --rb-action-ghost-hover-background-color: initial;\n  --rb-action-ghost-hover-background-image: initial;\n  --rb-action-ghost-hover-color: initial;\n  --rb-action-ghost-focus-background-color: initial;\n  --rb-action-ghost-focus-background-image: initial;\n  --rb-action-ghost-focus-color: initial;\n  --rb-action-ghost-active-background-color: initial;\n  --rb-action-ghost-active-background-image: initial;\n  --rb-action-ghost-active-color: initial;\n  --rb-action-ghost-disabled-background-color: initial;\n  --rb-action-ghost-disabled-background-image: initial;\n  --rb-action-ghost-disabled-color: initial;\n  --rb-action-ghost-base-outline: initial;\n  --rb-action-ghost-base-outline-offset: initial;\n  --rb-action-ghost-focus-outline: initial;\n  --rb-action-ghost-focus-outline-offset: initial;\n  --rb-action-ghost-focus-box-shadow: initial;\n\n  --rb-action-accent-base-background-color: initial;\n  --rb-action-accent-base-background-image: initial;\n  --rb-action-accent-base-color: initial;\n  --rb-action-accent-hover-background-color: initial;\n  --rb-action-accent-hover-background-image: initial;\n  --rb-action-accent-hover-color: initial;\n  --rb-action-accent-focus-background-color: initial;\n  --rb-action-accent-focus-background-image: initial;\n  --rb-action-accent-focus-color: initial;\n  --rb-action-accent-active-background-color: initial;\n  --rb-action-accent-active-background-image: initial;\n  --rb-action-accent-active-color: initial;\n  --rb-action-accent-disabled-background-color: initial;\n  --rb-action-accent-disabled-background-image: initial;\n  --rb-action-accent-disabled-color: initial;\n  --rb-action-accent-base-outline: initial;\n  --rb-action-accent-base-outline-offset: initial;\n  --rb-action-accent-focus-outline: initial;\n  --rb-action-accent-focus-outline-offset: initial;\n  --rb-action-accent-focus-box-shadow: initial;\n}\n\n/* Selectable option card */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-option-bg, transparent);\n  color: inherit;\n  cursor: pointer;\n  text-align: left;\n  transition: border-color var(--rb-block-transition, 150ms) ease,\n              background-color var(--rb-block-transition, 150ms) ease,\n              box-shadow var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n  border-color: var(--rb-reg-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));\n  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:focus-visible {\n  outline: 2px solid var(--rb-reg-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--selected {\n  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  background-color: var(--rb-reg-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.08));\n  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled:hover {\n  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  box-shadow: none;\n}\n\n/* Check indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));\n}\n\n/* Step indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-steps-nav {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-steps {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-circle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  background: var(--rb-reg-step-inactive, rgb(var(--tb-mutedText, 100 116 139)));\n  color: var(--rb-reg-step-text, rgb(var(--tb-primaryForeground, 255 255 255)));\n  transition: background-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-circle--active {\n  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));\n  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-circle--completed {\n  background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));\n  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-check {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-connector {\n  width: 2rem;\n  height: 2px;\n  background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-label {\n  font-size: 0.75rem;\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  display: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-label--active {\n  font-weight: 500;\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-label {\n    display: inline;\n  }\n}\n}\n\n/* Wizard actions row */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1.5rem;\n}\n\n/* When there's only one action (no back button), push it to the right */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions > :only-child {\n  margin-inline-start: auto;\n}\n\n/* On-surface text ramp */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface {\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--muted {\n  color: var(--rb-reg-on-surface-muted, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--subtle {\n  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--faint {\n  color: var(--rb-reg-on-surface-faint, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.5));\n}\n\n/* Layout stacks */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack--sm {\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row--between {\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-grid {\n  display: grid;\n  gap: 0.75rem;\n}\n\n/* Summary box */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-summary {\n  padding: 1rem;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);\n  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));\n  background: var(--rb-reg-summary-bg, rgba(var(--tb-muted, 241 245 249), 0.42));\n}\n\n/* Skeleton shell lines */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line {\n  height: 0.75rem;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22)),\n    rgba(var(--tb-primary, 17 24 39), 0.12),\n    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22))\n  );\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--lg {\n  width: min(26rem, 82%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--md {\n  width: min(19rem, 68%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--sm {\n  width: min(14rem, 52%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--xs {\n  width: min(10rem, 42%);\n}\n\n/* Skeleton block (rectangular placeholder, pulses) */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22));\n  animation: rb-reg-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes rb-reg-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n    animation: none;\n  }\n}\n\n/* =============================================================================\n * Block: Event Registration (pilot #76)\n * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-event-tile-bg: var(--er-event-card-bg);\n  --rb-event-tile-border: var(--er-border);\n  --rb-event-tile-border-width: var(--er-event-card-border-width);\n  --rb-event-tile-border-hover: var(--er-border-hover);\n  --rb-event-tile-border-selected: var(--er-border-selected);\n  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);\n  --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);\n  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));\n  --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);\n  --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);\n  --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);\n  --er-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);\n  --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);\n  --er-on-surface-disabled-detail: rgba(\n    var(--tb-onSurface, var(--tb-text)),\n    0.68\n  );\n}\n\n/* Container: styled by the shared .rb-reg-surface (registration-surface.css);\n   .er-container remains in markup as a hook and for the overlay/embedded\n   variants below. */\n\n/* SSR shell / required-island fallback */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell {\n  min-height: 24rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__steps {\n  margin-bottom: 1.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__eyebrow {\n  margin: 0 0 0.35rem;\n  color: var(--er-on-surface-subtle);\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__title {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__copy {\n  margin: 0.35rem 0 0;\n  max-width: 36rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__cards {\n  margin-top: 0.25rem;\n  overflow: hidden;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__card {\n  display: grid;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* Shell skeleton lines: styled by the shared .rb-shell-line family\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__summary {\n  align-items: center;\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  border: 1px solid var(--er-summary-border);\n  padding: 0.875rem 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__button-placeholder {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .event-registration__hydration-error {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--er-border-error);\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n  padding: 1rem;\n  font-size: 0.9375rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'].event-registration--embedded)\n  .er-container {\n  max-width: none;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n/* Empty/unavailable states */\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty {\n  border-radius: var(--rb-block-radius);\n  border: 1px dashed var(--er-border);\n  padding: 3rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty__text {\n  opacity: 0.6;\n}\n\n/* Capacity badges */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge {\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--available {\n  background: var(--er-capacity-available-bg);\n  color: var(--er-capacity-available-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--low {\n  background: var(--er-capacity-low-bg);\n  color: var(--er-capacity-low-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--soldout {\n  background: var(--er-capacity-soldout-bg);\n  color: var(--er-capacity-soldout-text);\n}\n\n/* Selected event summary: superseded by the shared .rb-reg-summary\n   (registration-surface.css); no markup emitted .er-event-summary anymore. */\n\n/* Ticket counter */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-group {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter {\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter-btn {\n  width: 2.125rem;\n  height: 2.125rem;\n  border-radius: 50%;\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:hover:not(:disabled) {\n  border-color: var(--er-border-hover);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-limit {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-lines {\n  display: grid;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-list {\n  display: grid;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-ticket-line {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 0.875rem;\n  min-height: 4.75rem;\n  padding: 0.875rem;\n  border: 1px solid var(--er-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line--disabled {\n  color: var(--er-on-surface-disabled);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-main {\n  min-width: 0;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-name {\n  min-width: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-price {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-detail {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary {\n  padding: 0.75rem 0.875rem;\n  border: 1px solid var(--er-summary-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-list {\n  margin: 0.25rem 0 0;\n  padding-left: 1.125rem;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.4;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-ticket-line {\n    grid-template-columns: minmax(0, 1fr);\n    align-items: stretch;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-ticket-line\n    .er-counter {\n    justify-content: flex-start;\n  }\n}\n}\n\n/* Form inputs */\n:where(.theme-scope) :where([data-block='event-registration']) .er-input {\n  width: 100%;\n  min-height: 2.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  border: 1px solid var(--er-border);\n  background: var(--er-control-bg);\n  color: var(--er-control-text);\n  font: inherit;\n  line-height: 1.4;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-input::placeholder {\n  color: var(--er-on-surface-faint);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-input:focus {\n  outline: none;\n  border-color: var(--er-border-selected);\n  box-shadow: 0 0 0 3px var(--er-focus-ring);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-input--error {\n  border-color: var(--er-border-error);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-input--error:focus {\n  box-shadow: 0 0 0 3px rgba(var(--tb-destructive), 0.2);\n}\n\n/* Form labels and errors */\n:where(.theme-scope) :where([data-block='event-registration']) .er-label {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-required {\n  color: var(--er-required);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-error {\n  font-size: 0.875rem;\n  color: var(--er-error-text);\n  margin-top: 0.25rem;\n}\n\n/* Back button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-back-btn {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: opacity var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-back-btn:hover {\n  opacity: 1;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--success {\n  background: var(--er-success-bg);\n  color: var(--er-success-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--info {\n  background: var(--er-info-bg);\n  color: var(--er-info-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--error {\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--waitlist {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--warning {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n/* Retry button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-retry-btn {\n  padding: 0.5rem 1rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-retry-btn:hover {\n  border-color: var(--er-border-hover);\n}\n\n/* Typography */\n:where(.theme-scope) :where([data-block='event-registration']) .er-title {\n  font-size: var(--er-step-title-size, 1.5rem);\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-title--lg {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--muted {\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--faint {\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-title {\n  font-weight: 500;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-card {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card {\n  padding: 0.875rem 0;\n  border-width: 0 0\n    var(--rb-event-tile-border-width, var(--rb-border-width, 1px)) 0;\n  border-style: solid;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card:last-child {\n  border-bottom-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option-main {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-title {\n  font-size: 1rem;\n  line-height: 1.35;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-event-title {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text {\n  color: var(--er-on-surface);\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card\n  .er-text {\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--muted {\n  color: var(--er-on-surface-muted);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--faint {\n  color: var(--er-on-surface-faint);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected {\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected\n  .er-event-title {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--muted,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--faint {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-capacity-badge {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-value {\n  font-size: 1.25rem;\n  font-weight: 700;\n  width: 1.625rem;\n  text-align: center;\n}\n\n/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n/* Event/date selection rows */\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-icon {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 1rem;\n}\n\n/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);\n   .er-actions remains in markup as a hook. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-with-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-spinner {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-altcha {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-field\n  + .er-field {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-message {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice {\n  margin-bottom: 1rem;\n  width: 100%;\n  padding: 1.25rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: rgba(var(--tb-surface), 0.5);\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-title {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice\n  .rb-state-icon {\n  margin: 0 auto 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-copy {\n  margin: 0.5rem 0 0;\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link {\n  margin-top: 0.75rem;\n  padding: 0;\n  border: 0;\n  background: none;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link:hover {\n  text-decoration: none;\n}\n\n/* Payment group container */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group\n  + .er-payment-group {\n  margin-top: 1.5rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0 0 0.25rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-subtitle {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin: 0 0 0.5rem 0;\n}\n\n/* Payment option card */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:hover {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n/* Discount code entry */\n:where(.theme-scope) :where([data-block='event-registration']) .er-discount {\n  margin-top: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle {\n  background: transparent;\n  border: 0;\n  padding: 0;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  font-size: 0.875rem;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input {\n  flex: 1;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--er-border);\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input:focus {\n  outline: 2px solid var(--er-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.8;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__feedback {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* Visually hide native radio but keep focusable (sr-only pattern) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-radio {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Focus ring on label when radio is focused */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:focus-within {\n  outline: 2px solid var(--er-payment-border-selected);\n  outline-offset: 2px;\n}\n\n/* Content layout */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-name {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-description {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-validity {\n  font-size: 0.75rem;\n  color: var(--er-on-surface-faint);\n}\n\n/* Checkmark indicator: styled by the shared .rb-option-check\n   (registration-surface.css); .er-check remains in markup as a hook. */\n\n/* Payment summary */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-summary {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-price {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--er-on-surface);\n}\n\n/* Two-column layout (Desktop: sidebar, Mobile: stacked) */\n:where(.theme-scope) :where([data-block='event-registration']) .er-layout {\n  display: grid;\n  gap: 1.5rem;\n  /* Mobile: single column, summary at top */\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'summary'\n    'main';\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block='event-registration']) .er-layout {\n    /* Desktop: main + sidebar */\n    grid-template-columns: 1fr 300px;\n    grid-template-areas: 'main summary';\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-layout-main {\n  grid-area: main;\n}\n\n/* OrderSummary positions via grid area */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-layout\n  > .er-summary {\n  grid-area: summary;\n}\n\n/* Step indicator */\n:where(.theme-scope) :where([data-block='event-registration']) .er-steps-nav {\n  margin-bottom: 1.5rem;\n}\n\n/* Step indicator internals: styled by the shared .rb-steps / .rb-step-*\n   family (registration-surface.css) via the --rb-reg-step-* mappings in the\n   event-registration var generator; er-* classes remain in markup as hooks.\n   Note: .er-steps-nav above is intentionally retained \u2014 its source position\n   keeps the wizard's 1.5rem step margin winning over the SSR shell's\n   1.25rem .er-registration-shell__steps override. */\n\n/* Sticky order summary */\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary {\n  padding: 1.25rem;\n  background: var(--er-summary-bg);\n  border: 1px solid var(--er-summary-border);\n  border-radius: var(--rb-block-radius);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  min-height: 140px;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary {\n    position: sticky;\n    top: 1rem;\n  }\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-event {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-date {\n  font-size: 0.875rem;\n  color: rgba(var(--tb-text), 0.7);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-tickets {\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-price {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-top: 0.5rem;\n}\n\n/* Guest details section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section {\n  margin-top: 1.5rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section\n  .er-title {\n  margin: 0 0 0.75rem;\n}\n\n/* Error banner for guest section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section-error {\n  padding: 0.75rem 1rem;\n  margin-bottom: 1rem;\n  background: var(--er-error-bg);\n  border: 1px solid var(--er-border-error);\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  color: var(--er-error-text);\n  font-size: 0.875rem;\n}\n\n/* Card-based layout for guests */\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-cards {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-card {\n  display: grid;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  .er-field\n  + .er-field {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  + .er-guest-card {\n  border-top: 1px solid var(--er-border);\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-guest-card {\n    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n    column-gap: 1rem;\n    align-items: start;\n  }\n}\n}\n\n/* Shake animation for validation errors */\n@keyframes er-shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section--shake {\n  animation: er-shake 0.4s ease-in-out;\n}\n\n/* =============================================================================\n * Shared: Event Cards (Listing / Spotlight / Combined)\n * Uses:\n * - Tier 1 vars: --tb-*-{shade} (from theme palette)\n * - Tier 2 vars: --rb-block-transition (from theme scope)\n * - Tier 3 vars: --rb-event-card-* (from event-calendar + event-cards var generators)\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-media {\n  height: var(--rb-event-card-media-height, 16rem);\n  overflow: hidden;\n  position: relative;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transform: scale(1);\n  transition: transform var(--rb-event-card-image-transition-duration, 700ms)\n    ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'] .event-card:hover,\n    [data-block='event-spotlight'] .event-card:hover,\n    [data-block='event-calendar'] .event-card:hover,\n    [data-block='event-combined'] .event-card:hover,\n    .event-card--catalogue:hover\n  )\n  .event-card-image {\n  transform: scale(var(--rb-event-card-image-hover-scale, 1.08));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card {\n  transition: transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-cta {\n  width: 100%;\n  justify-content: center;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover {\n  transform: translateY(var(--rb-event-card-hover-translate-y, 0px));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--rb-event-card-overlay-color, rgb(var(--tb-primary)));\n  opacity: var(--rb-event-card-overlay-opacity, 0);\n  mix-blend-mode: var(--rb-event-card-overlay-blend-mode, multiply);\n  transition: opacity var(--rb-block-transition) ease;\n  pointer-events: none;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover\n  .event-card-overlay {\n  opacity: var(--rb-event-card-overlay-hover-opacity, 0);\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  padding: 0.35rem 0.95rem;\n  border-radius: 9999px;\n  font-size: 0.65rem;\n  font-weight: 700;\n  line-height: 1rem;\n  text-transform: uppercase;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge--overlay {\n  position: absolute;\n  top: 0.75rem;\n  left: 0.75rem;\n  z-index: 20;\n  margin-bottom: 0;\n  pointer-events: none;\n}\n\n/* =============================================================================\n * EventCard: Horizontal Layout (stack mode, md+ screens only)\n * ============================================================================= */\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal {\n    display: flex;\n    flex-direction: row;\n    gap: var(--rb-event-card-horizontal-gap, 1rem);\n  }\n\n  /* Image: ~1/3 width */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-media {\n    width: var(--rb-event-card-horizontal-image-width, 33.333%);\n    min-width: 200px;\n    max-width: 320px;\n    height: auto;\n    aspect-ratio: 4/3;\n    flex-shrink: 0;\n  }\n\n  /* Content: fills remaining space */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .card-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* Footer: row layout with button on left, capacity on right */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-footer {\n    flex-direction: row-reverse;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  /* Button: auto width */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-cta {\n    width: auto;\n  }\n\n  /* Capacity: right-aligned */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-capacity {\n    text-align: right;\n  }\n}\n}\n\n/* Keep token list in sync with `EVENT_CATEGORY_BADGE_TOKENS` in `packages/blocks/src/system/constants/events.ts`. */\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='primary'] {\n  background-color: rgb(var(--tb-primary-200));\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='secondary'] {\n  background-color: rgb(var(--tb-secondary-200));\n  color: rgb(var(--tb-secondary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='accent'] {\n  background-color: rgb(var(--tb-accent-200));\n  color: rgb(var(--tb-accent-800));\n}\n\n/* Notice/info boxes */\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice {\n  padding: 0.75rem 1rem;\n  border-radius: var(--er-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice p {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-notice--info {\n  background-color: rgba(var(--tb-primary-100), 0.5);\n  border: 1px solid rgba(var(--tb-primary-300), 0.5);\n  color: rgb(var(--tb-primary-800));\n}\n\n/* Disabled payment group */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled {\n  opacity: 0.6;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled\n  .er-payment-group-title {\n  color: var(--er-on-surface-faint);\n}\n\n/* Disabled payment option */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled:hover {\n  border-color: var(--er-payment-border);\n  background-color: transparent;\n}\n\n/* =============================================================================\n * Payment Step Layout\n * Main flow + optional legacy sidebar area + footer summary/actions\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout {\n  display: grid;\n  gap: 1.25rem;\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'sidebar'\n    'main'\n    'footer';\n}\n\n/* When no sidebar, main takes full width */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout--no-sidebar {\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-payment-layout {\n    grid-template-columns: 1fr 260px;\n    grid-template-areas:\n      'main sidebar'\n      'footer footer';\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-payment-layout--no-sidebar {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'main'\n      'footer';\n  }\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main {\n  grid-area: main;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > .er-portal-auth {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-sidebar {\n  grid-area: sidebar;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-footer {\n  grid-area: footer;\n  display: flex;\n  flex-direction: column;\n  gap: 0.875rem;\n}\n\n/* =============================================================================\n * Payment Tiles Grid\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  gap: 0.75rem;\n  align-items: stretch;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles\n  > [role='listitem'] {\n  min-width: 0;\n  display: flex;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile {\n  width: 100%;\n  min-height: 5.75rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.75rem 0.625rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  text-align: center;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile:hover:not([aria-disabled='true']) {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled {\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled\n  > :not(.er-payment-tooltip) {\n  opacity: 0.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled.er-payment-tile--selected {\n  border-color: var(--er-payment-border);\n  background-color: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled:hover {\n  border-color: var(--er-payment-border);\n}\n\n/* Tooltip styling for disabled payment tiles */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile[aria-disabled='true'] {\n  position: relative;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tooltip {\n  display: none;\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-text));\n  color: rgb(var(--tb-background));\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  white-space: normal;\n  max-width: 16rem;\n  line-height: 1.35;\n  text-align: center;\n  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled:hover\n  .er-payment-tooltip {\n  display: block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-icon {\n  font-size: 1.5rem;\n  line-height: 1;\n  /* SVG icon sizing */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-icon\n  svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-label {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-detail {\n  font-size: 0.78125rem;\n  color: var(--er-on-surface-subtle);\n  line-height: 1.25;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-check {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n}\n\n/* Upsell tiles have a subtle indicator */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--upsell {\n  border-style: dashed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--upsell.er-payment-tile--selected {\n  border-style: solid;\n}\n\n/* =============================================================================\n * Order Summary Bar (horizontal, in footer)\n * Layout: [Title + meta on left] [Price on right]\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 0.875rem 1rem;\n  background: var(--er-surface-muted);\n  border: 1px solid var(--er-summary-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-event {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  margin: 0;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-meta {\n  font-size: 0.8125rem;\n  color: rgba(var(--tb-text), 0.7);\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price {\n  font-size: 1rem;\n  font-weight: 700;\n  flex-shrink: 0;\n  display: block;\n  text-align: right;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pricing {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.125rem;\n  text-align: right;\n}\n\n/* Product section in summary bar (for pass/membership selection) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 0.75rem 0;\n  background: transparent;\n  border-top: 1px solid var(--er-summary-border);\n  border-bottom: 1px solid var(--er-summary-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-name {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape {\n  margin-top: 0.25rem;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: rgb(var(--tb-primary));\n  font-size: 0.8125rem;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-detail {\n  font-size: 0.8125rem;\n  color: rgba(var(--tb-text), 0.6);\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-price {\n  font-weight: 600;\n  font-size: 0.9375rem;\n  flex-shrink: 0;\n  text-align: right;\n}\n\n/* Strikethrough price styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price--struck {\n  display: block;\n  text-decoration: line-through;\n  color: rgba(var(--tb-text), 0.5);\n  font-size: 0.9375rem;\n  font-weight: 500;\n  text-align: right;\n}\n\n/* \"Included\" text styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-included {\n  font-size: 0.8125rem;\n  color: rgb(var(--tb-primary-600));\n  font-weight: 500;\n  text-align: right;\n}\n\n/* =============================================================================\n * Portal Auth Section (sidebar)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-portal-auth {\n  padding: 1.25rem;\n  background: rgba(var(--tb-surface), 0.5);\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-title {\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0 0 0.5rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text {\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  margin: 0 0 1rem 0;\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--success {\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--error {\n  color: rgb(var(--tb-error, 239 68 68));\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n}\n\n/* Modal */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(var(--tb-scrim), 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal {\n  background: rgb(var(--tb-background));\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  max-width: 400px;\n  width: 100%;\n  position: relative;\n  box-shadow: 0 10px 25px rgba(var(--tb-shadow), 0.2);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: rgba(var(--tb-text), 0.5);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-close:hover {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  margin: 0 0 1rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-btn {\n  padding: 0.75rem 1.5rem;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primary-foreground, 255 255 255));\n  border: none;\n  border-radius: var(--rb-block-radius);\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary {\n  background: transparent;\n  color: rgb(var(--tb-text));\n  border: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary:hover {\n  background: rgba(var(--tb-text), 0.05);\n}\n\n/* In-flow booking teaser (sits at the block's position in the page) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem 1.5rem;\n  padding: 1.25rem 1.5rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-event-card-bg);\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__title {\n  font-size: 1.0625rem;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__meta {\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  opacity: 0.75;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__tickets {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n  padding-top: 0.625rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__ticket {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 1rem;\n  font-size: 0.9375rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__ticket-name {\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__cta {\n  flex: 0 0 auto;\n}\n\n/* Fixed, full-width sticky booking bar (content-agnostic; sits above page flow) */\n:where(.theme-scope) :where([data-block='event-registration']) .er-booking-bar {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 12000;\n  padding: 0.75rem max(1rem, env(safe-area-inset-right))\n    max(0.75rem, env(safe-area-inset-bottom))\n    max(1rem, env(safe-area-inset-left));\n  background: rgb(var(--tb-background));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -10px 30px rgba(var(--tb-shadow), 0.16);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  width: 100%;\n  max-width: 72rem;\n  margin-inline: auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__title {\n  font-size: 0.95rem;\n  font-weight: 700;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__meta {\n  font-size: 0.8125rem;\n  line-height: 1.25;\n  opacity: 0.75;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__cta {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay {\n  position: fixed;\n  inset: 0;\n  height: 100dvh;\n  z-index: 14000;\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  background: var(--rb-modal-overlay-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__panel {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100dvh;\n  min-height: 0;\n  overflow: hidden;\n  background: rgb(var(--tb-background));\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__header {\n  flex: 0 0 auto;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 1rem;\n  background: rgb(var(--tb-background));\n  border-bottom: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__title {\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.25;\n  font-weight: 700;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__close {\n  width: 2rem;\n  height: 2rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  background: transparent;\n  color: rgb(var(--tb-text));\n  font-size: 1.25rem;\n  line-height: 1;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay {\n  max-width: none;\n  border: 0;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: 0;\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-main {\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-footer {\n  position: relative;\n  z-index: 3;\n  padding: 0.875rem 1rem max(0.875rem, env(safe-area-inset-bottom));\n  background: rgb(var(--tb-background));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -12px 26px rgba(var(--tb-shadow), 0.12);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-actions {\n  margin-top: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-booking-overlay {\n    justify-content: flex-end;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-booking-overlay__panel {\n    width: min(32rem, 100vw);\n    min-height: 100%;\n    box-shadow: -16px 0 40px rgba(var(--tb-shadow), 0.22);\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-main {\n    padding: 1.25rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-footer {\n    padding: 0.875rem 1.25rem max(0.875rem, env(safe-area-inset-bottom));\n  }\n}\n}\n\n/* Magic Link Form */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n/* =============================================================================\n * Inline Links (.er-link)\n * For inline buttons styled as links (e.g., \"Not you? Log out\")\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link:hover {\n  text-decoration: none;\n}\n\n/* Logged-in user hint with logout link */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-logged-in-hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  margin: 0.25rem 0 0 0;\n}\n\n/* =============================================================================\n * Booking Mode Step\n * Early step for pass/membership holders to choose their payment mode\n * =============================================================================\n */\n\n/* Hero message for membership holders */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem 1.25rem;\n  background: rgba(var(--tb-primary-100), 0.4);\n  border: 1px solid rgba(var(--tb-primary-300), 0.4);\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(var(--tb-primary));\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon\n  svg {\n  width: 20px;\n  height: 20px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-content {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-title {\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0 0 0.125rem 0;\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-subtitle {\n  font-size: 0.875rem;\n  color: rgb(var(--tb-primary-700));\n  margin: 0;\n}\n\n/* Selection cards for pass holders */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 1.25rem 1rem;\n  border: 2px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  position: relative;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card:hover:not([aria-disabled='true']) {\n  border-color: var(--er-payment-border-hover);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled {\n  opacity: 1;\n  cursor: not-allowed;\n  border-color: var(--er-payment-border);\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled.er-booking-mode-card--selected {\n  border-color: var(--er-payment-border);\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  > :not(.er-booking-mode-tooltip) {\n  opacity: 0.55;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled:hover {\n  border-color: var(--er-payment-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  .er-booking-mode-card-icon,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  .er-booking-mode-card-label {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  .er-booking-mode-card-detail {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-icon {\n  font-size: 1.75rem;\n  line-height: 1;\n  /* SVG icon sizing */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-icon\n  svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-label {\n  font-weight: 600;\n  font-size: 1rem;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-subtle);\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-check {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n}\n\n/* Alternative link in booking mode */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-alt {\n  margin-top: 1rem;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-alt-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-alt-link:hover {\n  text-decoration: none;\n}\n\n/* Tooltip styling for disabled options */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card[aria-disabled='true'] {\n  position: relative;\n}\n\n/* Tooltip appears on hover for disabled cards */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-tooltip {\n  display: none;\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-text));\n  color: rgb(var(--tb-background));\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  white-space: normal;\n  max-width: 16rem;\n  line-height: 1.35;\n  text-align: center;\n  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled:hover\n  .er-booking-mode-tooltip {\n  display: block;\n}\n\n/* =============================================================================\n * Block: Event Calendar\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Tier 3 vars: --ec-* (from event-calendar var generator)\n * =============================================================================\n */\n\n/* Main container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow: hidden;\n}\n\n/* Calendar navigation */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2.5rem;\n  min-height: 2.5rem;\n  padding: 0.5rem;\n  border-radius: var(--rb-block-radius);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn:hover {\n  background-color: var(--ec-nav-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  min-width: 200px;\n  text-align: center;\n}\n\n/* Day headers */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-headers {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-header {\n  text-align: center;\n  padding: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  opacity: var(--ec-header-opacity);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n/* Calendar grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n/* Day cells */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-day {\n  min-height: 100px;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  border-right: 1px solid var(--ec-border-subtle);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day:nth-child(7n) {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--other-month {\n  opacity: var(--ec-other-month-opacity);\n}\n\n/* Day number */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-number {\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  opacity: var(--ec-day-number-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today\n  .event-calendar-day-number {\n  font-weight: 700;\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n/* Events list */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Event item - solid primary background */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  background-color: var(--ec-event-solid-bg);\n  color: var(--ec-event-solid-text);\n  text-decoration: none;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  font-family: inherit;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:hover {\n  background-color: var(--ec-event-solid-hover-bg);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:focus-visible {\n  outline: 2px solid var(--ec-event-solid-bg);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-time {\n  flex-shrink: 0;\n  white-space: nowrap;\n  font-weight: 600;\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* More indicator - clickable button style */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more {\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  font-family: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:hover {\n  background-color: rgba(var(--tb-primary), 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-empty {\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n  margin-top: 1rem;\n}\n\n/* Filters container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  min-width: 180px;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  opacity: 0.7;\n}\n\n/* Event filter select inherits base styling from .form-select, only block-specific overrides here */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter-select {\n  /* Use theme input radius instead of block radius for consistency with other form inputs */\n  border-radius: var(--rb-input-radius, var(--rb-block-radius));\n}\n\n/* Category filter buttons */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-category-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:hover:not(:disabled) {\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: var(--ec-event-solid-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Allow category filter to be wider for button group */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter:has(.event-category-buttons) {\n  min-width: auto;\n  flex: 1 1 auto;\n}\n\n/* Combined mode container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-combined {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-combined-content {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Calendar view toggle (Month/Week) in Combined mode */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-toggle {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  opacity: 0.7;\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn:hover {\n  opacity: 1;\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn--active {\n  opacity: 1;\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n/* -----------------------------------------------------------------------------\n * Week Agenda View\n * Vertical agenda layout for week view with rich event details\n * ----------------------------------------------------------------------------- */\n\n/* Agenda week container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-week {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Individual day section */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-day {\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day:last-child {\n  border-bottom: none;\n}\n\n/* Day header */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-header {\n  padding: 0.75rem 0;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Today badge */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-today-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n  border-radius: var(--rb-button-radius);\n}\n\n/* Today highlight for entire day section */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day--today\n  .event-agenda-day-header {\n  background-color: var(--ec-today-bg);\n}\n\n/* Day content area */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-content {\n  padding: 0.75rem 0;\n}\n\n/* Events list within a day */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n * Agenda Event Card\n * Rich event card for agenda view\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 0.75rem;\n  background-color: var(--ec-surface);\n  border: 1px solid var(--ec-border-subtle);\n  border-radius: var(--rb-block-radius);\n  text-decoration: none;\n  color: inherit;\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card:hover {\n  border-color: rgba(var(--tb-primary), 0.5);\n  background-color: var(--ec-event-bg);\n}\n\n/* Category color indicator */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-indicator {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  border-radius: 2px;\n  min-height: 2.5rem;\n}\n\n/* Card content wrapper */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Header row: time + title */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-header {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-time {\n  font-size: 0.75rem;\n  font-weight: 600;\n  opacity: var(--ec-time-opacity);\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.3;\n}\n\n/* Details row: venue, price, capacity */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-details {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-icon {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-price {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-capacity {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-capacity--full {\n  font-weight: 600;\n}\n\n/*\n * Agenda rows\n *\n * The modal keeps the original button card above. Published agenda rows use\n * an article so their title and booking action can be separate, accessible\n * links without nesting anchors.\n */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda {\n  display: grid;\n  grid-template-columns: 0.25rem minmax(4.5rem, auto) minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: 1rem;\n  padding: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-indicator {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  > .event-agenda-card-time {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-content {\n  grid-column: 3;\n  grid-row: 1;\n  display: block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title {\n  margin: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a:hover {\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-details {\n  align-items: baseline;\n  gap: 0.25rem 0.6rem;\n  margin-top: 0.2rem;\n  font-size: 0.75rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-location {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-action {\n  grid-column: 4;\n  grid-row: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.5rem;\n  min-width: max-content;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-price {\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-status {\n  font-size: 0.75rem;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-icon {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-empty {\n  margin: 0;\n  padding: 2rem 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda {\n    grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr);\n    grid-template-areas:\n      'time content'\n      'action action';\n    align-items: start;\n    column-gap: 0.75rem;\n    row-gap: 0.65rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-indicator {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    > .event-agenda-card-time {\n    grid-area: time;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-content {\n    grid-area: content;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-action {\n    grid-area: action;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Timetable View\n * Time-grid layout for recurring class schedules\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-timetable {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-selector {\n  display: none;\n  gap: 0.375rem;\n  overflow-x: auto;\n  padding-bottom: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab {\n  flex: 0 0 auto;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  background: transparent;\n  color: var(--ec-text);\n  cursor: pointer;\n  font: inherit;\n  font-size: 0.8125rem;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-grid {\n  display: grid;\n  grid-template-columns: 4.5rem repeat(7, minmax(8rem, 1fr));\n  min-width: 62rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-rail,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day {\n  border-right: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-heading {\n  min-height: 3.25rem;\n  margin: 0;\n  padding: 0.75rem 0.5rem;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day--today\n  .event-timetable-day-heading {\n  background-color: var(--ec-today-bg);\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-today-badge {\n  padding: 0.125rem 0.375rem;\n  border-radius: var(--rb-button-radius);\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-body {\n  position: relative;\n  height: clamp(\n    34rem,\n    calc(var(--event-timetable-range-minutes, 900) * 0.055rem),\n    56rem\n  );\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body {\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-label {\n  position: absolute;\n  left: 0.625rem;\n  transform: translateY(-50%);\n  font-size: 0.6875rem;\n  opacity: 0.65;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-hour-line {\n  position: absolute;\n  left: 0;\n  right: 0;\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event {\n  position: absolute;\n  min-height: 2.75rem;\n  padding: 0.375rem 0.5rem;\n  border: 1px solid var(--ec-border-subtle);\n  border-left-width: 4px;\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  color: var(--ec-text);\n  box-shadow: 0 1px 2px rgba(var(--tb-text), 0.08);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  overflow: hidden;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:hover {\n  box-shadow: 0 4px 12px rgba(var(--tb-text), 0.12);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time {\n  font-size: 0.6875rem;\n  font-weight: 700;\n  opacity: var(--ec-time-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title {\n  font-size: 0.8125rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta {\n  font-size: 0.6875rem;\n  opacity: 0.72;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  opacity: 0.85;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity--full {\n  color: rgb(var(--tb-danger, 220 38 38));\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-empty {\n  margin: 0;\n  padding: 1rem 0.5rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-empty {\n  margin: 0.25rem 0 0;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day-selector {\n    display: flex;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-container {\n    overflow: hidden;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-grid {\n    grid-template-columns: 4rem minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day[data-selected='false'] {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day {\n    border-right: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-time-rail {\n    border-right: 1px solid var(--ec-border-subtle);\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day-heading {\n    justify-content: flex-start;\n    padding-inline: 0.75rem;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Board View\n * Compact \"class day-board\": day columns side by side, one card per class,\n * three-state availability (available / filling / waitlist), and a footer CTA.\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-week-board {\n  /* Status accent tokens \u2014 map the three availability states onto theme colours.\n   * available -> secondary, filling -> accent, waitlist -> muted text. */\n  --ec-status-available: rgb(var(--tb-secondary));\n  --ec-status-filling: rgb(var(--tb-accent));\n  --ec-status-waitlist: rgba(var(--tb-text), 0.4);\n  --event-week-board-cols: 7;\n\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  background-color: var(--ec-surface);\n  color: var(--ec-text);\n  overflow: hidden;\n}\n\n/* Opt-in raised look: a soft drop shadow so the board lifts off the page.\n * Generic default (no [data-elevated]) stays flat. */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board[data-elevated] {\n  box-shadow: 0 14px 34px -24px rgba(var(--tb-text), 0.35);\n}\n\n/* Top bar: authored title + week navigation + legend */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-top {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: 1rem;\n  padding: 1.1rem 1.5rem;\n  /* surfaceAlt gives the header/footer a legible tint against the white day-grid\n   * body \u2014 the faint `--ec-header-bg` (5% text) is invisible on light palettes. */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-title {\n  grid-column: 1;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-navigation {\n  grid-column: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.65rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border: 1px solid var(--ec-border);\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:hover {\n  background-color: var(--ec-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-range {\n  min-width: 12rem;\n  margin: 0;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-loading {\n  font-weight: 400;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend {\n  grid-column: 3;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 1.1rem;\n  flex-wrap: wrap;\n  font-size: 0.6875rem;\n  letter-spacing: 0.03em;\n  opacity: 0.75;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  color: rgb(var(--tb-error, var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error\n  p {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot {\n  width: 0.55rem;\n  height: 0.55rem;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='available'] {\n  background-color: var(--ec-status-available);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='filling'] {\n  background-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='waitlist'] {\n  background-color: var(--ec-status-waitlist);\n}\n\n/* Day columns grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--event-week-board-cols), minmax(0, 1fr));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day {\n  display: flex;\n  flex-direction: column;\n  min-height: 15rem;\n  /* Tabular column rule. Driven by the theme border tokens so borderless site\n   * styles (border.width: 'none' -> --rb-border-width: 0) render no grid at all,\n   * while hairline/thin/thick themes get a crisp full-strength divider. */\n  border-right: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.4rem;\n  padding: 0.9rem 0.9rem 0.65rem;\n  /* Header-row underline \u2014 same border-token gating as the column rules. */\n  border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-head {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-abbr {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-abbr {\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-num {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  opacity: 0.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.65rem;\n  padding: 0.9rem;\n  flex: 1;\n}\n\n/* Class card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.45rem;\n  padding: 0.8rem 0.85rem;\n  /* Full hairline border at the site style's border strength (0 on borderless\n   * styles), alongside the exaggerated status stripe on the left. `--ec-border-subtle`\n   * (half-strength) reads as no border at all on light palettes. */\n  border: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  border-left: 3px solid var(--ec-status-available);\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  color: inherit;\n  text-decoration: none;\n  transition:\n    transform var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='filling'] {\n  border-left-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='waitlist'] {\n  border-left-color: var(--ec-status-waitlist);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px -8px rgba(var(--tb-text), 0.28);\n  border-color: rgba(var(--tb-primary), 0.4);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-title {\n  font-family: var(--font-heading, inherit);\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-time {\n  font-size: 0.75rem;\n  letter-spacing: 0.01em;\n  opacity: 0.7;\n}\n\n/* Capacity pill */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  padding: 0.15rem 0.6rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  /* Available (default): a calm neutral/muted pill \u2014 not a coloured outline.\n   * Filling -> amber and waitlist -> muted outline are handled by the\n   * data-status overrides below. */\n  border: 1px solid var(--ec-border);\n  background-color: rgba(var(--tb-text), 0.06);\n  color: rgba(var(--tb-text), 0.62);\n  border-color: var(--ec-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='filling'] {\n  background-color: rgba(var(--tb-accent), 0.14);\n  color: var(--ec-status-filling);\n  border-color: rgba(var(--tb-accent), 0.32);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='waitlist'] {\n  background-color: transparent;\n  color: rgba(var(--tb-text), 0.6);\n  border-color: var(--ec-border);\n}\n\n/* Footer */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n  padding: 1.1rem 1.5rem;\n  /* Matches the header tint (see .event-week-board-top). */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot-note {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.75;\n}\n\n/* Responsive: collapse day columns to a stacked list on narrow viewports */\n@container rb-site (max-width: 1023px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-top {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-title,\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation,\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    grid-column: 1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-grid {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day {\n    min-height: 0;\n    border-right: none;\n    border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day:last-child {\n    border-bottom: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day--empty {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day-head {\n    border-bottom: none;\n    padding-bottom: 0.25rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day-body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    padding-top: 0.35rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 14rem;\n  }\n}\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation {\n    display: grid;\n    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;\n    width: 100%;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation\n    > :last-child {\n    grid-column: 1 / -1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-range {\n    min-width: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 100%;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week-board section band\n * Give the whole week-board section (head + panel) a subtle surface band so it\n * reads as a distinct zone from the page \u2014 the \"testimonials band\" pattern.\n * Painted as a pseudo-element above the section's fallback background layer\n * (z-index -10) but behind the content, so no block-content wiring is needed.\n * Surface + hairline rules are token-referenced: on a borderless site style\n * (--rb-border-width: 0) the band keeps its surface tint but drops the rules.\n * Opt-in only: the band paints when the board root carries [data-banded];\n * the generic default is bandless.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope)\n  [data-slot='section']:has(.event-calendar--week-board[data-banded])::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -9;\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-block: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  pointer-events: none;\n}\n\n/* -----------------------------------------------------------------------------\n * Event section head \u2014 split (heading left, intro right)\n * Rendered by the block frame (outside [data-block=\"event-calendar\"]) via\n * eventSectionHeaderLayoutNodes({ splitClassName }). Lays the heading and its\n * supporting intro out as a two-column head on wide viewports, stacking on\n * narrow ones. The section band above provides the distinct background.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope) .event-section-head--split {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: clamp(1.5rem, 4vw, 3.5rem);\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) .event-section-head--split > :where(h1, h2, h3) {\n  margin: 0;\n}\n\n:where(.theme-scope) .event-section-head--split > .rb-prose {\n  flex: 1 1 22rem;\n  max-width: 34rem;\n  margin: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .event-section-head--split {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-section-head--split > .rb-prose {\n    flex-basis: auto;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Event Calendar Modals\n * Modal overlays for event details and day events list\n * ----------------------------------------------------------------------------- */\n\n/* Modal overlay */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--ec-modal-overlay-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Body-level modal portal baseline: clear sticky site/editor chrome unless a theme deliberately overrides it. */\n  z-index: var(--ec-modal-z-index, 20000);\n  padding: 1rem;\n  animation: ec-modal-fade-in 150ms ease-out;\n}\n\n@keyframes ec-modal-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal dialog */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal {\n  position: relative;\n  background: var(--ec-modal-bg);\n  border-radius: var(--rb-block-radius);\n  max-width: 28rem;\n  width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n  box-shadow: var(--ec-modal-shadow);\n  animation: ec-modal-slide-in 200ms ease-out;\n}\n\n@keyframes ec-modal-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* Event modal - constrained width for card */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--event {\n  max-width: 26rem;\n}\n\n/* Day modal */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--day {\n  max-width: 28rem;\n}\n\n/* Close button */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--ec-text);\n  opacity: 0.6;\n  cursor: pointer;\n  border-radius: 50%;\n  transition:\n    opacity var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:hover {\n  opacity: 1;\n  background-color: rgba(var(--tb-text), 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Modal header (for day modal) */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-header {\n  padding: 1.5rem 1.5rem 1rem;\n  padding-right: 3rem; /* Space for close button */\n  border-bottom: 1px solid var(--ec-border);\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--ec-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-subtitle {\n  font-size: 0.875rem;\n  color: var(--ec-text);\n  opacity: 0.7;\n  margin: 0.25rem 0 0;\n}\n\n/* Modal content */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-content {\n  padding: 1rem;\n}\n\n/* Event modal: tighter padding for card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal--event\n  .ec-modal-content {\n  padding: 0.5rem;\n}\n\n/* Day events list */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-day-events-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* AgendaEventCard in button mode inherits most styles, just needs cursor */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  button.event-agenda-card {\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n}\n\n/* Responsive adjustments */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-container {\n    margin-left: -1.5rem;\n    margin-right: -1.5rem;\n    border-left: none;\n    border-right: none;\n    border-radius: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-day-header {\n    font-size: 0.75rem;\n    padding: 0.375rem 0.125rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-day {\n    min-height: 88px;\n    padding: 0.125rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-title {\n    font-size: 0.9375rem;\n    min-width: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-day-number {\n    font-size: 0.75rem;\n    margin-bottom: 0.125rem;\n    padding: 0 0.125rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-event {\n    justify-content: center;\n    gap: 0.25rem;\n    padding: 0.1875rem 0.25rem;\n    font-size: 0.6875rem;\n    border-radius: calc(var(--rb-block-radius) / 3);\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-event-time {\n    text-align: center;\n    font-size: 0.625rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-event-title {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-more {\n    padding: 0.125rem 0.25rem;\n    font-size: 0.6875rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-header\n    > button {\n    margin-right: 0.25rem;\n  }\n\n  :where(.theme-scope) :where([data-block='event-calendar']) .ec-modal {\n    max-width: 100%;\n    max-height: 85vh;\n    margin: 0 0.5rem;\n  }\n}\n}\n\n/*\n * Shared: Tab bar (underline style)\n *\n * Used by:\n * - Event Calendar (combined list/calendar view)\n * - Customer Portal (section navigation)\n *\n * Styling is driven by --rb-tab-* CSS variables.\n */\n\n:where(.theme-scope) .nav-tabs {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: var(--rb-tab-border-width, 1px) solid var(--rb-tab-border-color, rgb(var(--tb-border)));\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) .nav-tab {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  border-bottom: var(--rb-tab-active-border-width, 2px) solid transparent;\n  margin-bottom: calc(-1 * var(--rb-tab-border-width, 1px));\n  cursor: pointer;\n  color: var(--rb-tab-text, rgb(var(--tb-text)));\n  opacity: var(--rb-tab-opacity, 0.7);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) .nav-tab:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) .nav-tab--active {\n  opacity: 1;\n  border-bottom-color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n  color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n}\n\n/* =============================================================================\n * Block: Appointment Booking\n *\n * Structural styling comes from the shared registration-surface layer\n * (registration-surface.css): surface container, option cards + check,\n * step indicator, wizard actions, on-surface text ramp, stacks, summary box\n * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped\n * from this block's --ab-* Tier 3 vars by its var generator.\n *\n * Inputs use the theme-generated form-* classes; feedback boxes use the\n * theme-generated alert / alert-{tone} classes. Only genuinely\n * booking-specific rules live here.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette)\n * - Tier 3 vars: --ab-* (from appointment-booking var generator)\n * =============================================================================\n */\n\n/* Typography helpers */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-subtitle {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--sm {\n  font-size: 0.75rem;\n}\n\n/* Centered state (loading / terminal panels) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n/* Terminal state title (below the state icon) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-terminal-title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--success {\n  background: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));\n  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--error {\n  background: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));\n  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--info {\n  background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));\n  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--warning {\n  background: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));\n  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));\n}\n\n/* Payment option summary rows (label/value lines inside an option card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-option-rows {\n  display: grid;\n  gap: 0.125rem;\n}\n\n/* Date/time pill grids (selection pills extend .rb-option-card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-date-pill {\n  flex-direction: column;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0.5rem 0.875rem;\n  min-width: 4.25rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-time-pill {\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.875rem;\n  min-width: 5.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-caption {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0;\n  line-height: 1.2;\n  text-transform: uppercase;\n  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-value {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell {\n  min-height: 18rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell-button {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);\n  background: rgb(var(--tb-primary, 17 24 39));\n  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* Inline text-link button (e.g. \"Load more dates\") */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link {\n  display: inline;\n  color: rgb(var(--tb-primary, 17 24 39));\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link:hover {\n  text-decoration: none;\n}\n\n/* Altcha wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-altcha {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Shared: Inline Text Marks\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-inline-text-accent,\n:where(.theme-scope) .rb-inline-text-highlight {\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n}\n\n:where(.theme-scope) .rb-inline-text-accent-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-brand {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-contrast {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) .rb-inline-text-highlight {\n  border-radius: 0.22em;\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n  padding: 0.02em 0.12em;\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-soft {\n  background: color-mix(in oklab, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-accent {\n  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-brand {\n  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);\n}\n\n/* =============================================================================\n * Block: Hero (Phase 2)\n * Uses theme palette vars directly (no Tier 3 vars needed)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* Subheadline - supporting text below headline */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-headline {\n  text-wrap: balance;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-subheadline {\n  font-size: 1.125rem;\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-subheadline {\n    font-size: 1.25rem;\n  }\n}\n}\n\n/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-headline {\n  font-size: clamp(2rem, 4vw, 3rem);\n  line-height: 1.12;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-subheadline {\n  font-size: clamp(1rem, 1.2vw, 1.25rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-headline {\n  font-size: clamp(2.75rem, 5.6vw, 4.75rem);\n  line-height: 1.06;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-subheadline {\n  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline {\n  font-size: clamp(3.5rem, 7.2vw, 6.25rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-subheadline {\n  font-size: clamp(1.125rem, 1.5vw, 1.5rem);\n  line-height: 1.5;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline {\n  font-size: clamp(4.25rem, 10vw, 8.5rem);\n  line-height: 0.94;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-subheadline {\n  font-size: clamp(1.125rem, 1.4vw, 1.5rem);\n  line-height: 1.45;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {\n  font-size: clamp(3.5rem, 7.5vw, 6.5rem);\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n  font-size: clamp(3rem, 6vw, 5.25rem);\n  line-height: 1.02;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline,\n  :where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n    font-size: clamp(2.5rem, 11vw, 3.5rem);\n    line-height: 1.05;\n  }\n}\n}\n\n/* =============================================================================\n * Shared: Heading Group (used by CTA, single-button, etc.)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: CTA (Phase 2)\n * =============================================================================\n */\n\n/* CTA content/body text */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-content {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n/* CTA button row container */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Text-style CTA actions belong to the section foreground contract. */\n:where(.theme-scope) [data-block=\"cta-full\"] .cta-row .button-link {\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, rgb(var(--tb-primary))));\n}\n\n/* =============================================================================\n * Block: Body Text (content block, Phase 2)\n *\n * Style contract:\n * - Variant styling is keyed off `data-block-variant` on the PageRenderer wrapper.\n * - Prose sizing comes from `rb-prose-*` (theme-aware) in `packages/blocks/src/theme/styles.css`.\n * =============================================================================\n */\n\n/* Body copy rich text container */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container {\n  max-width: 48rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container.rb-items-center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Body copy rich text */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body {\n  color: inherit;\n}\n\n/* Ensure editing mode doesn't silently change typography inside ProseMirror */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body :where(.ProseMirror) {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n/* Variant: Intro (centered, wider container, larger text, relaxed leading) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-container {\n  max-width: 60rem;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n  font-size: var(--rb-prose-lg-font-size);\n  line-height: var(--rb-prose-lg-line-height);\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n    font-size: var(--rb-prose-xl-sm-font-size);\n    line-height: var(--rb-prose-xl-sm-line-height);\n  }\n}\n}\n\n/* Variant: Narrow (left-aligned, shorter line length) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"narrow\"]) .body-copy-container {\n  max-width: 34rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n/* Override prose sizing via theme-aware vars (see styles.css) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) {\n  /* Mobile-first: use rb-prose-lg sizing below 640px */\n  --rb-prose-lg-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.35),\n    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),\n    calc(var(--fs-body, 16px) * 1.6)\n  );\n  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);\n\n  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */\n  --rb-prose-xl-sm-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.55),\n    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),\n    calc(var(--fs-body, 16px) * 1.8)\n  );\n  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);\n}\n\n/* =============================================================================\n * Block: Form (formCopy fragment, Phase 2)\n * =============================================================================\n */\n\n/* Form title */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n/* Form intro text */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-intro {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* =============================================================================\n * Form Block (fb-*)\n *\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive\n * - Tier 2 vars: --rb-block-radius\n * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*\n *\n * Note: Form input styling (form-input, form-select, etc.) is handled by\n * the input CSS generator. These styles are for form container/state only.\n * ============================================================================= */\n\n/* Form container */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Two-column row (opt-in per field via schema layout) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n/* Field wrapper */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Fieldset (for radio groups) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Inline field (checkbox, radio with label) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-inline {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Success state */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Error banner */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 0.75rem;\n  font-size: 0.875rem;\n  margin-bottom: 0.5rem;\n}\n\n/* Empty state (no form data) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n/* Form actions (submit button container) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block-Level Override Utilities\n *\n * These utility classes replace Tailwind theming utilities for block-level\n * settings like \"raised\" and \"rounded\". They use fixed values to match\n * Tailwind's defaults while allowing us to remove theming classes from safelist.\n * =============================================================================\n */\n\n/* Border Radius Utilities (replaces rounded-*) */\n:where(.theme-scope) .rb-rounded-sm {\n  border-radius: 0.125rem;\n}\n\n:where(.theme-scope) .rb-rounded-md {\n  border-radius: 0.375rem;\n}\n\n:where(.theme-scope) .rb-rounded-lg {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) .rb-rounded-xl {\n  border-radius: 0.75rem;\n}\n\n:where(.theme-scope) .rb-rounded-2xl {\n  border-radius: 1rem;\n}\n\n:where(.theme-scope) .rb-rounded-full {\n  border-radius: 9999px;\n}\n\n/* Shadow Utilities (defined in rb-utilities.css; theme-driven via --shadow-*) */\n\n/* =============================================================================\n * Block: Event List (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Empty state container */\n:where(.theme-scope) .event-list-empty {\n  border-radius: 0.75rem; /* rounded-xl equivalent */\n  border: 1px dashed rgb(var(--tb-border));\n  padding: 3rem;\n  text-align: center;\n}\n\n/* Reset filters button in empty state */\n:where(.theme-scope) .event-reset-filters-btn {\n  display: inline-block;\n  margin-top: 1rem;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgb(var(--tb-primary));\n  background: transparent;\n  border: 1px solid rgb(var(--tb-primary));\n  border-radius: var(--rb-button-radius, 0.375rem);\n  cursor: pointer;\n  transition:\n    background-color var(--rb-block-transition, 150ms) ease,\n    color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) .event-reset-filters-btn:hover {\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n:where(.theme-scope) .event-reset-filters-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Event titles always link to the event page, so a card or row whose CTA is\n   hidden (sold out, closed) is never a dead end (issue 1372). The link inherits\n   the heading's colour and only reveals itself on hover or keyboard focus.\n   Shared by EventCard, EventCompactRow and the offerings-preview course cards via `.event-title-link`. */\n:where(.theme-scope) .event-title-link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-title-link:hover,\n:where(.theme-scope) .event-title-link:focus-visible {\n  text-decoration: underline;\n  text-underline-offset: 0.12em;\n}\n\n/* Catalogue cards can keep their media footprint when an event has no\n   resolved image. The date remains useful content and follows the site's\n   palette and typography tokens. */\n:where(.theme-scope) .event-card-date-fallback {\n  position: relative;\n  display: flex;\n  min-height: var(--rb-event-card-media-height, 16rem);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.125rem;\n  overflow: hidden;\n  padding: 1.125rem;\n  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));\n  background: rgb(var(--tb-surfaceAlt, var(--tb-surface, 255 255 255)));\n  color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .event-card-date-fallback::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: radial-gradient(\n    120% 140% at 0% 0%,\n    color-mix(in srgb, rgb(var(--tb-primary, 0 0 0)) 11%, transparent),\n    transparent 62%\n  );\n  content: '';\n}\n\n:where(.theme-scope) .event-card-date-fallback-label,\n:where(.theme-scope) .event-card-date-fallback-value {\n  position: relative;\n}\n\n:where(.theme-scope) .event-card-date-fallback-label {\n  color: rgb(var(--tb-mutedText, var(--tb-muted, 107 114 128)));\n  font-size: 0.72rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .event-card-date-fallback-value {\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 500;\n  letter-spacing: -0.025em;\n  line-height: 1.04;\n}\n\n:where(.theme-scope) .event-card-price {\n  color: rgb(var(--tb-text, 17 24 39));\n  font-weight: 600;\n}\n\n/* =============================================================================\n * Block: Carousel Navigation (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Layout\n *\n * Keep slide sizing/spacing as a single source of truth, shared by:\n * - SSR fallback (scrollable shell)\n * - Hydrated Embla carousel\n *\n * We use the padding/margin approach for slide spacing:\n * - Slides have symmetric left/right padding (half the gap each side)\n * - Track has negative margins to keep first/last slide flush with viewport edges\n * - This works reliably with Embla's position calculations\n *\n * Slides-per-view is provided via CSS vars set on `.carousel-root`:\n * - --rb-carousel-slides-to-show-mobile\n * - --rb-carousel-slides-to-show-tablet (optional)\n * - --rb-carousel-slides-to-show-desktop (optional)\n */\n:where(.theme-scope) .carousel-root {\n  --rb-carousel-slide-spacing: 1rem;\n  --rb-carousel-slides-to-show: var(--rb-carousel-slides-to-show-mobile, 1);\n}\n\n:where(.theme-scope) .carousel-root.rb-image-gallery-carousel--full-bleed {\n  --rb-carousel-slide-spacing: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-tablet,\n      var(--rb-carousel-slides-to-show-mobile, 1)\n    );\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-desktop,\n      var(\n        --rb-carousel-slides-to-show-tablet,\n        var(--rb-carousel-slides-to-show-mobile, 1)\n      )\n    );\n  }\n}\n}\n\n/* Slides take exact percentage width with internal padding for gaps.\n * Padding is more reliable than margin (no collapsing, consistent on all slides). */\n:where(.theme-scope) .carousel-root .carousel-slide,\n:where(.theme-scope) .carousel-root .rb-overflow-x-auto > .rb-flex > * {\n  flex: 0 0 calc(100% / var(--rb-carousel-slides-to-show));\n  min-width: 0;\n  box-sizing: border-box;\n  padding-left: calc(var(--rb-carousel-slide-spacing) / 2);\n  padding-right: calc(var(--rb-carousel-slide-spacing) / 2);\n}\n\n/* Navigation buttons + dots are intentionally Tailwind-free and scoped to the\n * hydrated carousel root to avoid leaking styles globally. */\n:where(.theme-scope) .carousel-root .carousel-nav-btn {\n  position: absolute;\n  top: 50%;\n  z-index: 10;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 2.5rem;\n  width: 2.5rem;\n  border-radius: 9999px;\n  border: 1px solid rgba(var(--tb-border, 229 231 235), 0.35);\n  background-color: rgba(var(--tb-surface, 248 250 252), 0.9);\n  color: rgb(var(--tb-text, 17 24 39));\n  box-shadow: 0 4px 6px -1px rgba(var(--tb-shadow), 0.1),\n    0 2px 4px -2px rgba(var(--tb-shadow), 0.1);\n  cursor: pointer;\n  transform: translateY(-50%);\n  transition: background-color 0.2s ease, box-shadow 0.2s ease,\n    opacity 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--prev {\n  left: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--next {\n  right: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:hover {\n  background-color: rgb(var(--tb-surface, 248 250 252));\n  box-shadow: 0 10px 15px -3px rgba(var(--tb-shadow), 0.1),\n    0 4px 6px -4px rgba(var(--tb-shadow), 0.1);\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Hover-only arrows (no group-hover utilities in SDK runtime) */\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"] .carousel-nav-btn {\n  opacity: 0;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:hover .carousel-nav-btn,\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:focus-within .carousel-nav-btn {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Dots */\n:where(.theme-scope) .carousel-root .carousel-dots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* Dots overlaid on the bottom of the carousel (used for image-dominant variants). */\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dots {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0.75rem;\n  z-index: 10;\n  margin-top: 0;\n  padding: 0.5rem 0.75rem;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  pointer-events: auto;\n}\n\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  background-color: rgba(var(--tb-surface, 248 250 252), 0.55);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot:hover {\n  background-color: rgba(var(--tb-surface, 248 250 252), 0.75);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 9999px;\n  border: none;\n  background-color: rgb(var(--tb-border, 229 231 235));\n  transition: background-color 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:hover {\n  background-color: rgba(var(--tb-text, 17 24 39), 0.3);\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(var(--tb-primary, 59 130 246), 0.35);\n}\n\n/* =============================================================================\n * Block: Shop\n * Uses theme palette vars directly\n * ============================================================================= */\n\n/* Shop container */\n:where(.theme-scope) .shop {\n  width: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));\n  --rb-modal-z-index: 20000;\n  --rb-modal-text: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-heading: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-link: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-modal-supporting: rgb(var(--tb-mutedText, 100 116 139));\n  --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));\n  --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));\n}\n\n:where(.theme-scope) .shop--empty {\n  text-align: center;\n  padding: 3rem 1rem;\n}\n\n:where(.theme-scope) .shop__empty-text {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText))));\n  font-size: var(--fs-body, 1rem);\n}\n\n/* Error display */\n:where(.theme-scope) .shop__error {\n  background-color: rgba(var(--tb-destructive), 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.75rem 1rem;\n  border-radius: var(--shop-control-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Sections */\n:where(.theme-scope) .shop__section {\n  margin-bottom: 2rem;\n}\n\n:where(.theme-scope) .shop__section:last-child {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop__section-heading {\n  font-size: var(--fs-h3, 1.25rem);\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text))));\n  margin-bottom: 1rem;\n  font-family: var(--font-heading);\n}\n\n/* Products grid/list layout */\n:where(.theme-scope) .shop__products--grid {\n  display: grid;\n  grid-template-columns: repeat(var(--shop-columns, 2), 1fr);\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__products--list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Compact product register: useful for small, scannable pass/package sets. */\n:where(.theme-scope) .shop--register .shop__section {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__section-heading {\n  margin-bottom: 1rem;\n  font-size: clamp(1.4rem, 2.2vw, 1.7rem);\n}\n\n:where(.theme-scope) .shop--register .shop__products--register {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .shop--register .shop__card {\n  display: grid;\n  grid-template-columns: minmax(8rem, 0.85fr) auto minmax(12rem, 1.5fr) auto;\n  grid-template-rows: auto;\n  align-items: center;\n  column-gap: clamp(1rem, 3vw, 2.5rem);\n  padding: 1rem 0;\n  border: 0;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  --rb-surface-text-color: inherit;\n  --rb-surface-heading-color: inherit;\n  --rb-surface-link-color: inherit;\n  --rb-surface-supporting-color: inherit;\n}\n\n:where(.theme-scope) .shop--register .shop__card-header {\n  display: contents;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name,\n:where(.theme-scope) .shop--register .shop__card-price,\n:where(.theme-scope) .shop--register .shop__card-details,\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  margin: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: 1.15rem;\n  font-weight: 400;\n}\n\n:where(.theme-scope) .shop--register .shop__card-price {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.98rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, inherit));\n}\n\n:where(.theme-scope) .shop--register .shop__card-description {\n  grid-column: 1 / -1;\n  margin-top: 0.35rem;\n}\n\n:where(.theme-scope) .shop--register .shop__card-details {\n  grid-column: 3;\n  grid-row: 1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.35rem 1rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n}\n\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  grid-column: 4;\n  grid-row: 1;\n  align-self: center;\n  margin-left: auto;\n}\n\n:where(.theme-scope) .shop--register .shop__card > [role='status'] {\n  grid-column: 1 / -1;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .shop--register .shop__card {\n    grid-template-columns: minmax(0, 1fr) auto;\n    row-gap: 0.45rem;\n  }\n\n  :where(.theme-scope) .shop--register .shop__card-name {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope) .shop--register .shop__card-price {\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  :where(.theme-scope) .shop--register .shop__card-details {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n\n  :where(.theme-scope) .shop--register .shop__cta,\n  :where(.theme-scope) .shop--register .shop__purchase-unavailable {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    justify-self: start;\n    margin-left: 0;\n  }\n}\n}\n\n/* Product card */\n:where(.theme-scope) .shop__card {\n  background: rgb(var(--tb-surface));\n  color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n/* No hover shadow (buttons + theme do the emphasis) */\n\n:where(.theme-scope) .shop__card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__card-name {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, rgb(var(--tb-text)));\n  margin: 0;\n  font-family: var(--font-heading);\n}\n\n:where(.theme-scope) .shop__card-price {\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: var(--rb-surface-link-color, rgb(var(--tb-primary)));\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .shop__card-interval {\n  font-size: 0.875rem;\n  font-weight: 400;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-description {\n  font-size: 0.875rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  line-height: 1.5;\n  margin: 0;\n}\n\n:where(.theme-scope) .shop__card-details {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) .shop__card-credits {\n  font-weight: 500;\n}\n\n:where(.theme-scope) .shop__card-per-credit {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-validity {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-unlimited {\n  font-weight: 500;\n  color: var(--rb-surface-link-color, rgb(var(--tb-secondary, var(--tb-primary))));\n}\n\n/* CTA layout: use theme button classes for visuals */\n:where(.theme-scope) .shop__cta {\n  margin-top: auto;\n  align-self: flex-start;\n}\n\n:where(.theme-scope) .shop__purchase-unavailable {\n  margin: auto 0 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n/* Responsive grid */\n@container rb-site (max-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .shop__products--grid {\n    grid-template-columns: 1fr;\n  }\n}\n}\n\n:where(.theme-scope) .shop__modal-product {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1rem;\n}\n\n:where(.theme-scope) .shop__modal-interval {\n  font-size: 0.875rem;\n}\n\n/* Checkout form */\n:where(.theme-scope) .shop__modal-form {\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope) .shop__form-field {\n  margin-bottom: 1rem;\n}\n\n/* Modal error */\n:where(.theme-scope) .shop__modal-error {\n  background-color: rgba(var(--tb-destructive), 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.625rem 0.75rem;\n  border-radius: var(--shop-control-radius);\n  font-size: 0.875rem;\n  margin-bottom: 1rem;\n}\n\n/* Modal actions */\n:where(.theme-scope) .shop__modal-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Duplicate membership warning */\n:where(.theme-scope) .shop__modal-warning {\n  padding: 0.5rem 0 0;\n}\n\n:where(.theme-scope) .shop__modal-warning-title {\n  font-size: 1rem;\n  font-weight: 600;\n  color: rgb(var(--tb-text));\n  margin: 0 0 0.5rem;\n}\n\n:where(.theme-scope) .shop__modal-warning-text {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1.25rem;\n  line-height: 1.5;\n}\n\n:where(.theme-scope) .shop__modal-warning-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Post-checkout return notice */\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return {\n  text-align: center;\n  padding: 1.5rem 1rem;\n  margin-bottom: 1.25rem;\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  background: rgb(var(--tb-surface));\n  color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--success {\n  background: rgba(var(--tb-success), 0.12);\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--warning {\n  background: rgba(var(--tb-warning), 0.12);\n  color: rgb(var(--tb-warning));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-title {\n  margin: 0.25rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n  font-family: var(--font-heading);\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-text {\n  margin: 0;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-dismiss {\n  margin-top: 0.875rem;\n}\n\n/* Mobile: full-width CTA buttons inside cards */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .shop__cta {\n    align-self: stretch;\n    width: 100%;\n  }\n}\n}\n\n/* =============================================================================\n * Block: Customer Portal\n * Uses --cp-* CSS variables (Tier 3)\n * ============================================================================= */\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-container {\n  font-family: var(--font-body);\n  font-size: var(--fs-body);\n  min-height: 200px;\n}\n\n/* Loading state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Login form */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login {\n  max-width: 480px;\n  margin: 0 auto;\n  padding: 2rem;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__title {\n  margin: 0 0 0.5rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__subtitle {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0 0 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__helper {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: var(--cp-muted);\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:hover {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 3px;\n}\n\n/* Form controls (layout only; actual form styling is theme-driven via .form-label/.form-input) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n/* Buttons: Uses theme button classes (primary, secondary, btn-sm, etc.) - no custom styles needed */\n\n/* Alerts */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert {\n  padding: 1rem 1.25rem;\n  border-radius: var(--cp-control-radius);\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  border-left: 4px solid transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--success {\n  background: var(--cp-alert-success-bg);\n  color: var(--cp-alert-success-text);\n  border-color: var(--cp-alert-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--error {\n  background: var(--cp-alert-error-bg);\n  color: var(--cp-alert-error-text);\n  border-color: var(--cp-alert-error-border);\n}\n\n/* Header */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n  margin-bottom: 1rem;\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-header__welcome {\n  font-size: 1.125rem;\n  font-weight: 500;\n}\n\n/* Content area */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-content {\n  min-height: 200px;\n}\n\n/* Section */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section {\n  animation: cp-fade-in 200ms ease;\n}\n\n@keyframes cp-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Empty state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px dashed var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Card */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n  padding: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-title {\n  font-weight: 600;\n  font-size: 1rem;\n  color: var(--cp-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-subtitle {\n  font-size: 0.875rem;\n  margin: 0.25rem 0 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-body {\n  font-size: 0.9375rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Event waitlists */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-list {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlists\n  > .cp-alert {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-card {\n  transition:\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card--focused {\n  border-color: var(--cp-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 22%, transparent);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__summary,\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__position {\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card\n  .cp-card-body\n  p {\n  margin: 0.4rem 0;\n}\n\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-header {\n    flex-direction: column-reverse;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions\n    > * {\n    justify-content: center;\n    text-align: center;\n  }\n}\n}\n\n/* Badge */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 9999px;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--success {\n  background: var(--cp-badge-success-bg);\n  color: var(--cp-badge-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--warning {\n  background: var(--cp-badge-warning-bg);\n  color: var(--cp-badge-warning-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--error {\n  background: var(--cp-badge-error-bg);\n  color: var(--cp-badge-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--info {\n  background: var(--cp-badge-info-bg);\n  color: var(--cp-badge-info-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--default {\n  background: var(--cp-badge-default-bg);\n  color: var(--cp-badge-default-text);\n}\n\n/* Progress bar (for credit display) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress {\n  height: 0.5rem;\n  background: var(--cp-progress-bg);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress__fill {\n  height: 100%;\n  background: var(--cp-progress-fill);\n  border-radius: 9999px;\n  transition: width 300ms ease;\n}\n\n/* Profile display */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-width: 500px;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__tiles {\n  /* Use tiles as a mini \"details grid\" rather than event occurrence selection. */\n  --rb-event-tile-bg: var(--cp-card-bg);\n  --rb-event-tile-border: var(--cp-card-border);\n  --rb-event-tile-radius: var(--cp-control-radius);\n\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__value {\n  font-size: 1rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__edit {\n  align-self: flex-start;\n}\n\n/* Cards grid */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cards {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n}\n\n/* A11y helpers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Table */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table-wrap {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table th,\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table td {\n  padding: 0.875rem 1rem;\n  vertical-align: top;\n  border-bottom: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table thead th {\n  text-align: left;\n  background: rgba(var(--tb-border), 0.2);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-table\n  tbody\n  tr:last-child\n  td {\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  :is(.cp-row--past, .cp-row--muted) {\n  opacity: 0.65;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-weight: 600;\n  font-size: 0.9375rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__badges {\n  margin-left: auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__text {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-meta {\n  margin-top: 0.25rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-note {\n  margin-top: 0.5rem;\n  padding-left: 0.75rem;\n  border-left: 3px solid var(--cp-border);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--success {\n  border-left-color: rgb(var(--tb-success));\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--error {\n  border-left-color: rgb(var(--tb-destructive));\n  color: rgb(var(--tb-destructive));\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-muted {\n  color: var(--cp-muted);\n}\n\n/* Table columns */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-tickets {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-actions {\n  text-align: right;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-col-actions\n  .btn-sm {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n}\n\n/* Mobile-only row content within table cells */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n  display: none;\n}\n\n/* Section title (for Upcoming/Past dividers) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section-title {\n  margin: 0 0 1rem;\n}\n\n/* Past items (faded) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card--past {\n  opacity: 0.6;\n}\n\n/* Profile actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-profile__actions {\n  display: flex;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Guest section in event cards */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__name {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__phone {\n  color: var(--cp-muted);\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__empty {\n  font-size: 0.875rem;\n  color: var(--cp-muted);\n  font-style: italic;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__index {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--cp-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields\n  input {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__error {\n  font-size: 0.75rem;\n  color: var(--cp-error);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guests__actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n/* Actions modal */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-actions-list {\n  display: grid;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}\n\n/* In the actions modal, tiles sit on a surface modal, so use \"background\" for contrast. */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-list\n  :where(.rb-tile) {\n  --rb-event-tile-bg: rgb(var(--tb-background));\n  --rb-event-tile-border: rgb(var(--tb-border));\n}\n\n/* Actions trigger: icon-only kebab button */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-trigger.btn-sm {\n  padding: 0.35rem !important;\n  line-height: 1 !important;\n  min-width: 32px;\n  min-height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tickets live in their own column on desktop; show them inline on mobile. */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n  display: none;\n}\n\n/* Action tiles (use shared rb-tile primitive for base) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile {\n  appearance: none;\n  font: inherit;\n  text-align: left;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__title {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__desc {\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile--danger\n  .cp-action-tile__title {\n  color: rgb(var(--tb-destructive));\n}\n\n/* Modal form layout */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-form-grid {\n  display: grid;\n  gap: 0.75rem;\n  margin-top: 0.75rem;\n}\n\n/* Button modifiers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--link {\n  background: none;\n  border: none;\n  padding: 0;\n  color: var(--cp-primary);\n  font-size: 0.875rem;\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-btn--link:hover {\n  color: var(--cp-primary-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--xs {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n/* Small input */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--sm {\n  height: auto;\n  padding: 0.375rem 0.625rem;\n  font-size: 0.875rem;\n}\n\n/* Input error state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--error {\n  border-color: var(--cp-error);\n}\n/* Small alert */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--sm {\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-modal__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n}\n\n/* Membership cancel confirmation */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__title {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__message {\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__warning {\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__actions {\n  display: flex;\n  gap: 0.75rem;\n}\n\n/* Membership actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-membership-actions {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-section-actions {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-card-subtitle--spaced {\n  margin-top: 0.75rem;\n}\n\n/* Alert spacing utilities */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mt {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mb {\n  margin-bottom: 1rem;\n}\n\n/* Responsive: show everything without horizontal scrolling */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n    display: flex;\n  }\n\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table thead {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-guests,\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-tickets,\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-actions {\n    display: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n    display: inline;\n  }\n\n  /* Make the cell a positioning context for the kebab */\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-row\n    > td:first-child {\n    position: relative;\n    padding-right: 2.5rem;\n  }\n\n  /* Position kebab in top-right of the cell */\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    margin-top: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions\n    .btn-sm {\n    width: auto;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-profile__edit {\n    align-self: stretch;\n  }\n}\n}\n\n/* Placeholder (SSR) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-placeholder {\n  /* Styles for SSR placeholder */\n}\n\n/* =============================================================================\n * Runtime: Header Navigation Dropdown (Tailwind-free)\n *\n * The SDK runtime does not ship Tailwind's `group-hover:*` / `group-focus-within:*`\n * utilities, so dropdown menus must be controlled via plain CSS selectors.\n * =============================================================================\n */\n\n:where(.theme-scope) .nav-dropdown-menu {\n  /*\n   * Keep these rails in sync with header/navDropdownSizing.ts.\n   * The JS placement gutter is 16px, matching the 1rem per-side gutter in calc(100vw - 2rem).\n   */\n  min-width: 12rem;\n  width: max-content;\n  max-width: min(22rem, calc(100vw - 2rem));\n  transform: translateX(var(--nav-dropdown-shift-x, 0px));\n}\n\n:where(.theme-scope) .nav-dropdown:hover > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown:focus-within > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown .nav-dropdown-trigger[aria-expanded=\"true\"] + .nav-dropdown-menu {\n  display: block;\n}\n\n/* =============================================================================\n * Block: Testimonials\n * Uses CSS vars: --rb-testimonial-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-avatar {\n  width: var(--rb-testimonial-avatar-size);\n  height: var(--rb-testimonial-avatar-size);\n  border-radius: var(--rb-testimonial-avatar-border-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card {\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-quote {\n  display: var(--rb-testimonial-quote-display, block);\n  font-family: var(--rb-testimonial-quote-font, inherit);\n  font-size: var(--rb-testimonial-quote-size);\n  line-height: 1;\n  font-weight: var(--rb-testimonial-quote-weight, 700);\n  opacity: var(--rb-testimonial-quote-opacity);\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-primary)));\n}\n\n\n/* Split grid: title column + cards. On desktop the title takes one quarter and\n * the cards fill the remaining three quarters (so title + 3 cards each read as\n * a quarter). Stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-heading,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  container-type: inline-size;\n  container-name: rb-testimonials-split-cards;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n@container rb-testimonials-split-cards (min-width: 36rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-sm-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@container rb-testimonials-split-cards (min-width: 54rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-lg-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n    align-items: start;\n  }\n}\n}\n\n\n/* =============================================================================\n * Variant: featured-editorial\n *\n * An asymmetric layout: a large featured (spruce-ink) quote card beside a\n * column of stacked white cards. Renders NO avatars. Colours are palette\n * tokens only. Node structure is built in testimonialsCarousel.ts.\n * ============================================================================= */\n\n/* Establish an inline-size query container so the head and grid below respond\n * to the block's own width, not the browser viewport. A viewport @media query\n * collapses to 1-col in the dashboard's scaled preview canvas (which reads the\n * dashboard window, not the canvas) and when the block sits in a narrow column;\n * @container tracks the actual laid-out width \u2014 matching the split-grid variant. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe {\n  container-type: inline-size;\n  container-name: rb-testimonials-fe;\n}\n\n/* Section head: heading left, lead-in line to the right; stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-leadin {\n  max-width: 30rem;\n}\n\n@container rb-testimonials-fe (min-width: 768px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: 1.5rem;\n  }\n}\n\n/* Card grid: featured (wider) beside the stacked column. Single column on\n * small screens. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 1.25rem;\n  align-items: stretch;\n}\n\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);\n  }\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-col {\n  display: grid;\n  gap: 1.25rem;\n  align-content: start;\n}\n\n/* Card shells. Fill, border, corners, elevation and padding all come from the\n * site style's card system: the lead card renders the role its Look asks for\n * (`.card-role-alternative` by default), each supporting card\n * `.card-role-default`, and the padding lands on the shared `.card-content`\n * hook inside. What is left here is structure.\n *\n * The flex column is stated rather than inherited: generated card CSS happens\n * to set one today, but a card variant owns fill and padding, not layout, so\n * this field's geometry \u2014 the quote growing and the attribution pinning to the\n * card's bottom edge \u2014 has to hold whatever surface the site style supplies. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card-body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* Quote mark: the site style's quote treatment, oversized serif */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-qmark {\n  display: block;\n  height: 1.6rem;\n  font-family: var(--font-heading, Georgia, serif);\n  font-style: italic;\n  font-size: 3.375rem;\n  line-height: 0.6;\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-secondary)));\n}\n\n/* Quote body. The inner <p> is targeted directly (not via :where) so the\n * serif display font and sizing win over the theme's base paragraph rule. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote {\n  flex: 1 1 auto;\n  margin-top: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote p {\n  margin: 0;\n  font-family: var(--font-heading, Georgia, serif);\n  font-size: 1.15rem;\n  line-height: 1.5;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-quote p {\n  font-size: clamp(1.375rem, 2.4vw, 1.6875rem);\n  line-height: 1.42;\n  letter-spacing: -0.01em;\n}\n\n/* Attribution: name (bold) + context line, no avatar */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 1.625rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-name {\n  font-weight: 600;\n  font-size: 0.97rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-context {\n  font-size: 0.78rem;\n  letter-spacing: 0.02em;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n\n/* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {\n  height: var(--rb-testimonial-carousel-arrow-size);\n  width: var(--rb-testimonial-carousel-arrow-size);\n  border-color: var(--rb-testimonial-carousel-arrow-border-color);\n  background-color: var(--rb-testimonial-carousel-arrow-bg);\n  color: var(--rb-testimonial-carousel-arrow-color);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn:hover {\n  background-color: var(--rb-testimonial-carousel-arrow-bg-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-icon {\n  width: var(--rb-testimonial-carousel-arrow-icon-size);\n  height: var(--rb-testimonial-carousel-arrow-icon-size);\n  stroke-width: var(--rb-testimonial-carousel-arrow-icon-stroke-width);\n}\n\n/* Equal-height cards: stretch track items and make cards fill */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-track {\n  align-items: stretch;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  display: flex;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide > * {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n}\n\n/* Prevent slide shadows from being clipped - add vertical padding to slides.\n * We don't use frame padding because it affects Embla's position calculations.\n * Horizontal shadow room comes from the slide's gap padding in carousel.css. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  padding-top: var(--rb-testimonial-carousel-shadow-pad);\n  padding-bottom: var(--rb-testimonial-carousel-shadow-pad);\n}\n\n/* Anchor each arrow's outer edge to the container's outer edge.\n * .rb-container has 1rem horizontal padding + `overflow: hidden`, so pulling the\n * arrow out by exactly that padding puts the arrow center on the carousel content\n * edge without any of the button being clipped. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {\n  left: -1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--next {\n  right: -1rem;\n}\n\n/*\n * Event Details (runtime node)\n *\n * Keep these rules minimal and theme-driven.\n */\n\n:where(.theme-scope) .event-details {\n  width: 100%;\n  max-width: 56.25rem; /* 900px */\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .event-details-map-wrap {\n  max-width: 28rem;\n}\n\n/*\n * Shared: Tiles\n *\n * Used by:\n * - Event Registration: occurrence selection cards\n * - Event Details: \"Other dates\"\n * - Event Details: whole-series session schedule\n */\n\n:where(.theme-scope) :where(.rb-tile, .er-event-card) {\n  width: 100%;\n  text-align: left;\n  padding: 1rem;\n  border-radius: var(--rb-event-tile-radius, calc(var(--rb-block-radius) * 0.75));\n  border-style: var(--rb-tile-border-style, var(--rb-event-tile-border-style, var(--rb-border-style, solid)));\n  border-width: var(--rb-tile-border-width, var(--rb-event-tile-border-width, var(--rb-border-width, 1px)));\n  border-color: var(--rb-tile-border, var(--rb-event-tile-border, rgb(var(--tb-border))));\n  background: var(--rb-tile-bg, var(--rb-event-tile-bg, transparent));\n  transition: border-color var(--rb-block-transition) ease,\n              background-color var(--rb-block-transition) ease,\n              opacity var(--rb-block-transition) ease;\n  display: block;\n  opacity: var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1));\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .rb-tiles-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--rb-tiles-grid-cols-sm, 2), minmax(0, 1fr));\n  gap: var(--rb-event-tiles-grid-gap, 0.5rem);\n}\n\n:where(.theme-scope) .rb-tile-treatment-quiet {\n  --rb-tile-bg: color-mix(in oklab, rgb(var(--tb-surface)), rgb(var(--tb-muted)) 48%);\n  --rb-tile-border: color-mix(in oklab, rgb(var(--tb-border)), transparent 35%);\n  --rb-tile-border-hover: color-mix(in oklab, rgb(var(--tb-primary)), transparent 40%);\n}\n\n:where(.theme-scope) .rb-tile-treatment-brand-depth {\n  --rb-brand-depth-surface: rgb(var(--tb-primary-800));\n  --rb-brand-depth-tile-surface: rgb(var(--tb-primary-900));\n  --rb-brand-depth-tile-surface-selected: rgb(var(--tb-primary-950));\n  --rb-tile-bg: var(--rb-brand-depth-tile-surface);\n  --rb-tile-bg-selected: var(--rb-brand-depth-tile-surface-selected);\n  --rb-tile-border: transparent;\n  --rb-tile-border-hover: transparent;\n  --rb-tile-border-selected: transparent;\n  --rb-tile-border-width: 0;\n  --rb-event-tile-radius: var(--rb-block-radius);\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-tiles-grid {\n    grid-template-columns: repeat(var(--rb-tiles-grid-cols-md, var(--rb-tiles-grid-cols-sm, 2)), minmax(0, 1fr));\n  }\n}\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card) {\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.25);\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):hover:not(:disabled) {\n  border-color: var(--rb-tile-border-hover, var(--rb-event-tile-border-hover, rgba(var(--tb-primary), 0.5)));\n  opacity: var(--rb-tile-hover-opacity, var(--rb-event-tile-hover-opacity, var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1))));\n}\n\n:where(.theme-scope) :where(.rb-tile--selected, .er-event-card--selected) {\n  border-color: var(--rb-tile-border-selected, var(--rb-event-tile-border-selected, rgb(var(--tb-primary))));\n  background: var(--rb-tile-bg-selected, var(--rb-event-tile-bg-selected, rgba(var(--tb-primary), 0.1)));\n}\n\n:where(.theme-scope) :where(.rb-tile--disabled, .er-event-card--disabled) {\n  border-style: dashed;\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/*\n * A cancelled session stays on the run's schedule rather than disappearing from\n * it, so a visitor can see the week is accounted for. It reads as retired: a\n * dashed edge, quietened like supporting text, and the date itself struck\n * through. The \"Cancelled\" caption beside it keeps its own weight, which is why\n * only the date carries the line.\n */\n:where(.theme-scope) .rb-tile--cancelled {\n  border-style: dashed;\n  opacity: var(--rb-tile-cancelled-opacity, 0.65);\n}\n\n:where(.theme-scope) .rb-tile--cancelled :where(strong) {\n  text-decoration: line-through;\n}\n\n/* =============================================================================\n * Block: Newsletter Signup\n * =============================================================================\n */\n\n/* Newsletter copy styling */\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-subtitle {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  opacity: 0.85;\n}\n\n/* Newsletter form container */\n:where(.theme-scope) .newsletter-form {\n  width: 100%;\n  max-width: 32rem;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Newsletter form fields container */\n:where(.theme-scope) .newsletter-form-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n/* Individual field styling */\n:where(.theme-scope) .newsletter-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Topic choices (visitor picks what to hear about). Same treatment as the\n   form block's .fb-fieldset / .fb-inline, defined here because the newsletter\n   form also renders inside contact-newsletter and the site footer. */\n:where(.theme-scope) .newsletter-topics {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-topics > legend {\n  padding: 0;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope) .newsletter-topic-choice {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Error panel and field notes. The form block scopes these to its own\n   data-block, so the newsletter form (which also renders in the footer)\n   needs its own copy of the treatment. */\n:where(.theme-scope) .newsletter-form .fb-error:not([data-field-validation-message]) {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) .newsletter-form [data-field-validation-message] {\n  font-size: 0.875rem;\n  color: var(--fb-error-text);\n}\n\n/* Required indicator */\n:where(.theme-scope) .newsletter-required {\n  color: rgb(var(--tb-primary));\n  margin-left: 0.125rem;\n}\n\n/* Submit button container */\n:where(.theme-scope) .newsletter-submit {\n  margin-top: 0.5rem;\n}\n\n/* ALTCHA widget container */\n:where(.theme-scope) .newsletter-altcha {\n  margin-top: 0.75rem;\n  display: flex;\n  justify-content: center;\n}\n\n/* Privacy note */\n:where(.theme-scope) .newsletter-privacy-note {\n  margin-top: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.6;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  text-align: center;\n}\n\n/* =============================================================================\n * Inline Variant - Horizontal layout\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-inline .newsletter-form-fields {\n  flex-direction: row;\n  align-items: flex-end;\n  flex-wrap: wrap;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n:where(.theme-scope) .newsletter-inline .newsletter-field {\n  flex: 1 1 auto;\n  min-width: 10rem;\n}\n\n:where(.theme-scope) .newsletter-inline .newsletter-submit {\n  margin-top: 0;\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) .newsletter-inline .newsletter-topics {\n  flex-basis: 100%;\n}\n\n/* Mobile fallback for inline variant */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .newsletter-inline .newsletter-form-fields {\n    flex-direction: column;\n  }\n\n  :where(.theme-scope) .newsletter-inline .newsletter-field {\n    min-width: 100%;\n  }\n}\n}\n\n/* =============================================================================\n * Editorial Split Variant\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-editorial-split {\n  display: grid;\n  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);\n  gap: clamp(2.5rem, 7vw, 7rem);\n  align-items: center;\n  text-align: left;\n}\n\n:where(.theme-scope) .newsletter-editorial-split-copy {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n:where(.theme-scope) .newsletter-editorial-split-form {\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-form {\n  max-width: none;\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-copy-title {\n  font-size: clamp(2rem, 4vw, 3.5rem);\n  font-weight: 500;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-privacy-note {\n  text-align: left;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .newsletter-editorial-split {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 2rem;\n  }\n}\n}\n\n/* =============================================================================\n * Success State\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-success {\n  text-align: center;\n}\n\n:where(.theme-scope) .newsletter-success .fb-success {\n  padding: 1rem 1.5rem;\n  background-color: rgba(var(--tb-success, 34 197 94), 0.1);\n  border-radius: var(--radius-md, 0.5rem);\n  color: rgb(var(--tb-text));\n}\n\n/* =============================================================================\n * Block: Contact + Newsletter\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));\n  gap: clamp(2.5rem, 6vw, 4rem);\n  align-items: start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-column {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-copy {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-title,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-title {\n  margin: 0 0 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-intro,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-subtitle {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-form {\n  max-width: none;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-privacy-note {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-inline {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block: Team Members\n * =============================================================================\n *\n * Site/theme authors sometimes need different thumbnail shapes/sizes without\n * changing global fragment defaults. We expose these controls on the block and\n * style them via data attributes on the `.rb-team-members` wrapper.\n */\n\n/* Scope all block-static CSS to ThemeScope to avoid leaking into host apps/dashboard. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) :where(.rb-team-member) {\n  align-items: flex-start;\n  text-align: left;\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-width=\"lg-3-4-left\"]) {\n    width: 75%;\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-role {\n  font-weight: 600;\n}\n\n/* Thumbnail sizing: map `data-image-col-size` to a sensible max thumbnail width. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px default */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/4\"]) {\n  --rb-team-thumb-max: 8.75rem; /* ~140px */\n  --rb-team-image-basis: 25%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/3\"]) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/5\"]) {\n  --rb-team-thumb-max: 13.75rem; /* ~220px */\n  --rb-team-image-basis: 40%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/2\"]) {\n  --rb-team-thumb-max: 17.5rem; /* ~280px */\n  --rb-team-image-basis: 50%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/3\"]) {\n  --rb-team-thumb-max: 22.5rem; /* ~360px */\n  --rb-team-image-basis: 66.667%;\n}\n\n/* The wrap is the shape/padding boundary; ensure it expands within the grid cell. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo-wrap {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* In grid mode, cap thumbnail width so headshots don't dominate the card. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-member-photo-wrap) {\n  max-width: var(--rb-team-thumb-max);\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-members[data-layout-align=\"center\"]) :where(.rb-team-member-photo-wrap) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Stack variant: always left-aligned, regardless of the block alignment field. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member) {\n  text-align: left;\n  align-items: flex-start;\n}\n\n/* Stack items: add comfortable per-item vertical padding so entries breathe. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n  padding-block: 1.25rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n/* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member-photo-col) {\n    flex: 0 0 var(--rb-team-image-basis);\n  }\n\n  /* Stack variant: increase media/text gap on desktop. */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n    gap: 1.5rem;\n  }\n\n  /* Stack variant: optional vertical centering of text against thumbnail. */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-content-align=\"center\"]) :where(.rb-team-member--stack) {\n    align-items: center;\n  }\n\n  /* Stack variant: image position control */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"right\"]) :where(.rb-team-member--stack) {\n    flex-direction: row-reverse;\n  }\n\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"alternate\"]) :where(.rb-team-member--stack:nth-child(even)) {\n    flex-direction: row-reverse;\n  }\n}\n}\n\n/* Thumbnail padding (space around image inside the item) */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"sm\"] .rb-team-member-photo-wrap {\n  padding: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"md\"] .rb-team-member-photo-wrap {\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"lg\"] .rb-team-member-photo-wrap {\n  padding: 1.5rem;\n}\n\n/* Thumbnail shape */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo-wrap {\n  border-radius: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo-wrap {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo-wrap {\n  border-radius: 9999px;\n}\n\n:where(.theme-scope) .feedback-callout {\n  background: rgba(var(--tb-surface, 248 250 252), 0.92);\n  border-color: rgba(var(--tb-border, 226 232 240), 0.72);\n  --rb-feedback-callout-bg-opacity: 0.1;\n  --rb-feedback-callout-border-opacity: 0.24;\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"info\"] {\n  --rb-feedback-callout-bg-opacity: 0.08;\n  background: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"success\"] {\n  background: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"warning\"] {\n  --rb-feedback-callout-bg-opacity: 0.12;\n  --rb-feedback-callout-border-opacity: 0.28;\n  background: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"error\"] {\n  --rb-feedback-callout-border-opacity: 0.26;\n  background: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout__title {\n  margin: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :first-child {\n  margin-top: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :last-child {\n  margin-bottom: 0;\n}\n\n/* =============================================================================\n * Block: Event Compact Row\n * Dense row layout for event-calendar compact list mode\n * ============================================================================= */\n\n:where(.theme-scope) .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 4%\n  );\n  --event-compact-secondary-text: color-mix(\n    in oklab,\n    rgb(var(--tb-text, 17 24 39)),\n    rgb(var(--tb-background, 255 255 255)) 28%\n  );\n\n  width: min(100%, 92rem);\n  margin-inline: auto;\n  overflow: hidden;\n  container: event-compact-list / inline-size;\n  border: 1px solid var(--event-compact-divider-color);\n  border-radius: 1rem;\n  background: rgb(var(--tb-surface, 255 255 255));\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-event-list-treatment-lined-panel .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 8%\n  );\n  background: rgb(var(--tb-surface, 255 255 255));\n  border-color: color-mix(\n    in oklab,\n    rgb(var(--tb-primary, 0 0 0)),\n    rgb(var(--tb-border, 229 231 235)) 72%\n  );\n}\n\n:where(.theme-scope) .event-compact-row {\n  display: grid;\n  grid-template-columns: clamp(4.5rem, 6vw, 6.25rem) minmax(0, 1fr);\n  align-items: center;\n  min-height: 6rem;\n  padding: 1rem clamp(1.25rem, 2.6vw, 2.25rem);\n  border-bottom: 1px solid var(--event-compact-divider-color);\n  transition: background-color 150ms ease;\n}\n\n:where(.theme-scope) .event-compact-row:last-child {\n  border-bottom: none;\n}\n\n:where(.theme-scope) .event-compact-row:hover {\n  background-color: rgba(var(--tb-primary, 0 0 0), 0.035);\n}\n\n:where(.theme-scope) .event-compact-row-date {\n  display: grid;\n  grid-template-rows: 1rem minmax(2.7rem, auto) 1rem;\n  place-items: center;\n  gap: 0;\n  min-width: 0;\n  padding-right: clamp(0.8rem, 1.6vw, 1.35rem);\n  text-align: center;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-compact-row-body {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-date-weekday,\n:where(.theme-scope) .event-compact-row-date-month {\n  display: grid;\n  place-items: center;\n  block-size: 1rem;\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: normal;\n  letter-spacing: 0.08em;\n}\n\n:where(.theme-scope) .event-compact-row-date-day {\n  display: grid;\n  place-items: center;\n  min-block-size: clamp(2rem, 3vw, 2.6rem);\n  color: rgb(var(--tb-text, 17 24 39));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 400;\n  line-height: 1;\n}\n\n:where(.theme-scope) .event-compact-row-content {\n  min-width: 0;\n  display: flex;\n  flex: 1 1 18rem;\n  flex-direction: column;\n  gap: 0.625rem;\n  height: 100%;\n  justify-content: center;\n  padding-inline: clamp(1rem, 2.4vw, 2.4rem);\n}\n\n:where(.theme-scope) .event-compact-row-title {\n  margin: 0;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39)))));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);\n  font-weight: 400;\n  line-height: 1.2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.9rem;\n  min-width: 0;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) .event-compact-row-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.45rem;\n  min-width: 0;\n}\n\n:where(.theme-scope) .event-compact-row-venue svg {\n  width: 1.05em;\n  height: 1.05em;\n}\n\n:where(.theme-scope) .event-compact-row-teacher,\n:where(.theme-scope) .event-compact-row-price {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.9rem;\n}\n\n:where(.theme-scope) .event-compact-row-teacher::before,\n:where(.theme-scope) .event-compact-row-price::before {\n  content: \"\";\n  width: 0.18rem;\n  height: 0.18rem;\n  border-radius: 9999px;\n  background: currentColor;\n}\n\n:where(.theme-scope) .event-compact-row-price {\n  color: inherit;\n  font-weight: inherit;\n}\n\n:where(.theme-scope) .event-compact-row-action {\n  display: grid;\n  flex: 0 1 clamp(14rem, 22vw, 19rem);\n  align-content: center;\n  gap: 0.75rem;\n  height: 100%;\n  padding-left: clamp(1.1rem, 2.4vw, 2.4rem);\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-datetime {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.65rem;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.3;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-datetime svg {\n  width: 1.1em;\n  height: 1.1em;\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) .event-compact-row-action-price {\n  display: none;\n}\n\n:where(.theme-scope) .event-compact-row-status {\n  color: rgb(var(--tb-muted, var(--tb-text, 17 24 39)));\n  font-weight: 500;\n}\n\n:where(.theme-scope) .event-compact-row-cta {\n  width: min(100%, 15rem);\n  min-height: 2.7rem;\n  justify-content: space-between;\n  gap: 1rem;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-cta svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  flex-shrink: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .event-listing-compact-container {\n    border-radius: 0.875rem;\n  }\n\n  :where(.theme-scope) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-teacher::before,\n  :where(.theme-scope) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n}\n\n@container event-compact-list (max-width: 48rem) {\n  :where(.theme-scope) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-teacher::before,\n  :where(.theme-scope) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n\n:where(.theme-scope) .section-state__callout {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__body {\n  margin-inline: auto;\n  max-width: 40rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__actions {\n  justify-content: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-rb-background-video=\"true\"]) {\n    display: none !important;\n  }\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback {\n  border: 1px solid rgb(var(--tb-text, 17 24 39) / 0.12);\n  border-radius: 1rem;\n  padding: 0.875rem 1rem;\n  background: rgb(var(--tb-surface, 255 255 255) / 0.92);\n  color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"success\"] {\n  border-color: rgba(var(--tb-success, 34 197 94), 0.3);\n  background: rgba(var(--tb-success, 34 197 94), 0.1);\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"warning\"] {\n  border-color: rgba(var(--tb-warning, 245 158 11), 0.35);\n  background: rgba(var(--tb-warning, 245 158 11), 0.12);\n  color: rgb(var(--tb-warning, 245 158 11));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"error\"] {\n  border-color: rgba(var(--tb-destructive, 239 68 68), 0.3);\n  background: rgba(var(--tb-destructive, 239 68 68), 0.1);\n  color: rgb(var(--tb-destructive, 239 68 68));\n}\n\n/* =============================================================================\n * Shared: Heading Decorations\n * =============================================================================\n */\n\n/*\n * The mark sits inside a full-width block row so it inherits the heading group's\n * `text-align`: a centred heading centres the mark, a left-aligned heading keeps\n * it at the start. The heading stacks are flexbox, where `text-align` positions\n * inline content but not flex items \u2014 so the row (a stretched block flex item)\n * is what carries the alignment, and the inline-block mark follows it. Alignment\n * is never configured directly; it follows the heading.\n */\n:where(.theme-scope) .rb-heading-decoration-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) .rb-heading-decoration-row {\n  display: block;\n  width: 100%;\n  margin-top: 0.35rem;\n  line-height: 0;\n  pointer-events: none;\n}\n\n:where(.theme-scope) .rb-heading-decoration {\n  display: inline-block;\n  vertical-align: top;\n}\n\n:where(.theme-scope) .rb-heading-decoration-organic-squiggle {\n  width: clamp(5.5rem, 15vw, 9rem);\n  height: 1.1rem;\n  background-color: currentColor;\n  opacity: 0.9;\n  -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;\n  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;\n}\n\n:where(.theme-scope) .rb-heading-decoration-short-center-rule {\n  width: 4.5rem;\n  height: 0.125rem;\n  border-radius: 999px;\n  background-color: currentColor;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-text {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-primary {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-secondary {\n  color: rgb(var(--tb-secondary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-border {\n  color: rgb(var(--tb-border));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-muted {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: Feature Card Icons\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-feature-card-icon-zone {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  margin-bottom: 0.125rem;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--empty {\n  visibility: hidden;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge,\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge {\n  background-color: rgb(var(--tb-primary) / 10%);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  background-color: rgb(var(--tb-surface));\n  border: 1px solid rgb(var(--tb-border));\n  box-shadow: 0 1px 2px rgba(var(--tb-shadow), 0.08);\n}\n\n:where(.theme-scope) .rb-feature-card-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon--generated {\n  object-fit: contain;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated {\n  align-self: center;\n  inline-size: min(var(--rb-feature-card-generated-icon-size, 75px), 100%);\n  max-inline-size: 100%;\n  block-size: auto;\n  aspect-ratio: 1;\n  margin-inline: auto;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain .rb-feature-card-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated .rb-feature-card-icon--generated {\n  inline-size: 100%;\n  max-inline-size: 100%;\n  block-size: 100%;\n}\n\n/* --- Card marker mode (icons / numbers / none) -----------------------------\n *\n * The icon zone and the number zone both sit in the DOM; the grid's\n * `data-card-marker` attribute decides which shows. The default (legacy\n * content with no attribute) shows icons and hides the number zone.\n */\n:where(.theme-scope) .rb-feature-card-number-zone {\n  display: none; /* shown only in numbers mode */\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 2.5rem;\n  height: 2.5rem;\n  margin-bottom: 0.125rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background-color: rgb(var(--tb-primary) / 10%);\n  color: rgb(var(--tb-primary));\n  counter-increment: rb-feature-card-number;\n}\n:where(.theme-scope) .rb-feature-card-number-zone::before {\n  content: counter(rb-feature-card-number, decimal-leading-zero);\n  font-weight: 700;\n  font-size: 0.95rem;\n  line-height: 1;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid {\n  counter-reset: rb-feature-card-number;\n}\n\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-number-zone {\n  display: inline-flex;\n}\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-icon-zone {\n  display: none;\n}\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-icon-zone,\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-number-zone {\n  display: none;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media-wrap {\n  max-width: min(100%, 24rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media {\n  aspect-ratio: 1 / 1 !important;\n  border-radius: 9999px;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: 1 / -1;\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: auto;\n  }\n}\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-title {\n  font-size: clamp(2rem, 1.56rem + 1.4vw, 3rem);\n  line-height: 1.14;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy {\n  gap: var(--rb-space-5, 1.25rem);\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy .rb-prose {\n  font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.375rem);\n  line-height: 1.65;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-section {\n  width: min(100%, 66rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading {\n  max-width: 44rem;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n  display: flex;\n  gap: 2rem;\n  align-items: end;\n  justify-content: space-between;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading-title {\n  margin: 0;\n  font-size: clamp(2rem, 4.6vw, 3.3rem);\n  line-height: 1.08;\n}\n\n:where(.theme-scope) .recurring-schedule {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .recurring-schedule-row {\n  display: grid;\n  grid-template-columns: minmax(9rem, 0.82fr) minmax(16rem, 1.5fr) auto;\n  grid-template-rows: auto auto;\n  column-gap: clamp(1.5rem, 4vw, 2.75rem);\n  row-gap: 0.15rem;\n  align-items: center;\n  padding: 1.4rem 0.75rem;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  color: inherit;\n}\n\n:where(.theme-scope) .recurring-schedule-day,\n:where(.theme-scope) .recurring-schedule-time,\n:where(.theme-scope) .recurring-schedule-title,\n:where(.theme-scope) .recurring-schedule-venue {\n  margin: 0;\n}\n\n:where(.theme-scope) .recurring-schedule-day {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: clamp(1.25rem, 2vw, 1.5rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) .recurring-schedule-time {\n  grid-column: 1;\n  grid-row: 2;\n  display: flex;\n  gap: 0.35rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n  font-variant-numeric: tabular-nums;\n}\n\n:where(.theme-scope) .recurring-schedule-details {\n  grid-column: 2;\n  grid-row: 1 / span 2;\n  align-self: center;\n}\n\n:where(.theme-scope) .recurring-schedule-title {\n  font-size: 1.06rem;\n  font-weight: 500;\n}\n\n:where(.theme-scope) .recurring-schedule-venue {\n  margin-top: 0.2rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.92rem;\n}\n\n:where(.theme-scope) .recurring-schedule-action {\n  grid-column: 3;\n  grid-row: 1 / span 2;\n  min-width: 4.5rem;\n  text-align: right;\n}\n\n:where(.theme-scope) .recurring-schedule-see-all {\n  width: fit-content;\n  color: inherit;\n  text-underline-offset: 0.3em;\n}\n\n:where(.theme-scope) .recurring-schedule-empty {\n  margin: 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n    align-items: start;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  :where(.theme-scope) .recurring-schedule-row {\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto auto;\n    gap: 0.5rem 1rem;\n    align-items: start;\n  }\n\n  :where(.theme-scope) .recurring-schedule-day {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope) .recurring-schedule-time {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope) .recurring-schedule-details {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    margin-top: 0.35rem;\n  }\n\n  :where(.theme-scope) .recurring-schedule-action {\n    grid-column: 2;\n    grid-row: 1 / span 2;\n  }\n}\n}\n\n/* =============================================================================\n * Event list treatments: registers and dense indexes\n *\n * These treatments retain the event list's content and structural layout.\n * Their contrast relationships come exclusively from the active semantic\n * section surface and named palette tokens.\n * ============================================================================= */\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card {\n  position: relative;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  color: inherit;\n}\n\n/* Register treatments intentionally prioritise schedule data over imagery. */\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-media {\n  display: none;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-content {\n  min-width: 0;\n  padding: 1.5rem 0.625rem;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-title {\n  min-width: 0;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-footer {\n  min-width: 8rem;\n  padding-top: 0;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-cta {\n  width: 100%;\n}\n\n/* Ruled register: open rows with quiet rules on the current section surface. */\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n/* Editorial register: generous rows, an accent marker and display-led titles. */\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card::before {\n  content: \"\";\n  position: absolute;\n  inset-block: 1.75rem;\n  inset-inline-start: 0;\n  width: 0.25rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.875rem;\n  padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-title {\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);\n  font-weight: 500;\n  line-height: 1.15;\n}\n\n/* Dense index: stronger outside rule and reduced row rhythm, without opting\n * the block into its structurally different compact-list facet. */\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 62%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card:first-child {\n  border-top: 2px solid currentColor;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.125rem;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-title {\n  font-size: 1rem;\n  line-height: 1.35;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal {\n    display: block;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content {\n    display: grid;\n    grid-template-columns: minmax(8.5rem, 0.7fr) minmax(15rem, 1.55fr) auto;\n    grid-template-rows: auto auto auto;\n    align-items: center;\n    column-gap: clamp(1.25rem, 3vw, 2.625rem);\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-title {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-caption {\n    grid-column: 1;\n    grid-row: 1 / span 6;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-mb-3 {\n    grid-column: 2;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .event-category-badge {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .card-body,\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .status-muted:not(.event-card-capacity) {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .event-card-footer {\n    grid-column: 3;\n    grid-row: 1 / span 6;\n    flex-direction: column;\n    justify-content: center;\n    align-items: stretch;\n  }\n}\n}\n\n/* =============================================================================\n * Feature-card composition Looks promoted from block-treatment studies.\n * Palette relationships use named semantic tokens; copy and media stay in the\n * existing feature-card content contract.\n * ============================================================================= */\n\n/* Asymmetric emphasis: repeat a 5/7 pair rhythm and give each even card a\n * semantic secondary surface. This remains useful with more than two cards. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-cards-grid {\n  align-items: start;\n}\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card {\n  height: auto;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) {\n  padding: clamp(1.125rem, 2.5vw, 1.875rem);\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.5);\n  background: rgb(var(--tb-secondary));\n  color: rgb(var(--tb-onSecondary));\n  --rb-surface-text-color: rgb(var(--tb-onSecondary));\n  --rb-surface-heading-color: rgb(var(--tb-onSecondary));\n  --rb-surface-link-color: rgb(var(--tb-onSecondary));\n  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) > .rb-feature-card-media {\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n/* Framed programme: a close-set family of cards on a semantic depth section.\n * The Look asks for the `alternative` card role; the site style's card system\n * supplies the surface. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-cards-grid {\n  gap: clamp(1rem, 2vw, 1.5rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-media {\n  width: 100%;\n  max-width: 100%;\n  margin: 0;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n  padding-bottom: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n    .rb-feature-cards-grid.rb-grid-cols-2 {\n    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  }\n}\n}\n\n/* --- Feature card media + padding behaviour (all looks) -------------------- */\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {\n  width: calc(100% + 2 * var(--rb-card-pad, 0rem));\n  max-width: none;\n  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {\n  margin-top: 1.4rem;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-content {\n  padding: 0;\n}\n\n:where(.theme-scope) .rb-feature-card > .rb-bg-surface,\n:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {\n  border-start-start-radius: inherit;\n  border-start-end-radius: inherit;\n}\n\n/* --- Editorial diptych + pathways ----------------------------------------- */\n\n:where(.theme-scope) .rb-feature-cards-heading--editorial {\n  margin-inline: 0;\n  text-align: left;\n}\n\n:where(.theme-scope) .rb-feature-cards-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {\n  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);\n  align-items: stretch;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  align-items: start;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card {\n  border: 0;\n  box-shadow: none;\n  height: auto;\n  min-width: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n/* Diptych filled panel: a composition over the `alternative` role's surface.\n   The 18% supporting alpha is accepted CSS-side \u2014 see issue 1297 mapping-table. */\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] {\n  color: rgb(var(--tb-onPrimary));\n  --rb-surface-text-color: rgb(var(--tb-onPrimary));\n  --rb-surface-heading-color: rgb(var(--tb-onPrimary));\n  --rb-surface-link-color: rgb(var(--tb-onPrimary));\n  --rb-surface-supporting-color: color-mix(in oklab, rgb(var(--tb-onPrimary)), transparent 18%);\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-bg-surface {\n  background: rgb(var(--tb-primary));\n  border-radius: inherit;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-feature-card-media-frame {\n  width: calc(100% - 2.5rem);\n  margin: 1.25rem 1.25rem 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {\n  padding-top: 1.35rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] {\n    margin-top: clamp(2rem, 5vw, 4.5rem);\n  }\n\n  :where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {\n    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);\n    padding-left: clamp(1.5rem, 4vw, 4rem);\n  }\n}\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-feature-cards-grid:is(\n    .rb-feature-cards-grid--editorial-diptych,\n    .rb-feature-cards-grid--editorial-pathways\n  ) {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n}\n\n/* =============================================================================\n * Offerings Preview composition Looks promoted from the Fran Andr\u00E9 treatment\n * study. The outer section surface remains independently configurable. These\n * rules use expanded semantic palette tokens only.\n * ============================================================================= */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  [data-offering-presentation=\"featured-summary\"]\n  .offerings-preview-card-header {\n  text-align: left;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date {\n  margin: 0;\n  font-family: var(--font-heading, inherit);\n  font-size: clamp(1.125rem, 2.2vw, 1.5rem);\n  font-weight: 650;\n  line-height: 1.22;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date time {\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts {\n  display: grid;\n  gap: 0;\n  margin: clamp(1.25rem, 3vw, 2rem) 0 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts > div {\n  display: grid;\n  grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1.35fr);\n  gap: 1rem;\n  padding-block: 0.6rem;\n  border-top: 1px solid rgba(var(--tb-border), 0.72);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dt {\n  font-size: 0.72rem;\n  font-weight: 750;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dd {\n  min-width: 0;\n  margin: 0;\n  font-weight: 600;\n}\n\n/* --- Composition Looks ----------------------------------------------------\n * Each of these compositions is paired with a card role on the Look\n * (`alternative`, `open`, `default`), so the group card's fill, elevation and\n * padding come from the site style's card system, and nothing below names a\n * colour.\n *\n * Geometry is a different question from colour. A composition that says the\n * rows are *joined* is making a structural statement, and it can only be true\n * if the rows stop drawing their own corners and edges \u2014 so flattening\n * geometry (radius, border width) on inner items is allowed where the\n * composition's meaning depends on it. Choosing what colour those edges would\n * have been is not.\n * ------------------------------------------------------------------------- */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview {\n  container: rb-offerings-preview / inline-size;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card {\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card-footer {\n  margin-top: auto;\n  padding-top: clamp(1.25rem, 3vw, 2rem);\n}\n\n/* Paired feature cards: one editorial lead and one supporting route. With a\n * third group the grid returns to equal columns rather than implying a new\n * source hierarchy. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;\n  gap: clamp(1rem, 2.5vw, 1.5rem);\n}\n\n@container rb-offerings-preview (min-width: 52rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n    .offerings-preview-grid:has(> .offerings-preview-card:nth-child(2):last-child) {\n    grid-template-columns: minmax(0, 1.22fr) minmax(18rem, 0.78fr) !important;\n  }\n}\n\n/* Open editorial columns: hierarchy without an item fill. The `open` card role\n * supplies whatever marking the site style gives a boxless card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"open-editorial-columns\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)) !important;\n  gap: clamp(1.5rem, 4vw, 3rem);\n}\n\n/* Joined programme panel: every group remains independently editable, but the\n * rows are clipped into one column so they read as a single programme. Each\n * row's surface is its own `default` card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview {\n  overflow: hidden;\n  gap: 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.75);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-grid {\n  grid-template-columns: minmax(0, 1fr) !important;\n  gap: 0;\n}\n\n/* Geometry, not colour: a joined panel is only joined if its rows stop drawing\n * their own corners and outlines. The card role still owns every fill, and the\n * panel's own corners are clipped by the wrapper above. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card {\n  border-radius: 0;\n  border-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card + .offerings-preview-card {\n  border-top-width: 1px;\n}\n\n@container rb-offerings-preview (min-width: 58rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-content {\n    display: grid;\n    grid-template-columns: minmax(15rem, 1.1fr) minmax(19rem, 1.4fr) minmax(10rem, auto);\n    align-items: center;\n    gap: clamp(1.5rem, 4vw, 4rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-footer {\n    margin-top: 0;\n    padding-top: 0;\n    justify-content: flex-end;\n  }\n}\n\n/* =============================================================================\n * Featured-editorial testimonial compositions, promoted from the Fran Andr\u00E9\n * treatment study and keyed on the Look's composition intent.\n *\n * Structure only. Which card each slot renders is the block's own lead /\n * support structure (`.card-role-alternative` on the lead, `.card-role-default`\n * on each supporting voice) and what those cards look like belongs to the site\n * style's card system \u2014 so nothing here sets a fill, a border or a corner.\n * ============================================================================= */\n\n/* Evergreen lead: the lead voice remains dominant while the supporting column\n * opens into two equal compact voices at wider widths. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Room and response: a tall lead voice with its responses stacked beside it in\n * the existing support column. */\n:where(.theme-scope)\n  [data-block=\"testimonials\"][data-block-composition=\"room-and-response\"]\n  .rb-testimonials-fe-card--feature {\n  min-height: 27rem;\n}\n\n/* Open floor: the section head becomes an editorial rail while proof occupies\n * a lead-over-supporting field. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe {\n    display: grid;\n    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.6fr);\n    align-items: start;\n    gap: clamp(2rem, 5vw, 5rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-head {\n    display: block;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-leadin {\n    margin-top: 1.5rem;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Open-editorial testimonials composition, selected by a Look\n * (`composition: { kind: 'testimonials', treatment: 'open-editorial' }`).\n *\n * Two jobs. First, *boxless*: `styledCard` always renders an opaque\n * `.rb-bg-surface` fill layer, so a testimonial with no card role has to clear\n * it or it paints a white box on the section band (the same shape\n * feature-card-compositions.css uses for `[data-surface-role=\"open\"]`).\n * Second, the composition proper: a hairline before the attribution, an accent\n * ring on the avatar, comfortable prose.\n *\n * What is *not* here: whether the testimonial sits in a card (the Look's\n * `cardRole`), how that card looks (the site style's card system), or the quote\n * mark (the site style's quote treatment, via the --rb-testimonial-quote-* vars\n * in testimonials.css).\n *\n * The block attribute is deliberately outside `:where()` so these rules outrank\n * the card's own utility classes, matching the compositions above. */\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-prose {\n  font-size: 1.0625rem;\n  line-height: 1.7;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-attribution {\n  margin-top: 1.25rem;\n  padding-top: 1.25rem;\n  border-top: 1px solid rgba(var(--tb-border), 0.75);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-avatar {\n  box-shadow:\n    0 0 0 2px rgb(var(--tb-surface)),\n    0 0 0 4px rgba(var(--tb-primary), 0.3);\n}\n\n/* =============================================================================\n * Block: Appointment Services\n * ============================================================================= */\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 1rem;\n  row-gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-main {\n  flex: 1 1 16rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-price {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n  flex: 1 0 100%;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n    flex: 0 0 auto;\n  }\n}\n}";
+export declare const containerResponsiveThemeCss = "/*\n * Blocks Theme CSS\n *\n * Import order matters for CSS cascade.\n * SDK bundler (packages/sdk/tsup.config.ts) parses this file to determine bundle order.\n *\n * Layer order: rb-theme (lowest priority) < rb-utilities (highest priority)\n * This allows utility classes like .rb-text-sm to override theme defaults.\n *\n * 1. Layer order declaration\n * 2. RB utilities (@layer rb-utilities) - highest priority, overrides theme\n * 3. Core theme styles (@layer rb-theme) - typography, prose, gradients\n * 4. Accordion animations - keyframes and animation rules\n * 5. Block-specific static CSS - all block styling\n */\n@layer rb-theme, rb-utilities;\n\n/*\n * RB Utilities (CSS-only)\n *\n * Lightweight, hand-maintained utility classes used by block runtime markup.\n * These replace Tailwind utility usage without requiring Tailwind CLI/runtime.\n */\n\n@layer rb-utilities {\n  /* Screen-reader only */\n  .rb-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* Labels */\n  .rb-label {\n    font-size: 0.75rem;\n    line-height: 1rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  /* Eyebrow text - small uppercase labels for section introductions.\n     Each property resolves from the optional eyebrow typographic role\n     (--fs/--fw/--ls/--tt-eyebrow, emitted only when the theme sets them),\n     with the historical hardcoded values as fallbacks so existing themes\n     are unchanged. font-family falls back to the body font likewise. */\n  .rb-eyebrow {\n    font-family: var(--font-eyebrow, var(--font-body));\n    font-size: var(--fs-eyebrow, 0.875rem);\n    font-weight: var(--fw-eyebrow, 600);\n    letter-spacing: var(--ls-eyebrow, 0.025em);\n    text-transform: var(--tt-eyebrow, uppercase);\n  }\n  .rb-eyebrow-treatment-accent {\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill {\n    align-self: center;\n    display: inline-flex;\n    width: fit-content;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 46%, transparent);\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n    padding: 0.5rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    line-height: 1;\n  }\n  .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {\n    border-color: rgb(var(--tb-accent));\n    border-width: 2px;\n    background: rgb(var(--tb-onAccent, 255 255 255) / 0.7);\n    padding: 0.85rem 1.25rem;\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill-bounce {\n    animation: rb-eyebrow-pill-bounce 2s ease-in-out infinite;\n    margin: 0 auto 1.5rem;\n    transform-origin: center;\n    will-change: transform;\n  }\n  @keyframes rb-eyebrow-pill-bounce {\n    0% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n    50% {\n      transform: none;\n      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    }\n    100% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .rb-eyebrow-treatment-pill-bounce {\n      animation: none;\n      will-change: auto;\n    }\n  }\n\n  /* Caption text - small secondary text for captions and metadata (non-uppercase) */\n  .rb-caption {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    font-weight: 400;\n  }\n\n  /* Media shape treatments */\n  .rb-media-shape-square,\n  .rb-media-shape-rounded,\n  .rb-media-shape-circle,\n  .rb-media-shape-arch {\n    overflow: hidden;\n  }\n  .rb-media-shape-square {\n    border-radius: 0;\n  }\n  .rb-media-shape-rounded {\n    border-radius: var(--rb-media-shape-radius, 1rem);\n  }\n  .rb-media-shape-circle {\n    border-radius: 9999px;\n  }\n  .rb-media-shape-arch {\n    border-radius: 9999px 9999px var(--rb-media-shape-arch-base-radius, 0.125rem)\n      var(--rb-media-shape-arch-base-radius, 0.125rem);\n  }\n\n  /* Navigation typography */\n  .rb-nav-text {\n    font-size: 0.875rem;\n    font-weight: 500;\n  }\n  .rb-nav-text-mobile {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  /* Display */\n  .rb-min-h-screen {\n    min-height: 100vh;\n  }\n  .rb-min-h-full {\n    min-height: 100%;\n  }\n  .rb-block {\n    display: block;\n  }\n  .rb-inline-block {\n    display: inline-block;\n  }\n  .rb-flex {\n    display: flex;\n  }\n  .rb-inline-flex {\n    display: inline-flex;\n  }\n  .rb-grid {\n    display: grid;\n  }\n  .rb-hidden {\n    display: none;\n  }\n  .rb-isolate {\n    isolation: isolate;\n  }\n\n  /* Position */\n  .rb-relative {\n    position: relative;\n  }\n  .rb-absolute {\n    position: absolute;\n  }\n  .rb-fixed {\n    position: fixed;\n  }\n  .rb-sticky {\n    position: sticky;\n  }\n  .rb-inset-0 {\n    inset: 0;\n  }\n  .rb-top-0 {\n    top: 0;\n  }\n  .rb-top-4 {\n    top: 1rem;\n  }\n  .rb-top-full {\n    top: 100%;\n  }\n  .rb-top-1\\/2 {\n    top: 50%;\n  }\n  .rb-bottom-0 {\n    bottom: 0;\n  }\n  .rb-left-0 {\n    left: 0;\n  }\n  .rb-left-1\\/2 {\n    left: 50%;\n  }\n  .rb-right-0 {\n    right: 0;\n  }\n\n  /* Anchors (background positioning helpers) */\n  .rb-anchor-center {\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n  .rb-anchor-top {\n    left: 50%;\n    top: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-bottom {\n    left: 50%;\n    bottom: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-left {\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-right {\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-top-left {\n    left: 0;\n    top: 0;\n  }\n  .rb-anchor-top-right {\n    right: 0;\n    top: 0;\n  }\n  .rb-anchor-bottom-left {\n    left: 0;\n    bottom: 0;\n  }\n  .rb-anchor-bottom-right {\n    right: 0;\n    bottom: 0;\n  }\n\n  /* Z-index */\n  .rb-z-neg-10 {\n    z-index: -10;\n  }\n  .rb-z-0 {\n    z-index: 0;\n  }\n  .rb-z-10 {\n    z-index: 10;\n  }\n  .rb-z-40 {\n    z-index: 40;\n  }\n  .rb-z-50 {\n    z-index: 50;\n  }\n\n  /* Sizing */\n  .rb-w-auto {\n    width: auto;\n  }\n  .rb-w-full {\n    width: 100%;\n  }\n  .rb-w-calc-100-minus-2rem {\n    width: calc(100% - 2rem);\n  }\n  .rb-w-4 {\n    width: 1rem;\n  }\n  .rb-w-5 {\n    width: 1.25rem;\n  }\n  .rb-w-10 {\n    width: 2.5rem;\n  }\n  .rb-w-12 {\n    width: 3rem;\n  }\n  .rb-w-24 {\n    width: 6rem;\n  }\n  .rb-h-0\\.5 {\n    height: 0.125rem;\n  }\n  .rb-h-4 {\n    height: 1rem;\n  }\n  .rb-h-5 {\n    height: 1.25rem;\n  }\n  .rb-h-8 {\n    height: 2rem;\n  }\n  .rb-h-10 {\n    height: 2.5rem;\n  }\n  .rb-h-12 {\n    height: 3rem;\n  }\n  .rb-h-16 {\n    height: 4rem;\n  }\n  .rb-h-24 {\n    height: 6rem;\n  }\n  .rb-h-32 {\n    height: 8rem;\n  }\n  .rb-h-48 {\n    height: 12rem;\n  }\n  .rb-h-56 {\n    height: 14rem;\n  }\n  .rb-h-auto {\n    height: auto;\n  }\n  .rb-h-full {\n    height: 100%;\n  }\n  .rb-section-min-h-banner {\n    min-height: clamp(16rem, 34svh, 24rem);\n  }\n  .rb-section-min-h-hero {\n    min-height: clamp(32rem, 62svh, 44rem);\n  }\n  .rb-section-min-h-immersive {\n    min-height: clamp(38rem, 78svh, 54rem);\n  }\n  .rb-section-min-h-banner > .rb-container,\n  .rb-section-min-h-hero > .rb-container,\n  .rb-section-min-h-immersive > .rb-container {\n    min-height: inherit;\n  }\n  .rb-min-w-0 {\n    min-width: 0;\n  }\n  .rb-min-w-12rem {\n    min-width: 12rem;\n  }\n  .rb-max-w-none {\n    max-width: none;\n  }\n  .rb-max-w-xl {\n    max-width: 36rem;\n  }\n  .rb-max-w-2xl {\n    max-width: 42rem;\n  }\n  .rb-max-w-3xl {\n    max-width: 48rem;\n  }\n  .rb-max-w-4xl {\n    max-width: 56rem;\n  }\n  .rb-max-w-5xl {\n    max-width: 64rem;\n  }\n  .rb-max-w-6xl {\n    max-width: 72rem;\n  }\n  .rb-max-w-7xl {\n    max-width: 80rem;\n  }\n  .rb-max-w-prose {\n    max-width: 65ch;\n  }\n  .rb-aspect-video {\n    aspect-ratio: 16 / 9;\n  }\n\n  /* Flex */\n  .rb-flex-1 {\n    flex: 1 1 0%;\n  }\n  .rb-flex-col {\n    flex-direction: column;\n  }\n  .rb-flex-row {\n    flex-direction: row;\n  }\n  .rb-flex-wrap {\n    flex-wrap: wrap;\n  }\n  .rb-basis-full {\n    flex-basis: 100%;\n  }\n  .rb-basis-1-2 {\n    flex-basis: 50%;\n  }\n  .rb-basis-1-3 {\n    flex-basis: 33.333333%;\n  }\n  .rb-basis-1-4 {\n    flex-basis: 25%;\n  }\n  .rb-basis-1-5 {\n    flex-basis: 20%;\n  }\n  .rb-basis-1-6 {\n    flex-basis: 16.666667%;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-md-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-md-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-md-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-md-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-md-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-lg-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-lg-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-lg-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-lg-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-lg-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  .rb-shrink-0 {\n    flex-shrink: 0;\n  }\n  .rb-flex-shrink-0 {\n    flex-shrink: 0;\n  }\n\n  /* Grid */\n  .rb-grid-rows-main-footer {\n    grid-template-rows: minmax(0, 1fr) auto;\n  }\n  .rb-grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .rb-row-start-1 {\n    grid-row-start: 1;\n  }\n  .rb-row-start-2 {\n    grid-row-start: 2;\n  }\n  .rb-col-start-1 {\n    grid-column-start: 1;\n  }\n  .rb-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .rb-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .rb-grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-md-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-5 {\n        grid-template-columns: repeat(5, minmax(0, 1fr));\n      }\n      .rb-lg-w-3\\/4 {\n        width: 75%;\n      }\n      .rb-lg-col-span-1 {\n        grid-column: span 1 / span 1;\n      }\n      .rb-lg-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n      .rb-lg-col-span-3 {\n        grid-column: span 3 / span 3;\n      }\n      .rb-lg-col-span-4 {\n        grid-column: span 4 / span 4;\n      }\n      .rb-lg-col-span-5 {\n        grid-column: span 5 / span 5;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-xl-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n\n  /*\n   * Responsive fractional grid tracks (rb-grid-tracks).\n   *\n   * Asymmetric AND responsive grid-template-columns, driven by inline custom\n   * properties the Grid primitive sets per breakpoint from string track\n   * templates:\n   *   --rb-gtc-base / --rb-gtc-sm / --rb-gtc-md / --rb-gtc-lg / --rb-gtc-xl\n   * Each breakpoint falls back to the next smaller one, so only the breakpoints\n   * an author actually sets take effect (e.g. base '1fr' + lg '1fr 0.9fr'\n   * collapses to a single column below lg). Authored here (not per node) so the\n   * @media -> @container conversion (container responsive mode) applies too.\n   */\n  .rb-grid-tracks {\n    grid-template-columns: var(--rb-gtc-base, 1fr);\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-sm, var(--rb-gtc-base, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr))));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-xl, var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)))));\n      }\n    }\n\n}\n\n  /* Alignment */\n  .rb-items-start {\n    align-items: flex-start;\n  }\n  .rb-items-center {\n    align-items: center;\n  }\n  .rb-items-end {\n    align-items: flex-end;\n  }\n  .rb-items-stretch {\n    align-items: stretch;\n  }\n  .rb-items-baseline {\n    align-items: baseline;\n  }\n  .rb-justify-start {\n    justify-content: flex-start;\n  }\n  .rb-justify-center {\n    justify-content: center;\n  }\n  .rb-justify-end {\n    justify-content: flex-end;\n  }\n  .rb-justify-between {\n    justify-content: space-between;\n  }\n\n  /* Gap / spacing */\n  .rb-gap-0 {\n    gap: 0;\n  }\n  .rb-gap-1 {\n    gap: 0.25rem;\n  }\n  .rb-gap-2 {\n    gap: 0.5rem;\n  }\n  .rb-gap-3 {\n    gap: 0.75rem;\n  }\n  .rb-gap-4 {\n    gap: 1rem;\n  }\n  .rb-gap-5 {\n    gap: 1.25rem;\n  }\n  .rb-gap-6 {\n    gap: 1.5rem;\n  }\n  .rb-gap-8 {\n    gap: 2rem;\n  }\n  .rb-gap-10 {\n    gap: 2.5rem;\n  }\n  .rb-gap-x-6 {\n    column-gap: 1.5rem;\n  }\n  .rb-gap-x-8 {\n    column-gap: 2rem;\n  }\n  .rb-gap-y-3 {\n    row-gap: 0.75rem;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-gap-0 {\n        gap: 0;\n      }\n      .rb-md-gap-10 {\n        gap: 2.5rem;\n      }\n    }\n\n}\n\n  .rb-space-y-1 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.25rem;\n  }\n  .rb-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.5rem;\n  }\n  .rb-space-y-3 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.75rem;\n  }\n  .rb-space-y-6 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 1.5rem;\n  }\n\n  /* Padding */\n  .rb-p-0 {\n    padding: 0;\n  }\n  .rb-p-2 {\n    padding: 0.5rem;\n  }\n  .rb-p-3 {\n    padding: 0.75rem;\n  }\n  .rb-p-4 {\n    padding: 1rem;\n  }\n  .rb-p-5 {\n    padding: 1.25rem;\n  }\n  .rb-p-6 {\n    padding: 1.5rem;\n  }\n  .rb-p-8 {\n    padding: 2rem;\n  }\n  .rb-p-12 {\n    padding: 3rem;\n  }\n  .rb-px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n  .rb-px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .rb-pl-4 {\n    padding-left: 1rem;\n  }\n  .rb-py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .rb-py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem;\n  }\n  .rb-py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .rb-py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n  .rb-py-4 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .rb-py-6 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .rb-py-10 {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n  /* Clearance for a surface that is not an authored block page.\n     An authored page gets this through its opening block's container (see the\n     overlay-clearance rule in styles.css). A reserved surface or a system\n     destination page has no such block, so it consumes the same variable here.\n     Marked with one class rather than per-surface selectors, because the last\n     two additions to this family were both missed and shipped overlapping. */\n  :where(.theme-scope)\n    [data-site-document-layout-mode=\"header-overlay\"]\n    .rb-overlay-clearance-surface {\n    padding-top: calc(\n      var(--site-overlay-header-clearance, 5.5rem) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n  .rb-preview-editor-offset {\n    padding-bottom: calc(\n      var(--builder-editor-chrome-offset, 0px) +\n      var(--builder-preview-banner-offset, 0px)\n    );\n  }\n  .rb-py-12 {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n  .rb-py-16 {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  .rb-pb-4 {\n    padding-bottom: 1rem;\n  }\n  .rb-pb-6 {\n    padding-bottom: 1.5rem;\n  }\n  .rb-pt-4 {\n    padding-top: 1rem;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-py-16 {\n        padding-top: 4rem;\n        padding-bottom: 4rem;\n      }\n      .rb-sm-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-sm-p-6 {\n        padding: 1.5rem;\n      }\n      .rb-sm-flex {\n        display: flex;\n      }\n      .rb-sm-block {\n        display: block;\n      }\n      .rb-sm-inline {\n        display: inline;\n      }\n      .rb-sm-inline-block {\n        display: inline-block;\n      }\n      .rb-sm-inline-flex {\n        display: inline-flex;\n      }\n      .rb-sm-grid {\n        display: grid;\n      }\n      .rb-sm-hidden {\n        display: none;\n      }\n      .rb-sm-flex-row {\n        flex-direction: row;\n      }\n      .rb-sm-items-start {\n        align-items: flex-start;\n      }\n      .rb-sm-items-center {\n        align-items: center;\n      }\n      .rb-sm-justify-between {\n        justify-content: space-between;\n      }\n      .rb-sm-p-8 {\n        padding: 2rem;\n      }\n      .rb-sm-text-lg {\n        font-size: 1.125rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-xl {\n        font-size: 1.25rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-4xl {\n        font-size: 2.25rem;\n        line-height: 2.5rem;\n      }\n\n      .rb-sm-w-auto {\n        width: auto;\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-md-py-24 {\n        padding-top: 6rem;\n        padding-bottom: 6rem;\n      }\n      .rb-md-w-1\\/3 {\n        width: 33.333333%;\n      }\n\n      .rb-md-flex {\n        display: flex;\n      }\n      .rb-md-block {\n        display: block;\n      }\n      .rb-md-inline {\n        display: inline;\n      }\n      .rb-md-inline-block {\n        display: inline-block;\n      }\n      .rb-md-inline-flex {\n        display: inline-flex;\n      }\n      .rb-md-grid {\n        display: grid;\n      }\n      .rb-md-hidden {\n        display: none;\n      }\n      .rb-md-flex-row {\n        flex-direction: row;\n      }\n      .rb-md-flex-row-reverse {\n        flex-direction: row-reverse;\n      }\n      .rb-md-items-start {\n        align-items: flex-start;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-flex {\n        display: flex;\n      }\n      .rb-lg-block {\n        display: block;\n      }\n      .rb-lg-inline {\n        display: inline;\n      }\n      .rb-lg-inline-block {\n        display: inline-block;\n      }\n      .rb-lg-inline-flex {\n        display: inline-flex;\n      }\n      .rb-lg-grid {\n        display: grid;\n      }\n      .rb-lg-hidden {\n        display: none;\n      }\n      .rb-lg-flex-row {\n        flex-direction: row;\n      }\n      .rb-lg-items-center {\n        align-items: center;\n      }\n    }\n\n}\n\n  /* Margin */\n  .rb-m-0 {\n    margin: 0;\n  }\n  .rb-mx-auto {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .rb-ml-auto {\n    margin-left: auto;\n  }\n  .rb-mt-auto {\n    margin-top: auto;\n  }\n  .rb-mt-0\\.5 {\n    margin-top: 0.125rem;\n  }\n  .rb-mt-1 {\n    margin-top: 0.25rem;\n  }\n  .rb-mt-2 {\n    margin-top: 0.5rem;\n  }\n  .rb-mt-4 {\n    margin-top: 1rem;\n  }\n  .rb-mt-6 {\n    margin-top: 1.5rem;\n  }\n  .rb-mt-8 {\n    margin-top: 2rem;\n  }\n  .rb-mt-10 {\n    margin-top: 2.5rem;\n  }\n  .rb-mt-12 {\n    margin-top: 3rem;\n  }\n  .rb-mb-1 {\n    margin-bottom: 0.25rem;\n  }\n  .rb-mb-2 {\n    margin-bottom: 0.5rem;\n  }\n  .rb-mb-3 {\n    margin-bottom: 0.75rem;\n  }\n  .rb-mb-4 {\n    margin-bottom: 1rem;\n  }\n  .rb-mb-8 {\n    margin-bottom: 2rem;\n  }\n  .rb-ml-1 {\n    margin-left: 0.25rem;\n  }\n  .rb-ml-2 {\n    margin-left: 0.5rem;\n  }\n  .rb-ml-6 {\n    margin-left: 1.5rem;\n  }\n  .rb-mr-2 {\n    margin-right: 0.5rem;\n  }\n\n  /* Borders */\n  .rb-border {\n    border-width: 1px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-0 {\n    border-width: 0;\n  }\n  .rb-border-2 {\n    border-width: 2px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-3 {\n    border-width: 3px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-b {\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-border-t {\n    border-top-width: 1px;\n    border-top-style: solid;\n    border-top-color: rgb(var(--tb-border));\n  }\n  .rb-border-dashed {\n    border-style: dashed;\n  }\n  .rb-border-current {\n    border-color: currentColor;\n  }\n  .rb-border-transparent {\n    border-color: transparent;\n  }\n  .rb-border-b-2 {\n    border-bottom-width: 2px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-last-border-b-0:last-child {\n    border-bottom-width: 0;\n  }\n\n  /* Radius */\n  .rb-rounded-none {\n    border-radius: 0;\n  }\n  .rb-rounded-sm {\n    border-radius: 0.125rem;\n  }\n  .rb-rounded {\n    border-radius: 0.25rem;\n  }\n  .rb-rounded-md {\n    border-radius: 0.375rem;\n  }\n  .rb-rounded-lg {\n    border-radius: 0.5rem;\n  }\n  .rb-rounded-xl {\n    border-radius: 0.75rem;\n  }\n  .rb-rounded-2xl {\n    border-radius: 1rem;\n  }\n  .rb-rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rb-rounded-full {\n    border-radius: 9999px;\n  }\n\n  /* Shadow */\n  /*\n   * Shadows are theme-driven via CSS variables:\n   * - `--shadow-sm|md|lg|xl|2xl` for size-specific utilities\n   * - `--shadow-elev` as a generic fallback (used by bridge/runtime defaults)\n   */\n  .rb-shadow-sm {\n    box-shadow: var(--shadow-sm, var(--shadow-elev));\n  }\n  .rb-shadow-md {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n  .rb-shadow-lg {\n    box-shadow: var(--shadow-lg, var(--shadow-elev));\n  }\n  .rb-shadow-xl {\n    box-shadow: var(--shadow-xl, var(--shadow-elev));\n  }\n  .rb-shadow-2xl {\n    box-shadow: var(--shadow-2xl, var(--shadow-xl, var(--shadow-elev)));\n  }\n  .hover\\:rb-shadow-md:hover {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n\n  /* Overflow */\n  .rb-overflow-hidden {\n    overflow: hidden;\n  }\n  .rb-overflow-visible {\n    overflow: visible;\n  }\n  .rb-overflow-x-auto {\n    overflow-x: auto;\n  }\n  .rb-overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  /* Layout */\n  .rb-break-inside-avoid {\n    break-inside: avoid;\n    page-break-inside: avoid;\n    -webkit-column-break-inside: avoid;\n  }\n\n  /* Scroll snap */\n  .rb-snap-x {\n    scroll-snap-type: x var(--rb-scroll-snap-strictness, mandatory);\n  }\n  .rb-snap-mandatory {\n    --rb-scroll-snap-strictness: mandatory;\n  }\n  .rb-snap-start {\n    scroll-snap-align: start;\n  }\n\n  /* Background */\n  .rb-bg-transparent {\n    background-color: transparent;\n  }\n  .rb-bg-current {\n    background-color: currentColor;\n  }\n  .rb-bg-black-40 {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .rb-bg-surface {\n    background-color: rgb(var(--tb-surface));\n  }\n  .rb-bg-background {\n    background-color: rgb(var(--tb-background));\n  }\n\n  /* Typography */\n  .rb-text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .rb-text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n  .rb-text-base {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n  .rb-text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-xl {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n  .rb-text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n  .rb-font-medium {\n    font-weight: 500;\n  }\n  .rb-font-semibold {\n    font-weight: 600;\n  }\n  .rb-font-bold {\n    font-weight: 700;\n  }\n  .rb-font-mono {\n    font-family:\n      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n  }\n  .rb-leading-relaxed {\n    line-height: 1.625;\n  }\n  .rb-tracking-tight {\n    letter-spacing: -0.025em;\n  }\n  .rb-tracking-wide {\n    letter-spacing: 0.025em;\n  }\n  .rb-text-left {\n    text-align: left;\n  }\n  .rb-text-center {\n    text-align: center;\n  }\n  .rb-text-right {\n    text-align: right;\n  }\n\n  /* Text decoration */\n  .rb-no-underline {\n    text-decoration: none;\n  }\n  .rb-underline {\n    text-decoration-line: underline;\n  }\n  .rb-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .rb-nav-underline:hover,\n  .rb-nav-underline[data-active=\"true\"],\n  .rb-nav-underline[aria-current=\"page\"] {\n    text-decoration: underline;\n  }\n  .rb-nav-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n\n  .rb-uppercase {\n    text-transform: uppercase;\n  }\n  .rb-truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Opacity */\n  .rb-opacity-0 {\n    opacity: 0;\n  }\n  .rb-opacity-30 {\n    opacity: 0.3;\n  }\n  .rb-opacity-50 {\n    opacity: 0.5;\n  }\n  .rb-opacity-60 {\n    opacity: 0.6;\n  }\n  .rb-opacity-70 {\n    opacity: 0.7;\n  }\n  .rb-opacity-75 {\n    opacity: 0.75;\n  }\n  .rb-opacity-80 {\n    opacity: 0.8;\n  }\n  .rb-opacity-90 {\n    opacity: 0.9;\n  }\n  .rb-opacity-100 {\n    opacity: 1;\n  }\n  .rb-hover-opacity-80:hover {\n    opacity: 0.8;\n  }\n\n  /* Pointer events */\n  .rb-pointer-events-none {\n    pointer-events: none;\n  }\n  .rb-pointer-events-auto {\n    pointer-events: auto;\n  }\n\n  /* Cursor */\n  .rb-cursor-pointer {\n    cursor: pointer;\n  }\n  .rb-cursor-default {\n    cursor: default;\n  }\n  .rb-cursor-wait {\n    cursor: wait;\n  }\n\n  /* Transitions */\n  .rb-transition-all {\n    transition-property: all;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-colors {\n    transition-property:\n      color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-transform {\n    transition-property: transform;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-duration-200 {\n    transition-duration: 200ms;\n  }\n  .rb-duration-300 {\n    transition-duration: 300ms;\n  }\n  .rb-duration-500 {\n    transition-duration: 500ms;\n  }\n  .rb-ease-in-out {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @keyframes rb-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .rb-animate-spin {\n    animation: rb-spin 1s linear infinite;\n  }\n\n  /* Spinner (themeable via currentColor) */\n  .rb-spinner {\n    --rb-spinner-size: 2rem;\n    --rb-spinner-duration: 0.9s;\n    --rb-spinner-track-color: rgba(var(--tb-foreground), 0.15);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--rb-spinner-size);\n    height: var(--rb-spinner-size);\n    color: rgb(var(--tb-primary));\n    animation: rb-spin var(--rb-spinner-duration) linear infinite;\n  }\n\n  .rb-spinner svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .rb-spinner--inherit {\n    color: inherit;\n  }\n\n  .rb-spinner--xs {\n    --rb-spinner-size: 0.75rem;\n  }\n\n  .rb-spinner--sm {\n    --rb-spinner-size: 1rem;\n  }\n\n  .rb-spinner--md {\n    --rb-spinner-size: 2rem;\n  }\n\n  .rb-spinner--lg {\n    --rb-spinner-size: 4rem;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-spinner {\n      animation-duration: 1.5s;\n    }\n  }\n\n  @keyframes rb-marquee {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(calc(-50% - (var(--rb-marquee-gap, 2rem) / 2)));\n    }\n  }\n  .rb-animate-marquee {\n    animation: rb-marquee var(--rb-marquee-duration, 40s) linear infinite;\n    animation-direction: var(--rb-marquee-direction, normal);\n    gap: var(--rb-marquee-gap, 2rem);\n  }\n  .rb-marquee-pause-on-hover:hover .rb-animate-marquee {\n    animation-play-state: paused;\n  }\n\n  .rb-image-gallery-marquee {\n    overflow: hidden;\n    width: 100%;\n  }\n\n  @container rb-site (max-width: 639px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-image-gallery-marquee {\n        overflow-x: auto;\n        overflow-y: hidden;\n        -webkit-overflow-scrolling: touch;\n        touch-action: pan-x;\n        scrollbar-width: none;\n      }\n\n      .rb-image-gallery-marquee::-webkit-scrollbar {\n        display: none;\n      }\n\n      /* Let users swipe smoothly without fighting autoplay while interacting. */\n      .rb-image-gallery-marquee:active .rb-animate-marquee,\n      .rb-image-gallery-marquee:focus-within .rb-animate-marquee {\n        animation-play-state: paused;\n      }\n\n      .rb-container-full.rb-image-gallery-marquee-container {\n        padding-left: 0;\n        padding-right: 0;\n      }\n\n      /* Marquee variant: keep images in color on mobile for legibility. */\n      .rb-image-gallery-marquee-container .rb-filter-grayscale,\n      .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {\n        filter: none;\n      }\n\n      .rb-image-gallery-marquee-container\n        .rb-filter-grayscale-hover-reveal:hover {\n        filter: none;\n      }\n    }\n\n}\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-animate-marquee {\n      animation: none !important;\n      transform: none !important;\n    }\n    .rb-image-gallery-marquee {\n      overflow-x: auto;\n      overflow-y: hidden;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n\n  /* Filters */\n  .rb-filter-grayscale {\n    filter: grayscale(100%);\n  }\n  .rb-filter-grayscale-hover-reveal {\n    filter: grayscale(100%);\n    transition: filter 500ms ease;\n  }\n  .rb-filter-grayscale-hover-reveal:hover {\n    filter: grayscale(0%);\n  }\n  .rb-filter-sepia {\n    filter: sepia(100%);\n  }\n\n  /* Transforms */\n  .rb-transform-gpu {\n    transform: translateZ(0);\n  }\n  .rb-will-change-transform {\n    will-change: transform;\n  }\n  .rb-translate-x-neg-1\\/2 {\n    transform: translateX(-50%);\n  }\n  .rb-hover-scale-105:hover {\n    transform: scale(1.05);\n  }\n  .rb-hover-scale-125:hover {\n    transform: scale(1.25);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .rb-motion-safe-hover-scale-105:hover {\n      transform: scale(1.05);\n    }\n  }\n\n  /* Object fit */\n  .rb-object-cover {\n    object-fit: cover;\n  }\n  .rb-object-contain {\n    object-fit: contain;\n  }\n  .rb-bg-motion-fixed-frame {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100svh;\n  }\n  .rb-bg-motion-fixed-frame-scope {\n    -webkit-clip-path: inset(0);\n    clip-path: inset(0);\n  }\n  @media (hover: none), (prefers-reduced-motion: reduce) {\n    .rb-bg-motion-fixed-frame {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  /* Line clamp */\n  .rb-line-clamp-2,\n  .rb-line-clamp-3,\n  .rb-line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n  }\n  .rb-line-clamp-2 {\n    -webkit-line-clamp: 2;\n  }\n  .rb-line-clamp-3 {\n    -webkit-line-clamp: 3;\n  }\n  .rb-line-clamp-4 {\n    -webkit-line-clamp: 4;\n  }\n\n  /* Typography */\n  .rb-italic {\n    font-style: italic;\n  }\n\n  /* Container helpers */\n  .rb-container {\n    max-width: 80rem;\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-full {\n    width: 100%;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-bleed {\n    width: 100%;\n    max-width: none;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container,\n      .rb-container-full {\n        padding-left: 1.5rem;\n        padding-right: 1.5rem;\n      }\n    }\n\n}\n\n  /* Flex alignment */\n  .rb-self-start {\n    align-self: flex-start;\n  }\n\n  /* Semantic spacing tokens (replaces Tailwind maps in src/system/spacing.ts) */\n  .rb-section-pad-none {\n    --rb-section-pad-y: 0rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-compact {\n    --rb-section-pad-y: 1.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-cozy {\n    --rb-section-pad-y: 2.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-medium {\n    --rb-section-pad-y: 3rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-comfortable {\n    --rb-section-pad-y: 4rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-spacious {\n    --rb-section-pad-y: 5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-section-pad-compact {\n        --rb-section-pad-y: 2rem;\n      }\n      .rb-section-pad-cozy {\n        --rb-section-pad-y: 3.5rem;\n      }\n      .rb-section-pad-medium {\n        --rb-section-pad-y: 4rem;\n      }\n      .rb-section-pad-comfortable {\n        --rb-section-pad-y: 5rem;\n      }\n      .rb-section-pad-spacious {\n        --rb-section-pad-y: 7rem;\n      }\n    }\n\n}\n\n  .rb-container-pad-none {\n    --rb-card-pad: 0rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-compact {\n    --rb-card-pad: 1rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-cozy {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-medium {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-comfortable {\n    --rb-card-pad: 2rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-spacious {\n    --rb-card-pad: 2.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container-pad-compact {\n        --rb-card-pad: 1.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-cozy {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-medium {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-comfortable {\n        --rb-card-pad: 2.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-spacious {\n        --rb-card-pad: 3.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n    }\n\n}\n\n  /* Semantic gap tokens (theme-aware via --space-mult) */\n  .rb-gap-semantic-none {\n    --rb-semantic-gap: 0px;\n    gap: 0;\n  }\n  .rb-gap-semantic-compact {\n    --rb-semantic-gap: calc(1rem * var(--space-mult, 1));\n    gap: calc(1rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-cozy {\n    --rb-semantic-gap: calc(1.75rem * var(--space-mult, 1));\n    gap: calc(1.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-medium {\n    --rb-semantic-gap: calc(2.75rem * var(--space-mult, 1));\n    gap: calc(2.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-comfortable {\n    --rb-semantic-gap: calc(4.5rem * var(--space-mult, 1));\n    gap: calc(4.5rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-spacious {\n    --rb-semantic-gap: calc(6.5rem * var(--space-mult, 1));\n    gap: calc(6.5rem * var(--space-mult, 1));\n  }\n\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-gap-semantic-compact {\n        --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));\n        gap: calc(1.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-cozy {\n        --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));\n        gap: calc(2.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-medium {\n        --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));\n        gap: calc(3.5rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-comfortable {\n        --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));\n        gap: calc(5.75rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-spacious {\n        --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));\n        gap: calc(8.75rem * var(--space-mult, 1));\n      }\n    }\n\n}\n\n  /* Backdrop blur helpers */\n  .rb-backdrop-blur {\n    backdrop-filter: blur(10px);\n  }\n  @supports not (\n    (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))\n  ) {\n    .rb-backdrop-blur {\n      backdrop-filter: none;\n    }\n  }\n}\n\n@layer rb-theme {\n  /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */\n  :root {\n    /* --tb-primary: 17 24 39;\n  --tb-text: 17 24 39;\n  --tb-muted: 107 114 128;\n  --tb-bg: 255 255 255;\n  --tb-surface: 248 250 252;\n  --tb-border: 229 231 235;\n\n  --radius-control: 12px;\n  --radius-card: 12px;\n\n  --shadow-elev: 0 1px 2px rgba(0,0,0,.06);\n\n  --fs-h1: 32px;\n  --fs-h2: 24px;\n  --fs-h3: 20px;\n  --fs-body: 16px;\n\n  --font-heading: ui-sans-serif, system-ui, sans-serif;\n  --font-body: ui-sans-serif, system-ui, sans-serif;\n\n  --motion-duration: 180ms;\n  --motion-ease: cubic-bezier(.2,.8,.2,1); */\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Modal                                                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .rb-modal-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--rb-modal-z-index, 20000);\n    display: grid;\n    place-items: center;\n    padding: 1rem;\n    /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */\n    background-color: rgba(0, 0, 0, 0.6);\n    background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));\n  }\n\n  :where(.theme-scope) .rb-modal {\n    width: min(var(--rb-modal-max-width, 560px), 100%);\n    background: var(--rb-modal-bg, rgb(var(--tb-surface)));\n    color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-text-color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-heading-color: var(--rb-modal-heading, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-hover-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-hover-decoration: underline;\n    --rb-surface-supporting-color: var(--rb-modal-supporting, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n    border-radius: var(--rb-modal-radius, var(--radius-card));\n    box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));\n  }\n\n  :where(.theme-scope) .rb-modal__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 1rem 1rem 0.75rem;\n    border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n  }\n\n  :where(.theme-scope) .rb-modal__title {\n    margin: 0;\n    font-family: var(--font-heading);\n    font-size: 1.0625rem;\n    font-weight: 600;\n    color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));\n  }\n\n  :where(.theme-scope) .rb-modal__close {\n    background: transparent;\n    border: none;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    line-height: 1;\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    cursor: pointer;\n    display: grid;\n    place-items: center;\n    border-radius: var(--radius-control);\n  }\n\n  :where(.theme-scope) .rb-modal__close:hover {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    background: rgba(var(--tb-border), 0.2);\n  }\n\n  :where(.theme-scope) .rb-modal__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);\n  }\n\n  :where(.theme-scope) .rb-modal__body {\n    padding: 0.875rem 1rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    font-size: 0.9375rem;\n    line-height: 1.45;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Site document overlay header clearance                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container {\n    --rb-opening-content-clearance: calc(\n      var(--site-overlay-header-clearance, 0px) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container:not([class*='rb-container-pad-']) {\n    padding-top: var(--rb-opening-content-clearance, 0px);\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container\n    :where([class*='rb-container-pad-']) {\n    --rb-opening-content-clearance: 0px;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile nav overlay transitions                                      */\n  /* -------------------------------------------------------------------------- */\n\n  /* Keep the overlay in the DOM so we can transition opacity/transform.\n   JS toggles `aria-hidden` + `inert` (via enhancer), and CSS uses pointer-events\n   to prevent interaction while closed. */\n  .nav-mobile-overlay {\n    pointer-events: none;\n    /* Prevent transformed children (panel) from creating viewport scrollbars\n     during enter/exit transitions. */\n    overflow: hidden;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] {\n    pointer-events: auto;\n  }\n\n  .nav-mobile-overlay .nav-mobile-backdrop {\n    opacity: 0;\n    transition: opacity var(--motion-duration, 180ms)\n      var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-backdrop {\n    opacity: 1;\n  }\n\n  .nav-mobile-overlay .nav-mobile-panel {\n    opacity: 0;\n    transform: translate3d(12px, 0, 0);\n    overflow-x: hidden;\n    transition:\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: opacity, transform;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-panel {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile toggle hamburger -> X                                       */\n  /* -------------------------------------------------------------------------- */\n\n  .nav-mobile-toggle .nav-mobile-bar {\n    transform-origin: center;\n    transition:\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: transform, opacity;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-top {\n    transform: translateY(6px) rotate(45deg);\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-middle {\n    opacity: 0;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-bottom {\n    transform: translateY(-6px) rotate(-45deg);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-mobile-overlay .nav-mobile-backdrop,\n    .nav-mobile-overlay .nav-mobile-panel {\n      transition: none;\n      transform: none;\n    }\n\n    .nav-mobile-toggle .nav-mobile-bar {\n      transition: none;\n    }\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile floating/glass backing                                      */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .header-variant-floating .header-mobile-bar {\n    align-items: flex-start;\n    margin-top: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-variant-floating .nav-mobile-toggle {\n    border: 1px solid rgb(var(--tb-border) / 0.82);\n    background: rgb(var(--tb-surface) / 0.96);\n    color: rgb(var(--tb-text));\n    box-shadow: none;\n  }\n\n  /*\n * Theme Scope Styles\n *\n * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them\n * zero specificity. This allows SDK site custom styles to easily override\n * theme defaults without needing !important or high-specificity selectors.\n *\n * Example: `h4 { color: white; }` will override `:where(:where(.theme-scope)) h4`\n */\n\n  :where(:where(.theme-scope)) {\n    font-family: var(--font-body);\n    letter-spacing: var(--ls-body);\n    line-height: var(--lh-body);\n    font-weight: var(--font-weight-body);\n\n    & h1,\n    & h2,\n    & h3,\n    & h4,\n    & h5,\n    & h6 {\n      font-family: var(--font-heading);\n      /* Color is set by generateTypographyCss.ts with full cascade:\n       --rb-surface-heading-color -> --rb-surface-text-color -> --hc-hN -> --hc-heading -> global text */\n      font-weight: var(--font-weight-heading);\n      text-transform: var(--tt-heading);\n      font-variant-caps: var(--fv-heading);\n    }\n  }\n\n  /* Heading typographic overrides (fallback to defaults when not provided) */\n  :where(:where(.theme-scope)) h1 {\n    letter-spacing: var(--ls-h1, var(--ls-heading));\n    line-height: var(--lh-h1, var(--lh-heading));\n    font-weight: var(--fw-h1, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h2 {\n    letter-spacing: var(--ls-h2, var(--ls-heading));\n    line-height: var(--lh-h2, var(--lh-heading));\n    font-weight: var(--fw-h2, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h3 {\n    letter-spacing: var(--ls-h3, var(--ls-heading));\n    line-height: var(--lh-h3, var(--lh-heading));\n    font-weight: var(--fw-h3, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h4,\n  :where(:where(.theme-scope)) h5,\n  :where(:where(.theme-scope)) h6 {\n    letter-spacing: var(--ls-heading);\n    line-height: var(--lh-heading);\n  }\n  :where(:where(.theme-scope)) h4 {\n    font-weight: var(--fw-h4, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h5 {\n    font-weight: var(--fw-h5, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h6 {\n    font-weight: var(--fw-h6, var(--font-weight-heading));\n  }\n\n  /* Rich text element spacing based on theme rhythm */\n  :where(.theme-scope) .rb-prose h1 {\n    margin-top: calc(var(--rt-space-y) * 1.6);\n    margin-bottom: calc(var(--rt-space-y) * 0.8);\n  }\n  :where(.theme-scope) .rb-prose h2 {\n    margin-top: calc(var(--rt-space-y) * 1.4);\n    margin-bottom: calc(var(--rt-space-y) * 0.7);\n  }\n  :where(.theme-scope) .rb-prose h3 {\n    margin-top: calc(var(--rt-space-y) * 1.2);\n    margin-bottom: calc(var(--rt-space-y) * 0.6);\n  }\n  :where(.theme-scope) .rb-prose h4 {\n    margin-top: calc(var(--rt-space-y) * 1);\n    margin-bottom: calc(var(--rt-space-y) * 0.5);\n  }\n  :where(.theme-scope) .rb-prose h5 {\n    margin-top: calc(var(--rt-space-y) * 0.9);\n    margin-bottom: calc(var(--rt-space-y) * 0.45);\n  }\n  :where(.theme-scope) .rb-prose h6 {\n    margin-top: calc(var(--rt-space-y) * 0.8);\n    margin-bottom: calc(var(--rt-space-y) * 0.4);\n  }\n  :where(.theme-scope) .rb-prose p {\n    margin: var(--rt-space-y) 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:last-child {\n    margin-bottom: 0;\n  }\n  :where(.theme-scope) .rb-prose img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n    margin: calc(var(--rt-space-y) * 1) 0;\n  }\n  :where(.theme-scope) .rb-prose ul,\n  :where(.theme-scope) .rb-prose ol {\n    margin: var(--rt-space-y) 0;\n    padding-left: 1.25rem;\n  }\n  :where(.theme-scope) .rb-prose ul {\n    list-style-type: disc;\n  }\n  :where(.theme-scope) .rb-prose ol {\n    list-style-type: decimal;\n  }\n  :where(.theme-scope) .rb-prose ul ul {\n    list-style-type: circle;\n  }\n  :where(.theme-scope) .rb-prose ul ul ul {\n    list-style-type: square;\n  }\n  :where(.theme-scope) .rb-prose ol ol {\n    list-style-type: lower-alpha;\n  }\n  :where(.theme-scope) .rb-prose ol ol ol {\n    list-style-type: lower-roman;\n  }\n  :where(.theme-scope) .rb-prose blockquote {\n    margin: calc(var(--rt-space-y) * 1) 0;\n    padding-left: 1rem;\n    border-left: 3px solid rgb(var(--tb-border));\n  }\n  :where(.theme-scope) .rb-prose > :first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Prose color overrides - use theme CSS variables instead of hardcoded colors\n * This makes prose elements automatically adapt to light/dark themes */\n  :where(.theme-scope) .rb-prose {\n    /* Body text inherits from parent, which should already have theme color */\n    color: inherit;\n  }\n\n  /* Prose size variants (theme-aware, CSS-only) */\n  :where(.theme-scope) {\n    /* Body scale + rhythm come from the active theme runtime (ThemeScope) */\n    --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);\n    --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);\n\n    --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);\n    --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);\n\n    /* Applied at >= 640px; below that, rb-prose-lg is typically used */\n    --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);\n    --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);\n  }\n\n  :where(.theme-scope) .rb-prose-sm {\n    font-size: var(--rb-prose-sm-font-size);\n    line-height: var(--rb-prose-sm-line-height);\n  }\n  :where(.theme-scope) .rb-prose-lg {\n    font-size: var(--rb-prose-lg-font-size);\n    line-height: var(--rb-prose-lg-line-height);\n  }\n  @container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-prose-xl-sm {\n      font-size: var(--rb-prose-xl-sm-font-size);\n      line-height: var(--rb-prose-xl-sm-line-height);\n    }\n}\n}\n\n  /* Neutral prose uses theme text color by default */\n  :where(.theme-scope) .rb-prose-neutral {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  }\n\n  :where(.theme-scope) .rb-prose p,\n  :where(.theme-scope) .rb-prose li {\n    /* Body text uses inherited color (set by fragment via textColorStyle) */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose h1,\n  :where(.theme-scope) .rb-prose h2,\n  :where(.theme-scope) .rb-prose h3,\n  :where(.theme-scope) .rb-prose h4,\n  :where(.theme-scope) .rb-prose h5,\n  :where(.theme-scope) .rb-prose h6 {\n    /* Headings inherit from parent or use theme text color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose strong,\n  :where(.theme-scope) .rb-prose b {\n    /* Bold text inherits color but increases weight */\n    color: inherit;\n    font-weight: 600;\n  }\n\n  :where(.theme-scope) .rb-prose em,\n  :where(.theme-scope) .rb-prose i {\n    /* Italic text inherits color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose a {\n    --rb-prose-effective-link-color: var(\n      --rb-surface-link-color,\n      var(\n        --rb-surface-text-color,\n        var(\n          --rb-prose-link-color,\n          rgb(var(--tb-primary, var(--tb-text, 17 24 39)))\n        )\n      )\n    );\n    color: var(--rb-prose-effective-link-color);\n    text-decoration-line: var(--rb-prose-link-decoration-line, underline);\n    text-decoration-style: var(--rb-prose-link-underline-style, solid);\n    text-decoration-thickness: var(\n      --rb-prose-link-underline-thickness,\n      from-font\n    );\n    text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);\n    text-decoration-color: var(\n      --rb-prose-link-decoration-color,\n      color-mix(\n        in srgb,\n        var(--rb-prose-effective-link-color) 35%,\n        transparent\n      )\n    );\n    transition:\n      color 150ms ease,\n      text-decoration-color 150ms ease;\n  }\n\n  :where(.theme-scope) .rb-prose a:hover {\n    color: var(\n      --rb-surface-link-hover-color,\n      var(--rb-prose-link-hover-color, var(--rb-prose-effective-link-color))\n    );\n    text-decoration-line: var(\n      --rb-surface-link-hover-decoration,\n      var(--rb-prose-link-decoration-line, underline)\n    );\n    text-decoration-color: var(\n      --rb-prose-link-hover-decoration-color,\n      var(\n        --rb-surface-link-hover-color,\n        var(--rb-prose-link-hover-color, var(--rb-prose-effective-link-color))\n      )\n    );\n  }\n\n  :where(.theme-scope) .rb-prose blockquote {\n    /* Blockquotes use muted text color */\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    border-left-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .fragment-quote-body blockquote {\n    /* Quote fragment should not get the generic prose blockquote left border/indent. */\n    border-left: 0;\n    padding-left: 0;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height {\n    /* Needed so we can use container query units (`cqw`) for width-based tile sizing. */\n    container-type: inline-size;\n\n    --rb-columns-cols: var(--rb-columns-cols-mobile, 1);\n    --rb-columns-gap: var(--rb-semantic-gap, 0px);\n    --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);\n\n    --rb-columns-tile-w: calc(\n      (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) /\n        var(--rb-columns-cols)\n    );\n    --rb-columns-tile-h: calc(\n      var(--rb-columns-tile-w) * var(--rb-columns-tile-ar)\n    );\n  }\n\n  @container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1280px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));\n    }\n}\n}\n\n  :where(.theme-scope) .rb-columns-equal-height > * {\n    height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {\n    /*\n    Grid items commonly include `rb-h-full` (height: 100%) to stretch within\n    their row. In equal-height mode we instead want a fixed tile height so the\n    spanning editorial tile doesn't become taller due to its larger width +\n    aspect-ratio.\n  */\n    height: var(--rb-columns-tile-h);\n    min-height: var(--rb-columns-tile-h);\n    max-height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :where(.theme-scope) .rb-prose code {\n    /* Inline code uses text color with surface background */\n    color: inherit;\n    background-color: rgba(var(--tb-surface), 0.5);\n    padding: 0.125rem 0.25rem;\n    border-radius: 0.25rem;\n    font-size: 0.875em;\n  }\n\n  :where(.theme-scope) .rb-prose pre {\n    /* Code blocks */\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-text));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: 0.5rem;\n    padding: 1rem;\n    overflow-x: auto;\n  }\n\n  :where(.theme-scope) .rb-prose pre code {\n    /* Code inside pre blocks */\n    background-color: transparent;\n    padding: 0;\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose hr {\n    /* Horizontal rules */\n    border-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .rb-prose ul > li::marker,\n  :where(.theme-scope) .rb-prose ol > li::marker {\n    /* List markers use muted text color */\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /*\n/* Density helpers */\n  :where(.theme-scope) .section-pad {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  :where(.theme-scope)[data-density='airy'] .section-pad {\n    padding-top: 4.5rem;\n    padding-bottom: 4.5rem;\n  }\n  :where(.theme-scope)[data-density='compact'] .section-pad {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n\n  :where(.theme-scope) .rounded-control {\n    border-radius: var(--radius-control);\n  }\n  :where(.theme-scope) .rounded-card {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .shadow-elev {\n    box-shadow: var(--shadow-elev);\n  }\n\n  :where(.theme-scope) .font-heading {\n    font-family: var(--font-heading);\n  }\n  :where(.theme-scope) .font-body {\n    font-family: var(--font-body);\n  }\n\n  :where(.theme-scope) .text-h1 {\n    font-size: var(--fs-h1);\n    line-height: 1.1;\n  }\n  :where(.theme-scope) .text-h2 {\n    font-size: var(--fs-h2);\n    line-height: 1.15;\n  }\n  :where(.theme-scope) .text-h3 {\n    font-size: var(--fs-h3);\n    line-height: 1.2;\n  }\n  :where(.theme-scope) .text-body-size {\n    font-size: var(--fs-body);\n  }\n\n  :where(.theme-scope) .transition-theme {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-standard {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-subtle {\n    transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-expressive {\n    transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);\n  }\n\n  /* Shade tokens (50..950) for primary */\n  :where(.theme-scope) .from-primary-50 {\n    --rb-gradient-from: rgb(var(--tb-primary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-50 {\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-100 {\n    --rb-gradient-from: rgb(var(--tb-primary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-100 {\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-200 {\n    --rb-gradient-from: rgb(var(--tb-primary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-200 {\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-300 {\n    --rb-gradient-from: rgb(var(--tb-primary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-300 {\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-400 {\n    --rb-gradient-from: rgb(var(--tb-primary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-400 {\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-500 {\n    --rb-gradient-from: rgb(var(--tb-primary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-500 {\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-600 {\n    --rb-gradient-from: rgb(var(--tb-primary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-600 {\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-700 {\n    --rb-gradient-from: rgb(var(--tb-primary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-700 {\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-800 {\n    --rb-gradient-from: rgb(var(--tb-primary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-800 {\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-900 {\n    --rb-gradient-from: rgb(var(--tb-primary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-900 {\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-950 {\n    --rb-gradient-from: rgb(var(--tb-primary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-950 {\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for secondary */\n  :where(.theme-scope) .from-secondary-50 {\n    --rb-gradient-from: rgb(var(--tb-secondary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-50 {\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-100 {\n    --rb-gradient-from: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-100 {\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-200 {\n    --rb-gradient-from: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-200 {\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-300 {\n    --rb-gradient-from: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-300 {\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-400 {\n    --rb-gradient-from: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-400 {\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-500 {\n    --rb-gradient-from: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-500 {\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-600 {\n    --rb-gradient-from: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-600 {\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-700 {\n    --rb-gradient-from: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-700 {\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-800 {\n    --rb-gradient-from: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-800 {\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-900 {\n    --rb-gradient-from: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-900 {\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-950 {\n    --rb-gradient-from: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-950 {\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for accent */\n  :where(.theme-scope) .from-accent-50 {\n    --rb-gradient-from: rgb(var(--tb-accent-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-50 {\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-100 {\n    --rb-gradient-from: rgb(var(--tb-accent-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-100 {\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-200 {\n    --rb-gradient-from: rgb(var(--tb-accent-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-200 {\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-300 {\n    --rb-gradient-from: rgb(var(--tb-accent-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-300 {\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-400 {\n    --rb-gradient-from: rgb(var(--tb-accent-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-400 {\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-500 {\n    --rb-gradient-from: rgb(var(--tb-accent-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-500 {\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-600 {\n    --rb-gradient-from: rgb(var(--tb-accent-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-600 {\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-700 {\n    --rb-gradient-from: rgb(var(--tb-accent-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-700 {\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-800 {\n    --rb-gradient-from: rgb(var(--tb-accent-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-800 {\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-900 {\n    --rb-gradient-from: rgb(var(--tb-accent-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-900 {\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-950 {\n    --rb-gradient-from: rgb(var(--tb-accent-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-950 {\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for neutral */\n  :where(.theme-scope) .from-neutral-50 {\n    --rb-gradient-from: rgb(var(--tb-neutral-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-50 {\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-100 {\n    --rb-gradient-from: rgb(var(--tb-neutral-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-100 {\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-200 {\n    --rb-gradient-from: rgb(var(--tb-neutral-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-200 {\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-300 {\n    --rb-gradient-from: rgb(var(--tb-neutral-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-300 {\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-400 {\n    --rb-gradient-from: rgb(var(--tb-neutral-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-400 {\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-500 {\n    --rb-gradient-from: rgb(var(--tb-neutral-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-500 {\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-600 {\n    --rb-gradient-from: rgb(var(--tb-neutral-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-600 {\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-700 {\n    --rb-gradient-from: rgb(var(--tb-neutral-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-700 {\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-800 {\n    --rb-gradient-from: rgb(var(--tb-neutral-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-800 {\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-900 {\n    --rb-gradient-from: rgb(var(--tb-neutral-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-900 {\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-950 {\n    --rb-gradient-from: rgb(var(--tb-neutral-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-950 {\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n  }\n\n  /* =================================================================\n   Header System Class Naming Conventions\n\n   rb-header-*    Utility-style classes set in site-header.ts layouts\n                  (rb-header-layout, rb-header-logo-sm, rb-header-logo-lg)\n\n   header-*       State/semantic classes set by transforms or runtime\n                  (header-root, header-scrolled, header-variant-*, header-logo-text)\n\n   nav-*          Navigation component classes (dropdowns, mobile, underlines)\n                  (nav-dropdown, nav-mobile-panel, nav-underline-grow)\n   ================================================================= */\n\n  /* =================================================================\n   Header Layout Padding\n\n   Padding is controlled entirely by CSS based on variant class.\n   This ensures shrink headers look identical to non-shrink before scroll.\n   ================================================================= */\n\n  /* Prevent scroll anchoring feedback loops when the header height transitions.\n   In some browsers, resizing a sticky header near the top can cause the UA to\n   adjust scroll position (\"scroll anchoring\"), which then flips the\n   `header-scrolled` threshold logic back and forth. */\n  :where(.theme-scope) .block-site-header {\n    overflow-anchor: none;\n  }\n\n  /* Base padding for horizontal variants (classic) */\n  :where(.theme-scope) .rb-header-layout {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    transition: padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope)\n    .header-variant-classic\n    .rb-header-layout:has(.header-logo-accommodation-popout-badge) {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants need more breathing room\n   Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */\n  :where(.theme-scope) .header-variant-centered .rb-header-layout {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n\n  /* Floating variant - compact padding */\n  :where(.theme-scope) .header-variant-floating .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* =================================================================\n   Header Shrink-on-Scroll\n\n   Only applies when .rb-header-shrink is present AND user has scrolled.\n   No changes until scroll - shrink header = non-shrink header initially.\n   ================================================================= */\n\n  /* Scrolled state - reduce padding */\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants get gentler reduction\n   Note: Both classes are on Section, rb-header-layout on inner div */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* Floating variant */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-floating\n    .rb-header-layout {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  /* =================================================================\n   Logo & Title Sizing\n\n   Font sizes controlled here, not via utility classes, so shrink\n   transitions work (utility classes would override :where()).\n   ================================================================= */\n\n  /* Logo image sizing */\n  :where(.theme-scope) .rb-header-logo-sm {\n    height: 2.5rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n  :where(.theme-scope) .rb-header-logo-lg {\n    height: 3rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-sm {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-lg {\n    height: 3rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-sm {\n    height: 3.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-lg {\n    height: 4.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-sm {\n    height: 7.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-lg {\n    height: 8rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-plate,\n  :where(.theme-scope) .header-logo-accommodation-centered-badge,\n  :where(.theme-scope) .header-logo-accommodation-popout-badge,\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    border-radius: var(--radius-md, 0.5rem);\n    background: var(--color-surface, #fff);\n    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));\n    padding: 0.5rem;\n    transition:\n      margin 300ms var(--motion-ease, ease),\n      padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-popout-badge {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -1.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-logo-size-display.header-logo-accommodation-popout-badge {\n    margin-block: 0 -4rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-plate,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-popout-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-centered-masthead,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-masthead {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -2.75rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    padding: 0.75rem 1rem;\n  }\n\n  /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */\n  :where(.theme-scope) .header-logo-text {\n    font-size: 1.125rem; /* matches rb-text-lg */\n    line-height: 1.75rem;\n    margin-inline: -0.18em;\n    padding-inline: 0.18em;\n    transition: font-size 300ms var(--motion-ease, ease);\n  }\n\n  /* Centered variant uses larger title */\n  :where(.theme-scope) .header-variant-centered .header-logo-text {\n    font-size: 1.25rem; /* matches rb-text-xl */\n    line-height: 1.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-size-compact .header-logo-text {\n    font-size: 0.95rem;\n    line-height: 1.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous .header-logo-text {\n    font-size: 1.35rem;\n    line-height: 1.9rem;\n  }\n  :where(.theme-scope) .header-logo-size-display .header-logo-text {\n    font-size: 1.75rem;\n    line-height: 2.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-compact\n    .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-standard\n    .header-logo-text {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-generous\n    .header-logo-text {\n    font-size: 1.6rem;\n    line-height: 2rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-display\n    .header-logo-text {\n    font-size: 2.1rem;\n    line-height: 2.5rem;\n  }\n\n  /* Mobile: reduce site title size to keep header compact */\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .header-logo-text,\n    :where(.theme-scope) .header-logo-size-standard .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-compact .header-logo-text {\n      font-size: 0.75rem;\n      line-height: 1.15rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-generous .header-logo-text {\n      font-size: 1rem;\n      line-height: 1.4rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-display .header-logo-text {\n      font-size: 1.25rem;\n      line-height: 1.65rem;\n    }\n\n    :where(.theme-scope) .header-variant-centered .header-logo-text,\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-standard\n      .header-logo-text {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-compact\n      .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.2rem;\n    }\n\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-generous\n      .header-logo-text {\n      font-size: 1.125rem;\n      line-height: 1.5rem;\n    }\n\n    :where(.theme-scope)\n      .header-variant-centered\n      .header-logo-size-display\n      .header-logo-text {\n      font-size: 1.35rem;\n      line-height: 1.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Shrink on Scroll - Logo & Title\n   ================================================================= */\n\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-sm {\n    height: 2.75rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-lg {\n    height: 3.25rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-sm,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-lg {\n    height: 3.75rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {\n    font-size: 0.875rem;\n  }\n\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .header-logo-size-generous.rb-header-logo-sm,\n    :where(.theme-scope) .header-logo-size-generous.rb-header-logo-lg {\n      height: 3rem;\n    }\n\n    :where(.theme-scope) .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope) .header-logo-size-display.rb-header-logo-lg {\n      height: 5.5rem;\n    }\n\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-lg {\n      height: 3.5rem;\n    }\n\n    :where(.theme-scope) .header-logo-accommodation-popout-badge {\n      margin-block: 0;\n    }\n\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-plate,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-popout-badge,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-badge,\n    :where(.theme-scope)\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead {\n      position: relative;\n      z-index: 1;\n      margin-block: 0 -2.75rem;\n    }\n\n    :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {\n      font-size: 0.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Accessibility: Reduced Motion\n   ================================================================= */\n\n  @media (prefers-reduced-motion: reduce) {\n    :where(.theme-scope) .rb-header-layout,\n    :where(.theme-scope) .rb-header-logo-sm,\n    :where(.theme-scope) .rb-header-logo-lg,\n    :where(.theme-scope) .header-logo-text {\n      transition: none;\n    }\n  }\n\n  /* Nav underline-grow animation (used by navStyle: \"underline-grow\" in site-header.ts) */\n  :where(.theme-scope) .nav-underline-grow {\n    position: relative;\n    overflow: visible;\n  }\n  :where(.theme-scope) .nav-underline-grow::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: var(--nav-underline-offset, -0.35em);\n    width: 100%;\n    height: 2px;\n    background-color: currentColor;\n    transform: scaleX(0);\n    transform-origin: left center;\n    transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);\n  }\n  :where(.theme-scope) .nav-underline-grow:hover::after,\n  :where(.theme-scope)\n    .nav-underline-grow.nav-underline-active[data-active='true']::after {\n    transform: scaleX(1);\n  }\n  :where(.theme-scope) .nav-underline-offset-tight {\n    --nav-underline-offset: -0.2em;\n  }\n  :where(.theme-scope) .nav-underline-offset-normal {\n    --nav-underline-offset: -0.3em;\n  }\n  :where(.theme-scope) .nav-underline-offset-loose {\n    --nav-underline-offset: -0.45em;\n  }\n\n  :where(.theme-scope) .card-surface {\n    background: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-text-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-heading-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-hover-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-hover-decoration: underline;\n    --rb-surface-supporting-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: var(--radius-card);\n    box-shadow: var(--shadow-elev);\n  }\n  :where(.theme-scope) .media-rounded {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .is-placeholder::after {\n    content: 'Placeholder';\n    position: absolute;\n    top: 0.5rem;\n    left: 0.5rem;\n    font-size: 11px;\n    background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);\n    color: rgb(var(--tb-text));\n    padding: 0.15rem 0.35rem;\n    border-radius: 4px;\n    opacity: 0.85;\n  }\n\n  /* Status badges - theme-aware styling for capacity indicators */\n  :where(.theme-scope) .badge-status {\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.625rem;\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.25rem;\n  }\n\n  /* All badges use a subtle theme-aware style by default */\n  :where(.theme-scope) .badge-status-available {\n    background-color: rgba(var(--tb-secondary), 0.15);\n    color: rgb(var(--tb-secondary-700, var(--tb-secondary)));\n  }\n\n  :where(.theme-scope) .badge-status-low {\n    background-color: rgba(var(--tb-accent), 0.15);\n    color: rgb(var(--tb-accent-700, var(--tb-accent)));\n  }\n\n  :where(.theme-scope) .badge-status-sold-out {\n    background-color: rgba(var(--tb-text), 0.1);\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /* Event list empty state - theme-aware */\n  :where(.theme-scope) .event-list-empty {\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border-color: rgb(var(--tb-border));\n  }\n} /* end @layer rb-theme */\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"open\"] {\n  animation: accordion-down 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"closed\"] {\n  animation: accordion-up 0.3s cubic-bezier(0.4, 0, 1, 1);\n}\n\n/*\n * Block Static CSS Modules\n *\n * IMPORTANT: Import order is part of the cascade contract.\n * Keep these imports in the same order as the original monolithic file,\n * and add new modules at the end unless you are intentionally changing cascade.\n */\n\n/* =============================================================================\n * Shared: Registration Surface (issue 1174)\n *\n * Wizard-surface primitives shared by the event-registration,\n * appointment-booking blocks: surface container,\n * selectable option cards, step indicator, wizard actions row, on-surface\n * text ramp, layout stacks, summary box and skeleton shell lines.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;\n *   canonical name list in blocks/registrationSurfaceVars.ts)\n *\n * Defaults intentionally match the event-registration (issue 1089) values; blocks\n * that need to preserve a different look override in their own block CSS,\n * which is imported after this file (cascade order is the override contract \u2014\n * all selectors here are zero-specificity `:where()`).\n *\n * Layout-only `.rb-state-icon` rules (formerly registration-shared.css) live\n * here too; block CSS provides the `.rb-state-icon--{variant}` colors.\n *\n * Naming: component-like primitives follow the existing bare `rb-` shared\n * precedent (`.rb-state-icon`, `.rb-tile`): `.rb-option-card`, `.rb-step-*`,\n * `.rb-wizard-actions`, `.rb-on-surface`, `.rb-shell-*`. Container/layout\n * pieces that would otherwise collide with the global `.rb-*` utility layer\n * are namespaced `rb-reg-*` (`.rb-reg-surface`, `.rb-reg-stack`, ...). All of\n * them are scoped to the three registration blocks either way.\n * ============================================================================= */\n\n/* Terminal state icon (layout only \u2014 colors are per-block) */\n:where(.theme-scope) .rb-state-icon {\n  width: 4rem;\n  height: 4rem;\n  margin: 0 auto 1rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) .rb-state-icon svg {\n  width: 2rem;\n  height: 2rem;\n}\n\n/* Surface container */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-surface {\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  padding: clamp(1rem, 2vw, 1.5rem);\n  background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-text-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-heading-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-link-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-link-hover-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  --rb-surface-link-hover-decoration: underline;\n  --rb-surface-supporting-color: var(--rb-reg-on-surface-muted, var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)))));\n  transition: border-color var(--rb-block-transition, 150ms) ease;\n  width: 100%;\n  max-width: 800px;\n  margin-inline: 0;\n}\n\n/* The panel paints its own opaque surface, so it also has to break the button\n * colour contract it inherits. An enclosing section that sits on a brand band\n * publishes `--rb-action-*` variables resolved against *that* band \u2014 on Anna's\n * therapy page a ghost primary: transparent background, white label. Those\n * variables inherit, so without this reset a Continue button inside the light\n * form panel renders white-on-white and only appears on hover.\n *\n * Resetting to `initial` sends each button back to the generated fallback in\n * its own rule (`var(--rb-action-\u2026, rgb(var(--tb-primary)))`), which is the\n * theme's standard button resolved against a normal surface \u2014 correct here,\n * because this panel *is* a normal surface.\n *\n * Mirrors `contextualButtonSurfaceResetStyles()` in theme-core/buttons; the\n * pairing is pinned by registration-surface-action-reset.test.ts. */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-surface {\n  --rb-action-primary-base-background-color: initial;\n  --rb-action-primary-base-background-image: initial;\n  --rb-action-primary-base-color: initial;\n  --rb-action-primary-hover-background-color: initial;\n  --rb-action-primary-hover-background-image: initial;\n  --rb-action-primary-hover-color: initial;\n  --rb-action-primary-focus-background-color: initial;\n  --rb-action-primary-focus-background-image: initial;\n  --rb-action-primary-focus-color: initial;\n  --rb-action-primary-active-background-color: initial;\n  --rb-action-primary-active-background-image: initial;\n  --rb-action-primary-active-color: initial;\n  --rb-action-primary-disabled-background-color: initial;\n  --rb-action-primary-disabled-background-image: initial;\n  --rb-action-primary-disabled-color: initial;\n  --rb-action-primary-base-outline: initial;\n  --rb-action-primary-base-outline-offset: initial;\n  --rb-action-primary-focus-outline: initial;\n  --rb-action-primary-focus-outline-offset: initial;\n  --rb-action-primary-focus-box-shadow: initial;\n\n  --rb-action-secondary-base-background-color: initial;\n  --rb-action-secondary-base-background-image: initial;\n  --rb-action-secondary-base-color: initial;\n  --rb-action-secondary-hover-background-color: initial;\n  --rb-action-secondary-hover-background-image: initial;\n  --rb-action-secondary-hover-color: initial;\n  --rb-action-secondary-focus-background-color: initial;\n  --rb-action-secondary-focus-background-image: initial;\n  --rb-action-secondary-focus-color: initial;\n  --rb-action-secondary-active-background-color: initial;\n  --rb-action-secondary-active-background-image: initial;\n  --rb-action-secondary-active-color: initial;\n  --rb-action-secondary-disabled-background-color: initial;\n  --rb-action-secondary-disabled-background-image: initial;\n  --rb-action-secondary-disabled-color: initial;\n  --rb-action-secondary-base-outline: initial;\n  --rb-action-secondary-base-outline-offset: initial;\n  --rb-action-secondary-focus-outline: initial;\n  --rb-action-secondary-focus-outline-offset: initial;\n  --rb-action-secondary-focus-box-shadow: initial;\n\n  --rb-action-outline-base-background-color: initial;\n  --rb-action-outline-base-background-image: initial;\n  --rb-action-outline-base-color: initial;\n  --rb-action-outline-hover-background-color: initial;\n  --rb-action-outline-hover-background-image: initial;\n  --rb-action-outline-hover-color: initial;\n  --rb-action-outline-focus-background-color: initial;\n  --rb-action-outline-focus-background-image: initial;\n  --rb-action-outline-focus-color: initial;\n  --rb-action-outline-active-background-color: initial;\n  --rb-action-outline-active-background-image: initial;\n  --rb-action-outline-active-color: initial;\n  --rb-action-outline-disabled-background-color: initial;\n  --rb-action-outline-disabled-background-image: initial;\n  --rb-action-outline-disabled-color: initial;\n  --rb-action-outline-base-outline: initial;\n  --rb-action-outline-base-outline-offset: initial;\n  --rb-action-outline-focus-outline: initial;\n  --rb-action-outline-focus-outline-offset: initial;\n  --rb-action-outline-focus-box-shadow: initial;\n\n  --rb-action-ghost-base-background-color: initial;\n  --rb-action-ghost-base-background-image: initial;\n  --rb-action-ghost-base-color: initial;\n  --rb-action-ghost-hover-background-color: initial;\n  --rb-action-ghost-hover-background-image: initial;\n  --rb-action-ghost-hover-color: initial;\n  --rb-action-ghost-focus-background-color: initial;\n  --rb-action-ghost-focus-background-image: initial;\n  --rb-action-ghost-focus-color: initial;\n  --rb-action-ghost-active-background-color: initial;\n  --rb-action-ghost-active-background-image: initial;\n  --rb-action-ghost-active-color: initial;\n  --rb-action-ghost-disabled-background-color: initial;\n  --rb-action-ghost-disabled-background-image: initial;\n  --rb-action-ghost-disabled-color: initial;\n  --rb-action-ghost-base-outline: initial;\n  --rb-action-ghost-base-outline-offset: initial;\n  --rb-action-ghost-focus-outline: initial;\n  --rb-action-ghost-focus-outline-offset: initial;\n  --rb-action-ghost-focus-box-shadow: initial;\n\n  --rb-action-accent-base-background-color: initial;\n  --rb-action-accent-base-background-image: initial;\n  --rb-action-accent-base-color: initial;\n  --rb-action-accent-hover-background-color: initial;\n  --rb-action-accent-hover-background-image: initial;\n  --rb-action-accent-hover-color: initial;\n  --rb-action-accent-focus-background-color: initial;\n  --rb-action-accent-focus-background-image: initial;\n  --rb-action-accent-focus-color: initial;\n  --rb-action-accent-active-background-color: initial;\n  --rb-action-accent-active-background-image: initial;\n  --rb-action-accent-active-color: initial;\n  --rb-action-accent-disabled-background-color: initial;\n  --rb-action-accent-disabled-background-image: initial;\n  --rb-action-accent-disabled-color: initial;\n  --rb-action-accent-base-outline: initial;\n  --rb-action-accent-base-outline-offset: initial;\n  --rb-action-accent-focus-outline: initial;\n  --rb-action-accent-focus-outline-offset: initial;\n  --rb-action-accent-focus-box-shadow: initial;\n}\n\n/* Selectable option card */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-option-bg, transparent);\n  color: inherit;\n  cursor: pointer;\n  text-align: left;\n  transition: border-color var(--rb-block-transition, 150ms) ease,\n              background-color var(--rb-block-transition, 150ms) ease,\n              box-shadow var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n  border-color: var(--rb-reg-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));\n  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:focus-visible {\n  outline: 2px solid var(--rb-reg-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--selected {\n  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  background-color: var(--rb-reg-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.08));\n  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled:hover {\n  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  box-shadow: none;\n}\n\n/* Check indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));\n}\n\n/* Step indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-steps-nav {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-steps {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-circle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  background: var(--rb-reg-step-inactive, rgb(var(--tb-mutedText, 100 116 139)));\n  color: var(--rb-reg-step-text, rgb(var(--tb-primaryForeground, 255 255 255)));\n  transition: background-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-circle--active {\n  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));\n  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-circle--completed {\n  background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));\n  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-check {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-connector {\n  width: 2rem;\n  height: 2px;\n  background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-label {\n  font-size: 0.75rem;\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n  display: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-label--active {\n  font-weight: 500;\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-step-label {\n    display: inline;\n  }\n}\n}\n\n/* Wizard actions row */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1.5rem;\n}\n\n/* When there's only one action (no back button), push it to the right */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions > :only-child {\n  margin-inline-start: auto;\n}\n\n/* On-surface text ramp */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface {\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--muted {\n  color: var(--rb-reg-on-surface-muted, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--subtle {\n  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--faint {\n  color: var(--rb-reg-on-surface-faint, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.5));\n}\n\n/* Layout stacks */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack--sm {\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row--between {\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-grid {\n  display: grid;\n  gap: 0.75rem;\n}\n\n/* Summary box */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-summary {\n  padding: 1rem;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);\n  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));\n  background: var(--rb-reg-summary-bg, rgba(var(--tb-muted, 241 245 249), 0.42));\n}\n\n/* Skeleton shell lines */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line {\n  height: 0.75rem;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22)),\n    rgba(var(--tb-primary, 17 24 39), 0.12),\n    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22))\n  );\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--lg {\n  width: min(26rem, 82%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--md {\n  width: min(19rem, 68%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--sm {\n  width: min(14rem, 52%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--xs {\n  width: min(10rem, 42%);\n}\n\n/* Skeleton block (rectangular placeholder, pulses) */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22));\n  animation: rb-reg-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes rb-reg-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n    animation: none;\n  }\n}\n\n/* =============================================================================\n * Block: Event Registration (pilot #76)\n * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-event-tile-bg: var(--er-event-card-bg);\n  --rb-event-tile-border: var(--er-border);\n  --rb-event-tile-border-width: var(--er-event-card-border-width);\n  --rb-event-tile-border-hover: var(--er-border-hover);\n  --rb-event-tile-border-selected: var(--er-border-selected);\n  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);\n  --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);\n  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));\n  --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);\n  --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);\n  --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);\n  --er-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);\n  --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);\n  --er-on-surface-disabled-detail: rgba(\n    var(--tb-onSurface, var(--tb-text)),\n    0.68\n  );\n}\n\n/* Container: styled by the shared .rb-reg-surface (registration-surface.css);\n   .er-container remains in markup as a hook and for the overlay/embedded\n   variants below. */\n\n/* SSR shell / required-island fallback */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell {\n  min-height: 24rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__steps {\n  margin-bottom: 1.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__eyebrow {\n  margin: 0 0 0.35rem;\n  color: var(--er-on-surface-subtle);\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__title {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__copy {\n  margin: 0.35rem 0 0;\n  max-width: 36rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__cards {\n  margin-top: 0.25rem;\n  overflow: hidden;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__card {\n  display: grid;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* Shell skeleton lines: styled by the shared .rb-shell-line family\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__summary {\n  align-items: center;\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  border: 1px solid var(--er-summary-border);\n  padding: 0.875rem 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__button-placeholder {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .event-registration__hydration-error {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--er-border-error);\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n  padding: 1rem;\n  font-size: 0.9375rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'].event-registration--embedded)\n  .er-container {\n  max-width: none;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n/* Empty/unavailable states */\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty {\n  border-radius: var(--rb-block-radius);\n  border: 1px dashed var(--er-border);\n  padding: 3rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty__text {\n  opacity: 0.6;\n}\n\n/* Capacity badges */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge {\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--available {\n  background: var(--er-capacity-available-bg);\n  color: var(--er-capacity-available-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--low {\n  background: var(--er-capacity-low-bg);\n  color: var(--er-capacity-low-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--soldout {\n  background: var(--er-capacity-soldout-bg);\n  color: var(--er-capacity-soldout-text);\n}\n\n/* Selected event summary: superseded by the shared .rb-reg-summary\n   (registration-surface.css); no markup emitted .er-event-summary anymore. */\n\n/* Ticket counter */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-group {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter {\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter-btn {\n  width: 2.125rem;\n  height: 2.125rem;\n  border-radius: 50%;\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:hover:not(:disabled) {\n  border-color: var(--er-border-hover);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-limit {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-lines {\n  display: grid;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-list {\n  display: grid;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-ticket-line {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 0.875rem;\n  min-height: 4.75rem;\n  padding: 0.875rem;\n  border: 1px solid var(--er-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line--disabled {\n  color: var(--er-on-surface-disabled);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-main {\n  min-width: 0;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-name {\n  min-width: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-price {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-detail {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary {\n  padding: 0.75rem 0.875rem;\n  border: 1px solid var(--er-summary-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-list {\n  margin: 0.25rem 0 0;\n  padding-left: 1.125rem;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.4;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-ticket-line {\n    grid-template-columns: minmax(0, 1fr);\n    align-items: stretch;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-ticket-line\n    .er-counter {\n    justify-content: flex-start;\n  }\n}\n}\n\n/* Form inputs */\n:where(.theme-scope) :where([data-block='event-registration']) .er-input {\n  width: 100%;\n  min-height: 2.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  border: 1px solid var(--er-border);\n  background: var(--er-control-bg);\n  color: var(--er-control-text);\n  font: inherit;\n  line-height: 1.4;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-input::placeholder {\n  color: var(--er-on-surface-faint);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-input:focus {\n  outline: none;\n  border-color: var(--er-border-selected);\n  box-shadow: 0 0 0 3px var(--er-focus-ring);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-input--error {\n  border-color: var(--er-border-error);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-input--error:focus {\n  box-shadow: 0 0 0 3px rgba(var(--tb-destructive), 0.2);\n}\n\n/* Form labels and errors */\n:where(.theme-scope) :where([data-block='event-registration']) .er-label {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-consent-check {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-required {\n  color: var(--er-required);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-error {\n  font-size: 0.875rem;\n  color: var(--er-error-text);\n  margin-top: 0.25rem;\n}\n\n/* Back button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-back-btn {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: opacity var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-back-btn:hover {\n  opacity: 1;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--success {\n  background: var(--er-success-bg);\n  color: var(--er-success-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--info {\n  background: var(--er-info-bg);\n  color: var(--er-info-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--error {\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--waitlist {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--warning {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n/* Retry button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-retry-btn {\n  padding: 0.5rem 1rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-retry-btn:hover {\n  border-color: var(--er-border-hover);\n}\n\n/* Typography */\n:where(.theme-scope) :where([data-block='event-registration']) .er-title {\n  font-size: var(--er-step-title-size, 1.5rem);\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-title--lg {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--muted {\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--faint {\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-title {\n  font-weight: 500;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-card {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card {\n  padding: 0.875rem 0;\n  border-width: 0 0\n    var(--rb-event-tile-border-width, var(--rb-border-width, 1px)) 0;\n  border-style: solid;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card:last-child {\n  border-bottom-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option-main {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-title {\n  font-size: 1rem;\n  line-height: 1.35;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-event-title {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text {\n  color: var(--er-on-surface);\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card\n  .er-text {\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--muted {\n  color: var(--er-on-surface-muted);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--faint {\n  color: var(--er-on-surface-faint);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected {\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected\n  .er-event-title {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--muted,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--faint {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-capacity-badge {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-value {\n  font-size: 1.25rem;\n  font-weight: 700;\n  width: 1.625rem;\n  text-align: center;\n}\n\n/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n/* Event/date selection rows */\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-icon {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 1rem;\n}\n\n/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);\n   .er-actions remains in markup as a hook. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-with-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-spinner {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-altcha {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-field\n  + .er-field {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-message {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice {\n  margin-bottom: 1rem;\n  width: 100%;\n  padding: 1.25rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: rgba(var(--tb-surface), 0.5);\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-title {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice\n  .rb-state-icon {\n  margin: 0 auto 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-copy {\n  margin: 0.5rem 0 0;\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link {\n  margin-top: 0.75rem;\n  padding: 0;\n  border: 0;\n  background: none;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link:hover {\n  text-decoration: none;\n}\n\n/* Payment group container */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group\n  + .er-payment-group {\n  margin-top: 1.5rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0 0 0.25rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-subtitle {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin: 0 0 0.5rem 0;\n}\n\n/* Payment option card */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:hover {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n/* Discount code entry */\n:where(.theme-scope) :where([data-block='event-registration']) .er-discount {\n  margin-top: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle {\n  background: transparent;\n  border: 0;\n  padding: 0;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  font-size: 0.875rem;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input {\n  flex: 1;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--er-border);\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input:focus {\n  outline: 2px solid var(--er-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.8;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__feedback {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* Visually hide native radio but keep focusable (sr-only pattern) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-radio {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Focus ring on label when radio is focused */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:focus-within {\n  outline: 2px solid var(--er-payment-border-selected);\n  outline-offset: 2px;\n}\n\n/* Content layout */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-name {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-description {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-validity {\n  font-size: 0.75rem;\n  color: var(--er-on-surface-faint);\n}\n\n/* Checkmark indicator: styled by the shared .rb-option-check\n   (registration-surface.css); .er-check remains in markup as a hook. */\n\n/* Payment summary */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-summary {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-price {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--er-on-surface);\n}\n\n/* Two-column layout (Desktop: sidebar, Mobile: stacked) */\n:where(.theme-scope) :where([data-block='event-registration']) .er-layout {\n  display: grid;\n  gap: 1.5rem;\n  /* Mobile: single column, summary at top */\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'summary'\n    'main';\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block='event-registration']) .er-layout {\n    /* Desktop: main + sidebar */\n    grid-template-columns: 1fr 300px;\n    grid-template-areas: 'main summary';\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-layout-main {\n  grid-area: main;\n}\n\n/* OrderSummary positions via grid area */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-layout\n  > .er-summary {\n  grid-area: summary;\n}\n\n/* Step indicator */\n:where(.theme-scope) :where([data-block='event-registration']) .er-steps-nav {\n  margin-bottom: 1.5rem;\n}\n\n/* Step indicator internals: styled by the shared .rb-steps / .rb-step-*\n   family (registration-surface.css) via the --rb-reg-step-* mappings in the\n   event-registration var generator; er-* classes remain in markup as hooks.\n   Note: .er-steps-nav above is intentionally retained \u2014 its source position\n   keeps the wizard's 1.5rem step margin winning over the SSR shell's\n   1.25rem .er-registration-shell__steps override. */\n\n/* Sticky order summary */\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary {\n  padding: 1.25rem;\n  background: var(--er-summary-bg);\n  border: 1px solid var(--er-summary-border);\n  border-radius: var(--rb-block-radius);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  min-height: 140px;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary {\n    position: sticky;\n    top: 1rem;\n  }\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-event {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-date {\n  font-size: 0.875rem;\n  color: rgba(var(--tb-text), 0.7);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-tickets {\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-price {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-top: 0.5rem;\n}\n\n/* Guest details section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section {\n  margin-top: 1.5rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section\n  .er-title {\n  margin: 0 0 0.75rem;\n}\n\n/* Error banner for guest section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section-error {\n  padding: 0.75rem 1rem;\n  margin-bottom: 1rem;\n  background: var(--er-error-bg);\n  border: 1px solid var(--er-border-error);\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  color: var(--er-error-text);\n  font-size: 0.875rem;\n}\n\n/* Card-based layout for guests */\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-cards {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-card {\n  display: grid;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  .er-field\n  + .er-field {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  + .er-guest-card {\n  border-top: 1px solid var(--er-border);\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-guest-card {\n    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n    column-gap: 1rem;\n    align-items: start;\n  }\n}\n}\n\n/* Shake animation for validation errors */\n@keyframes er-shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section--shake {\n  animation: er-shake 0.4s ease-in-out;\n}\n\n/* =============================================================================\n * Shared: Event Cards (Listing / Spotlight / Combined)\n * Uses:\n * - Tier 1 vars: --tb-*-{shade} (from theme palette)\n * - Tier 2 vars: --rb-block-transition (from theme scope)\n * - Tier 3 vars: --rb-event-card-* (from event-calendar + event-cards var generators)\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-media {\n  height: var(--rb-event-card-media-height, 16rem);\n  overflow: hidden;\n  position: relative;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transform: scale(1);\n  transition: transform var(--rb-event-card-image-transition-duration, 700ms)\n    ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'] .event-card:hover,\n    [data-block='event-spotlight'] .event-card:hover,\n    [data-block='event-calendar'] .event-card:hover,\n    [data-block='event-combined'] .event-card:hover,\n    .event-card--catalogue:hover\n  )\n  .event-card-image {\n  transform: scale(var(--rb-event-card-image-hover-scale, 1.08));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card {\n  transition: transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-cta {\n  width: 100%;\n  justify-content: center;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover {\n  transform: translateY(var(--rb-event-card-hover-translate-y, 0px));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--rb-event-card-overlay-color, rgb(var(--tb-primary)));\n  opacity: var(--rb-event-card-overlay-opacity, 0);\n  mix-blend-mode: var(--rb-event-card-overlay-blend-mode, multiply);\n  transition: opacity var(--rb-block-transition) ease;\n  pointer-events: none;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover\n  .event-card-overlay {\n  opacity: var(--rb-event-card-overlay-hover-opacity, 0);\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  padding: 0.35rem 0.95rem;\n  border-radius: 9999px;\n  font-size: 0.65rem;\n  font-weight: 700;\n  line-height: 1rem;\n  text-transform: uppercase;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge--overlay {\n  position: absolute;\n  top: 0.75rem;\n  left: 0.75rem;\n  z-index: 20;\n  margin-bottom: 0;\n  pointer-events: none;\n}\n\n/* =============================================================================\n * EventCard: Horizontal Layout (stack mode, md+ screens only)\n * ============================================================================= */\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal {\n    display: flex;\n    flex-direction: row;\n    gap: var(--rb-event-card-horizontal-gap, 1rem);\n  }\n\n  /* Image: ~1/3 width */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-media {\n    width: var(--rb-event-card-horizontal-image-width, 33.333%);\n    min-width: 200px;\n    max-width: 320px;\n    height: auto;\n    aspect-ratio: 4/3;\n    flex-shrink: 0;\n  }\n\n  /* Content: fills remaining space */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .card-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* Footer: row layout with button on left, capacity on right */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-footer {\n    flex-direction: row-reverse;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  /* Button: auto width */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-cta {\n    width: auto;\n  }\n\n  /* Capacity: right-aligned */\n  :where(.theme-scope)\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-capacity {\n    text-align: right;\n  }\n}\n}\n\n/* Keep token list in sync with `EVENT_CATEGORY_BADGE_TOKENS` in `packages/blocks/src/system/constants/events.ts`. */\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='primary'] {\n  background-color: rgb(var(--tb-primary-200));\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='secondary'] {\n  background-color: rgb(var(--tb-secondary-200));\n  color: rgb(var(--tb-secondary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='accent'] {\n  background-color: rgb(var(--tb-accent-200));\n  color: rgb(var(--tb-accent-800));\n}\n\n/* Notice/info boxes */\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice {\n  padding: 0.75rem 1rem;\n  border-radius: var(--er-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice p {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-notice--info {\n  background-color: rgba(var(--tb-primary-100), 0.5);\n  border: 1px solid rgba(var(--tb-primary-300), 0.5);\n  color: rgb(var(--tb-primary-800));\n}\n\n/* Disabled payment group */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled {\n  opacity: 0.6;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled\n  .er-payment-group-title {\n  color: var(--er-on-surface-faint);\n}\n\n/* Disabled payment option */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled:hover {\n  border-color: var(--er-payment-border);\n  background-color: transparent;\n}\n\n/* =============================================================================\n * Payment Step Layout\n * Main flow + optional legacy sidebar area + footer summary/actions\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout {\n  display: grid;\n  gap: 1.25rem;\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'sidebar'\n    'main'\n    'footer';\n}\n\n/* When no sidebar, main takes full width */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout--no-sidebar {\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-payment-layout {\n    grid-template-columns: 1fr 260px;\n    grid-template-areas:\n      'main sidebar'\n      'footer footer';\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-payment-layout--no-sidebar {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'main'\n      'footer';\n  }\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main {\n  grid-area: main;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > .er-portal-auth {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-sidebar {\n  grid-area: sidebar;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-footer {\n  grid-area: footer;\n  display: flex;\n  flex-direction: column;\n  gap: 0.875rem;\n}\n\n/* =============================================================================\n * Payment Tiles Grid\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  gap: 0.75rem;\n  align-items: stretch;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles\n  > [role='listitem'] {\n  min-width: 0;\n  display: flex;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile {\n  width: 100%;\n  min-height: 5.75rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.75rem 0.625rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  text-align: center;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile:hover:not([aria-disabled='true']) {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled {\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled\n  > :not(.er-payment-tooltip) {\n  opacity: 0.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled.er-payment-tile--selected {\n  border-color: var(--er-payment-border);\n  background-color: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled:hover {\n  border-color: var(--er-payment-border);\n}\n\n/* Tooltip styling for disabled payment tiles */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile[aria-disabled='true'] {\n  position: relative;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tooltip {\n  display: none;\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-text));\n  color: rgb(var(--tb-background));\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  white-space: normal;\n  max-width: 16rem;\n  line-height: 1.35;\n  text-align: center;\n  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--disabled:hover\n  .er-payment-tooltip {\n  display: block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-icon {\n  font-size: 1.5rem;\n  line-height: 1;\n  /* SVG icon sizing */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-icon\n  svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-label {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-detail {\n  font-size: 0.78125rem;\n  color: var(--er-on-surface-subtle);\n  line-height: 1.25;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-check {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n}\n\n/* Upsell tiles have a subtle indicator */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--upsell {\n  border-style: dashed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--upsell.er-payment-tile--selected {\n  border-style: solid;\n}\n\n/* =============================================================================\n * Order Summary Bar (horizontal, in footer)\n * Layout: [Title + meta on left] [Price on right]\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 0.875rem 1rem;\n  background: var(--er-surface-muted);\n  border: 1px solid var(--er-summary-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-event {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  margin: 0;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-meta {\n  font-size: 0.8125rem;\n  color: rgba(var(--tb-text), 0.7);\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price {\n  font-size: 1rem;\n  font-weight: 700;\n  flex-shrink: 0;\n  display: block;\n  text-align: right;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pricing {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.125rem;\n  text-align: right;\n}\n\n/* Product section in summary bar (for pass/membership selection) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 0.75rem 0;\n  background: transparent;\n  border-top: 1px solid var(--er-summary-border);\n  border-bottom: 1px solid var(--er-summary-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-name {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape {\n  margin-top: 0.25rem;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: rgb(var(--tb-primary));\n  font-size: 0.8125rem;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-detail {\n  font-size: 0.8125rem;\n  color: rgba(var(--tb-text), 0.6);\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-price {\n  font-weight: 600;\n  font-size: 0.9375rem;\n  flex-shrink: 0;\n  text-align: right;\n}\n\n/* Strikethrough price styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price--struck {\n  display: block;\n  text-decoration: line-through;\n  color: rgba(var(--tb-text), 0.5);\n  font-size: 0.9375rem;\n  font-weight: 500;\n  text-align: right;\n}\n\n/* \"Included\" text styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-included {\n  font-size: 0.8125rem;\n  color: rgb(var(--tb-primary-600));\n  font-weight: 500;\n  text-align: right;\n}\n\n/* =============================================================================\n * Portal Auth Section (sidebar)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-portal-auth {\n  padding: 1.25rem;\n  background: rgba(var(--tb-surface), 0.5);\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-title {\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0 0 0.5rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text {\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  margin: 0 0 1rem 0;\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--success {\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--error {\n  color: rgb(var(--tb-error, 239 68 68));\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n}\n\n/* Modal */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(var(--tb-scrim), 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal {\n  background: rgb(var(--tb-background));\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  max-width: 400px;\n  width: 100%;\n  position: relative;\n  box-shadow: 0 10px 25px rgba(var(--tb-shadow), 0.2);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: rgba(var(--tb-text), 0.5);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-close:hover {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  margin: 0 0 1rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-btn {\n  padding: 0.75rem 1.5rem;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primary-foreground, 255 255 255));\n  border: none;\n  border-radius: var(--rb-block-radius);\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary {\n  background: transparent;\n  color: rgb(var(--tb-text));\n  border: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary:hover {\n  background: rgba(var(--tb-text), 0.05);\n}\n\n/* In-flow booking teaser (sits at the block's position in the page) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem 1.5rem;\n  padding: 1.25rem 1.5rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-event-card-bg);\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__title {\n  font-size: 1.0625rem;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__meta {\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  opacity: 0.75;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__tickets {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n  padding-top: 0.625rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__ticket {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 1rem;\n  font-size: 0.9375rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__ticket-name {\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-teaser__cta {\n  flex: 0 0 auto;\n}\n\n/* Fixed, full-width sticky booking bar (content-agnostic; sits above page flow) */\n:where(.theme-scope) :where([data-block='event-registration']) .er-booking-bar {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 12000;\n  padding: 0.75rem max(1rem, env(safe-area-inset-right))\n    max(0.75rem, env(safe-area-inset-bottom))\n    max(1rem, env(safe-area-inset-left));\n  background: rgb(var(--tb-background));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -10px 30px rgba(var(--tb-shadow), 0.16);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  width: 100%;\n  max-width: 72rem;\n  margin-inline: auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__title {\n  font-size: 0.95rem;\n  font-weight: 700;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__meta {\n  font-size: 0.8125rem;\n  line-height: 1.25;\n  opacity: 0.75;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__cta {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay {\n  position: fixed;\n  inset: 0;\n  height: 100dvh;\n  z-index: 14000;\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  background: var(--rb-modal-overlay-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__panel {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100dvh;\n  min-height: 0;\n  overflow: hidden;\n  background: rgb(var(--tb-background));\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__header {\n  flex: 0 0 auto;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 1rem;\n  background: rgb(var(--tb-background));\n  border-bottom: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__title {\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.25;\n  font-weight: 700;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__close {\n  width: 2rem;\n  height: 2rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  background: transparent;\n  color: rgb(var(--tb-text));\n  font-size: 1.25rem;\n  line-height: 1;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay {\n  max-width: none;\n  border: 0;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: 0;\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-main {\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-footer {\n  position: relative;\n  z-index: 3;\n  padding: 0.875rem 1rem max(0.875rem, env(safe-area-inset-bottom));\n  background: rgb(var(--tb-background));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -12px 26px rgba(var(--tb-shadow), 0.12);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-actions {\n  margin-top: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-booking-overlay {\n    justify-content: flex-end;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-booking-overlay__panel {\n    width: min(32rem, 100vw);\n    min-height: 100%;\n    box-shadow: -16px 0 40px rgba(var(--tb-shadow), 0.22);\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-main {\n    padding: 1.25rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-footer {\n    padding: 0.875rem 1.25rem max(0.875rem, env(safe-area-inset-bottom));\n  }\n}\n}\n\n/* Magic Link Form */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n/* =============================================================================\n * Inline Links (.er-link)\n * For inline buttons styled as links (e.g., \"Not you? Log out\")\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link:hover {\n  text-decoration: none;\n}\n\n/* Logged-in user hint with logout link */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-logged-in-hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  margin: 0.25rem 0 0 0;\n}\n\n/* =============================================================================\n * Booking Mode Step\n * Early step for pass/membership holders to choose their payment mode\n * =============================================================================\n */\n\n/* Hero message for membership holders */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem 1.25rem;\n  background: rgba(var(--tb-primary-100), 0.4);\n  border: 1px solid rgba(var(--tb-primary-300), 0.4);\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(var(--tb-primary));\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon\n  svg {\n  width: 20px;\n  height: 20px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-content {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-title {\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0 0 0.125rem 0;\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-subtitle {\n  font-size: 0.875rem;\n  color: rgb(var(--tb-primary-700));\n  margin: 0;\n}\n\n/* Selection cards for pass holders */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 1.25rem 1rem;\n  border: 2px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  position: relative;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card:hover:not([aria-disabled='true']) {\n  border-color: var(--er-payment-border-hover);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled {\n  opacity: 1;\n  cursor: not-allowed;\n  border-color: var(--er-payment-border);\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled.er-booking-mode-card--selected {\n  border-color: var(--er-payment-border);\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  > :not(.er-booking-mode-tooltip) {\n  opacity: 0.55;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled:hover {\n  border-color: var(--er-payment-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  .er-booking-mode-card-icon,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  .er-booking-mode-card-label {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled\n  .er-booking-mode-card-detail {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-icon {\n  font-size: 1.75rem;\n  line-height: 1;\n  /* SVG icon sizing */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-icon\n  svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-label {\n  font-weight: 600;\n  font-size: 1rem;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-subtle);\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card-check {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n}\n\n/* Alternative link in booking mode */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-alt {\n  margin-top: 1rem;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-alt-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-alt-link:hover {\n  text-decoration: none;\n}\n\n/* Tooltip styling for disabled options */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card[aria-disabled='true'] {\n  position: relative;\n}\n\n/* Tooltip appears on hover for disabled cards */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-tooltip {\n  display: none;\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-text));\n  color: rgb(var(--tb-background));\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  white-space: normal;\n  max-width: 16rem;\n  line-height: 1.35;\n  text-align: center;\n  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-card--disabled:hover\n  .er-booking-mode-tooltip {\n  display: block;\n}\n\n/* =============================================================================\n * Block: Event Calendar\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Tier 3 vars: --ec-* (from event-calendar var generator)\n * =============================================================================\n */\n\n/* Main container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow: hidden;\n}\n\n/* Calendar navigation */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2.5rem;\n  min-height: 2.5rem;\n  padding: 0.5rem;\n  border-radius: var(--rb-block-radius);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn:hover {\n  background-color: var(--ec-nav-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  min-width: 200px;\n  text-align: center;\n}\n\n/* Day headers */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-headers {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-header {\n  text-align: center;\n  padding: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  opacity: var(--ec-header-opacity);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n/* Calendar grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n/* Day cells */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-day {\n  min-height: 100px;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  border-right: 1px solid var(--ec-border-subtle);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day:nth-child(7n) {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--other-month {\n  opacity: var(--ec-other-month-opacity);\n}\n\n/* Day number */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-number {\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  opacity: var(--ec-day-number-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today\n  .event-calendar-day-number {\n  font-weight: 700;\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n/* Events list */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Event item - solid primary background */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  background-color: var(--ec-event-solid-bg);\n  color: var(--ec-event-solid-text);\n  text-decoration: none;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  font-family: inherit;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:hover {\n  background-color: var(--ec-event-solid-hover-bg);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:focus-visible {\n  outline: 2px solid var(--ec-event-solid-bg);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-time {\n  flex-shrink: 0;\n  white-space: nowrap;\n  font-weight: 600;\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* More indicator - clickable button style */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more {\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  font-family: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:hover {\n  background-color: rgba(var(--tb-primary), 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-empty {\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n  margin-top: 1rem;\n}\n\n/* Filters container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  min-width: 180px;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  opacity: 0.7;\n}\n\n/* Event filter select inherits base styling from .form-select, only block-specific overrides here */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter-select {\n  /* Use theme input radius instead of block radius for consistency with other form inputs */\n  border-radius: var(--rb-input-radius, var(--rb-block-radius));\n}\n\n/* Category filter buttons */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-category-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:hover:not(:disabled) {\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: var(--ec-event-solid-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Allow category filter to be wider for button group */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter:has(.event-category-buttons) {\n  min-width: auto;\n  flex: 1 1 auto;\n}\n\n/* Combined mode container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-combined {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-combined-content {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Calendar view toggle (Month/Week) in Combined mode */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-toggle {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  opacity: 0.7;\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn:hover {\n  opacity: 1;\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn--active {\n  opacity: 1;\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n/* -----------------------------------------------------------------------------\n * Week Agenda View\n * Vertical agenda layout for week view with rich event details\n * ----------------------------------------------------------------------------- */\n\n/* Agenda week container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-week {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Individual day section */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-day {\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day:last-child {\n  border-bottom: none;\n}\n\n/* Day header */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-header {\n  padding: 0.75rem 0;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Today badge */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-today-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n  border-radius: var(--rb-button-radius);\n}\n\n/* Today highlight for entire day section */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day--today\n  .event-agenda-day-header {\n  background-color: var(--ec-today-bg);\n}\n\n/* Day content area */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-content {\n  padding: 0.75rem 0;\n}\n\n/* Events list within a day */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n * Agenda Event Card\n * Rich event card for agenda view\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 0.75rem;\n  background-color: var(--ec-surface);\n  border: 1px solid var(--ec-border-subtle);\n  border-radius: var(--rb-block-radius);\n  text-decoration: none;\n  color: inherit;\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card:hover {\n  border-color: rgba(var(--tb-primary), 0.5);\n  background-color: var(--ec-event-bg);\n}\n\n/* Category color indicator */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-indicator {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  border-radius: 2px;\n  min-height: 2.5rem;\n}\n\n/* Card content wrapper */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Header row: time + title */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-header {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-time {\n  font-size: 0.75rem;\n  font-weight: 600;\n  opacity: var(--ec-time-opacity);\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.3;\n}\n\n/* Details row: venue, price, capacity */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-details {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-icon {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-price {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-capacity {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-capacity--full {\n  font-weight: 600;\n}\n\n/*\n * Agenda rows\n *\n * The modal keeps the original button card above. Published agenda rows use\n * an article so their title and booking action can be separate, accessible\n * links without nesting anchors.\n */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda {\n  display: grid;\n  grid-template-columns: 0.25rem minmax(4.5rem, auto) minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: 1rem;\n  padding: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-indicator {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  > .event-agenda-card-time {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-content {\n  grid-column: 3;\n  grid-row: 1;\n  display: block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title {\n  margin: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a:hover {\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-details {\n  align-items: baseline;\n  gap: 0.25rem 0.6rem;\n  margin-top: 0.2rem;\n  font-size: 0.75rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-location {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-action {\n  grid-column: 4;\n  grid-row: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.5rem;\n  min-width: max-content;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-price {\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-status {\n  font-size: 0.75rem;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-icon {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-empty {\n  margin: 0;\n  padding: 2rem 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda {\n    grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr);\n    grid-template-areas:\n      'time content'\n      'action action';\n    align-items: start;\n    column-gap: 0.75rem;\n    row-gap: 0.65rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-indicator {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    > .event-agenda-card-time {\n    grid-area: time;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-content {\n    grid-area: content;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-action {\n    grid-area: action;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Timetable View\n * Time-grid layout for recurring class schedules\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-timetable {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-selector {\n  display: none;\n  gap: 0.375rem;\n  overflow-x: auto;\n  padding-bottom: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab {\n  flex: 0 0 auto;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  background: transparent;\n  color: var(--ec-text);\n  cursor: pointer;\n  font: inherit;\n  font-size: 0.8125rem;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-grid {\n  display: grid;\n  grid-template-columns: 4.5rem repeat(7, minmax(8rem, 1fr));\n  min-width: 62rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-rail,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day {\n  border-right: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-heading {\n  min-height: 3.25rem;\n  margin: 0;\n  padding: 0.75rem 0.5rem;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day--today\n  .event-timetable-day-heading {\n  background-color: var(--ec-today-bg);\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-today-badge {\n  padding: 0.125rem 0.375rem;\n  border-radius: var(--rb-button-radius);\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-body {\n  position: relative;\n  height: clamp(\n    34rem,\n    calc(var(--event-timetable-range-minutes, 900) * 0.055rem),\n    56rem\n  );\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body {\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-label {\n  position: absolute;\n  left: 0.625rem;\n  transform: translateY(-50%);\n  font-size: 0.6875rem;\n  opacity: 0.65;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-hour-line {\n  position: absolute;\n  left: 0;\n  right: 0;\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event {\n  position: absolute;\n  min-height: 2.75rem;\n  padding: 0.375rem 0.5rem;\n  border: 1px solid var(--ec-border-subtle);\n  border-left-width: 4px;\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  color: var(--ec-text);\n  box-shadow: 0 1px 2px rgba(var(--tb-text), 0.08);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  overflow: hidden;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:hover {\n  box-shadow: 0 4px 12px rgba(var(--tb-text), 0.12);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time {\n  font-size: 0.6875rem;\n  font-weight: 700;\n  opacity: var(--ec-time-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title {\n  font-size: 0.8125rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta {\n  font-size: 0.6875rem;\n  opacity: 0.72;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  opacity: 0.85;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity--full {\n  color: rgb(var(--tb-danger, 220 38 38));\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-empty {\n  margin: 0;\n  padding: 1rem 0.5rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-empty {\n  margin: 0.25rem 0 0;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day-selector {\n    display: flex;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-container {\n    overflow: hidden;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-grid {\n    grid-template-columns: 4rem minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day[data-selected='false'] {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day {\n    border-right: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-time-rail {\n    border-right: 1px solid var(--ec-border-subtle);\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-timetable-day-heading {\n    justify-content: flex-start;\n    padding-inline: 0.75rem;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Board View\n * Compact \"class day-board\": day columns side by side, one card per class,\n * three-state availability (available / filling / waitlist), and a footer CTA.\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-week-board {\n  /* Status accent tokens \u2014 map the three availability states onto theme colours.\n   * available -> secondary, filling -> accent, waitlist -> muted text. */\n  --ec-status-available: rgb(var(--tb-secondary));\n  --ec-status-filling: rgb(var(--tb-accent));\n  --ec-status-waitlist: rgba(var(--tb-text), 0.4);\n  --event-week-board-cols: 7;\n\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  background-color: var(--ec-surface);\n  color: var(--ec-text);\n  overflow: hidden;\n}\n\n/* Opt-in raised look: a soft drop shadow so the board lifts off the page.\n * Generic default (no [data-elevated]) stays flat. */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board[data-elevated] {\n  box-shadow: 0 14px 34px -24px rgba(var(--tb-text), 0.35);\n}\n\n/* Top bar: authored title + week navigation + legend */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-top {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: 1rem;\n  padding: 1.1rem 1.5rem;\n  /* surfaceAlt gives the header/footer a legible tint against the white day-grid\n   * body \u2014 the faint `--ec-header-bg` (5% text) is invisible on light palettes. */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-title {\n  grid-column: 1;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-navigation {\n  grid-column: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.65rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border: 1px solid var(--ec-border);\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:hover {\n  background-color: var(--ec-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-range {\n  min-width: 12rem;\n  margin: 0;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-loading {\n  font-weight: 400;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend {\n  grid-column: 3;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 1.1rem;\n  flex-wrap: wrap;\n  font-size: 0.6875rem;\n  letter-spacing: 0.03em;\n  opacity: 0.75;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  color: rgb(var(--tb-error, var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error\n  p {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot {\n  width: 0.55rem;\n  height: 0.55rem;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='available'] {\n  background-color: var(--ec-status-available);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='filling'] {\n  background-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='waitlist'] {\n  background-color: var(--ec-status-waitlist);\n}\n\n/* Day columns grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--event-week-board-cols), minmax(0, 1fr));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day {\n  display: flex;\n  flex-direction: column;\n  min-height: 15rem;\n  /* Tabular column rule. Driven by the theme border tokens so borderless site\n   * styles (border.width: 'none' -> --rb-border-width: 0) render no grid at all,\n   * while hairline/thin/thick themes get a crisp full-strength divider. */\n  border-right: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.4rem;\n  padding: 0.9rem 0.9rem 0.65rem;\n  /* Header-row underline \u2014 same border-token gating as the column rules. */\n  border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-head {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-abbr {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-abbr {\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-num {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  opacity: 0.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.65rem;\n  padding: 0.9rem;\n  flex: 1;\n}\n\n/* Class card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.45rem;\n  padding: 0.8rem 0.85rem;\n  /* Full hairline border at the site style's border strength (0 on borderless\n   * styles), alongside the exaggerated status stripe on the left. `--ec-border-subtle`\n   * (half-strength) reads as no border at all on light palettes. */\n  border: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  border-left: 3px solid var(--ec-status-available);\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  color: inherit;\n  text-decoration: none;\n  transition:\n    transform var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='filling'] {\n  border-left-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='waitlist'] {\n  border-left-color: var(--ec-status-waitlist);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px -8px rgba(var(--tb-text), 0.28);\n  border-color: rgba(var(--tb-primary), 0.4);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-title {\n  font-family: var(--font-heading, inherit);\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-time {\n  font-size: 0.75rem;\n  letter-spacing: 0.01em;\n  opacity: 0.7;\n}\n\n/* Capacity pill */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  padding: 0.15rem 0.6rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  /* Available (default): a calm neutral/muted pill \u2014 not a coloured outline.\n   * Filling -> amber and waitlist -> muted outline are handled by the\n   * data-status overrides below. */\n  border: 1px solid var(--ec-border);\n  background-color: rgba(var(--tb-text), 0.06);\n  color: rgba(var(--tb-text), 0.62);\n  border-color: var(--ec-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='filling'] {\n  background-color: rgba(var(--tb-accent), 0.14);\n  color: var(--ec-status-filling);\n  border-color: rgba(var(--tb-accent), 0.32);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='waitlist'] {\n  background-color: transparent;\n  color: rgba(var(--tb-text), 0.6);\n  border-color: var(--ec-border);\n}\n\n/* Footer */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n  padding: 1.1rem 1.5rem;\n  /* Matches the header tint (see .event-week-board-top). */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot-note {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.75;\n}\n\n/* Responsive: collapse day columns to a stacked list on narrow viewports */\n@container rb-site (max-width: 1023px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-top {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-title,\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation,\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    grid-column: 1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-grid {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day {\n    min-height: 0;\n    border-right: none;\n    border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day:last-child {\n    border-bottom: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day--empty {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day-head {\n    border-bottom: none;\n    padding-bottom: 0.25rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-day-body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    padding-top: 0.35rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 14rem;\n  }\n}\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation {\n    display: grid;\n    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;\n    width: 100%;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation\n    > :last-child {\n    grid-column: 1 / -1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-range {\n    min-width: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 100%;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week-board section band\n * Give the whole week-board section (head + panel) a subtle surface band so it\n * reads as a distinct zone from the page \u2014 the \"testimonials band\" pattern.\n * Painted as a pseudo-element above the section's fallback background layer\n * (z-index -10) but behind the content, so no block-content wiring is needed.\n * Surface + hairline rules are token-referenced: on a borderless site style\n * (--rb-border-width: 0) the band keeps its surface tint but drops the rules.\n * Opt-in only: the band paints when the board root carries [data-banded];\n * the generic default is bandless.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope)\n  [data-slot='section']:has(.event-calendar--week-board[data-banded])::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -9;\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-block: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  pointer-events: none;\n}\n\n/* -----------------------------------------------------------------------------\n * Event section head \u2014 split (heading left, intro right)\n * Rendered by the block frame (outside [data-block=\"event-calendar\"]) via\n * eventSectionHeaderLayoutNodes({ splitClassName }). Lays the heading and its\n * supporting intro out as a two-column head on wide viewports, stacking on\n * narrow ones. The section band above provides the distinct background.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope) .event-section-head--split {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: clamp(1.5rem, 4vw, 3.5rem);\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) .event-section-head--split > :where(h1, h2, h3) {\n  margin: 0;\n}\n\n:where(.theme-scope) .event-section-head--split > .rb-prose {\n  flex: 1 1 22rem;\n  max-width: 34rem;\n  margin: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .event-section-head--split {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-section-head--split > .rb-prose {\n    flex-basis: auto;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Event Calendar Modals\n * Modal overlays for event details and day events list\n * ----------------------------------------------------------------------------- */\n\n/* Modal overlay */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--ec-modal-overlay-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Body-level modal portal baseline: clear sticky site/editor chrome unless a theme deliberately overrides it. */\n  z-index: var(--ec-modal-z-index, 20000);\n  padding: 1rem;\n  animation: ec-modal-fade-in 150ms ease-out;\n}\n\n@keyframes ec-modal-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal dialog */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal {\n  position: relative;\n  background: var(--ec-modal-bg);\n  border-radius: var(--rb-block-radius);\n  max-width: 28rem;\n  width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n  box-shadow: var(--ec-modal-shadow);\n  animation: ec-modal-slide-in 200ms ease-out;\n}\n\n@keyframes ec-modal-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* Event modal - constrained width for card */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--event {\n  max-width: 26rem;\n}\n\n/* Day modal */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--day {\n  max-width: 28rem;\n}\n\n/* Close button */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--ec-text);\n  opacity: 0.6;\n  cursor: pointer;\n  border-radius: 50%;\n  transition:\n    opacity var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:hover {\n  opacity: 1;\n  background-color: rgba(var(--tb-text), 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Modal header (for day modal) */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-header {\n  padding: 1.5rem 1.5rem 1rem;\n  padding-right: 3rem; /* Space for close button */\n  border-bottom: 1px solid var(--ec-border);\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--ec-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-subtitle {\n  font-size: 0.875rem;\n  color: var(--ec-text);\n  opacity: 0.7;\n  margin: 0.25rem 0 0;\n}\n\n/* Modal content */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-content {\n  padding: 1rem;\n}\n\n/* Event modal: tighter padding for card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal--event\n  .ec-modal-content {\n  padding: 0.5rem;\n}\n\n/* Day events list */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-day-events-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* AgendaEventCard in button mode inherits most styles, just needs cursor */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  button.event-agenda-card {\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n}\n\n/* Responsive adjustments */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-container {\n    margin-left: -1.5rem;\n    margin-right: -1.5rem;\n    border-left: none;\n    border-right: none;\n    border-radius: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-day-header {\n    font-size: 0.75rem;\n    padding: 0.375rem 0.125rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-day {\n    min-height: 88px;\n    padding: 0.125rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-title {\n    font-size: 0.9375rem;\n    min-width: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-day-number {\n    font-size: 0.75rem;\n    margin-bottom: 0.125rem;\n    padding: 0 0.125rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-event {\n    justify-content: center;\n    gap: 0.25rem;\n    padding: 0.1875rem 0.25rem;\n    font-size: 0.6875rem;\n    border-radius: calc(var(--rb-block-radius) / 3);\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-event-time {\n    text-align: center;\n    font-size: 0.625rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-event-title {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-more {\n    padding: 0.125rem 0.25rem;\n    font-size: 0.6875rem;\n  }\n\n  :where(.theme-scope)\n    :where([data-block='event-calendar'])\n    .event-calendar-header\n    > button {\n    margin-right: 0.25rem;\n  }\n\n  :where(.theme-scope) :where([data-block='event-calendar']) .ec-modal {\n    max-width: 100%;\n    max-height: 85vh;\n    margin: 0 0.5rem;\n  }\n}\n}\n\n/*\n * Shared: Tab bar (underline style)\n *\n * Used by:\n * - Event Calendar (combined list/calendar view)\n * - Customer Portal (section navigation)\n *\n * Styling is driven by --rb-tab-* CSS variables.\n */\n\n:where(.theme-scope) .nav-tabs {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: var(--rb-tab-border-width, 1px) solid var(--rb-tab-border-color, rgb(var(--tb-border)));\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) .nav-tab {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  border-bottom: var(--rb-tab-active-border-width, 2px) solid transparent;\n  margin-bottom: calc(-1 * var(--rb-tab-border-width, 1px));\n  cursor: pointer;\n  color: var(--rb-tab-text, rgb(var(--tb-text)));\n  opacity: var(--rb-tab-opacity, 0.7);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) .nav-tab:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) .nav-tab--active {\n  opacity: 1;\n  border-bottom-color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n  color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n}\n\n/* =============================================================================\n * Block: Appointment Booking\n *\n * Structural styling comes from the shared registration-surface layer\n * (registration-surface.css): surface container, option cards + check,\n * step indicator, wizard actions, on-surface text ramp, stacks, summary box\n * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped\n * from this block's --ab-* Tier 3 vars by its var generator.\n *\n * Inputs use the theme-generated form-* classes; feedback boxes use the\n * theme-generated alert / alert-{tone} classes. Only genuinely\n * booking-specific rules live here.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette)\n * - Tier 3 vars: --ab-* (from appointment-booking var generator)\n * =============================================================================\n */\n\n/* Typography helpers */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-subtitle {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--sm {\n  font-size: 0.75rem;\n}\n\n/* Centered state (loading / terminal panels) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n/* Terminal state title (below the state icon) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-terminal-title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--success {\n  background: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));\n  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--error {\n  background: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));\n  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--info {\n  background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));\n  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--warning {\n  background: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));\n  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));\n}\n\n/* Payment option summary rows (label/value lines inside an option card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-option-rows {\n  display: grid;\n  gap: 0.125rem;\n}\n\n/* Date/time pill grids (selection pills extend .rb-option-card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-date-pill {\n  flex-direction: column;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0.5rem 0.875rem;\n  min-width: 4.25rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-time-pill {\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.875rem;\n  min-width: 5.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-caption {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0;\n  line-height: 1.2;\n  text-transform: uppercase;\n  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-value {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell {\n  min-height: 18rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell-button {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);\n  background: rgb(var(--tb-primary, 17 24 39));\n  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* Inline text-link button (e.g. \"Load more dates\") */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link {\n  display: inline;\n  color: rgb(var(--tb-primary, 17 24 39));\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link:hover {\n  text-decoration: none;\n}\n\n/* Altcha wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-altcha {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Shared: Inline Text Marks\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-inline-text-accent,\n:where(.theme-scope) .rb-inline-text-highlight {\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n}\n\n:where(.theme-scope) .rb-inline-text-accent-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-brand {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-contrast {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) .rb-inline-text-highlight {\n  border-radius: 0.22em;\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n  padding: 0.02em 0.12em;\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-soft {\n  background: color-mix(in oklab, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-accent {\n  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-brand {\n  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);\n}\n\n/* =============================================================================\n * Block: Hero (Phase 2)\n * Uses theme palette vars directly (no Tier 3 vars needed)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* Subheadline - supporting text below headline */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-headline {\n  text-wrap: balance;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-subheadline {\n  font-size: 1.125rem;\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-subheadline {\n    font-size: 1.25rem;\n  }\n}\n}\n\n/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-headline {\n  font-size: clamp(2rem, 4vw, 3rem);\n  line-height: 1.12;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-subheadline {\n  font-size: clamp(1rem, 1.2vw, 1.25rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-headline {\n  font-size: clamp(2.75rem, 5.6vw, 4.75rem);\n  line-height: 1.06;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-subheadline {\n  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline {\n  font-size: clamp(3.5rem, 7.2vw, 6.25rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-subheadline {\n  font-size: clamp(1.125rem, 1.5vw, 1.5rem);\n  line-height: 1.5;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline {\n  font-size: clamp(4.25rem, 10vw, 8.5rem);\n  line-height: 0.94;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-subheadline {\n  font-size: clamp(1.125rem, 1.4vw, 1.5rem);\n  line-height: 1.45;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {\n  font-size: clamp(3.5rem, 7.5vw, 6.5rem);\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n  font-size: clamp(3rem, 6vw, 5.25rem);\n  line-height: 1.02;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline,\n  :where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n    font-size: clamp(2.5rem, 11vw, 3.5rem);\n    line-height: 1.05;\n  }\n}\n}\n\n/* =============================================================================\n * Shared: Heading Group (used by CTA, single-button, etc.)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: CTA (Phase 2)\n * =============================================================================\n */\n\n/* CTA content/body text */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-content {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n/* CTA button row container */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Text-style CTA actions belong to the section foreground contract. */\n:where(.theme-scope) [data-block=\"cta-full\"] .cta-row .button-link {\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, rgb(var(--tb-primary))));\n}\n\n/* =============================================================================\n * Block: Body Text (content block, Phase 2)\n *\n * Style contract:\n * - Variant styling is keyed off `data-block-variant` on the PageRenderer wrapper.\n * - Prose sizing comes from `rb-prose-*` (theme-aware) in `packages/blocks/src/theme/styles.css`.\n * =============================================================================\n */\n\n/* Body copy rich text container */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container {\n  max-width: 48rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container.rb-items-center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Body copy rich text */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body {\n  color: inherit;\n}\n\n/* Ensure editing mode doesn't silently change typography inside ProseMirror */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body :where(.ProseMirror) {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n/* Variant: Intro (centered, wider container, larger text, relaxed leading) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-container {\n  max-width: 60rem;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n  font-size: var(--rb-prose-lg-font-size);\n  line-height: var(--rb-prose-lg-line-height);\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n    font-size: var(--rb-prose-xl-sm-font-size);\n    line-height: var(--rb-prose-xl-sm-line-height);\n  }\n}\n}\n\n/* Variant: Narrow (left-aligned, shorter line length) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"narrow\"]) .body-copy-container {\n  max-width: 34rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n/* Override prose sizing via theme-aware vars (see styles.css) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) {\n  /* Mobile-first: use rb-prose-lg sizing below 640px */\n  --rb-prose-lg-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.35),\n    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),\n    calc(var(--fs-body, 16px) * 1.6)\n  );\n  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);\n\n  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */\n  --rb-prose-xl-sm-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.55),\n    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),\n    calc(var(--fs-body, 16px) * 1.8)\n  );\n  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);\n}\n\n/* =============================================================================\n * Block: Form (formCopy fragment, Phase 2)\n * =============================================================================\n */\n\n/* Form title */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n/* Form intro text */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-intro {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* =============================================================================\n * Form Block (fb-*)\n *\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive\n * - Tier 2 vars: --rb-block-radius\n * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*\n *\n * Note: Form input styling (form-input, form-select, etc.) is handled by\n * the input CSS generator. These styles are for form container/state only.\n * ============================================================================= */\n\n/* Form container */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Two-column row (opt-in per field via schema layout) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n/* Field wrapper */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Fieldset (for radio groups) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Success state */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Error banner */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 0.75rem;\n  font-size: 0.875rem;\n  margin-bottom: 0.5rem;\n}\n\n/* Empty state (no form data) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n/* Form actions (submit button container) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block-Level Override Utilities\n *\n * These utility classes replace Tailwind theming utilities for block-level\n * settings like \"raised\" and \"rounded\". They use fixed values to match\n * Tailwind's defaults while allowing us to remove theming classes from safelist.\n * =============================================================================\n */\n\n/* Border Radius Utilities (replaces rounded-*) */\n:where(.theme-scope) .rb-rounded-sm {\n  border-radius: 0.125rem;\n}\n\n:where(.theme-scope) .rb-rounded-md {\n  border-radius: 0.375rem;\n}\n\n:where(.theme-scope) .rb-rounded-lg {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) .rb-rounded-xl {\n  border-radius: 0.75rem;\n}\n\n:where(.theme-scope) .rb-rounded-2xl {\n  border-radius: 1rem;\n}\n\n:where(.theme-scope) .rb-rounded-full {\n  border-radius: 9999px;\n}\n\n/* Shadow Utilities (defined in rb-utilities.css; theme-driven via --shadow-*) */\n\n/* =============================================================================\n * Block: Event List (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Empty state container */\n:where(.theme-scope) .event-list-empty {\n  border-radius: 0.75rem; /* rounded-xl equivalent */\n  border: 1px dashed rgb(var(--tb-border));\n  padding: 3rem;\n  text-align: center;\n}\n\n/* Reset filters button in empty state */\n:where(.theme-scope) .event-reset-filters-btn {\n  display: inline-block;\n  margin-top: 1rem;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgb(var(--tb-primary));\n  background: transparent;\n  border: 1px solid rgb(var(--tb-primary));\n  border-radius: var(--rb-button-radius, 0.375rem);\n  cursor: pointer;\n  transition:\n    background-color var(--rb-block-transition, 150ms) ease,\n    color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) .event-reset-filters-btn:hover {\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n:where(.theme-scope) .event-reset-filters-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Event titles always link to the event page, so a card or row whose CTA is\n   hidden (sold out, closed) is never a dead end (issue 1372). The link inherits\n   the heading's colour and only reveals itself on hover or keyboard focus.\n   Shared by EventCard, EventCompactRow and the offerings-preview course cards via `.event-title-link`. */\n:where(.theme-scope) .event-title-link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-title-link:hover,\n:where(.theme-scope) .event-title-link:focus-visible {\n  text-decoration: underline;\n  text-underline-offset: 0.12em;\n}\n\n/* Catalogue cards can keep their media footprint when an event has no\n   resolved image. The date remains useful content and follows the site's\n   palette and typography tokens. */\n:where(.theme-scope) .event-card-date-fallback {\n  position: relative;\n  display: flex;\n  min-height: var(--rb-event-card-media-height, 16rem);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.125rem;\n  overflow: hidden;\n  padding: 1.125rem;\n  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));\n  background: rgb(var(--tb-surfaceAlt, var(--tb-surface, 255 255 255)));\n  color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .event-card-date-fallback::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: radial-gradient(\n    120% 140% at 0% 0%,\n    color-mix(in srgb, rgb(var(--tb-primary, 0 0 0)) 11%, transparent),\n    transparent 62%\n  );\n  content: '';\n}\n\n:where(.theme-scope) .event-card-date-fallback-label,\n:where(.theme-scope) .event-card-date-fallback-value {\n  position: relative;\n}\n\n:where(.theme-scope) .event-card-date-fallback-label {\n  color: rgb(var(--tb-mutedText, var(--tb-muted, 107 114 128)));\n  font-size: 0.72rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .event-card-date-fallback-value {\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 500;\n  letter-spacing: -0.025em;\n  line-height: 1.04;\n}\n\n:where(.theme-scope) .event-card-price {\n  color: rgb(var(--tb-text, 17 24 39));\n  font-weight: 600;\n}\n\n/* =============================================================================\n * Block: Carousel Navigation (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Layout\n *\n * Keep slide sizing/spacing as a single source of truth, shared by:\n * - SSR fallback (scrollable shell)\n * - Hydrated Embla carousel\n *\n * We use the padding/margin approach for slide spacing:\n * - Slides have symmetric left/right padding (half the gap each side)\n * - Track has negative margins to keep first/last slide flush with viewport edges\n * - This works reliably with Embla's position calculations\n *\n * Slides-per-view is provided via CSS vars set on `.carousel-root`:\n * - --rb-carousel-slides-to-show-mobile\n * - --rb-carousel-slides-to-show-tablet (optional)\n * - --rb-carousel-slides-to-show-desktop (optional)\n */\n:where(.theme-scope) .carousel-root {\n  --rb-carousel-slide-spacing: 1rem;\n  --rb-carousel-slides-to-show: var(--rb-carousel-slides-to-show-mobile, 1);\n}\n\n:where(.theme-scope) .carousel-root.rb-image-gallery-carousel--full-bleed {\n  --rb-carousel-slide-spacing: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-tablet,\n      var(--rb-carousel-slides-to-show-mobile, 1)\n    );\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-desktop,\n      var(\n        --rb-carousel-slides-to-show-tablet,\n        var(--rb-carousel-slides-to-show-mobile, 1)\n      )\n    );\n  }\n}\n}\n\n/* Slides take exact percentage width with internal padding for gaps.\n * Padding is more reliable than margin (no collapsing, consistent on all slides). */\n:where(.theme-scope) .carousel-root .carousel-slide,\n:where(.theme-scope) .carousel-root .rb-overflow-x-auto > .rb-flex > * {\n  flex: 0 0 calc(100% / var(--rb-carousel-slides-to-show));\n  min-width: 0;\n  box-sizing: border-box;\n  padding-left: calc(var(--rb-carousel-slide-spacing) / 2);\n  padding-right: calc(var(--rb-carousel-slide-spacing) / 2);\n}\n\n/* Navigation buttons + dots are intentionally Tailwind-free and scoped to the\n * hydrated carousel root to avoid leaking styles globally. */\n:where(.theme-scope) .carousel-root .carousel-nav-btn {\n  position: absolute;\n  top: 50%;\n  z-index: 10;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 2.5rem;\n  width: 2.5rem;\n  border-radius: 9999px;\n  border: 1px solid rgba(var(--tb-border, 229 231 235), 0.35);\n  background-color: rgba(var(--tb-surface, 248 250 252), 0.9);\n  color: rgb(var(--tb-text, 17 24 39));\n  box-shadow: 0 4px 6px -1px rgba(var(--tb-shadow), 0.1),\n    0 2px 4px -2px rgba(var(--tb-shadow), 0.1);\n  cursor: pointer;\n  transform: translateY(-50%);\n  transition: background-color 0.2s ease, box-shadow 0.2s ease,\n    opacity 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--prev {\n  left: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--next {\n  right: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:hover {\n  background-color: rgb(var(--tb-surface, 248 250 252));\n  box-shadow: 0 10px 15px -3px rgba(var(--tb-shadow), 0.1),\n    0 4px 6px -4px rgba(var(--tb-shadow), 0.1);\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Hover-only arrows (no group-hover utilities in SDK runtime) */\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"] .carousel-nav-btn {\n  opacity: 0;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:hover .carousel-nav-btn,\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:focus-within .carousel-nav-btn {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Dots */\n:where(.theme-scope) .carousel-root .carousel-dots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* Dots overlaid on the bottom of the carousel (used for image-dominant variants). */\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dots {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0.75rem;\n  z-index: 10;\n  margin-top: 0;\n  padding: 0.5rem 0.75rem;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  pointer-events: auto;\n}\n\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  background-color: rgba(var(--tb-surface, 248 250 252), 0.55);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot:hover {\n  background-color: rgba(var(--tb-surface, 248 250 252), 0.75);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 9999px;\n  border: none;\n  background-color: rgb(var(--tb-border, 229 231 235));\n  transition: background-color 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:hover {\n  background-color: rgba(var(--tb-text, 17 24 39), 0.3);\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(var(--tb-primary, 59 130 246), 0.35);\n}\n\n/* =============================================================================\n * Block: Shop\n * Uses theme palette vars directly\n * ============================================================================= */\n\n/* Shop container */\n:where(.theme-scope) .shop {\n  width: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));\n  --rb-modal-z-index: 20000;\n  --rb-modal-text: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-heading: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-link: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-modal-supporting: rgb(var(--tb-mutedText, 100 116 139));\n  --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));\n  --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));\n}\n\n:where(.theme-scope) .shop--empty {\n  text-align: center;\n  padding: 3rem 1rem;\n}\n\n:where(.theme-scope) .shop__empty-text {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText))));\n  font-size: var(--fs-body, 1rem);\n}\n\n/* Error display */\n:where(.theme-scope) .shop__error {\n  background-color: rgba(var(--tb-destructive), 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.75rem 1rem;\n  border-radius: var(--shop-control-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Sections */\n:where(.theme-scope) .shop__section {\n  margin-bottom: 2rem;\n}\n\n:where(.theme-scope) .shop__section:last-child {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop__section-heading {\n  font-size: var(--fs-h3, 1.25rem);\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text))));\n  margin-bottom: 1rem;\n  font-family: var(--font-heading);\n}\n\n/* Products grid/list layout */\n:where(.theme-scope) .shop__products--grid {\n  display: grid;\n  grid-template-columns: repeat(var(--shop-columns, 2), 1fr);\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__products--list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Compact product register: useful for small, scannable pass/package sets. */\n:where(.theme-scope) .shop--register .shop__section {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__section-heading {\n  margin-bottom: 1rem;\n  font-size: clamp(1.4rem, 2.2vw, 1.7rem);\n}\n\n:where(.theme-scope) .shop--register .shop__products--register {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .shop--register .shop__card {\n  display: grid;\n  grid-template-columns: minmax(8rem, 0.85fr) auto minmax(12rem, 1.5fr) auto;\n  grid-template-rows: auto;\n  align-items: center;\n  column-gap: clamp(1rem, 3vw, 2.5rem);\n  padding: 1rem 0;\n  border: 0;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  --rb-surface-text-color: inherit;\n  --rb-surface-heading-color: inherit;\n  --rb-surface-link-color: inherit;\n  --rb-surface-link-hover-color: inherit;\n  --rb-surface-link-hover-decoration: inherit;\n  --rb-surface-supporting-color: inherit;\n}\n\n:where(.theme-scope) .shop--register .shop__card-header {\n  display: contents;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name,\n:where(.theme-scope) .shop--register .shop__card-price,\n:where(.theme-scope) .shop--register .shop__card-details,\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  margin: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: 1.15rem;\n  font-weight: 400;\n}\n\n:where(.theme-scope) .shop--register .shop__card-price {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.98rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, inherit));\n}\n\n:where(.theme-scope) .shop--register .shop__card-description {\n  grid-column: 1 / -1;\n  margin-top: 0.35rem;\n}\n\n:where(.theme-scope) .shop--register .shop__card-details {\n  grid-column: 3;\n  grid-row: 1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.35rem 1rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n}\n\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  grid-column: 4;\n  grid-row: 1;\n  align-self: center;\n  margin-left: auto;\n}\n\n:where(.theme-scope) .shop--register .shop__card > [role='status'] {\n  grid-column: 1 / -1;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .shop--register .shop__card {\n    grid-template-columns: minmax(0, 1fr) auto;\n    row-gap: 0.45rem;\n  }\n\n  :where(.theme-scope) .shop--register .shop__card-name {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope) .shop--register .shop__card-price {\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  :where(.theme-scope) .shop--register .shop__card-details {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n\n  :where(.theme-scope) .shop--register .shop__cta,\n  :where(.theme-scope) .shop--register .shop__purchase-unavailable {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    justify-self: start;\n    margin-left: 0;\n  }\n}\n}\n\n/* Product card */\n:where(.theme-scope) .shop__card {\n  background: rgb(var(--tb-surface));\n  color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39))));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n/* No hover shadow (buttons + theme do the emphasis) */\n\n:where(.theme-scope) .shop__card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__card-name {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, rgb(var(--tb-text)));\n  margin: 0;\n  font-family: var(--font-heading);\n}\n\n:where(.theme-scope) .shop__card-price {\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: var(--rb-surface-link-color, rgb(var(--tb-primary)));\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .shop__card-interval {\n  font-size: 0.875rem;\n  font-weight: 400;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-description {\n  font-size: 0.875rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  line-height: 1.5;\n  margin: 0;\n}\n\n:where(.theme-scope) .shop__card-details {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) .shop__card-credits {\n  font-weight: 500;\n}\n\n:where(.theme-scope) .shop__card-per-credit {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-validity {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-unlimited {\n  font-weight: 500;\n  color: var(--rb-surface-link-color, rgb(var(--tb-secondary, var(--tb-primary))));\n}\n\n/* CTA layout: use theme button classes for visuals */\n:where(.theme-scope) .shop__cta {\n  margin-top: auto;\n  align-self: flex-start;\n}\n\n:where(.theme-scope) .shop__purchase-unavailable {\n  margin: auto 0 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n/* Responsive grid */\n@container rb-site (max-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .shop__products--grid {\n    grid-template-columns: 1fr;\n  }\n}\n}\n\n:where(.theme-scope) .shop__modal-product {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1rem;\n}\n\n:where(.theme-scope) .shop__modal-interval {\n  font-size: 0.875rem;\n}\n\n/* Checkout form */\n:where(.theme-scope) .shop__modal-form {\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope) .shop__form-field {\n  margin-bottom: 1rem;\n}\n\n/* Modal error */\n:where(.theme-scope) .shop__modal-error {\n  background-color: rgba(var(--tb-destructive), 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.625rem 0.75rem;\n  border-radius: var(--shop-control-radius);\n  font-size: 0.875rem;\n  margin-bottom: 1rem;\n}\n\n/* Modal actions */\n:where(.theme-scope) .shop__modal-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Duplicate membership warning */\n:where(.theme-scope) .shop__modal-warning {\n  padding: 0.5rem 0 0;\n}\n\n:where(.theme-scope) .shop__modal-warning-title {\n  font-size: 1rem;\n  font-weight: 600;\n  color: rgb(var(--tb-text));\n  margin: 0 0 0.5rem;\n}\n\n:where(.theme-scope) .shop__modal-warning-text {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1.25rem;\n  line-height: 1.5;\n}\n\n:where(.theme-scope) .shop__modal-warning-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Post-checkout return notice */\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return {\n  text-align: center;\n  padding: 1.5rem 1rem;\n  margin-bottom: 1.25rem;\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  background: rgb(var(--tb-surface));\n  color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));\n  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39))));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--success {\n  background: rgba(var(--tb-success), 0.12);\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--warning {\n  background: rgba(var(--tb-warning), 0.12);\n  color: rgb(var(--tb-warning));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-title {\n  margin: 0.25rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n  font-family: var(--font-heading);\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-text {\n  margin: 0;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-dismiss {\n  margin-top: 0.875rem;\n}\n\n/* Mobile: full-width CTA buttons inside cards */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .shop__cta {\n    align-self: stretch;\n    width: 100%;\n  }\n}\n}\n\n/* =============================================================================\n * Block: Customer Portal\n * Uses --cp-* CSS variables (Tier 3)\n * ============================================================================= */\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-container {\n  font-family: var(--font-body);\n  font-size: var(--fs-body);\n  min-height: 200px;\n}\n\n/* Loading state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Login form */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login {\n  max-width: 480px;\n  margin: 0 auto;\n  padding: 2rem;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__title {\n  margin: 0 0 0.5rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__subtitle {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0 0 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__helper {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: var(--cp-muted);\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:hover {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 3px;\n}\n\n/* Form controls (layout only; actual form styling is theme-driven via .form-label/.form-input) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n/* Buttons: Uses theme button classes (primary, secondary, btn-sm, etc.) - no custom styles needed */\n\n/* Alerts */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert {\n  padding: 1rem 1.25rem;\n  border-radius: var(--cp-control-radius);\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  border-left: 4px solid transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--success {\n  background: var(--cp-alert-success-bg);\n  color: var(--cp-alert-success-text);\n  border-color: var(--cp-alert-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--error {\n  background: var(--cp-alert-error-bg);\n  color: var(--cp-alert-error-text);\n  border-color: var(--cp-alert-error-border);\n}\n\n/* Header */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n  margin-bottom: 1rem;\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-header__welcome {\n  font-size: 1.125rem;\n  font-weight: 500;\n}\n\n/* Content area */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-content {\n  min-height: 200px;\n}\n\n/* Section */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section {\n  animation: cp-fade-in 200ms ease;\n}\n\n@keyframes cp-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Empty state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px dashed var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Card */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n  padding: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-title {\n  font-weight: 600;\n  font-size: 1rem;\n  color: var(--cp-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-subtitle {\n  font-size: 0.875rem;\n  margin: 0.25rem 0 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-body {\n  font-size: 0.9375rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Event waitlists */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-list {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlists\n  > .cp-alert {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-card {\n  transition:\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card--focused {\n  border-color: var(--cp-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 22%, transparent);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__summary,\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__position {\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card\n  .cp-card-body\n  p {\n  margin: 0.4rem 0;\n}\n\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-header {\n    flex-direction: column-reverse;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions\n    > * {\n    justify-content: center;\n    text-align: center;\n  }\n}\n}\n\n/* Badge */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 9999px;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--success {\n  background: var(--cp-badge-success-bg);\n  color: var(--cp-badge-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--warning {\n  background: var(--cp-badge-warning-bg);\n  color: var(--cp-badge-warning-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--error {\n  background: var(--cp-badge-error-bg);\n  color: var(--cp-badge-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--info {\n  background: var(--cp-badge-info-bg);\n  color: var(--cp-badge-info-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--default {\n  background: var(--cp-badge-default-bg);\n  color: var(--cp-badge-default-text);\n}\n\n/* Progress bar (for credit display) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress {\n  height: 0.5rem;\n  background: var(--cp-progress-bg);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress__fill {\n  height: 100%;\n  background: var(--cp-progress-fill);\n  border-radius: 9999px;\n  transition: width 300ms ease;\n}\n\n/* Profile display */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-width: 500px;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__tiles {\n  /* Use tiles as a mini \"details grid\" rather than event occurrence selection. */\n  --rb-event-tile-bg: var(--cp-card-bg);\n  --rb-event-tile-border: var(--cp-card-border);\n  --rb-event-tile-radius: var(--cp-control-radius);\n\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__value {\n  font-size: 1rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__edit {\n  align-self: flex-start;\n}\n\n/* Cards grid */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cards {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n}\n\n/* A11y helpers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Table */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table-wrap {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table th,\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table td {\n  padding: 0.875rem 1rem;\n  vertical-align: top;\n  border-bottom: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table thead th {\n  text-align: left;\n  background: rgba(var(--tb-border), 0.2);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-table\n  tbody\n  tr:last-child\n  td {\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  :is(.cp-row--past, .cp-row--muted) {\n  opacity: 0.65;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-weight: 600;\n  font-size: 0.9375rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__badges {\n  margin-left: auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__text {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-meta {\n  margin-top: 0.25rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-note {\n  margin-top: 0.5rem;\n  padding-left: 0.75rem;\n  border-left: 3px solid var(--cp-border);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--success {\n  border-left-color: rgb(var(--tb-success));\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--error {\n  border-left-color: rgb(var(--tb-destructive));\n  color: rgb(var(--tb-destructive));\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-muted {\n  color: var(--cp-muted);\n}\n\n/* Table columns */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-tickets {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-actions {\n  text-align: right;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-col-actions\n  .btn-sm {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n}\n\n/* Mobile-only row content within table cells */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n  display: none;\n}\n\n/* Section title (for Upcoming/Past dividers) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section-title {\n  margin: 0 0 1rem;\n}\n\n/* Past items (faded) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card--past {\n  opacity: 0.6;\n}\n\n/* Profile actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-profile__actions {\n  display: flex;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Guest section in event cards */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__name {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__phone {\n  color: var(--cp-muted);\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__empty {\n  font-size: 0.875rem;\n  color: var(--cp-muted);\n  font-style: italic;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__index {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--cp-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields\n  input {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__error {\n  font-size: 0.75rem;\n  color: var(--cp-error);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guests__actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n/* Actions modal */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-actions-list {\n  display: grid;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}\n\n/* In the actions modal, tiles sit on a surface modal, so use \"background\" for contrast. */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-list\n  :where(.rb-tile) {\n  --rb-event-tile-bg: rgb(var(--tb-background));\n  --rb-event-tile-border: rgb(var(--tb-border));\n}\n\n/* Actions trigger: icon-only kebab button */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-trigger.btn-sm {\n  padding: 0.35rem !important;\n  line-height: 1 !important;\n  min-width: 32px;\n  min-height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tickets live in their own column on desktop; show them inline on mobile. */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n  display: none;\n}\n\n/* Action tiles (use shared rb-tile primitive for base) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile {\n  appearance: none;\n  font: inherit;\n  text-align: left;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__title {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__desc {\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile--danger\n  .cp-action-tile__title {\n  color: rgb(var(--tb-destructive));\n}\n\n/* Modal form layout */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-form-grid {\n  display: grid;\n  gap: 0.75rem;\n  margin-top: 0.75rem;\n}\n\n/* Button modifiers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--link {\n  background: none;\n  border: none;\n  padding: 0;\n  color: var(--cp-primary);\n  font-size: 0.875rem;\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-btn--link:hover {\n  color: var(--cp-primary-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--xs {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n/* Small input */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--sm {\n  height: auto;\n  padding: 0.375rem 0.625rem;\n  font-size: 0.875rem;\n}\n\n/* Input error state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--error {\n  border-color: var(--cp-error);\n}\n/* Small alert */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--sm {\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-modal__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n}\n\n/* Membership cancel confirmation */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__title {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__message {\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__warning {\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__actions {\n  display: flex;\n  gap: 0.75rem;\n}\n\n/* Membership actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-membership-actions {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-section-actions {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-card-subtitle--spaced {\n  margin-top: 0.75rem;\n}\n\n/* Alert spacing utilities */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mt {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mb {\n  margin-bottom: 1rem;\n}\n\n/* Responsive: show everything without horizontal scrolling */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n    display: flex;\n  }\n\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table thead {\n    display: none;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-guests,\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-tickets,\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-actions {\n    display: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n    display: inline;\n  }\n\n  /* Make the cell a positioning context for the kebab */\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-row\n    > td:first-child {\n    position: relative;\n    padding-right: 2.5rem;\n  }\n\n  /* Position kebab in top-right of the cell */\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    margin-top: 0;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions\n    .btn-sm {\n    width: auto;\n  }\n\n  :where(.theme-scope)\n    :where([data-block=\"customer-portal\"])\n    .cp-profile__edit {\n    align-self: stretch;\n  }\n}\n}\n\n/* Placeholder (SSR) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-placeholder {\n  /* Styles for SSR placeholder */\n}\n\n/* =============================================================================\n * Runtime: Header Navigation Dropdown (Tailwind-free)\n *\n * The SDK runtime does not ship Tailwind's `group-hover:*` / `group-focus-within:*`\n * utilities, so dropdown menus must be controlled via plain CSS selectors.\n * =============================================================================\n */\n\n:where(.theme-scope) .nav-dropdown-menu {\n  /*\n   * Keep these rails in sync with header/navDropdownSizing.ts.\n   * The JS placement gutter is 16px, matching the 1rem per-side gutter in calc(100vw - 2rem).\n   */\n  min-width: 12rem;\n  width: max-content;\n  max-width: min(22rem, calc(100vw - 2rem));\n  transform: translateX(var(--nav-dropdown-shift-x, 0px));\n}\n\n:where(.theme-scope) .nav-dropdown:hover > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown:focus-within > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown .nav-dropdown-trigger[aria-expanded=\"true\"] + .nav-dropdown-menu {\n  display: block;\n}\n\n/* =============================================================================\n * Block: Testimonials\n * Uses CSS vars: --rb-testimonial-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-avatar {\n  width: var(--rb-testimonial-avatar-size);\n  height: var(--rb-testimonial-avatar-size);\n  border-radius: var(--rb-testimonial-avatar-border-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card {\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-quote {\n  display: var(--rb-testimonial-quote-display, block);\n  font-family: var(--rb-testimonial-quote-font, inherit);\n  font-size: var(--rb-testimonial-quote-size);\n  line-height: 1;\n  font-weight: var(--rb-testimonial-quote-weight, 700);\n  opacity: var(--rb-testimonial-quote-opacity);\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-primary)));\n}\n\n\n/* Split grid: title column + cards. On desktop the title takes one quarter and\n * the cards fill the remaining three quarters (so title + 3 cards each read as\n * a quarter). Stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-heading,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  container-type: inline-size;\n  container-name: rb-testimonials-split-cards;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n@container rb-testimonials-split-cards (min-width: 36rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-sm-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@container rb-testimonials-split-cards (min-width: 54rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-lg-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n    align-items: start;\n  }\n}\n}\n\n\n/* =============================================================================\n * Variant: featured-editorial\n *\n * An asymmetric layout: a large featured (spruce-ink) quote card beside a\n * column of stacked white cards. Renders NO avatars. Colours are palette\n * tokens only. Node structure is built in testimonialsCarousel.ts.\n * ============================================================================= */\n\n/* Establish an inline-size query container so the head and grid below respond\n * to the block's own width, not the browser viewport. A viewport @media query\n * collapses to 1-col in the dashboard's scaled preview canvas (which reads the\n * dashboard window, not the canvas) and when the block sits in a narrow column;\n * @container tracks the actual laid-out width \u2014 matching the split-grid variant. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe {\n  container-type: inline-size;\n  container-name: rb-testimonials-fe;\n}\n\n/* Section head: heading left, lead-in line to the right; stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-leadin {\n  max-width: 30rem;\n}\n\n@container rb-testimonials-fe (min-width: 768px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: 1.5rem;\n  }\n}\n\n/* Card grid: featured (wider) beside the stacked column. Single column on\n * small screens. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 1.25rem;\n  align-items: stretch;\n}\n\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);\n  }\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-col {\n  display: grid;\n  gap: 1.25rem;\n  align-content: start;\n}\n\n/* Card shells. Fill, border, corners, elevation and padding all come from the\n * site style's card system: the lead card renders the role its Look asks for\n * (`.card-role-alternative` by default), each supporting card\n * `.card-role-default`, and the padding lands on the shared `.card-content`\n * hook inside. What is left here is structure.\n *\n * The flex column is stated rather than inherited: generated card CSS happens\n * to set one today, but a card variant owns fill and padding, not layout, so\n * this field's geometry \u2014 the quote growing and the attribution pinning to the\n * card's bottom edge \u2014 has to hold whatever surface the site style supplies. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card-body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* Quote mark: the site style's quote treatment, oversized serif */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-qmark {\n  display: block;\n  height: 1.6rem;\n  font-family: var(--font-heading, Georgia, serif);\n  font-style: italic;\n  font-size: 3.375rem;\n  line-height: 0.6;\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-secondary)));\n}\n\n/* Quote body. The inner <p> is targeted directly (not via :where) so the\n * serif display font and sizing win over the theme's base paragraph rule. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote {\n  flex: 1 1 auto;\n  margin-top: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote p {\n  margin: 0;\n  font-family: var(--font-heading, Georgia, serif);\n  font-size: 1.15rem;\n  line-height: 1.5;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-quote p {\n  font-size: clamp(1.375rem, 2.4vw, 1.6875rem);\n  line-height: 1.42;\n  letter-spacing: -0.01em;\n}\n\n/* Attribution: name (bold) + context line, no avatar */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 1.625rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-name {\n  font-weight: 600;\n  font-size: 0.97rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-context {\n  font-size: 0.78rem;\n  letter-spacing: 0.02em;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n\n/* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {\n  height: var(--rb-testimonial-carousel-arrow-size);\n  width: var(--rb-testimonial-carousel-arrow-size);\n  border-color: var(--rb-testimonial-carousel-arrow-border-color);\n  background-color: var(--rb-testimonial-carousel-arrow-bg);\n  color: var(--rb-testimonial-carousel-arrow-color);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn:hover {\n  background-color: var(--rb-testimonial-carousel-arrow-bg-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-icon {\n  width: var(--rb-testimonial-carousel-arrow-icon-size);\n  height: var(--rb-testimonial-carousel-arrow-icon-size);\n  stroke-width: var(--rb-testimonial-carousel-arrow-icon-stroke-width);\n}\n\n/* Equal-height cards: stretch track items and make cards fill */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-track {\n  align-items: stretch;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  display: flex;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide > * {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n}\n\n/* Prevent slide shadows from being clipped - add vertical padding to slides.\n * We don't use frame padding because it affects Embla's position calculations.\n * Horizontal shadow room comes from the slide's gap padding in carousel.css. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  padding-top: var(--rb-testimonial-carousel-shadow-pad);\n  padding-bottom: var(--rb-testimonial-carousel-shadow-pad);\n}\n\n/* Anchor each arrow's outer edge to the container's outer edge.\n * .rb-container has 1rem horizontal padding + `overflow: hidden`, so pulling the\n * arrow out by exactly that padding puts the arrow center on the carousel content\n * edge without any of the button being clipped. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {\n  left: -1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--next {\n  right: -1rem;\n}\n\n/*\n * Event Details (runtime node)\n *\n * Keep these rules minimal and theme-driven.\n */\n\n:where(.theme-scope) .event-details {\n  width: 100%;\n  max-width: 56.25rem; /* 900px */\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .event-details-map-wrap {\n  max-width: 28rem;\n}\n\n/*\n * Shared: Tiles\n *\n * Used by:\n * - Event Registration: occurrence selection cards\n * - Event Details: \"Other dates\"\n * - Event Details: whole-series session schedule\n */\n\n:where(.theme-scope) :where(.rb-tile, .er-event-card) {\n  width: 100%;\n  text-align: left;\n  padding: 1rem;\n  border-radius: var(--rb-event-tile-radius, calc(var(--rb-block-radius) * 0.75));\n  border-style: var(--rb-tile-border-style, var(--rb-event-tile-border-style, var(--rb-border-style, solid)));\n  border-width: var(--rb-tile-border-width, var(--rb-event-tile-border-width, var(--rb-border-width, 1px)));\n  border-color: var(--rb-tile-border, var(--rb-event-tile-border, rgb(var(--tb-border))));\n  background: var(--rb-tile-bg, var(--rb-event-tile-bg, transparent));\n  transition: border-color var(--rb-block-transition) ease,\n              background-color var(--rb-block-transition) ease,\n              opacity var(--rb-block-transition) ease;\n  display: block;\n  opacity: var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1));\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .rb-tiles-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--rb-tiles-grid-cols-sm, 2), minmax(0, 1fr));\n  gap: var(--rb-event-tiles-grid-gap, 0.5rem);\n}\n\n:where(.theme-scope) .rb-tile-treatment-quiet {\n  --rb-tile-bg: color-mix(in oklab, rgb(var(--tb-surface)), rgb(var(--tb-muted)) 48%);\n  --rb-tile-border: color-mix(in oklab, rgb(var(--tb-border)), transparent 35%);\n  --rb-tile-border-hover: color-mix(in oklab, rgb(var(--tb-primary)), transparent 40%);\n}\n\n:where(.theme-scope) .rb-tile-treatment-brand-depth {\n  --rb-brand-depth-surface: rgb(var(--tb-primary-800));\n  --rb-brand-depth-tile-surface: rgb(var(--tb-primary-900));\n  --rb-brand-depth-tile-surface-selected: rgb(var(--tb-primary-950));\n  --rb-tile-bg: var(--rb-brand-depth-tile-surface);\n  --rb-tile-bg-selected: var(--rb-brand-depth-tile-surface-selected);\n  --rb-tile-border: transparent;\n  --rb-tile-border-hover: transparent;\n  --rb-tile-border-selected: transparent;\n  --rb-tile-border-width: 0;\n  --rb-event-tile-radius: var(--rb-block-radius);\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-tiles-grid {\n    grid-template-columns: repeat(var(--rb-tiles-grid-cols-md, var(--rb-tiles-grid-cols-sm, 2)), minmax(0, 1fr));\n  }\n}\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card) {\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.25);\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):hover:not(:disabled) {\n  border-color: var(--rb-tile-border-hover, var(--rb-event-tile-border-hover, rgba(var(--tb-primary), 0.5)));\n  opacity: var(--rb-tile-hover-opacity, var(--rb-event-tile-hover-opacity, var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1))));\n}\n\n:where(.theme-scope) :where(.rb-tile--selected, .er-event-card--selected) {\n  border-color: var(--rb-tile-border-selected, var(--rb-event-tile-border-selected, rgb(var(--tb-primary))));\n  background: var(--rb-tile-bg-selected, var(--rb-event-tile-bg-selected, rgba(var(--tb-primary), 0.1)));\n}\n\n:where(.theme-scope) :where(.rb-tile--disabled, .er-event-card--disabled) {\n  border-style: dashed;\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/*\n * A cancelled session stays on the run's schedule rather than disappearing from\n * it, so a visitor can see the week is accounted for. It reads as retired: a\n * dashed edge, quietened like supporting text, and the date itself struck\n * through. The \"Cancelled\" caption beside it keeps its own weight, which is why\n * only the date carries the line.\n */\n:where(.theme-scope) .rb-tile--cancelled {\n  border-style: dashed;\n  opacity: var(--rb-tile-cancelled-opacity, 0.65);\n}\n\n:where(.theme-scope) .rb-tile--cancelled :where(strong) {\n  text-decoration: line-through;\n}\n\n/* =============================================================================\n * Block: Newsletter Signup\n * =============================================================================\n */\n\n/* Newsletter copy styling */\n/* Size only: weight, family and colour come from the theme's heading styles */\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-title {\n  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);\n  line-height: 1.15;\n  text-wrap: balance;\n}\n\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-subtitle {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  opacity: 0.85;\n}\n\n/* Newsletter form container */\n:where(.theme-scope) .newsletter-form {\n  width: 100%;\n  max-width: 32rem;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Newsletter form fields container */\n:where(.theme-scope) .newsletter-form-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n/* Extra preset fields (name, company...). Labels are visually hidden, so\n   these sit in a row above the email entry. */\n:where(.theme-scope) .newsletter-extra-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .newsletter-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  text-align: left;\n}\n\n/* Email entry: the email field and the themed submit button share one shell.\n   The shell's look (background, border, corners, focus ring) comes from the\n   theme's input system via .form-input-group; this only handles layout. */\n:where(.theme-scope) .newsletter-entry {\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  text-align: left;\n}\n\n:where(.theme-scope) .newsletter-entry-group > button {\n  white-space: nowrap;\n}\n\n/* Too narrow for field and button side by side (phones, footer columns):\n   stack them inside the shell and keep pill themes from turning the taller\n   shell into a capsule. */\n@container (max-width: 22rem) {\n  :where(.theme-scope) .newsletter-entry .newsletter-entry-group {\n    flex-direction: column;\n    border-radius: min(var(--rb-input-radius, 0.5rem), 1rem);\n  }\n\n  :where(.theme-scope) .newsletter-entry .newsletter-entry-group > button {\n    width: 100%;\n    justify-content: center;\n  }\n}\n\n/* Topic choices (visitor picks what to hear about) as toggle chips. Each chip\n   is a real checkbox underneath; the chip is its visible face. */\n:where(.theme-scope) .newsletter-topics {\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-topics-legend {\n  padding: 0;\n  margin-bottom: 0.625rem;\n  font-size: 0.9375rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) .newsletter-topic-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .newsletter-stacked .newsletter-topics-legend {\n  width: 100%;\n}\n\n:where(.theme-scope) .newsletter-stacked .newsletter-topic-chips {\n  justify-content: center;\n}\n\n:where(.theme-scope) .newsletter-topic-chip {\n  position: relative;\n  display: inline-flex;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > span {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.4375rem 0.9375rem;\n  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);\n  border-radius: var(--rb-button-radius, var(--rb-input-radius, 9999px));\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n}\n\n/* Tick that grows in when the chip is on */\n:where(.theme-scope) .newsletter-topic-chip > span::before {\n  content: \"\";\n  width: 0;\n  height: 0.7em;\n  background-color: currentColor;\n  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);\n  transition: width 0.15s ease;\n}\n\n:where(.theme-scope) .newsletter-topic-chip:hover > span {\n  border-color: currentColor;\n}\n\n/* Same accent and mark colours as the theme's checkboxes */\n:where(.theme-scope) .newsletter-topic-chip > input:checked + span {\n  background-color: var(--rb-check-accent, rgb(var(--tb-primary)));\n  border-color: var(--rb-check-accent, rgb(var(--tb-primary)));\n  color: var(--rb-check-mark, rgb(var(--tb-onPrimary, 255 255 255)));\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:checked + span::before {\n  width: 0.7em;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:focus-visible + span {\n  outline: 2px solid var(--rb-check-accent, rgb(var(--tb-primary)));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:disabled + span {\n  opacity: 0.6;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) .newsletter-topic-chip > span,\n  :where(.theme-scope) .newsletter-topic-chip > span::before {\n    transition: none;\n  }\n}\n\n/* Error panel and field notes. The form block scopes these to its own\n   data-block, so the newsletter form (which also renders in the footer)\n   needs its own copy of the treatment. */\n:where(.theme-scope) .newsletter-form .fb-error:not([data-field-validation-message]) {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) .newsletter-form [data-field-validation-message] {\n  font-size: 0.875rem;\n  color: var(--fb-error-text);\n}\n\n/* Submit button container (only when a preset has no email field) */\n:where(.theme-scope) .newsletter-submit {\n  margin-top: 0.5rem;\n}\n\n/* ALTCHA widget container */\n:where(.theme-scope) .newsletter-altcha {\n  margin-top: 0.75rem;\n  display: flex;\n  justify-content: center;\n}\n\n/* Privacy note: quieter than the intro so the entry row leads */\n:where(.theme-scope) .newsletter-privacy-note {\n  margin-top: 0.75rem;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));\n  opacity: 0.85;\n  text-align: center;\n}\n\n/* =============================================================================\n * Inline Variant - left-aligned, wider entry row\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-inline .newsletter-form {\n  max-width: 40rem;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n:where(.theme-scope) .newsletter-inline .newsletter-privacy-note {\n  text-align: left;\n}\n\n/* =============================================================================\n * Editorial Split Variant\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-editorial-split {\n  display: grid;\n  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);\n  gap: clamp(2.5rem, 7vw, 7rem);\n  align-items: center;\n  text-align: left;\n}\n\n:where(.theme-scope) .newsletter-editorial-split-copy {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n:where(.theme-scope) .newsletter-editorial-split-form {\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-form {\n  max-width: none;\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-copy-title {\n  font-size: clamp(2rem, 4vw, 3.5rem);\n  font-weight: 500;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-privacy-note {\n  text-align: left;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .newsletter-editorial-split {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 2rem;\n  }\n}\n}\n\n/* =============================================================================\n * Success State\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-success {\n  text-align: center;\n}\n\n:where(.theme-scope) .newsletter-success .fb-success {\n  padding: 1rem 1.5rem;\n  background-color: rgba(var(--tb-success, 34 197 94), 0.1);\n  border-radius: var(--radius-md, 0.5rem);\n  color: rgb(var(--tb-text));\n}\n\n/* =============================================================================\n * Block: Contact + Newsletter\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));\n  gap: clamp(2.5rem, 6vw, 4rem);\n  align-items: start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-column {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-copy {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-title,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-title {\n  margin: 0 0 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-intro,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-subtitle {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-form {\n  max-width: none;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-privacy-note {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block: Team Members\n * =============================================================================\n *\n * Site/theme authors sometimes need different thumbnail shapes/sizes without\n * changing global fragment defaults. We expose these controls on the block and\n * style them via data attributes on the `.rb-team-members` wrapper.\n */\n\n/* Scope all block-static CSS to ThemeScope to avoid leaking into host apps/dashboard. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) :where(.rb-team-member) {\n  align-items: flex-start;\n  text-align: left;\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-width=\"lg-3-4-left\"]) {\n    width: 75%;\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-role {\n  font-weight: 600;\n}\n\n/* Thumbnail sizing: map `data-image-col-size` to a sensible max thumbnail width. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px default */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/4\"]) {\n  --rb-team-thumb-max: 8.75rem; /* ~140px */\n  --rb-team-image-basis: 25%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/3\"]) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/5\"]) {\n  --rb-team-thumb-max: 13.75rem; /* ~220px */\n  --rb-team-image-basis: 40%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/2\"]) {\n  --rb-team-thumb-max: 17.5rem; /* ~280px */\n  --rb-team-image-basis: 50%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/3\"]) {\n  --rb-team-thumb-max: 22.5rem; /* ~360px */\n  --rb-team-image-basis: 66.667%;\n}\n\n/* The wrap is the shape/padding boundary; ensure it expands within the grid cell. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo-wrap {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* In grid mode, cap thumbnail width so headshots don't dominate the card. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-member-photo-wrap) {\n  max-width: var(--rb-team-thumb-max);\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-members[data-layout-align=\"center\"]) :where(.rb-team-member-photo-wrap) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Stack variant: always left-aligned, regardless of the block alignment field. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member) {\n  text-align: left;\n  align-items: flex-start;\n}\n\n/* Stack items: add comfortable per-item vertical padding so entries breathe. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n  padding-block: 1.25rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n/* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member-photo-col) {\n    flex: 0 0 var(--rb-team-image-basis);\n  }\n\n  /* Stack variant: increase media/text gap on desktop. */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n    gap: 1.5rem;\n  }\n\n  /* Stack variant: optional vertical centering of text against thumbnail. */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-content-align=\"center\"]) :where(.rb-team-member--stack) {\n    align-items: center;\n  }\n\n  /* Stack variant: image position control */\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"right\"]) :where(.rb-team-member--stack) {\n    flex-direction: row-reverse;\n  }\n\n  :where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"alternate\"]) :where(.rb-team-member--stack:nth-child(even)) {\n    flex-direction: row-reverse;\n  }\n}\n}\n\n/* Thumbnail padding (space around image inside the item) */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"sm\"] .rb-team-member-photo-wrap {\n  padding: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"md\"] .rb-team-member-photo-wrap {\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"lg\"] .rb-team-member-photo-wrap {\n  padding: 1.5rem;\n}\n\n/* Thumbnail shape */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo-wrap {\n  border-radius: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo-wrap {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo-wrap {\n  border-radius: 9999px;\n}\n\n:where(.theme-scope) .feedback-callout {\n  background: rgba(var(--tb-surface, 248 250 252), 0.92);\n  border-color: rgba(var(--tb-border, 226 232 240), 0.72);\n  --rb-feedback-callout-bg-opacity: 0.1;\n  --rb-feedback-callout-border-opacity: 0.24;\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"info\"] {\n  --rb-feedback-callout-bg-opacity: 0.08;\n  background: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"success\"] {\n  background: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"warning\"] {\n  --rb-feedback-callout-bg-opacity: 0.12;\n  --rb-feedback-callout-border-opacity: 0.28;\n  background: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"error\"] {\n  --rb-feedback-callout-border-opacity: 0.26;\n  background: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity));\n  border-color: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout__title {\n  margin: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :first-child {\n  margin-top: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :last-child {\n  margin-bottom: 0;\n}\n\n/* =============================================================================\n * Block: Event Compact Row\n * Dense row layout for event-calendar compact list mode\n * ============================================================================= */\n\n:where(.theme-scope) .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 4%\n  );\n  --event-compact-secondary-text: color-mix(\n    in oklab,\n    rgb(var(--tb-text, 17 24 39)),\n    rgb(var(--tb-background, 255 255 255)) 28%\n  );\n\n  width: min(100%, 92rem);\n  margin-inline: auto;\n  overflow: hidden;\n  container: event-compact-list / inline-size;\n  border: 1px solid var(--event-compact-divider-color);\n  border-radius: 1rem;\n  background: rgb(var(--tb-surface, 255 255 255));\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-event-list-treatment-lined-panel .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 8%\n  );\n  background: rgb(var(--tb-surface, 255 255 255));\n  border-color: color-mix(\n    in oklab,\n    rgb(var(--tb-primary, 0 0 0)),\n    rgb(var(--tb-border, 229 231 235)) 72%\n  );\n}\n\n:where(.theme-scope) .event-compact-row {\n  display: grid;\n  grid-template-columns: clamp(4.5rem, 6vw, 6.25rem) minmax(0, 1fr);\n  align-items: center;\n  min-height: 6rem;\n  padding: 1rem clamp(1.25rem, 2.6vw, 2.25rem);\n  border-bottom: 1px solid var(--event-compact-divider-color);\n  transition: background-color 150ms ease;\n}\n\n:where(.theme-scope) .event-compact-row:last-child {\n  border-bottom: none;\n}\n\n:where(.theme-scope) .event-compact-row:hover {\n  background-color: rgba(var(--tb-primary, 0 0 0), 0.035);\n}\n\n:where(.theme-scope) .event-compact-row-date {\n  display: grid;\n  grid-template-rows: 1rem minmax(2.7rem, auto) 1rem;\n  place-items: center;\n  gap: 0;\n  min-width: 0;\n  padding-right: clamp(0.8rem, 1.6vw, 1.35rem);\n  text-align: center;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-compact-row-body {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-date-weekday,\n:where(.theme-scope) .event-compact-row-date-month {\n  display: grid;\n  place-items: center;\n  block-size: 1rem;\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: normal;\n  letter-spacing: 0.08em;\n}\n\n:where(.theme-scope) .event-compact-row-date-day {\n  display: grid;\n  place-items: center;\n  min-block-size: clamp(2rem, 3vw, 2.6rem);\n  color: rgb(var(--tb-text, 17 24 39));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 400;\n  line-height: 1;\n}\n\n:where(.theme-scope) .event-compact-row-content {\n  min-width: 0;\n  display: flex;\n  flex: 1 1 18rem;\n  flex-direction: column;\n  gap: 0.625rem;\n  height: 100%;\n  justify-content: center;\n  padding-inline: clamp(1rem, 2.4vw, 2.4rem);\n}\n\n:where(.theme-scope) .event-compact-row-title {\n  margin: 0;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39)))));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);\n  font-weight: 400;\n  line-height: 1.2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.9rem;\n  min-width: 0;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) .event-compact-row-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.45rem;\n  min-width: 0;\n}\n\n:where(.theme-scope) .event-compact-row-venue svg {\n  width: 1.05em;\n  height: 1.05em;\n}\n\n:where(.theme-scope) .event-compact-row-teacher,\n:where(.theme-scope) .event-compact-row-price {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.9rem;\n}\n\n:where(.theme-scope) .event-compact-row-teacher::before,\n:where(.theme-scope) .event-compact-row-price::before {\n  content: \"\";\n  width: 0.18rem;\n  height: 0.18rem;\n  border-radius: 9999px;\n  background: currentColor;\n}\n\n:where(.theme-scope) .event-compact-row-price {\n  color: inherit;\n  font-weight: inherit;\n}\n\n:where(.theme-scope) .event-compact-row-action {\n  display: grid;\n  flex: 0 1 clamp(14rem, 22vw, 19rem);\n  align-content: center;\n  gap: 0.75rem;\n  height: 100%;\n  padding-left: clamp(1.1rem, 2.4vw, 2.4rem);\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-datetime {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.65rem;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.3;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-datetime svg {\n  width: 1.1em;\n  height: 1.1em;\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) .event-compact-row-action-price {\n  display: none;\n}\n\n:where(.theme-scope) .event-compact-row-status {\n  color: rgb(var(--tb-muted, var(--tb-text, 17 24 39)));\n  font-weight: 500;\n}\n\n:where(.theme-scope) .event-compact-row-cta {\n  width: min(100%, 15rem);\n  min-height: 2.7rem;\n  justify-content: space-between;\n  gap: 1rem;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-cta svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  flex-shrink: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .event-listing-compact-container {\n    border-radius: 0.875rem;\n  }\n\n  :where(.theme-scope) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-teacher::before,\n  :where(.theme-scope) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n}\n\n@container event-compact-list (max-width: 48rem) {\n  :where(.theme-scope) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-teacher::before,\n  :where(.theme-scope) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n\n:where(.theme-scope) .section-state__callout {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__body {\n  margin-inline: auto;\n  max-width: 40rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__actions {\n  justify-content: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-rb-background-video=\"true\"]) {\n    display: none !important;\n  }\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback {\n  border: 1px solid rgb(var(--tb-text, 17 24 39) / 0.12);\n  border-radius: 1rem;\n  padding: 0.875rem 1rem;\n  background: rgb(var(--tb-surface, 255 255 255) / 0.92);\n  color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"success\"] {\n  border-color: rgba(var(--tb-success, 34 197 94), 0.3);\n  background: rgba(var(--tb-success, 34 197 94), 0.1);\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"warning\"] {\n  border-color: rgba(var(--tb-warning, 245 158 11), 0.35);\n  background: rgba(var(--tb-warning, 245 158 11), 0.12);\n  color: rgb(var(--tb-warning, 245 158 11));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"error\"] {\n  border-color: rgba(var(--tb-destructive, 239 68 68), 0.3);\n  background: rgba(var(--tb-destructive, 239 68 68), 0.1);\n  color: rgb(var(--tb-destructive, 239 68 68));\n}\n\n/* =============================================================================\n * Shared: Heading Decorations\n * =============================================================================\n */\n\n/*\n * The mark sits inside a full-width block row so it inherits the heading group's\n * `text-align`: a centred heading centres the mark, a left-aligned heading keeps\n * it at the start. The heading stacks are flexbox, where `text-align` positions\n * inline content but not flex items \u2014 so the row (a stretched block flex item)\n * is what carries the alignment, and the inline-block mark follows it. Alignment\n * is never configured directly; it follows the heading.\n */\n:where(.theme-scope) .rb-heading-decoration-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) .rb-heading-decoration-row {\n  display: block;\n  width: 100%;\n  margin-top: 0.35rem;\n  line-height: 0;\n  pointer-events: none;\n}\n\n:where(.theme-scope) .rb-heading-decoration {\n  display: inline-block;\n  vertical-align: top;\n}\n\n:where(.theme-scope) .rb-heading-decoration-organic-squiggle {\n  width: clamp(5.5rem, 15vw, 9rem);\n  height: 1.1rem;\n  background-color: currentColor;\n  opacity: 0.9;\n  -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;\n  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;\n}\n\n:where(.theme-scope) .rb-heading-decoration-short-center-rule {\n  width: 4.5rem;\n  height: 0.125rem;\n  border-radius: 999px;\n  background-color: currentColor;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-text {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-primary {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-secondary {\n  color: rgb(var(--tb-secondary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-border {\n  color: rgb(var(--tb-border));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-muted {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: Feature Card Icons\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-feature-card-icon-zone {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  margin-bottom: 0.125rem;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--empty {\n  visibility: hidden;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge,\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge {\n  background-color: rgb(var(--tb-primary) / 10%);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  background-color: rgb(var(--tb-surface));\n  border: 1px solid rgb(var(--tb-border));\n  box-shadow: 0 1px 2px rgba(var(--tb-shadow), 0.08);\n}\n\n:where(.theme-scope) .rb-feature-card-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon--generated {\n  object-fit: contain;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated {\n  align-self: center;\n  inline-size: min(var(--rb-feature-card-generated-icon-size, 75px), 100%);\n  max-inline-size: 100%;\n  block-size: auto;\n  aspect-ratio: 1;\n  margin-inline: auto;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain .rb-feature-card-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated .rb-feature-card-icon--generated {\n  inline-size: 100%;\n  max-inline-size: 100%;\n  block-size: 100%;\n}\n\n/* --- Card marker mode (icons / numbers / none) -----------------------------\n *\n * The icon zone and the number zone both sit in the DOM; the grid's\n * `data-card-marker` attribute decides which shows. The default (legacy\n * content with no attribute) shows icons and hides the number zone.\n */\n:where(.theme-scope) .rb-feature-card-number-zone {\n  display: none; /* shown only in numbers mode */\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 2.5rem;\n  height: 2.5rem;\n  margin-bottom: 0.125rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background-color: rgb(var(--tb-primary) / 10%);\n  color: rgb(var(--tb-primary));\n  counter-increment: rb-feature-card-number;\n}\n:where(.theme-scope) .rb-feature-card-number-zone::before {\n  content: counter(rb-feature-card-number, decimal-leading-zero);\n  font-weight: 700;\n  font-size: 0.95rem;\n  line-height: 1;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid {\n  counter-reset: rb-feature-card-number;\n}\n\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-number-zone {\n  display: inline-flex;\n}\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-icon-zone {\n  display: none;\n}\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-icon-zone,\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-number-zone {\n  display: none;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media-wrap {\n  max-width: min(100%, 24rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media {\n  aspect-ratio: 1 / 1 !important;\n  border-radius: 9999px;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: 1 / -1;\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: auto;\n  }\n}\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-title {\n  font-size: clamp(2rem, 1.56rem + 1.4vw, 3rem);\n  line-height: 1.14;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy {\n  gap: var(--rb-space-5, 1.25rem);\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy .rb-prose {\n  font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.375rem);\n  line-height: 1.65;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-section {\n  width: min(100%, 66rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading {\n  max-width: 44rem;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n  display: flex;\n  gap: 2rem;\n  align-items: end;\n  justify-content: space-between;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading-title {\n  margin: 0;\n  font-size: clamp(2rem, 4.6vw, 3.3rem);\n  line-height: 1.08;\n}\n\n:where(.theme-scope) .recurring-schedule {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .recurring-schedule-row {\n  display: grid;\n  grid-template-columns: minmax(9rem, 0.82fr) minmax(16rem, 1.5fr) auto;\n  grid-template-rows: auto auto;\n  column-gap: clamp(1.5rem, 4vw, 2.75rem);\n  row-gap: 0.15rem;\n  align-items: center;\n  padding: 1.4rem 0.75rem;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  color: inherit;\n}\n\n:where(.theme-scope) .recurring-schedule-day,\n:where(.theme-scope) .recurring-schedule-time,\n:where(.theme-scope) .recurring-schedule-title,\n:where(.theme-scope) .recurring-schedule-venue {\n  margin: 0;\n}\n\n:where(.theme-scope) .recurring-schedule-day {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: clamp(1.25rem, 2vw, 1.5rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) .recurring-schedule-time {\n  grid-column: 1;\n  grid-row: 2;\n  display: flex;\n  gap: 0.35rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n  font-variant-numeric: tabular-nums;\n}\n\n:where(.theme-scope) .recurring-schedule-details {\n  grid-column: 2;\n  grid-row: 1 / span 2;\n  align-self: center;\n}\n\n:where(.theme-scope) .recurring-schedule-title {\n  font-size: 1.06rem;\n  font-weight: 500;\n}\n\n:where(.theme-scope) .recurring-schedule-venue {\n  margin-top: 0.2rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.92rem;\n}\n\n:where(.theme-scope) .recurring-schedule-action {\n  grid-column: 3;\n  grid-row: 1 / span 2;\n  min-width: 4.5rem;\n  text-align: right;\n}\n\n:where(.theme-scope) .recurring-schedule-see-all {\n  width: fit-content;\n  color: inherit;\n  text-underline-offset: 0.3em;\n}\n\n:where(.theme-scope) .recurring-schedule-empty {\n  margin: 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n    align-items: start;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  :where(.theme-scope) .recurring-schedule-row {\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto auto;\n    gap: 0.5rem 1rem;\n    align-items: start;\n  }\n\n  :where(.theme-scope) .recurring-schedule-day {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope) .recurring-schedule-time {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope) .recurring-schedule-details {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    margin-top: 0.35rem;\n  }\n\n  :where(.theme-scope) .recurring-schedule-action {\n    grid-column: 2;\n    grid-row: 1 / span 2;\n  }\n}\n}\n\n/* =============================================================================\n * Event list treatments: registers and dense indexes\n *\n * These treatments retain the event list's content and structural layout.\n * Their contrast relationships come exclusively from the active semantic\n * section surface and named palette tokens.\n * ============================================================================= */\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card {\n  position: relative;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  color: inherit;\n}\n\n/* Register treatments intentionally prioritise schedule data over imagery. */\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-media {\n  display: none;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-content {\n  min-width: 0;\n  padding: 1.5rem 0.625rem;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-title {\n  min-width: 0;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-footer {\n  min-width: 8rem;\n  padding-top: 0;\n}\n\n:where(.theme-scope)\n  :where(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-cta {\n  width: 100%;\n}\n\n/* Ruled register: open rows with quiet rules on the current section surface. */\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n/* Editorial register: generous rows, an accent marker and display-led titles. */\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card::before {\n  content: \"\";\n  position: absolute;\n  inset-block: 1.75rem;\n  inset-inline-start: 0;\n  width: 0.25rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.875rem;\n  padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-title {\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);\n  font-weight: 500;\n  line-height: 1.15;\n}\n\n/* Dense index: stronger outside rule and reduced row rhythm, without opting\n * the block into its structurally different compact-list facet. */\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 62%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card:first-child {\n  border-top: 2px solid currentColor;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.125rem;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-title {\n  font-size: 1rem;\n  line-height: 1.35;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal {\n    display: block;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content {\n    display: grid;\n    grid-template-columns: minmax(8.5rem, 0.7fr) minmax(15rem, 1.55fr) auto;\n    grid-template-rows: auto auto auto;\n    align-items: center;\n    column-gap: clamp(1.25rem, 3vw, 2.625rem);\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-title {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-caption {\n    grid-column: 1;\n    grid-row: 1 / span 6;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-mb-3 {\n    grid-column: 2;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .event-category-badge {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .card-body,\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .status-muted:not(.event-card-capacity) {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope)\n    :where(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .event-card-footer {\n    grid-column: 3;\n    grid-row: 1 / span 6;\n    flex-direction: column;\n    justify-content: center;\n    align-items: stretch;\n  }\n}\n}\n\n/* =============================================================================\n * Feature-card composition Looks promoted from block-treatment studies.\n * Palette relationships use named semantic tokens; copy and media stay in the\n * existing feature-card content contract.\n * ============================================================================= */\n\n/* Asymmetric emphasis: repeat a 5/7 pair rhythm and give each even card a\n * semantic secondary surface. This remains useful with more than two cards. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-cards-grid {\n  align-items: start;\n}\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card {\n  height: auto;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) {\n  padding: clamp(1.125rem, 2.5vw, 1.875rem);\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.5);\n  background: rgb(var(--tb-secondary));\n  color: rgb(var(--tb-onSecondary));\n  --rb-surface-text-color: rgb(var(--tb-onSecondary));\n  --rb-surface-heading-color: rgb(var(--tb-onSecondary));\n  --rb-surface-link-color: rgb(var(--tb-onSecondary));\n  --rb-surface-link-hover-color: rgb(var(--tb-onSecondary));\n  --rb-surface-link-hover-decoration: underline;\n  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) > .rb-feature-card-media {\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n/* Framed programme: a close-set family of cards on a semantic depth section.\n * The Look asks for the `alternative` card role; the site style's card system\n * supplies the surface. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-cards-grid {\n  gap: clamp(1rem, 2vw, 1.5rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-media {\n  width: 100%;\n  max-width: 100%;\n  margin: 0;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n  padding-bottom: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope)\n    [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n    .rb-feature-cards-grid.rb-grid-cols-2 {\n    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  }\n}\n}\n\n/* --- Feature card media + padding behaviour (all looks) -------------------- */\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {\n  width: calc(100% + 2 * var(--rb-card-pad, 0rem));\n  max-width: none;\n  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {\n  margin-top: 1.4rem;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-content {\n  padding: 0;\n}\n\n:where(.theme-scope) .rb-feature-card > .rb-bg-surface,\n:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {\n  border-start-start-radius: inherit;\n  border-start-end-radius: inherit;\n}\n\n/* --- Editorial diptych + pathways ----------------------------------------- */\n\n:where(.theme-scope) .rb-feature-cards-heading--editorial {\n  margin-inline: 0;\n  text-align: left;\n}\n\n:where(.theme-scope) .rb-feature-cards-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {\n  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);\n  align-items: stretch;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  align-items: start;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card {\n  border: 0;\n  box-shadow: none;\n  height: auto;\n  min-width: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n/* Diptych filled panel: a composition over the `alternative` role's surface.\n   The 18% supporting alpha is accepted CSS-side \u2014 see issue 1297 mapping-table. */\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] {\n  color: rgb(var(--tb-onPrimary));\n  --rb-surface-text-color: rgb(var(--tb-onPrimary));\n  --rb-surface-heading-color: rgb(var(--tb-onPrimary));\n  --rb-surface-link-color: rgb(var(--tb-onPrimary));\n  --rb-surface-link-hover-color: rgb(var(--tb-onPrimary));\n  --rb-surface-link-hover-decoration: underline;\n  --rb-surface-supporting-color: color-mix(in oklab, rgb(var(--tb-onPrimary)), transparent 18%);\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-bg-surface {\n  background: rgb(var(--tb-primary));\n  border-radius: inherit;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-feature-card-media-frame {\n  width: calc(100% - 2.5rem);\n  margin: 1.25rem 1.25rem 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {\n  padding-top: 1.35rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] {\n    margin-top: clamp(2rem, 5vw, 4.5rem);\n  }\n\n  :where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {\n    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);\n    padding-left: clamp(1.5rem, 4vw, 4rem);\n  }\n}\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) .rb-feature-cards-grid:is(\n    .rb-feature-cards-grid--editorial-diptych,\n    .rb-feature-cards-grid--editorial-pathways\n  ) {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n}\n\n/* =============================================================================\n * Offerings Preview composition Looks promoted from the Fran Andr\u00E9 treatment\n * study. The outer section surface remains independently configurable. These\n * rules use expanded semantic palette tokens only.\n * ============================================================================= */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  [data-offering-presentation=\"featured-summary\"]\n  .offerings-preview-card-header {\n  text-align: left;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date {\n  margin: 0;\n  font-family: var(--font-heading, inherit);\n  font-size: clamp(1.125rem, 2.2vw, 1.5rem);\n  font-weight: 650;\n  line-height: 1.22;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date time {\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts {\n  display: grid;\n  gap: 0;\n  margin: clamp(1.25rem, 3vw, 2rem) 0 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts > div {\n  display: grid;\n  grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1.35fr);\n  gap: 1rem;\n  padding-block: 0.6rem;\n  border-top: 1px solid rgba(var(--tb-border), 0.72);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dt {\n  font-size: 0.72rem;\n  font-weight: 750;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dd {\n  min-width: 0;\n  margin: 0;\n  font-weight: 600;\n}\n\n/* --- Composition Looks ----------------------------------------------------\n * Each of these compositions is paired with a card role on the Look\n * (`alternative`, `open`, `default`), so the group card's fill, elevation and\n * padding come from the site style's card system, and nothing below names a\n * colour.\n *\n * Geometry is a different question from colour. A composition that says the\n * rows are *joined* is making a structural statement, and it can only be true\n * if the rows stop drawing their own corners and edges \u2014 so flattening\n * geometry (radius, border width) on inner items is allowed where the\n * composition's meaning depends on it. Choosing what colour those edges would\n * have been is not.\n * ------------------------------------------------------------------------- */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview {\n  container: rb-offerings-preview / inline-size;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card {\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card-footer {\n  margin-top: auto;\n  padding-top: clamp(1.25rem, 3vw, 2rem);\n}\n\n/* Paired feature cards: one editorial lead and one supporting route. With a\n * third group the grid returns to equal columns rather than implying a new\n * source hierarchy. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;\n  gap: clamp(1rem, 2.5vw, 1.5rem);\n}\n\n@container rb-offerings-preview (min-width: 52rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n    .offerings-preview-grid:has(> .offerings-preview-card:nth-child(2):last-child) {\n    grid-template-columns: minmax(0, 1.22fr) minmax(18rem, 0.78fr) !important;\n  }\n}\n\n/* Open editorial columns: hierarchy without an item fill. The `open` card role\n * supplies whatever marking the site style gives a boxless card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"open-editorial-columns\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)) !important;\n  gap: clamp(1.5rem, 4vw, 3rem);\n}\n\n/* Joined programme panel: every group remains independently editable, but the\n * rows are clipped into one column so they read as a single programme. Each\n * row's surface is its own `default` card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview {\n  overflow: hidden;\n  gap: 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.75);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-grid {\n  grid-template-columns: minmax(0, 1fr) !important;\n  gap: 0;\n}\n\n/* Geometry, not colour: a joined panel is only joined if its rows stop drawing\n * their own corners and outlines. The card role still owns every fill, and the\n * panel's own corners are clipped by the wrapper above. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card {\n  border-radius: 0;\n  border-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card + .offerings-preview-card {\n  border-top-width: 1px;\n}\n\n@container rb-offerings-preview (min-width: 58rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-content {\n    display: grid;\n    grid-template-columns: minmax(15rem, 1.1fr) minmax(19rem, 1.4fr) minmax(10rem, auto);\n    align-items: center;\n    gap: clamp(1.5rem, 4vw, 4rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-footer {\n    margin-top: 0;\n    padding-top: 0;\n    justify-content: flex-end;\n  }\n}\n\n/* =============================================================================\n * Featured-editorial testimonial compositions, promoted from the Fran Andr\u00E9\n * treatment study and keyed on the Look's composition intent.\n *\n * Structure only. Which card each slot renders is the block's own lead /\n * support structure (`.card-role-alternative` on the lead, `.card-role-default`\n * on each supporting voice) and what those cards look like belongs to the site\n * style's card system \u2014 so nothing here sets a fill, a border or a corner.\n * ============================================================================= */\n\n/* Evergreen lead: the lead voice remains dominant while the supporting column\n * opens into two equal compact voices at wider widths. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Room and response: a tall lead voice with its responses stacked beside it in\n * the existing support column. */\n:where(.theme-scope)\n  [data-block=\"testimonials\"][data-block-composition=\"room-and-response\"]\n  .rb-testimonials-fe-card--feature {\n  min-height: 27rem;\n}\n\n/* Open floor: the section head becomes an editorial rail while proof occupies\n * a lead-over-supporting field. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe {\n    display: grid;\n    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.6fr);\n    align-items: start;\n    gap: clamp(2rem, 5vw, 5rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-head {\n    display: block;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-leadin {\n    margin-top: 1.5rem;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Open-editorial testimonials composition, selected by a Look\n * (`composition: { kind: 'testimonials', treatment: 'open-editorial' }`).\n *\n * Two jobs. First, *boxless*: `styledCard` always renders an opaque\n * `.rb-bg-surface` fill layer, so a testimonial with no card role has to clear\n * it or it paints a white box on the section band (the same shape\n * feature-card-compositions.css uses for `[data-surface-role=\"open\"]`).\n * Second, the composition proper: a hairline before the attribution, an accent\n * ring on the avatar, comfortable prose.\n *\n * What is *not* here: whether the testimonial sits in a card (the Look's\n * `cardRole`), how that card looks (the site style's card system), or the quote\n * mark (the site style's quote treatment, via the --rb-testimonial-quote-* vars\n * in testimonials.css).\n *\n * The block attribute is deliberately outside `:where()` so these rules outrank\n * the card's own utility classes, matching the compositions above. */\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-prose {\n  font-size: 1.0625rem;\n  line-height: 1.7;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-attribution {\n  margin-top: 1.25rem;\n  padding-top: 1.25rem;\n  border-top: 1px solid rgba(var(--tb-border), 0.75);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-avatar {\n  box-shadow:\n    0 0 0 2px rgb(var(--tb-surface)),\n    0 0 0 4px rgba(var(--tb-primary), 0.3);\n}\n\n/* =============================================================================\n * Block: Appointment Services\n * ============================================================================= */\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 1rem;\n  row-gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-main {\n  flex: 1 1 16rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-price {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n  flex: 1 0 100%;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n    flex: 0 0 auto;\n  }\n}\n}\n\n/* =============================================================================\n * Site footer: social links\n *\n * Icon links get a 40px tap target with a hairline ring drawn from the link's\n * own colour, so it follows the footer's text colour on any surface. Links\n * without an icon (unknown platforms) stay plain text.\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-footer-socials {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.75rem 1.25rem;\n}\n\n:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon) {\n  display: inline-grid;\n  place-items: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);\n  border-radius: 9999px;\n}\n\n:where(.theme-scope) .rb-footer-socials:has(.rb-footer-social-icon) {\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon):hover {\n  border-color: currentColor;\n}\n\n:where(.theme-scope) .rb-footer-social-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}";