@riverbankcms/sdk 0.88.0 → 0.90.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  .rb-eyebrow {\n    font-size: 0.875rem;\n    font-weight: 600;\n    letter-spacing: 0.025em;\n    text-transform: 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(--section-text-color, rgb(var(--tb-text))) 46%, transparent);\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);\n    padding: 0.5rem 1rem;\n    color: var(--section-text-color, rgb(var(--tb-text)));\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    }\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-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    }\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  /* 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  :where(.theme-scope)\n    [data-site-document-layout-mode=\"header-overlay\"]\n    [data-rb-reserved-surface].rb-reserved-surface-main {\n    padding-top: calc(var(--rb-reserved-surface-header-offset, 5.5rem) + 2.5rem);\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    }\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    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .rb-section-pad-compact {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .rb-section-pad-cozy {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n  .rb-section-pad-medium {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n  .rb-section-pad-comfortable {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  .rb-section-pad-spacious {\n    padding-top: 5rem;\n    padding-bottom: 5rem;\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        padding-top: 2rem;\n        padding-bottom: 2rem;\n      }\n      .rb-section-pad-cozy {\n        padding-top: 3.5rem;\n        padding-bottom: 3.5rem;\n      }\n      .rb-section-pad-medium {\n        padding-top: 4rem;\n        padding-bottom: 4rem;\n      }\n      .rb-section-pad-comfortable {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-section-pad-spacious {\n        padding-top: 7rem;\n        padding-bottom: 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    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: rgb(var(--tb-text));\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: rgb(var(--tb-mutedText));\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: rgb(var(--tb-text));\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: rgb(var(--tb-text));\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       --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */\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 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(--section-text-color, rgb(var(--tb-text)));\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      --section-link-color,\n      var(--rb-prose-link-color, rgb(var(--tb-primary)))\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      --section-link-decoration-color,\n      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    );\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(--section-supporting-color, rgb(var(--tb-mutedText)));\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, transparent) */\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    transition: font-size 300ms var(--motion-ease, ease);\n  }\n\n  /* Mobile: reduce site title size (~30%) 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      font-size: 0.8rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope) .header-variant-centered .header-logo-text {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n}\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  /* =================================================================\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    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 Terminal State Icons\n * Used by event-registration and course-registration blocks.\n *\n * Layout rules only \u2014 block-specific colors are defined in each block's CSS\n * via scoped `.rb-state-icon--{variant}` rules.\n * ============================================================================= */\n\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/* =============================================================================\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-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);\n  --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);\n}\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-container {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--er-border);\n  padding: clamp(1rem, 2vw, 1.5rem);\n  background: rgb(var(--tb-surface));\n  color: var(--er-on-surface);\n  transition: border-color var(--rb-block-transition) ease;\n  width: 100%;\n  max-width: 800px;\n  margin-inline: 0;\n}\n\n/* SSR shell / required-island fallback */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell {\n  min-height: 24rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__steps {\n  margin-bottom: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-registration-shell__title {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-registration-shell__card {\n  display: grid;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line {\n  height: 0.75rem;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    var(--er-shell-line),\n    rgba(var(--tb-primary), 0.12),\n    var(--er-shell-line)\n  );\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--lg {\n  width: min(26rem, 82%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--md {\n  width: min(19rem, 68%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--sm {\n  width: min(14rem, 52%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--xs {\n  width: min(10rem, 42%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"].event-registration--embedded) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-capacity-badge--available {\n  background: var(--er-capacity-available-bg);\n  color: var(--er-capacity-available-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-capacity-badge--low {\n  background: var(--er-capacity-low-bg);\n  color: var(--er-capacity-low-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-capacity-badge--soldout {\n  background: var(--er-capacity-soldout-bg);\n  color: var(--er-capacity-soldout-text);\n}\n\n/* Selected event summary */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-summary {\n  padding: 1rem;\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  border: 1px solid var(--er-border);\n  background: var(--er-surface-muted);\n}\n\n/* Ticket counter */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-counter-btn:hover:not(:disabled) {\n  border-color: var(--er-border-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-counter-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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/* 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: 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-input--error {\n  border-color: var(--er-border-error);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-back-btn:hover {\n  opacity: 1;\n}\n\n/* State icon color variants (layout from registration-shared.css) */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--success {\n  background: var(--er-success-bg);\n  color: var(--er-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--info {\n  background: var(--er-info-bg);\n  color: var(--er-info-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--error {\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--waitlist {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card {\n  padding: 0.875rem 0;\n  border-width: 0 0 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) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card:last-child {\n  border-bottom-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-title {\n  font-size: 1rem;\n  line-height: 1.35;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-event-title {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-text {\n  color: var(--er-on-surface);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card .er-text {\n  line-height: 1.4;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-text--muted {\n  color: var(--er-on-surface-muted);\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-text--faint {\n  color: var(--er-on-surface-faint);\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card--disabled {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card--selected {\n  background: transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card--selected .er-event-title {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card--disabled .er-text--muted,\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card--disabled .er-text--faint {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-capacity-badge {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-counter-value {\n  font-size: 1.25rem;\n  font-weight: 700;\n  width: 1.625rem;\n  text-align: center;\n}\n\n/* Layout */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-stack--sm {\n  gap: 0.75rem;\n}\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-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-row--between {\n  justify-content: space-between;\n  align-items: flex-start;\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:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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 button (no back), push to the right */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-actions > :only-child {\n  margin-inline-start: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-button-with-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-field + .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-existing-registration-title {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-existing-registration-notice .rb-state-icon {\n  margin: 0 auto 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-existing-registration-link:hover {\n  text-decoration: none;\n}\n\n/* Payment group container */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-group + .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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: 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__input:focus {\n  outline: 2px solid var(--er-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-option-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-option-name {\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-option-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-option-validity {\n  font-size: 0.75rem;\n  color: var(--er-on-surface-faint);\n}\n\n/* Checkmark indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background: var(--er-check-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--er-check-text);\n}\n\n/* Payment summary */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-layout > .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:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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\"]) .er-step {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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(--er-step-inactive);\n  color: var(--er-step-text);\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-circle--active {\n  background: var(--er-step-active);\n  color: var(--er-step-text-active);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-circle--completed {\n  background: var(--er-step-completed);\n  color: var(--er-step-text-active);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-check {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-connector {\n  width: 2rem;\n  height: 2px;\n  background: var(--er-step-connector);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-connector--completed {\n  background: var(--er-step-connector);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-label {\n  font-size: 0.75rem;\n  color: var(--er-on-surface);\n  display: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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\"]) .er-step-label {\n    display: inline;\n  }\n}\n}\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) :where([data-block=\"event-registration\"]) .er-summary-event {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-summary-date {\n  font-size: 0.875rem;\n  color: rgba(var(--tb-text), 0.7);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-summary-tickets {\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-guest-section {\n  margin-top: 1.5rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-guest-section .er-title {\n  margin: 0 0 0.75rem;\n}\n\n/* Error banner for guest section */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-guest-card .er-field + .er-field {\n  margin-top: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-guest-card + .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) :where([data-block=\"event-registration\"]) .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%, 100% { transform: translateX(0); }\n  20%, 60% { transform: translateX(-4px); }\n  40%, 80% { transform: translateX(4px); }\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card:hover .event-card-image {\n  transform: scale(var(--rb-event-card-image-hover-scale, 1.08));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card {\n  transition: transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card-cta {\n  width: 100%;\n  justify-content: center;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card:hover {\n  transform: translateY(var(--rb-event-card-hover-translate-y, 0px));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card:hover .event-card-overlay {\n  opacity: var(--rb-event-card-overlay-hover-opacity, 0);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .event-card-cta {\n    width: auto;\n  }\n\n  /* Capacity: right-aligned */\n  :where(.theme-scope)\n    :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-group--disabled {\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-group--disabled .er-payment-group-title {\n  color: var(--er-on-surface-faint);\n}\n\n/* Disabled payment option */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-layout-main {\n  grid-area: main;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-layout-main > .er-portal-auth {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-layout-sidebar {\n  grid-area: sidebar;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tiles > [role=\"listitem\"] {\n  min-width: 0;\n  display: flex;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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: 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile--disabled {\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-tile--disabled > :not(.er-payment-tooltip) {\n  opacity: 0.5;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile[aria-disabled=\"true\"] {\n  position: relative;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile--disabled:hover .er-payment-tooltip {\n  display: block;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile-icon svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-tile-label {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile--upsell {\n  border-style: dashed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-summary-bar-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-summary-bar-product-name {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-summary-bar-pass-escape:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-portal-auth-link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-portal-auth-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-portal-auth-text--success {\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-modal-content .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) :where([data-block=\"event-registration\"]) .er-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-teaser__title {\n  font-size: 1.0625rem;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-teaser__meta {\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-teaser__ticket-name {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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)) max(0.75rem, env(safe-area-inset-bottom)) 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-bar__cta {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-container--overlay .er-payment-layout-main {\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-booking-overlay {\n    justify-content: flex-end;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-container--overlay .er-payment-layout-main {\n    padding: 1.25rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-magic-link-form .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-magic-link-success .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-hero-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-hero-content {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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: border-color var(--rb-block-transition) ease,\n              background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card:hover:not([aria-disabled=\"true\"]) {\n  border-color: var(--er-payment-border-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled > :not(.er-booking-mode-tooltip) {\n  opacity: 0.55;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled:hover {\n  border-color: var(--er-payment-border);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled .er-booking-mode-card-icon,\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled .er-booking-mode-card-label {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled .er-booking-mode-card-detail {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-card-icon svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card-label {\n  font-weight: 600;\n  font-size: 1rem;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-alt {\n  margin-top: 1rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-alt-link:hover {\n  text-decoration: none;\n}\n\n/* Tooltip styling for disabled options */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card[aria-disabled=\"true\"] {\n  position: relative;\n}\n\n/* Tooltip appears on hover for disabled cards */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled:hover .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-nav-btn:hover {\n  background-color: var(--ec-nav-hover-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-day:nth-child(7n) {\n  border-right: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-day--today {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-day--other-month {\n  opacity: var(--ec-other-month-opacity);\n}\n\n/* Day number */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-day--today .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-event:hover {\n  background-color: var(--ec-event-solid-hover-bg);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-event:focus-visible {\n  outline: 2px solid var(--ec-event-solid-bg);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-more:hover {\n  background-color: rgba(var(--tb-primary), 0.1);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-more:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-category-btn:hover:not(:disabled) {\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-category-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-view-toggle {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-view-btn:hover {\n  opacity: 1;\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-agenda-day:last-child {\n  border-bottom: none;\n}\n\n/* Day header */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-agenda-day--today .event-agenda-day-header {\n  background-color: var(--ec-today-bg);\n}\n\n/* Day content area */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-day-content {\n  padding: 0.75rem 0;\n}\n\n/* Events list within a day */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-day-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Empty day message */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-day-empty {\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n  margin: 0;\n  padding: 0.25rem 0;\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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-icon {\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-price {\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-capacity {\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-capacity--full {\n  color: rgb(var(--tb-error, 239 68 68));\n  opacity: 1;\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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-time-rail,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day {\n  border-right: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-day--today .event-timetable-day-heading {\n  background-color: var(--ec-today-bg);\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-time-body,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day-body {\n  position: relative;\n  height: clamp(34rem, calc(var(--event-timetable-range-minutes, 900) * 0.055rem), 56rem);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-time-body {\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-event:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-time,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-title,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-teacher,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-meta,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-event-title {\n  font-size: 0.8125rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-teacher,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-meta {\n  font-size: 0.6875rem;\n  opacity: 0.72;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-capacity {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  opacity: 0.85;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-capacity--full {\n  color: rgb(var(--tb-danger, 220 38 38));\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-day-selector {\n    display: flex;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-container {\n    overflow: hidden;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-grid {\n    grid-template-columns: 4rem minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day[data-selected=\"false\"] {\n    display: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day {\n    border-right: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-time-rail {\n    border-right: 1px solid var(--ec-border-subtle);\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day-heading {\n    justify-content: flex-start;\n    padding-inline: 0.75rem;\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 { opacity: 0; }\n  to { opacity: 1; }\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) :where([data-block=\"event-calendar\"]) .ec-modal-close:hover {\n  opacity: 1;\n  background-color: rgba(var(--tb-text), 0.1);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .ec-modal--event .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) :where([data-block=\"event-calendar\"]) 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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-day-header {\n    font-size: 0.75rem;\n    padding: 0.375rem 0.125rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-day {\n    min-height: 88px;\n    padding: 0.125rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-title {\n    font-size: 0.9375rem;\n    min-width: 0;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-event-time {\n    text-align: center;\n    font-size: 0.625rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-event-title {\n    display: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-more {\n    padding: 0.125rem 0.25rem;\n    font-size: 0.6875rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-header > 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 * 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: --ab-* (from appointment-booking var generator)\n * =============================================================================\n */\n\n/* Main container */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-container {\n  width: 100%;\n}\n\n/* Stack layout utilities */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-stack--sm {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-stack--xs {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Row layout */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-row {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-row--between {\n  justify-content: space-between;\n}\n\n/* Grid layout */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-grid {\n  display: grid;\n  gap: 0.75rem;\n}\n\n/* Center layout */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n/* Typography */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-subtitle {\n  font-size: 0.875rem;\n  font-weight: 500;\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:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--muted {\n  opacity: var(--ab-text-muted-opacity, 0.6);\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--faint {\n  opacity: var(--ab-text-faint-opacity, 0.4);\n}\n\n/* Selection cards (service, resource, time slot) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-card {\n  position: relative;\n  padding: 1rem;\n  border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  text-align: left;\n  background: transparent;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-card:hover {\n  border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-card--selected {\n  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));\n}\n\n/* Checkmark indicator */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background-color: var(--ab-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=\"appointment-booking\"]) .ab-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));\n}\n\n/* Info box (service summary) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-info-box {\n  padding: 1rem;\n  border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));\n}\n\n/* Alert states */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-alert {\n  padding: 0.75rem 1rem;\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-alert--success {\n  background-color: 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\"]) .ab-alert--error {\n  background-color: 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\"]) .ab-alert--warning {\n  background-color: 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:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-alert--info {\n  background-color: 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/* Form elements */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-label {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-required {\n  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));\n  margin-left: 0.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-input,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-select,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-textarea {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));\n  background: transparent;\n  font-size: 0.875rem;\n  transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-input:focus,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-select:focus,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-textarea:focus {\n  outline: none;\n  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));\n}\n\n/* Buttons */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1.5rem;\n  border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--primary {\n  flex: 1;\n  background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));\n  color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));\n  border: none;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--primary:hover:not(:disabled) {\n  background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--secondary {\n  background: transparent;\n  border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--secondary:hover:not(:disabled) {\n  background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--link {\n  background: transparent;\n  border: none;\n  padding: 0;\n  text-decoration: underline;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Actions row */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-actions {\n  display: flex;\n  gap: 0.75rem;\n  margin-top: 1.5rem;\n}\n\n/* Skeleton loading */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-skeleton {\n  height: 2.5rem;\n  width: 100%;\n  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  animation: ab-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes ab-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Field wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Altcha wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-altcha {\n  margin-top: 1rem;\n}\n\n/* Link button (inline text link) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link {\n  display: inline;\n  margin-left: 0.5rem;\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/* =============================================================================\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: 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(--section-text-color, rgb(var(--tb-text)));\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(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));\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(--section-supporting-color, rgb(var(--tb-mutedText)));\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/* =============================================================================\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(--section-text-color, rgb(var(--tb-text)));\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: 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/* =============================================================================\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  --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: 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: 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/* Product card */\n:where(.theme-scope) .shop__card {\n  background: rgb(var(--tb-surface));\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: 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: 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: rgb(var(--tb-mutedText));\n}\n\n:where(.theme-scope) .shop__card-description {\n  font-size: 0.875rem;\n  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: 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: rgb(var(--tb-mutedText));\n}\n\n:where(.theme-scope) .shop__card-validity {\n  color: rgb(var(--tb-mutedText));\n}\n\n:where(.theme-scope) .shop__card-unlimited {\n  font-weight: 500;\n  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/* 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}\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  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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-login__reset-link:hover {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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 { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\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  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  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/* 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  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) :where([data-block=\"customer-portal\"]) .cp-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) :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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-row-note--success {\n  border-left-color: rgb(var(--tb-success));\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-col-actions .btn-sm {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-title__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row__fields {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row__fields input {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row__error {\n  font-size: 0.75rem;\n  color: var(--cp-error);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-actions-list :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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-action-tile__title {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile__desc {\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile--danger .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__title {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__message {\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__warning {\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__actions {\n  display: flex;\n  gap: 0.75rem;\n}\n\n/* Membership actions */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-membership-actions {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section-actions {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-table :is(th, td).cp-col-guests,\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table :is(th, td).cp-col-tickets,\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table :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) :where([data-block=\"customer-portal\"]) .cp-row > 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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-row-mobile-actions .btn-sm {\n    width: auto;\n  }\n\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .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-card.rb-card-treatment-accent-quote {\n  border: 0;\n  border-left: 5px solid rgb(var(--tb-secondary));\n  border-radius: 0 calc(var(--rb-block-radius) * 3) 0 0;\n  color: rgb(var(--tb-primaryForeground));\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:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-accent-quote .rb-testimonial-quote {\n  color: rgb(var(--tb-secondary));\n  font-size: calc(var(--rb-testimonial-quote-size) * 1.25);\n  opacity: 1;\n}\n\n/* Open editorial testimonial card: boxless, with a hairline rule before the\n * attribution, an accent ring on the avatar, and comfortable prose. The quote\n * mark itself is owned by the site-style quote treatment (see the\n * --rb-testimonial-quote-* vars), not by these rules.\n *\n * `editorial-open` is the current non-carded look; `editorial-serif-quote` is\n * retained for content saved before the decomposition. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card.rb-card-treatment-editorial-open,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card.rb-card-treatment-editorial-serif-quote {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);\n}\n\n/* styledCard always renders an inner white rb-bg-surface fill layer; a boxless\n * card must clear it so the section band shows through (otherwise: white box). */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open > .rb-bg-surface,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open .rb-prose,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote .rb-prose {\n  font-size: 1.0625rem;\n  line-height: 1.7;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open .rb-testimonial-attribution,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote .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) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open .rb-testimonial-avatar,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote .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/* 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@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/* 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 * - Course Details: session tiles\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 * Course Details (runtime node)\n * Minimal rules - most styling via rb-* utilities\n */\n\n:where(.theme-scope) .course-details {\n  width: 100%;\n  max-width: 56.25rem; /* 900px */\n  margin-inline: auto;\n}\n\n/* Description prose wrapper */\n:where(.theme-scope) .course-details .cd-description {\n  margin-top: 1rem;\n}\n\n/* \"Showing X of Y\" text */\n:where(.theme-scope) .course-details .cd-sessions__more {\n  margin-top: 0.5rem;\n  opacity: 0.7;\n  font-size: 0.875rem;\n}\n\n/* Enrollment status colors (using Tier 3 vars) */\n:where(.theme-scope) .course-details .cd-enrollment--open {\n  color: var(--cd-enrollment-open-text);\n}\n\n:where(.theme-scope) .course-details .cd-enrollment--closed {\n  color: var(--cd-enrollment-closed-text);\n}\n\n/* =============================================================================\n * Block: Course Registration\n * Keep rules minimal and theme-driven; class names are prefixed with `cr-`.\n * =============================================================================\n */\n\n/* Block-local surface text tokens for cards/modals that sit on theme surface. */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) {\n  --cr-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));\n  --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);\n}\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-container {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-border);\n  padding: 1.5rem;\n  background: rgb(var(--tb-surface));\n  color: var(--cr-on-surface);\n  max-width: 50rem; /* 800px */\n  margin-inline: auto;\n}\n\n/* Empty/unavailable */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-empty {\n  border-radius: var(--rb-block-radius);\n  border: 1px dashed rgba(var(--tb-foreground), 0.2);\n  padding: 2.5rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-empty__text {\n  opacity: 0.7;\n}\n\n/* =============================================================================\n * Layout (two-column)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-layout {\n  display: grid;\n  gap: 1.5rem;\n  grid-template-columns: 1fr;\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=\"course-registration\"]) .cr-layout--with-sidebar {\n    grid-template-columns: 1fr 280px;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-layout__main {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-layout__sidebar {\n  display: none;\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=\"course-registration\"]) .cr-layout__sidebar {\n    display: block;\n  }\n}\n}\n\n/* =============================================================================\n * Step Indicator\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-steps {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-circle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  background: var(--cr-step-inactive);\n  color: var(--cr-step-text);\n  transition: background-color 0.2s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-circle--active {\n  background: var(--cr-step-active);\n  color: var(--cr-step-text-active);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-circle--completed {\n  background: var(--cr-step-completed);\n  color: var(--cr-step-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgb(var(--tb-mutedText));\n  display: none;\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=\"course-registration\"]) .cr-step-label {\n    display: block;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-label--active {\n  color: var(--cr-on-surface);\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-connector {\n  flex: 1;\n  height: 2px;\n  background: var(--cr-step-connector);\n  min-width: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-connector--completed {\n  background: var(--cr-step-completed);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-check {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* =============================================================================\n * Lists\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-list {\n  display: grid;\n  gap: 1rem;\n}\n\n/* =============================================================================\n * Course Cards\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-border);\n  padding: 1rem;\n  background: rgb(var(--tb-background));\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease, transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card:hover {\n  border-color: var(--cr-border-hover);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card:focus-visible {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card--selected {\n  border-color: var(--cr-border-selected);\n  box-shadow: 0 0 0 3px var(--cr-focus-ring);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__title {\n  margin: 0 0 0.25rem 0;\n  font-weight: 700;\n  font-size: 1.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__status {\n  margin: 0.25rem 0 0 0;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__sessions,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__price,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__capacity,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__venue {\n  margin: 0.25rem 0 0 0;\n  opacity: 0.85;\n}\n\n/* =============================================================================\n * Capacity Badges\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge {\n  display: inline-block;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge--available {\n  background: var(--cr-capacity-available-bg);\n  color: var(--cr-capacity-available-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge--low {\n  background: var(--cr-capacity-low-bg);\n  color: var(--cr-capacity-low-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge--soldout {\n  background: var(--cr-capacity-soldout-bg);\n  color: var(--cr-capacity-soldout-text);\n}\n\n/* =============================================================================\n * Summary + Details\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-details {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-summary-border);\n  padding: 1rem;\n  background: var(--cr-summary-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 800;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__sessions-title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__sessions-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: grid;\n  gap: 0.35rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__session {\n  opacity: 0.9;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__venue,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__price,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__membership {\n  margin: 0.5rem 0 0 0;\n  opacity: 0.9;\n}\n\n/* =============================================================================\n * Form\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__field {\n  display: grid;\n  gap: 0.35rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__label--required::after {\n  content: ' *';\n  color: var(--cr-required);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__input {\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--cr-border);\n  padding: 0.6rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__textarea {\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--cr-border);\n  padding: 0.6rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n  resize: vertical;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__input:focus,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__textarea:focus {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__input--error,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__textarea.cr-form__input--error {\n  border-color: var(--cr-border-error);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__error {\n  font-size: 0.875rem;\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n}\n\n/* Logged-in user hint with logout link */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-logged-in-hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  margin: 0.25rem 0 0 0;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-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=\"course-registration\"]) .cr-link:hover {\n  text-decoration: none;\n}\n\n/* =============================================================================\n * Actions\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-back-btn {\n  border: 0;\n  background: transparent;\n  color: var(--cr-on-surface);\n  opacity: 0.8;\n  padding: 0.25rem 0.25rem;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-back-btn:hover {\n  opacity: 1;\n  text-decoration: underline;\n}\n\n/* =============================================================================\n * Payment Options\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment__options {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment__option {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* =============================================================================\n * Payment Tiles (Card Grid)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-payment-border);\n  padding: 1rem;\n  background: rgb(var(--tb-background));\n  cursor: pointer;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;\n  position: relative;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile:hover {\n  border-color: var(--cr-payment-border-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile:focus-visible {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile--selected {\n  border-color: var(--cr-payment-border-selected);\n  background: var(--cr-payment-bg-selected);\n  box-shadow: 0 0 0 3px var(--cr-focus-ring);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile--upsell {\n  border-style: dashed;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__name {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__description {\n  margin: 0.25rem 0 0 0;\n  font-size: 0.875rem;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__price {\n  font-weight: 600;\n  font-size: 0.875rem;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__badge {\n  display: inline-block;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  margin-top: 0.5rem;\n}\n\n/* Checkmark indicator on selected tile */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__check {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 9999px;\n  background: var(--cr-check-bg);\n  color: var(--cr-check-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile--selected .cr-payment-tile__check {\n  opacity: 1;\n}\n\n/* =============================================================================\n * Booking Mode Step\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__title {\n  margin: 0;\n  font-size: var(--cr-step-title-size);\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__subtitle {\n  margin: 0.25rem 0 0 0;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__link {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__link a {\n  color: rgb(var(--tb-primary));\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__link a:hover {\n  text-decoration: none;\n}\n\n/* =============================================================================\n * Membership Hero\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero {\n  border-radius: var(--rb-block-radius);\n  background: var(--cr-success-bg);\n  border: 1px solid rgba(var(--tb-success), 0.2);\n  padding: 1.5rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero__icon {\n  font-size: 2rem;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero__title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 700;\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero__subtitle {\n  margin: 0.25rem 0 0 0;\n  font-size: 0.875rem;\n  opacity: 0.8;\n}\n\n/* =============================================================================\n * Portal Auth Sidebar\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-border);\n  padding: 1.25rem;\n  background: rgb(var(--tb-surface));\n  color: var(--cr-on-surface);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__icon {\n  font-size: 1.5rem;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__title {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__text {\n  margin: 0.5rem 0 0 0;\n  font-size: 0.875rem;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__action {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__link {\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__link:hover {\n  text-decoration: none;\n}\n\n/* =============================================================================\n * Modal (for Magic Link)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(var(--tb-scrim), 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  animation: cr-fade-in 0.15s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal {\n  background: rgb(var(--tb-surface));\n  color: var(--cr-on-surface);\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  max-width: 28rem;\n  width: calc(100% - 2rem);\n  position: relative;\n  animation: cr-slide-up 0.2s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-close:hover {\n  opacity: 1;\n}\n\n@keyframes cr-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes cr-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-overlay,\n  :where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal {\n    animation: none;\n  }\n}\n\n/* =============================================================================\n * Center States\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-center {\n  display: grid;\n  place-items: center;\n  gap: 0.75rem;\n  padding: 2rem 0;\n}\n\n/* =============================================================================\n * Success/Waitlist/Error States\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-waitlist,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed {\n  text-align: center;\n  padding: 2rem 1rem;\n}\n\n/* State icon color variants (layout from registration-shared.css) */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--success {\n  background: var(--cr-success-bg);\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--error {\n  background: var(--cr-error-bg);\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--waitlist,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--warning {\n  background: var(--cr-waitlist-bg);\n  color: var(--cr-waitlist-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success__title,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-waitlist__title,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error__title,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed__title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success__message,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-waitlist__message,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error__message,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed__message {\n  margin: 0;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success__membership {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error__retry,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed__retry {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Discount Code Section\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount {\n  margin-top: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-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) :where([data-block=\"course-registration\"]) .cr-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__input {\n  flex: 1;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--cr-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) :where([data-block=\"course-registration\"]) .cr-discount__input:focus {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__remove {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__apply {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  cursor: pointer;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__feedback {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* =============================================================================\n * Altcha (Spam Protection)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-altcha {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Magic Link Form\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-magic-link-title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-auth-text {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-auth-text--success {\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-auth-text--error {\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn {\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 0;\n  padding: 0.6rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn--secondary {\n  background: transparent;\n  color: var(--cr-on-surface);\n  border: 1px solid var(--cr-border);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn--secondary:hover {\n  background: var(--cr-on-surface-hover-bg);\n}\n\n/* =============================================================================\n * Utility Classes\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-text--muted {\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-text--error {\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-text--success {\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-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/* Stack utility */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack {\n  display: flex;\n  flex-direction: column;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack--gap-sm {\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack--gap-md {\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack--gap-lg {\n  gap: 1.5rem;\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(--section-text-color, rgb(var(--tb-text)));\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/* 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(--section-text-color, rgb(var(--tb-text)));\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/* 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 * 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(--section-text-color, rgb(var(--tb-text)));\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(--section-heading-color, rgb(var(--tb-primary, 0 0 0)));\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--plain .rb-feature-card-icon {\n  width: 1.5rem;\n  height: 1.5rem;\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/* =============================================================================\n * Shared: Card treatments\n *\n * Visual treatments referenced from `_cardStyles.treatment` (see\n * cardStylesOverrideSchema). Class names are emitted by the boxStyles\n * transform in @riverbankcms/blocks.\n *\n * Also contains feature-card media/padding behaviour shared by all looks:\n * - card images bleed to the card edges (flush photo tops)\n * - card-level padding replaces the content stack's fallback padding so the\n *   two never stack up\n * ============================================================================= */\n\n/* --- Feature card media + padding behaviour (all looks) -------------------- */\n\n/*\n * When a look gives the card real padding (rb-container-pad-*), the image\n * bleeds to the card edges and the inner content stack drops its fallback\n * padding so insets don't double up.\n */\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media {\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 + .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/* --- Soft panel ------------------------------------------------------------ */\n\n:where(.theme-scope) .rb-card-treatment-soft-panel {\n  transition: transform 250ms ease, box-shadow 250ms ease;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :where(.theme-scope) .rb-card-treatment-soft-panel:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 0.875rem 1.875rem rgba(var(--tb-shadow, 0 0 0), 0.1);\n  }\n}\n\n:where(.theme-scope) .rb-card-treatment-soft-panel .cta-row .button-ghost {\n  padding-inline: 0;\n}\n\n/* --- Editorial rule --------------------------------------------------------- */\n\n/*\n * Boxless open column: no background, no border box, a short brand rule\n * sitting on a full-width hairline at the top of the column.\n */\n:where(.theme-scope) .rb-card-treatment-editorial-rule {\n  margin-top: 1rem;\n  border-top: 1px solid\n    color-mix(in oklab, rgb(var(--tb-border, 229 231 235)), transparent 25%);\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 2.75rem;\n  height: 2px;\n  background: rgb(var(--tb-primary, 0 0 0));\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-media {\n  margin-top: 1.6rem;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.5);\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-content {\n  padding: 1.6rem 0 0.25rem;\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule .cta-row .button-ghost {\n  padding-inline: 0;\n}\n\n/* --- Colour-blocked --------------------------------------------------------- */\n\n/*\n * Bold, flat cards that each take a different palette colour by position,\n * cycled across the grid, with a staggered vertical offset on wider screens.\n * The background layer (`.rb-bg-surface`) is recoloured per card; the card's\n * text colour is set to the matching on-colour so content stays readable.\n */\n:where(.theme-scope) .rb-card-treatment-color-blocked {\n  box-shadow: none;\n}\n\n/* Per-card colour cycle. The `on*` colours are always derived by the palette\n * (expandPalette emits onSurface/onSecondary/onPrimary), so no fallback. */\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) > .rb-bg-surface {\n  background: rgb(var(--tb-surface));\n}\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {\n  color: rgb(var(--tb-onSurface));\n}\n\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {\n  background: rgb(var(--tb-secondary));\n}\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {\n  color: rgb(var(--tb-onSecondary));\n}\n\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {\n  background: rgb(var(--tb-primary));\n}\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {\n  color: rgb(var(--tb-onPrimary));\n}\n\n/* Body copy carries an inline muted colour from the block; force it to the\n * card's on-colour so it reads on every block (inline style needs !important). */\n:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {\n  color: inherit !important;\n  opacity: 0.9;\n}\n\n/* The number marker defaults to the brand accent, which collides with the\n * primary-coloured card in the cycle. On colour-blocked cards use the card's\n * own on-colour (the palette guarantees it's legible on that background) and a\n * faint tint of it for the badge, so the number always contrasts. */\n:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-number-zone {\n  color: inherit;\n  background-color: color-mix(in oklab, currentColor, transparent 88%);\n}\n\n/* Staggered offset: drop the middle column on wider screens. Scoped to a 3-up\n * grid (`.rb-grid-cols-3`) so 2-/4-column grids don't get a misaligned stagger;\n * the colour cycle still reads as a diagonal at any column count. */\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-grid-cols-3 .rb-card-treatment-color-blocked:nth-child(3n + 2) {\n    margin-top: 2.75rem;\n    /* Override the card's `h-full` so the grid's stretch shrinks the card by the\n     * margin (a genuinely shorter card) instead of keeping full height and\n     * overflowing the section, which clips the rounded bottom corners. */\n    height: auto;\n  }\n}\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-look=\"intro-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-look=\"intro-portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media {\n  aspect-ratio: 1 / 1 !important;\n  border-radius: 9999px;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-look=\"intro-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-look=\"intro-editorial-statement\"] .rb-intro-copy {\n  gap: var(--rb-space-5, 1.25rem);\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-look=\"intro-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}";
+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  .rb-eyebrow {\n    font-size: 0.875rem;\n    font-weight: 600;\n    letter-spacing: 0.025em;\n    text-transform: 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(--section-text-color, rgb(var(--tb-text))) 46%, transparent);\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);\n    padding: 0.5rem 1rem;\n    color: var(--section-text-color, rgb(var(--tb-text)));\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    }\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-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    }\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  /* 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  :where(.theme-scope)\n    [data-site-document-layout-mode=\"header-overlay\"]\n    [data-rb-reserved-surface].rb-reserved-surface-main {\n    padding-top: calc(var(--rb-reserved-surface-header-offset, 5.5rem) + 2.5rem);\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    }\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    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .rb-section-pad-compact {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .rb-section-pad-cozy {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n  .rb-section-pad-medium {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n  .rb-section-pad-comfortable {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  .rb-section-pad-spacious {\n    padding-top: 5rem;\n    padding-bottom: 5rem;\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        padding-top: 2rem;\n        padding-bottom: 2rem;\n      }\n      .rb-section-pad-cozy {\n        padding-top: 3.5rem;\n        padding-bottom: 3.5rem;\n      }\n      .rb-section-pad-medium {\n        padding-top: 4rem;\n        padding-bottom: 4rem;\n      }\n      .rb-section-pad-comfortable {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-section-pad-spacious {\n        padding-top: 7rem;\n        padding-bottom: 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    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: rgb(var(--tb-text));\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: rgb(var(--tb-mutedText));\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: rgb(var(--tb-text));\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: rgb(var(--tb-text));\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       --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */\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 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(--section-text-color, rgb(var(--tb-text)));\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      --section-link-color,\n      var(--rb-prose-link-color, rgb(var(--tb-primary)))\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      --section-link-decoration-color,\n      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    );\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(--section-supporting-color, rgb(var(--tb-mutedText)));\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, transparent) */\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    transition: font-size 300ms var(--motion-ease, ease);\n  }\n\n  /* Mobile: reduce site title size (~30%) 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      font-size: 0.8rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope) .header-variant-centered .header-logo-text {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n}\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  /* =================================================================\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    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 Terminal State Icons\n * Used by event-registration and course-registration blocks.\n *\n * Layout rules only \u2014 block-specific colors are defined in each block's CSS\n * via scoped `.rb-state-icon--{variant}` rules.\n * ============================================================================= */\n\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/* =============================================================================\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-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);\n  --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);\n}\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-container {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--er-border);\n  padding: clamp(1rem, 2vw, 1.5rem);\n  background: rgb(var(--tb-surface));\n  color: var(--er-on-surface);\n  transition: border-color var(--rb-block-transition) ease;\n  width: 100%;\n  max-width: 800px;\n  margin-inline: 0;\n}\n\n/* SSR shell / required-island fallback */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell {\n  min-height: 24rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__steps {\n  margin-bottom: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-registration-shell__title {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-registration-shell__card {\n  display: grid;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line {\n  height: 0.75rem;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    var(--er-shell-line),\n    rgba(var(--tb-primary), 0.12),\n    var(--er-shell-line)\n  );\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--lg {\n  width: min(26rem, 82%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--md {\n  width: min(19rem, 68%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--sm {\n  width: min(14rem, 52%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-registration-shell__line--xs {\n  width: min(10rem, 42%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"].event-registration--embedded) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-capacity-badge--available {\n  background: var(--er-capacity-available-bg);\n  color: var(--er-capacity-available-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-capacity-badge--low {\n  background: var(--er-capacity-low-bg);\n  color: var(--er-capacity-low-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-capacity-badge--soldout {\n  background: var(--er-capacity-soldout-bg);\n  color: var(--er-capacity-soldout-text);\n}\n\n/* Selected event summary */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-summary {\n  padding: 1rem;\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  border: 1px solid var(--er-border);\n  background: var(--er-surface-muted);\n}\n\n/* Ticket counter */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-counter-btn:hover:not(:disabled) {\n  border-color: var(--er-border-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-counter-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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/* 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: 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-input--error {\n  border-color: var(--er-border-error);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-back-btn:hover {\n  opacity: 1;\n}\n\n/* State icon color variants (layout from registration-shared.css) */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--success {\n  background: var(--er-success-bg);\n  color: var(--er-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--info {\n  background: var(--er-info-bg);\n  color: var(--er-info-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--error {\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .rb-state-icon--waitlist {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card {\n  padding: 0.875rem 0;\n  border-width: 0 0 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) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card:last-child {\n  border-bottom-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-title {\n  font-size: 1rem;\n  line-height: 1.35;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-event-title {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-text {\n  color: var(--er-on-surface);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card .er-text {\n  line-height: 1.4;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-text--muted {\n  color: var(--er-on-surface-muted);\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card .er-text--faint {\n  color: var(--er-on-surface-faint);\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card--disabled {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card--selected {\n  background: transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-event-card--selected .er-event-title {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card--disabled .er-text--muted,\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-card--disabled .er-text--faint {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-event-grid .er-capacity-badge {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-counter-value {\n  font-size: 1.25rem;\n  font-weight: 700;\n  width: 1.625rem;\n  text-align: center;\n}\n\n/* Layout */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-stack--sm {\n  gap: 0.75rem;\n}\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-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-row--between {\n  justify-content: space-between;\n  align-items: flex-start;\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:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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 button (no back), push to the right */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-actions > :only-child {\n  margin-inline-start: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-button-with-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-field + .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-existing-registration-title {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-existing-registration-notice .rb-state-icon {\n  margin: 0 auto 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-existing-registration-link:hover {\n  text-decoration: none;\n}\n\n/* Payment group container */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-group + .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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: 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__input:focus {\n  outline: 2px solid var(--er-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-option-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-option-name {\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-option-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-option-validity {\n  font-size: 0.75rem;\n  color: var(--er-on-surface-faint);\n}\n\n/* Checkmark indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background: var(--er-check-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--er-check-text);\n}\n\n/* Payment summary */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-layout > .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:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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\"]) .er-step {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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(--er-step-inactive);\n  color: var(--er-step-text);\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-circle--active {\n  background: var(--er-step-active);\n  color: var(--er-step-text-active);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-circle--completed {\n  background: var(--er-step-completed);\n  color: var(--er-step-text-active);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-check {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-connector {\n  width: 2rem;\n  height: 2px;\n  background: var(--er-step-connector);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-connector--completed {\n  background: var(--er-step-connector);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-step-label {\n  font-size: 0.75rem;\n  color: var(--er-on-surface);\n  display: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-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\"]) .er-step-label {\n    display: inline;\n  }\n}\n}\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) :where([data-block=\"event-registration\"]) .er-summary-event {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-summary-date {\n  font-size: 0.875rem;\n  color: rgba(var(--tb-text), 0.7);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-summary-tickets {\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-guest-section {\n  margin-top: 1.5rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-guest-section .er-title {\n  margin: 0 0 0.75rem;\n}\n\n/* Error banner for guest section */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-guest-card .er-field + .er-field {\n  margin-top: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-guest-card + .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) :where([data-block=\"event-registration\"]) .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%, 100% { transform: translateX(0); }\n  20%, 60% { transform: translateX(-4px); }\n  40%, 80% { transform: translateX(4px); }\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card:hover .event-card-image {\n  transform: scale(var(--rb-event-card-image-hover-scale, 1.08));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card {\n  transition: transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card-cta {\n  width: 100%;\n  justify-content: center;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card:hover {\n  transform: translateY(var(--rb-event-card-hover-translate-y, 0px));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n  .event-card:hover .event-card-overlay {\n  opacity: var(--rb-event-card-overlay-hover-opacity, 0);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .event-card-cta {\n    width: auto;\n  }\n\n  /* Capacity: right-aligned */\n  :where(.theme-scope)\n    :where([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\n    .event-card--horizontal .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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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([data-block=\"event-listing\"], [data-block=\"event-spotlight\"], [data-block=\"event-calendar\"], [data-block=\"event-combined\"])\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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-group--disabled {\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-group--disabled .er-payment-group-title {\n  color: var(--er-on-surface-faint);\n}\n\n/* Disabled payment option */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-layout-main {\n  grid-area: main;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-layout-main > .er-portal-auth {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-layout-sidebar {\n  grid-area: sidebar;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tiles > [role=\"listitem\"] {\n  min-width: 0;\n  display: flex;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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: 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile--disabled {\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-tile--disabled > :not(.er-payment-tooltip) {\n  opacity: 0.5;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile[aria-disabled=\"true\"] {\n  position: relative;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile--disabled:hover .er-payment-tooltip {\n  display: block;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile-icon svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-payment-tile-label {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-payment-tile--upsell {\n  border-style: dashed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-summary-bar-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-summary-bar-product-name {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-summary-bar-pass-escape:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-portal-auth-link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-portal-auth-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-portal-auth-text--success {\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-modal-content .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) :where([data-block=\"event-registration\"]) .er-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-teaser__title {\n  font-size: 1.0625rem;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-teaser__meta {\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-teaser__ticket-name {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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)) max(0.75rem, env(safe-area-inset-bottom)) 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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-bar__cta {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-container--overlay .er-payment-layout-main {\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-booking-overlay {\n    justify-content: flex-end;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-container--overlay .er-payment-layout-main {\n    padding: 1.25rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-registration\"]) .er-container--overlay .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) :where([data-block=\"event-registration\"]) .er-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-magic-link-form .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-magic-link-success .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-hero-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-hero-content {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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: border-color var(--rb-block-transition) ease,\n              background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card:hover:not([aria-disabled=\"true\"]) {\n  border-color: var(--er-payment-border-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled > :not(.er-booking-mode-tooltip) {\n  opacity: 0.55;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled:hover {\n  border-color: var(--er-payment-border);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled .er-booking-mode-card-icon,\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled .er-booking-mode-card-label {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled .er-booking-mode-card-detail {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-card-icon svg {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card-label {\n  font-weight: 600;\n  font-size: 1rem;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-alt {\n  margin-top: 1rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-alt-link:hover {\n  text-decoration: none;\n}\n\n/* Tooltip styling for disabled options */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .er-booking-mode-card[aria-disabled=\"true\"] {\n  position: relative;\n}\n\n/* Tooltip appears on hover for disabled cards */\n:where(.theme-scope) :where([data-block=\"event-registration\"]) .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) :where([data-block=\"event-registration\"]) .er-booking-mode-card--disabled:hover .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-nav-btn:hover {\n  background-color: var(--ec-nav-hover-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-day:nth-child(7n) {\n  border-right: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-day--today {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-day--other-month {\n  opacity: var(--ec-other-month-opacity);\n}\n\n/* Day number */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-day--today .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-event:hover {\n  background-color: var(--ec-event-solid-hover-bg);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-event:focus-visible {\n  outline: 2px solid var(--ec-event-solid-bg);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-more:hover {\n  background-color: rgba(var(--tb-primary), 0.1);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-more:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-category-btn:hover:not(:disabled) {\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-category-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-view-toggle {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-view-btn:hover {\n  opacity: 1;\n  border-color: rgba(var(--tb-primary), 0.5);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-agenda-day:last-child {\n  border-bottom: none;\n}\n\n/* Day header */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-agenda-day--today .event-agenda-day-header {\n  background-color: var(--ec-today-bg);\n}\n\n/* Day content area */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-day-content {\n  padding: 0.75rem 0;\n}\n\n/* Events list within a day */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-day-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Empty day message */\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-day-empty {\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n  margin: 0;\n  padding: 0.25rem 0;\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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-icon {\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-price {\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-capacity {\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-agenda-card-capacity--full {\n  color: rgb(var(--tb-error, 239 68 68));\n  opacity: 1;\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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-time-rail,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day {\n  border-right: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-day--today .event-timetable-day-heading {\n  background-color: var(--ec-today-bg);\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-time-body,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day-body {\n  position: relative;\n  height: clamp(34rem, calc(var(--event-timetable-range-minutes, 900) * 0.055rem), 56rem);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-time-body {\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-event:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-time,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-title,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-teacher,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-meta,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-event-title {\n  font-size: 0.8125rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-teacher,\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-meta {\n  font-size: 0.6875rem;\n  opacity: 0.72;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-capacity {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  opacity: 0.85;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-event-capacity--full {\n  color: rgb(var(--tb-danger, 220 38 38));\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-timetable-day-selector {\n    display: flex;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-container {\n    overflow: hidden;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-grid {\n    grid-template-columns: 4rem minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day[data-selected=\"false\"] {\n    display: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day {\n    border-right: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-time-rail {\n    border-right: 1px solid var(--ec-border-subtle);\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-timetable-day-heading {\n    justify-content: flex-start;\n    padding-inline: 0.75rem;\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 { opacity: 0; }\n  to { opacity: 1; }\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) :where([data-block=\"event-calendar\"]) .ec-modal-close:hover {\n  opacity: 1;\n  background-color: rgba(var(--tb-text), 0.1);\n}\n\n:where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .ec-modal--event .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) :where([data-block=\"event-calendar\"]) 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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-day-header {\n    font-size: 0.75rem;\n    padding: 0.375rem 0.125rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-day {\n    min-height: 88px;\n    padding: 0.125rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-title {\n    font-size: 0.9375rem;\n    min-width: 0;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .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) :where([data-block=\"event-calendar\"]) .event-calendar-event-time {\n    text-align: center;\n    font-size: 0.625rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-event-title {\n    display: none;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-more {\n    padding: 0.125rem 0.25rem;\n    font-size: 0.6875rem;\n  }\n\n  :where(.theme-scope) :where([data-block=\"event-calendar\"]) .event-calendar-header > 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 * 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: --ab-* (from appointment-booking var generator)\n * =============================================================================\n */\n\n/* Main container */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-container {\n  width: 100%;\n}\n\n/* Stack layout utilities */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-stack--sm {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-stack--xs {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Row layout */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-row {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-row--between {\n  justify-content: space-between;\n}\n\n/* Grid layout */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-grid {\n  display: grid;\n  gap: 0.75rem;\n}\n\n/* Center layout */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n/* Typography */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-subtitle {\n  font-size: 0.875rem;\n  font-weight: 500;\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:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--muted {\n  opacity: var(--ab-text-muted-opacity, 0.6);\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--faint {\n  opacity: var(--ab-text-faint-opacity, 0.4);\n}\n\n/* Selection cards (service, resource, time slot) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-card {\n  position: relative;\n  padding: 1rem;\n  border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  text-align: left;\n  background: transparent;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-card:hover {\n  border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-card--selected {\n  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));\n}\n\n/* Checkmark indicator */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background-color: var(--ab-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=\"appointment-booking\"]) .ab-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));\n}\n\n/* Info box (service summary) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-info-box {\n  padding: 1rem;\n  border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));\n}\n\n/* Alert states */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-alert {\n  padding: 0.75rem 1rem;\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-alert--success {\n  background-color: 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\"]) .ab-alert--error {\n  background-color: 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\"]) .ab-alert--warning {\n  background-color: 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:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-alert--info {\n  background-color: 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/* Form elements */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-label {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-required {\n  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));\n  margin-left: 0.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-input,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-select,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-textarea {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));\n  background: transparent;\n  font-size: 0.875rem;\n  transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-input:focus,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-select:focus,\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-textarea:focus {\n  outline: none;\n  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));\n}\n\n/* Buttons */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1.5rem;\n  border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--primary {\n  flex: 1;\n  background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));\n  color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));\n  border: none;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--primary:hover:not(:disabled) {\n  background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--secondary {\n  background: transparent;\n  border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--secondary:hover:not(:disabled) {\n  background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--link {\n  background: transparent;\n  border: none;\n  padding: 0;\n  text-decoration: underline;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn--link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Actions row */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-actions {\n  display: flex;\n  gap: 0.75rem;\n  margin-top: 1.5rem;\n}\n\n/* Skeleton loading */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-skeleton {\n  height: 2.5rem;\n  width: 100%;\n  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));\n  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));\n  animation: ab-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes ab-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Field wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Altcha wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-altcha {\n  margin-top: 1rem;\n}\n\n/* Link button (inline text link) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link {\n  display: inline;\n  margin-left: 0.5rem;\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/* =============================================================================\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: 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(--section-text-color, rgb(var(--tb-text)));\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(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));\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(--section-supporting-color, rgb(var(--tb-mutedText)));\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/* =============================================================================\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(--section-text-color, rgb(var(--tb-text)));\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: 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/* =============================================================================\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  --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: 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: 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/* Product card */\n:where(.theme-scope) .shop__card {\n  background: rgb(var(--tb-surface));\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: 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: 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: rgb(var(--tb-mutedText));\n}\n\n:where(.theme-scope) .shop__card-description {\n  font-size: 0.875rem;\n  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: 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: rgb(var(--tb-mutedText));\n}\n\n:where(.theme-scope) .shop__card-validity {\n  color: rgb(var(--tb-mutedText));\n}\n\n:where(.theme-scope) .shop__card-unlimited {\n  font-weight: 500;\n  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/* 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}\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  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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-login__reset-link:hover {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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 { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\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  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  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/* 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  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) :where([data-block=\"customer-portal\"]) .cp-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) :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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-row-note--success {\n  border-left-color: rgb(var(--tb-success));\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-col-actions .btn-sm {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-title__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row__fields {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row__fields input {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row__error {\n  font-size: 0.75rem;\n  color: var(--cp-error);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-actions-list :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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-action-tile__title {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile__desc {\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile--danger .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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__title {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__message {\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__warning {\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm__actions {\n  display: flex;\n  gap: 0.75rem;\n}\n\n/* Membership actions */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-membership-actions {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section-actions {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-table :is(th, td).cp-col-guests,\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table :is(th, td).cp-col-tickets,\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table :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) :where([data-block=\"customer-portal\"]) .cp-row > 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) :where([data-block=\"customer-portal\"]) .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) :where([data-block=\"customer-portal\"]) .cp-row-mobile-actions .btn-sm {\n    width: auto;\n  }\n\n  :where(.theme-scope) :where([data-block=\"customer-portal\"]) .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-card.rb-card-treatment-accent-quote {\n  border: 0;\n  border-left: 5px solid rgb(var(--tb-secondary));\n  border-radius: 0 calc(var(--rb-block-radius) * 3) 0 0;\n  color: rgb(var(--tb-primaryForeground));\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:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-accent-quote .rb-testimonial-quote {\n  color: rgb(var(--tb-secondary));\n  font-size: calc(var(--rb-testimonial-quote-size) * 1.25);\n  opacity: 1;\n}\n\n/* Open editorial testimonial card: boxless, with a hairline rule before the\n * attribution, an accent ring on the avatar, and comfortable prose. The quote\n * mark itself is owned by the site-style quote treatment (see the\n * --rb-testimonial-quote-* vars), not by these rules.\n *\n * `editorial-open` is the current non-carded look; `editorial-serif-quote` is\n * retained for content saved before the decomposition. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card.rb-card-treatment-editorial-open,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card.rb-card-treatment-editorial-serif-quote {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);\n}\n\n/* styledCard always renders an inner white rb-bg-surface fill layer; a boxless\n * card must clear it so the section band shows through (otherwise: white box). */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open > .rb-bg-surface,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open .rb-prose,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote .rb-prose {\n  font-size: 1.0625rem;\n  line-height: 1.7;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open .rb-testimonial-attribution,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote .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) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-open .rb-testimonial-avatar,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-card-treatment-editorial-serif-quote .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/* 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/* 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 * - Course Details: session tiles\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 * Course Details (runtime node)\n * Minimal rules - most styling via rb-* utilities\n */\n\n:where(.theme-scope) .course-details {\n  width: 100%;\n  max-width: 56.25rem; /* 900px */\n  margin-inline: auto;\n}\n\n/* Description prose wrapper */\n:where(.theme-scope) .course-details .cd-description {\n  margin-top: 1rem;\n}\n\n/* \"Showing X of Y\" text */\n:where(.theme-scope) .course-details .cd-sessions__more {\n  margin-top: 0.5rem;\n  opacity: 0.7;\n  font-size: 0.875rem;\n}\n\n/* Enrollment status colors (using Tier 3 vars) */\n:where(.theme-scope) .course-details .cd-enrollment--open {\n  color: var(--cd-enrollment-open-text);\n}\n\n:where(.theme-scope) .course-details .cd-enrollment--closed {\n  color: var(--cd-enrollment-closed-text);\n}\n\n/* =============================================================================\n * Block: Course Registration\n * Keep rules minimal and theme-driven; class names are prefixed with `cr-`.\n * =============================================================================\n */\n\n/* Block-local surface text tokens for cards/modals that sit on theme surface. */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) {\n  --cr-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));\n  --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);\n}\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-container {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-border);\n  padding: 1.5rem;\n  background: rgb(var(--tb-surface));\n  color: var(--cr-on-surface);\n  max-width: 50rem; /* 800px */\n  margin-inline: auto;\n}\n\n/* Empty/unavailable */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-empty {\n  border-radius: var(--rb-block-radius);\n  border: 1px dashed rgba(var(--tb-foreground), 0.2);\n  padding: 2.5rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-empty__text {\n  opacity: 0.7;\n}\n\n/* =============================================================================\n * Layout (two-column)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-layout {\n  display: grid;\n  gap: 1.5rem;\n  grid-template-columns: 1fr;\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=\"course-registration\"]) .cr-layout--with-sidebar {\n    grid-template-columns: 1fr 280px;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-layout__main {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-layout__sidebar {\n  display: none;\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=\"course-registration\"]) .cr-layout__sidebar {\n    display: block;\n  }\n}\n}\n\n/* =============================================================================\n * Step Indicator\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-steps {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-circle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  background: var(--cr-step-inactive);\n  color: var(--cr-step-text);\n  transition: background-color 0.2s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-circle--active {\n  background: var(--cr-step-active);\n  color: var(--cr-step-text-active);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-circle--completed {\n  background: var(--cr-step-completed);\n  color: var(--cr-step-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgb(var(--tb-mutedText));\n  display: none;\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=\"course-registration\"]) .cr-step-label {\n    display: block;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-label--active {\n  color: var(--cr-on-surface);\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-connector {\n  flex: 1;\n  height: 2px;\n  background: var(--cr-step-connector);\n  min-width: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-connector--completed {\n  background: var(--cr-step-completed);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-step-check {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* =============================================================================\n * Lists\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-list {\n  display: grid;\n  gap: 1rem;\n}\n\n/* =============================================================================\n * Course Cards\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-border);\n  padding: 1rem;\n  background: rgb(var(--tb-background));\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease, transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card:hover {\n  border-color: var(--cr-border-hover);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card:focus-visible {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card--selected {\n  border-color: var(--cr-border-selected);\n  box-shadow: 0 0 0 3px var(--cr-focus-ring);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__title {\n  margin: 0 0 0.25rem 0;\n  font-weight: 700;\n  font-size: 1.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__status {\n  margin: 0.25rem 0 0 0;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__sessions,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__price,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__capacity,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-course-card__venue {\n  margin: 0.25rem 0 0 0;\n  opacity: 0.85;\n}\n\n/* =============================================================================\n * Capacity Badges\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge {\n  display: inline-block;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge--available {\n  background: var(--cr-capacity-available-bg);\n  color: var(--cr-capacity-available-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge--low {\n  background: var(--cr-capacity-low-bg);\n  color: var(--cr-capacity-low-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-capacity-badge--soldout {\n  background: var(--cr-capacity-soldout-bg);\n  color: var(--cr-capacity-soldout-text);\n}\n\n/* =============================================================================\n * Summary + Details\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-details {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-summary-border);\n  padding: 1rem;\n  background: var(--cr-summary-bg);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 800;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__sessions-title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__sessions-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: grid;\n  gap: 0.35rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__session {\n  opacity: 0.9;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__venue,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__price,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-summary__membership {\n  margin: 0.5rem 0 0 0;\n  opacity: 0.9;\n}\n\n/* =============================================================================\n * Form\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__field {\n  display: grid;\n  gap: 0.35rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__label--required::after {\n  content: ' *';\n  color: var(--cr-required);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__input {\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--cr-border);\n  padding: 0.6rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__textarea {\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--cr-border);\n  padding: 0.6rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n  resize: vertical;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__input:focus,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__textarea:focus {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__input--error,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__textarea.cr-form__input--error {\n  border-color: var(--cr-border-error);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__error {\n  font-size: 0.875rem;\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-form__hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n}\n\n/* Logged-in user hint with logout link */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-logged-in-hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  margin: 0.25rem 0 0 0;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-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=\"course-registration\"]) .cr-link:hover {\n  text-decoration: none;\n}\n\n/* =============================================================================\n * Actions\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-back-btn {\n  border: 0;\n  background: transparent;\n  color: var(--cr-on-surface);\n  opacity: 0.8;\n  padding: 0.25rem 0.25rem;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-back-btn:hover {\n  opacity: 1;\n  text-decoration: underline;\n}\n\n/* =============================================================================\n * Payment Options\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment__options {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment__option {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* =============================================================================\n * Payment Tiles (Card Grid)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-payment-border);\n  padding: 1rem;\n  background: rgb(var(--tb-background));\n  cursor: pointer;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;\n  position: relative;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile:hover {\n  border-color: var(--cr-payment-border-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile:focus-visible {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile--selected {\n  border-color: var(--cr-payment-border-selected);\n  background: var(--cr-payment-bg-selected);\n  box-shadow: 0 0 0 3px var(--cr-focus-ring);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile--upsell {\n  border-style: dashed;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__name {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__description {\n  margin: 0.25rem 0 0 0;\n  font-size: 0.875rem;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__price {\n  font-weight: 600;\n  font-size: 0.875rem;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__badge {\n  display: inline-block;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  margin-top: 0.5rem;\n}\n\n/* Checkmark indicator on selected tile */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile__check {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 9999px;\n  background: var(--cr-check-bg);\n  color: var(--cr-check-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-tile--selected .cr-payment-tile__check {\n  opacity: 1;\n}\n\n/* =============================================================================\n * Booking Mode Step\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__title {\n  margin: 0;\n  font-size: var(--cr-step-title-size);\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__subtitle {\n  margin: 0.25rem 0 0 0;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__link {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__link a {\n  color: rgb(var(--tb-primary));\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-booking-mode__link a:hover {\n  text-decoration: none;\n}\n\n/* =============================================================================\n * Membership Hero\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero {\n  border-radius: var(--rb-block-radius);\n  background: var(--cr-success-bg);\n  border: 1px solid rgba(var(--tb-success), 0.2);\n  padding: 1.5rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero__icon {\n  font-size: 2rem;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero__title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 700;\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-membership-hero__subtitle {\n  margin: 0.25rem 0 0 0;\n  font-size: 0.875rem;\n  opacity: 0.8;\n}\n\n/* =============================================================================\n * Portal Auth Sidebar\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--cr-border);\n  padding: 1.25rem;\n  background: rgb(var(--tb-surface));\n  color: var(--cr-on-surface);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__icon {\n  font-size: 1.5rem;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__title {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__text {\n  margin: 0.5rem 0 0 0;\n  font-size: 0.875rem;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__action {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__link {\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-sidebar__link:hover {\n  text-decoration: none;\n}\n\n/* =============================================================================\n * Modal (for Magic Link)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(var(--tb-scrim), 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  animation: cr-fade-in 0.15s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal {\n  background: rgb(var(--tb-surface));\n  color: var(--cr-on-surface);\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  max-width: 28rem;\n  width: calc(100% - 2rem);\n  position: relative;\n  animation: cr-slide-up 0.2s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-close:hover {\n  opacity: 1;\n}\n\n@keyframes cr-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes cr-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-overlay,\n  :where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal {\n    animation: none;\n  }\n}\n\n/* =============================================================================\n * Center States\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-center {\n  display: grid;\n  place-items: center;\n  gap: 0.75rem;\n  padding: 2rem 0;\n}\n\n/* =============================================================================\n * Success/Waitlist/Error States\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-waitlist,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed {\n  text-align: center;\n  padding: 2rem 1rem;\n}\n\n/* State icon color variants (layout from registration-shared.css) */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--success {\n  background: var(--cr-success-bg);\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--error {\n  background: var(--cr-error-bg);\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--waitlist,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .rb-state-icon--warning {\n  background: var(--cr-waitlist-bg);\n  color: var(--cr-waitlist-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success__title,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-waitlist__title,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error__title,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed__title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success__message,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-waitlist__message,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error__message,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed__message {\n  margin: 0;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-success__membership {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-error__retry,\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-payment-failed__retry {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Discount Code Section\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount {\n  margin-top: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-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) :where([data-block=\"course-registration\"]) .cr-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__input {\n  flex: 1;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--cr-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) :where([data-block=\"course-registration\"]) .cr-discount__input:focus {\n  outline: 2px solid var(--cr-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__remove {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__apply {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  cursor: pointer;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-discount__feedback {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* =============================================================================\n * Altcha (Spam Protection)\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-altcha {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Magic Link Form\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-magic-link-title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 700;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-auth-text {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.8;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-auth-text--success {\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-portal-auth-text--error {\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn {\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 0;\n  padding: 0.6rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-primaryText, 255 255 255));\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn--secondary {\n  background: transparent;\n  color: var(--cr-on-surface);\n  border: 1px solid var(--cr-border);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-modal-btn--secondary:hover {\n  background: var(--cr-on-surface-hover-bg);\n}\n\n/* =============================================================================\n * Utility Classes\n * =============================================================================\n */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-text--muted {\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-text--error {\n  color: var(--cr-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-text--success {\n  color: var(--cr-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-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/* Stack utility */\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack {\n  display: flex;\n  flex-direction: column;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack--gap-sm {\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack--gap-md {\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"course-registration\"]) .cr-stack--gap-lg {\n  gap: 1.5rem;\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(--section-text-color, rgb(var(--tb-text)));\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/* 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(--section-text-color, rgb(var(--tb-text)));\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/* 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 * 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(--section-text-color, rgb(var(--tb-text)));\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(--section-heading-color, rgb(var(--tb-primary, 0 0 0)));\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--plain .rb-feature-card-icon {\n  width: 1.5rem;\n  height: 1.5rem;\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/* =============================================================================\n * Shared: Card treatments\n *\n * Visual treatments referenced from `_cardStyles.treatment` (see\n * cardStylesOverrideSchema). Class names are emitted by the boxStyles\n * transform in @riverbankcms/blocks.\n *\n * Also contains feature-card media/padding behaviour shared by all looks:\n * - card images bleed to the card edges (flush photo tops)\n * - card-level padding replaces the content stack's fallback padding so the\n *   two never stack up\n * ============================================================================= */\n\n/* --- Feature card media + padding behaviour (all looks) -------------------- */\n\n/*\n * When a look gives the card real padding (rb-container-pad-*), the image\n * bleeds to the card edges and the inner content stack drops its fallback\n * padding so insets don't double up.\n */\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media {\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 + .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/* --- Soft panel ------------------------------------------------------------ */\n\n:where(.theme-scope) .rb-card-treatment-soft-panel {\n  transition: transform 250ms ease, box-shadow 250ms ease;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :where(.theme-scope) .rb-card-treatment-soft-panel:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 0.875rem 1.875rem rgba(var(--tb-shadow, 0 0 0), 0.1);\n  }\n}\n\n:where(.theme-scope) .rb-card-treatment-soft-panel .cta-row .button-ghost {\n  padding-inline: 0;\n}\n\n/* --- Editorial rule --------------------------------------------------------- */\n\n/*\n * Boxless open column: no background, no border box, a short brand rule\n * sitting on a full-width hairline at the top of the column.\n */\n:where(.theme-scope) .rb-card-treatment-editorial-rule {\n  margin-top: 1rem;\n  border-top: 1px solid\n    color-mix(in oklab, rgb(var(--tb-border, 229 231 235)), transparent 25%);\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 2.75rem;\n  height: 2px;\n  background: rgb(var(--tb-primary, 0 0 0));\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-media {\n  margin-top: 1.6rem;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.5);\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-content {\n  padding: 1.6rem 0 0.25rem;\n}\n\n:where(.theme-scope) .rb-card-treatment-editorial-rule .cta-row .button-ghost {\n  padding-inline: 0;\n}\n\n/* --- Colour-blocked --------------------------------------------------------- */\n\n/*\n * Bold, flat cards that each take a different palette colour by position,\n * cycled across the grid, with a staggered vertical offset on wider screens.\n * The background layer (`.rb-bg-surface`) is recoloured per card; the card's\n * text colour is set to the matching on-colour so content stays readable.\n */\n:where(.theme-scope) .rb-card-treatment-color-blocked {\n  box-shadow: none;\n}\n\n/* Per-card colour cycle. The `on*` colours are always derived by the palette\n * (expandPalette emits onSurface/onSecondary/onPrimary), so no fallback. */\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) > .rb-bg-surface {\n  background: rgb(var(--tb-surface));\n}\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {\n  color: rgb(var(--tb-onSurface));\n}\n\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {\n  background: rgb(var(--tb-secondary));\n}\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {\n  color: rgb(var(--tb-onSecondary));\n}\n\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {\n  background: rgb(var(--tb-primary));\n}\n:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {\n  color: rgb(var(--tb-onPrimary));\n}\n\n/* Body copy carries an inline muted colour from the block; force it to the\n * card's on-colour so it reads on every block (inline style needs !important). */\n:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {\n  color: inherit !important;\n  opacity: 0.9;\n}\n\n/* The number marker defaults to the brand accent, which collides with the\n * primary-coloured card in the cycle. On colour-blocked cards use the card's\n * own on-colour (the palette guarantees it's legible on that background) and a\n * faint tint of it for the badge, so the number always contrasts. */\n:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-number-zone {\n  color: inherit;\n  background-color: color-mix(in oklab, currentColor, transparent 88%);\n}\n\n/* Staggered offset: drop the middle column on wider screens. Scoped to a 3-up\n * grid (`.rb-grid-cols-3`) so 2-/4-column grids don't get a misaligned stagger;\n * the colour cycle still reads as a diagonal at any column count. */\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-grid-cols-3 .rb-card-treatment-color-blocked:nth-child(3n + 2) {\n    margin-top: 2.75rem;\n    /* Override the card's `h-full` so the grid's stretch shrinks the card by the\n     * margin (a genuinely shorter card) instead of keeping full height and\n     * overflowing the section, which clips the rounded bottom corners. */\n    height: auto;\n  }\n}\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-look=\"intro-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-look=\"intro-portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media {\n  aspect-ratio: 1 / 1 !important;\n  border-radius: 9999px;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-look=\"intro-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-look=\"intro-editorial-statement\"] .rb-intro-copy {\n  gap: var(--rb-space-5, 1.25rem);\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-look=\"intro-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}";