:root{/* Per-breakpoint values — superuser-editable via the design panel (Cards group). Kept here as fallbacks if ThemeProvider is bypassed (e.g. legacy preview surfaces). */ --site-card-min-h-mobile: auto; --site-card-min-h-tablet: 320px; --site-card-min-h-desktop: 360px; --site-card-media-aspect-mobile: 16 / 10; --site-card-media-aspect-tablet: 16 / 10; --site-card-media-aspect-desktop: 16 / 10; --site-card-padding-mobile: 1.25rem; --site-card-padding-tablet: 1.5rem; --site-card-padding-desktop: 1.75rem; --site-card-gap-mobile: 1rem; --site-card-gap-tablet: 1.25rem; --site-card-gap-desktop: 1.5rem; --site-card-radius: var(--site-radius, 12px); /* Active tokens default to the desktop variant. Media queries below drop them down at the project breakpoints (768 / 1024). */ --site-card-min-h: var(--site-card-min-h-desktop); --site-card-media-aspect: var(--site-card-media-aspect-desktop); --site-card-padding: var(--site-card-padding-desktop); --site-card-gap: var(--site-card-gap-desktop);}@container site style(--site-bp: mobile) or style(--site-bp: tablet){:root{--site-card-min-h: var(--site-card-min-h-tablet); --site-card-media-aspect: var(--site-card-media-aspect-tablet); --site-card-padding: var(--site-card-padding-tablet); --site-card-gap: var(--site-card-gap-tablet);}}@media (max-width: 1024px){:root{--site-card-min-h: var(--site-card-min-h-tablet); --site-card-media-aspect: var(--site-card-media-aspect-tablet); --site-card-padding: var(--site-card-padding-tablet); --site-card-gap: var(--site-card-gap-tablet);}}@container site style(--site-bp: mobile){:root{--site-card-min-h: var(--site-card-min-h-mobile); --site-card-media-aspect: var(--site-card-media-aspect-mobile); --site-card-padding: var(--site-card-padding-mobile); --site-card-gap: var(--site-card-gap-mobile);}}@media (max-width: 768px){:root{--site-card-min-h: var(--site-card-min-h-mobile); --site-card-media-aspect: var(--site-card-media-aspect-mobile); --site-card-padding: var(--site-card-padding-mobile); --site-card-gap: var(--site-card-gap-mobile);}}.site-layout,main.site-layout__main{-webkit-tap-highlight-color: transparent;}:root{--site-safe-pad-top: env(safe-area-inset-top, 0px); --site-safe-pad-right: env(safe-area-inset-right, 0px); --site-safe-pad-bottom: env(safe-area-inset-bottom, 0px); --site-safe-pad-left: env(safe-area-inset-left, 0px);}.media-renderer__image--loaded{opacity: 1;}@keyframes media-renderer-shine{ 100% { transform: translateX(100%); } }.carousel__dot--active{background-color: var(--site-primary, #0066cc);}.el-image-carousel__dot--active{background-color: var(--carousel-dot-active-color, var(--site-primary, #0066cc)); width: var(--carousel-dot-active-width, 24px);}@keyframes evara-cart-spin{ to { transform: rotate(360deg); } }@keyframes evara-cart-overlay-in{ from { opacity: 0; } to { opacity: 1; } }.evara-cart-widget__drawer--open{transform: translateX(0);}.evara-member-register__tier-option--selected{border-color: var(--site-primary, #2f6df6); background: rgba(47, 109, 246, 0.04);}.evara-member-upgrade__toggle-btn--active{background: var(--site-primary, #2f6df6); color: #ffffff;}.evara-member-upgrade__card--current{border-color: var(--site-primary, #2f6df6); position: relative;}.evara-member-upgrade__btn--current{background: var(--site-border, #e2e8f0); color: var(--site-text-muted, #718096); cursor: default;}.evara-book__step-indicator--current{opacity: 1;}.evara-book__category-btn--active{background: var(--site-primary, #2563eb); border-color: var(--site-primary, #2563eb); color: #fff;}.evara-book__service-card--selected{border-color: var(--site-primary, #2563eb); background: rgba(37, 99, 235, 0.04);}.evara-book__cal-cell--selected{background: var(--site-primary, #2563eb) !important; color: #fff !important; font-weight: 600;}.evara-book__slot--selected{background: var(--site-primary, #2563eb); border-color: var(--site-primary, #2563eb); color: #fff;}[data-website-id="1"]{--site-carousel-shadow-bleed-block: 80px; --site-carousel-shadow-bleed-inline: var(--cs-carousel-gap, var(--avail-card-gap, var(--fcard-gap, var(--tcard-gap, var(--site-card-gap, 1.5rem))))); --site-carousel-slide-bleed-block: 28px; --site-carousel-slide-bleed-inline: clamp(16px, var(--el-hud-tier-gap, var(--site-card-gap, 20px)), 32px);}.site-layout,.site-layout__main{font-size-adjust: from-font;}:where(.el-image__img, .el-cta-with-image__image, .el-feature-cards__card-image, .el-property-grid__card-image, .el-content-slider__slide-image, .el-gallery-item__image, .el-masonry-feed__item-image, .el-property-card-list__image, .el-floor-plans__image, .el-before-after__image, .el-mosaic-grid__image, .el-product-featured__image, .el-region-portfolio__card-image, .el-blog-card__image, .el-sticky-scroll__image){aspect-ratio: var(--el-image-aspect, var(--site-card-media-aspect, 16 / 10));}:where( [class$="__card-media"] > img:not([class*="-background"]):not([style*="position:absolute"]), [class$="__card-image-wrap"] > img:not([class*="-background"]):not([style*="position:absolute"]) ){width: 100%; height: 100%; display: block; object-fit: cover;} :root{/* Per-breakpoint defaults — superuser-editable via the design panel (Typography group). Kept here as fallbacks if ThemeProvider is bypassed. Values mirror SITE_TOKEN_DEFAULTS in themeContract.ts. */ --site-heading-1-mobile: 2.25rem; --site-heading-1-tablet: 2.75rem; --site-heading-1-desktop: 3.5rem; --site-heading-2-mobile: 1.75rem; --site-heading-2-tablet: 2.25rem; --site-heading-2-desktop: 2.75rem; --site-heading-3-mobile: 1.375rem; --site-heading-3-tablet: 1.625rem; --site-heading-3-desktop: 1.875rem; --site-heading-4-mobile: 1.125rem; --site-heading-4-tablet: 1.25rem; --site-heading-4-desktop: 1.375rem; --site-heading-5-mobile: 1rem; --site-heading-5-tablet: 1.0625rem; --site-heading-5-desktop: 1.125rem; --site-body-size-mobile: 1rem; --site-body-size-tablet: 1rem; --site-body-size-desktop: 1.0625rem; --site-lede-size-mobile: 1.0625rem; --site-lede-size-tablet: 1.125rem; --site-lede-size-desktop: 1.1875rem; --site-small-size-mobile: 0.875rem; --site-small-size-tablet: 0.875rem; --site-small-size-desktop: 0.9375rem; --site-eyebrow-size: 0.875rem; --site-eyebrow-spacing: 0.08em; --site-eyebrow-transform: uppercase; --site-lh-tight: 1.15; --site-lh-base: 1.5; --site-lh-loose: 1.7; --site-fw-regular: 400; --site-fw-medium: 500; --site-fw-semibold: 600; --site-fw-bold: 700; --site-fw-extrabold: 800; /* ─── Focus ring contract ───────────────────────────────────────── Universal focus-ring tokens read by every interactive element on a tenant site (`.site-btn`, `.el-back-to-top`, navbar links, form inputs, accordion triggers, etc.). One token swap in the design panel retints every focus ring on the site. Component CSS reads `var(--site-focus-ring-*)` and falls back to `--site-accent`. */ --site-focus-ring-color: var(--site-accent); --site-focus-ring-width: 2px; --site-focus-ring-offset: 2px; /* ─── Accent text on light surfaces ──────────────────────────────── `--site-accent` is tuned for use as a fill (chips, buttons, card borders) where contrast against text is the contract, not contrast against a light page background. Many "label as accent text" cases (eyebrow, timeline date, floorplan stat label) rendered the raw accent on white — which fails WCAG 4.5:1 for popular gold/yellow accents (e.g. Momentum #c9a84c → 2.17 on #f8f9fb). `--site-accent-on-light` darkens the accent by ~45% in oklab so the same hue still reads as "accent" but passes contrast. Authors can override per-site if their accent is already dark. */ --site-accent-on-light: color-mix(in oklab, var(--site-accent, currentColor) 55%, black); /* Active tokens default to the desktop variant. Media queries below swap them onto the tablet/mobile variants at the project breakpoints (1024 / 768) so every renderer that reads `var(--site-heading-2)` tracks the same ladder. */ --site-heading-1: var(--site-heading-1-desktop); --site-heading-2: var(--site-heading-2-desktop); --site-heading-3: var(--site-heading-3-desktop); --site-heading-4: var(--site-heading-4-desktop); --site-heading-5: var(--site-heading-5-desktop); --site-body-size: var(--site-body-size-desktop); --site-lede-size: var(--site-lede-size-desktop); --site-small-size: var(--site-small-size-desktop);}@container site style(--site-bp: mobile) or style(--site-bp: tablet){:root{--site-heading-1: var(--site-heading-1-tablet); --site-heading-2: var(--site-heading-2-tablet); --site-heading-3: var(--site-heading-3-tablet); --site-heading-4: var(--site-heading-4-tablet); --site-heading-5: var(--site-heading-5-tablet); --site-body-size: var(--site-body-size-tablet); --site-lede-size: var(--site-lede-size-tablet); --site-small-size: var(--site-small-size-tablet);}}@media (max-width: 1024px){:root{--site-heading-1: var(--site-heading-1-tablet); --site-heading-2: var(--site-heading-2-tablet); --site-heading-3: var(--site-heading-3-tablet); --site-heading-4: var(--site-heading-4-tablet); --site-heading-5: var(--site-heading-5-tablet); --site-body-size: var(--site-body-size-tablet); --site-lede-size: var(--site-lede-size-tablet); --site-small-size: var(--site-small-size-tablet);}}@container site style(--site-bp: mobile){:root{--site-heading-1: var(--site-heading-1-mobile); --site-heading-2: var(--site-heading-2-mobile); --site-heading-3: var(--site-heading-3-mobile); --site-heading-4: var(--site-heading-4-mobile); --site-heading-5: var(--site-heading-5-mobile); --site-body-size: var(--site-body-size-mobile); --site-lede-size: var(--site-lede-size-mobile); --site-small-size: var(--site-small-size-mobile);}}@media (max-width: 768px){:root{--site-heading-1: var(--site-heading-1-mobile); --site-heading-2: var(--site-heading-2-mobile); --site-heading-3: var(--site-heading-3-mobile); --site-heading-4: var(--site-heading-4-mobile); --site-heading-5: var(--site-heading-5-mobile); --site-body-size: var(--site-body-size-mobile); --site-lede-size: var(--site-lede-size-mobile); --site-small-size: var(--site-small-size-mobile);}}h1,h2,h3,h4,h5,h6{word-break: keep-all; overflow-wrap: break-word; hyphens: none; -webkit-hyphens: none;} html,body{margin: 0; padding: 0; width: 100%;}:root{--site-page-gutter: var(--site-content-gutter, clamp(1rem, 4vw, 2rem));}@container site style(--site-bp: mobile){:root{--site-page-gutter: 0px;}[data-mobile-full-bleed="true"] .el-site-container{padding-inline: 0 !important;}}@media (max-width: 768px){:root{--site-page-gutter: 0px;}[data-mobile-full-bleed="true"] .el-site-container{padding-inline: 0 !important;}}.el{background: var(--el-bg, var(--el-bg-default, transparent)); color: var(--el-color, var(--el-color-default, inherit)); border-radius: var(--el-radius, var(--el-radius-default, 0px));}.el > :not(style){padding: var(--el-padding, var(--el-padding-default, 0)); border-radius: var(--el-radius, var(--el-radius-default, 0px)); box-shadow: var(--el-shadow, var(--el-shadow-default, none));}.el[style*="--el-padding-top:"] > :not(style){padding-top: var(--el-padding-top);}.el[style*="--el-padding-right:"] > :not(style){padding-right: var(--el-padding-right);}.el[style*="--el-padding-bottom:"] > :not(style){padding-bottom: var(--el-padding-bottom);}.el[style*="--el-padding-left:"] > :not(style){padding-left: var(--el-padding-left);}.el--top-level{position: relative;}.el[id]{scroll-margin-top: calc( var(--navbar-shell-inset-top, 14px) + max(var(--navbar-height, 64px), 70px) + var(--navbar-shell-inset-bottom, 14px) + 8px );}.el--navbar[id],.el--footer[id],.el--loading[id]{scroll-margin-top: 0;}html{scroll-padding-top: var(--site-header-offset, 0px);}html[data-site-header-measured="true"] .el[id]{scroll-margin-top: 0;}.el--top-level::before{content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: calc(100vw - var(--scrollbar-w, 0px)); margin-left: calc(-50vw + (var(--scrollbar-w, 0px) * 0.5)); background: var(--el-bg, var(--el-bg-default, transparent)); pointer-events: none;}.el--top-level.el--navbar::before,.el--top-level.el--footer::before,.el--top-level.el--loading::before{content: none;}:where(.el .el){--el-padding: initial; --el-padding-top: initial; --el-padding-right: initial; --el-padding-bottom: initial; --el-padding-left: initial; --el-padding-default: 0; --el-bg: initial; --el-bg-default: transparent; --el-color: initial; --el-color-default: inherit; --el-radius: initial; --el-radius-default: 0px; --el-shadow: initial; --el-shadow-default: none;}.el--heading,.el--rich-text,.el--eyebrow,.el--subheading,.el--rating,.el--button{--el-padding: initial; --el-padding-top: initial; --el-padding-right: initial; --el-padding-bottom: initial; --el-padding-left: initial; --el-padding-default: 0; --el-bg: initial; --el-bg-default: transparent; --el-color: initial; --el-color-default: inherit; --el-radius: initial; --el-radius-default: 0px; --el-shadow: initial; --el-shadow-default: none;}.el.el--stretched{background: var(--el-bg, transparent); color: var(--el-color, inherit); position: relative; left: 50%; width: calc(100vw - var(--scrollbar-w, 0px)) !important; margin-left: calc(-50vw + (var(--scrollbar-w, 0px) * 0.5)) !important; margin-right: calc(-50vw + (var(--scrollbar-w, 0px) * 0.5)) !important;}.el--flex > :not(style){flex: 1 1 auto; min-width: 0;}html,body{margin: 0; padding: 0;}body{overflow-x: clip;}body{container-type: inline-size; container-name: site; --site-bp: desktop;}nextjs-portal,[data-nextjs-toast],[data-next-badge-root]{display: none !important;}.el--navbar{width: 100%; margin: 0; padding: 0; position: sticky; top: 0; z-index: 4000; isolation: isolate; /* The wrapper itself is never painted — the inner `.el-navbar` (or the `position:fixed` chrome for transparent-to-solid / floating / transparent variants) is the only visible bg layer. Without this, an `.el--stretched` navbar with `--el-bg: ` (set by the inspector's Background Color field) paints a full-width band behind the nav at every breakpoint — invisible on desktop because the wrapper collapses to 0 height when the inner is fixed, but visible on mobile/tablet where the wrapper occupies layout, producing the navy "anchored bg" strip on Momentum. */ background: transparent !important;}.el--navbar:has(> .el-navbar--transparent-to-solid.el-navbar--sticky), .el--navbar:has(> .el-navbar--floating), .el--navbar:has(> .el-navbar--transparent){ height: 0; min-height: 0; overflow: visible; /* Floating-pill variants own their own visual inset via `--navbar-shell-inset-top/-bottom/-x`. Author-set inspector padding on the navbar wrapper (`--el-padding-*` inline custom props) would otherwise cascade onto the inner `.el-navbar` via the universal `.el > :not(style) { padding-top: var(--el-padding-top); }` rule — producing a visible gap above the pill (the page bg leaks through the transparent fixed nav). Zero them out on these variants so the pill sits flush against the fixed nav's `top: var(--navbar-shell-inset-top)` position. Authors still control the pill's vertical inset via the dedicated `Shell Inset Top/Bottom` fields on the navbar inspector. `!important` is required because ElementWrapper emits the author's `paddingTop/Bottom/Left/Right` inspector values as INLINE styles on the wrapper (`style="--el-padding-top: 12px"`), and inline styles beat normal CSS specificity. !important on a custom-property declaration wins against an inline custom-property declaration without !important — that's how we override here. */ --el-padding: 0 !important; --el-padding-top: 0 !important; --el-padding-right: 0 !important; --el-padding-bottom: 0 !important; --el-padding-left: 0 !important; }.site-layout:has(.el-navbar--transparent-to-solid.el-navbar--sticky) > header{position: fixed; top: 0; left: 0; right: var(--scrollbar-w, 0px); height: calc(var(--navbar-shell-inset-top, 14px) + max(var(--navbar-height, 64px), 70px) + var(--navbar-shell-inset-bottom, 14px)); z-index: 4000; overflow: visible; pointer-events: none;}.site-layout:has(.el-navbar--transparent-to-solid.el-navbar--sticky) > header .el--navbar{pointer-events: auto;}@media (min-width: 769px){.site-layout:has(.el-navbar--transparent-to-solid.el-navbar--sticky) > header{position: fixed; top: 0; left: 0; right: var(--scrollbar-w, 0px); height: calc(var(--navbar-shell-inset-top, 14px) + max(var(--navbar-height, 64px), 70px) + var(--navbar-shell-inset-bottom, 14px)); z-index: 4000; overflow: visible; pointer-events: auto;}.el--navbar:has(> .el-navbar--transparent-to-solid.el-navbar--sticky){position: fixed !important; top: 0; left: 0; right: var(--scrollbar-w, 0px); height: calc(var(--navbar-shell-inset-top, 14px) + max(var(--navbar-height, 64px), 70px) + var(--navbar-shell-inset-bottom, 14px)); min-height: calc(var(--navbar-shell-inset-top, 14px) + max(var(--navbar-height, 64px), 70px) + var(--navbar-shell-inset-bottom, 14px)); z-index: 4000; pointer-events: auto;}}.el-navbar--sticky{position: sticky; top: 0;}.el-navbar__link--active{color: var(--navbar-link-active, var(--navbar-link-color, var(--site-primary)));}.el-navbar__search-drawer--open{max-height: min(78vh, 640px); opacity: 1; pointer-events: auto; box-shadow: 0 18px 42px rgba(8, 14, 25, var(--navbar-search-drawer-shadow-alpha, 0)), var(--site-shadow-md); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}html:not(.is-builder-canvas){scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--site-accent, deepskyblue) 55%, transparent) transparent;}html:not(.is-builder-canvas)::-webkit-scrollbar{width: 12px; height: 12px;}html:not(.is-builder-canvas)::-webkit-scrollbar-track{background: transparent;}html:not(.is-builder-canvas)::-webkit-scrollbar-thumb{background: color-mix(in srgb, var(--site-accent, deepskyblue) 45%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;}html:not(.is-builder-canvas)::-webkit-scrollbar-thumb:hover{background: color-mix(in srgb, var(--site-accent, deepskyblue) 80%, transparent); background-clip: padding-box;}html:not(.is-builder-canvas)::-webkit-scrollbar-corner{background: transparent;}@keyframes el-navbar-spin{ to { transform: rotate(360deg); } }.el-navbar__search-result--active{background: var(--navbar-search-result-hover-bg, color-mix(in srgb, currentColor 7%, transparent)); transform: translateX(2px);}.el-navbar__mobile-toggle{ display: none; /* Hamburger reads as a peer to the primary "Get Started" CTA — solid primary fill, white icon, no border. Defaulting to a transparent pill with an outlined border produced a faint ghost button next to a vivid CTA, breaking the visual cluster. Authors can still pin a different look via mobileActionBg / mobileActionColor / mobileActionBorder (→ --navbar-mobile-action-{bg,color,border}). The search-toggle vars stay in the fallback chain so themes that wired the search pill to a brand colour (e.g. Momentum gold) still cascade through. */ background: var(--navbar-mobile-action-bg, var(--navbar-search-bg, var(--site-primary, var(--site-accent, transparent)))); /* Border colour: transparent by default so the solid primary fill reads as a single filled pill (matches the Get Started CTA). Authors can bring an outline back via mobileActionBorder. */ border: var(--navbar-search-border-width, 1px) solid var(--navbar-mobile-action-border, var(--navbar-search-border, transparent)); /* Mobile action size + radius unify the hamburger and the search toggle so the two pills always read at the same visual weight. Authors can swap the size token via the "Mobile Action Size" inspector control; the radius can be turned square via "Mobile Action Radius". */ border-radius: var(--navbar-mobile-action-radius, var(--navbar-search-radius, 999px)); cursor: pointer; width: var(--navbar-mobile-action-size, var(--navbar-search-size, 46px)); height: var(--navbar-mobile-action-size, var(--navbar-search-size, 46px)); padding: 0; /* Hamburger icon stroke colour — white-on-primary so the icon reads on the solid primary fill above (sibling to .site-btn--primary which is primary bg + primary-fg text). --site-primary-fg is the on-primary surface colour (typically #fff). Falls back to #fff for themes that forgot to define it. Authors can still override with `mobileActionColor` (→ --navbar-mobile-action-color) or `searchIconColor` (→ --navbar-search-color). */ color: var(--navbar-mobile-action-color, var(--navbar-search-color, var(--site-primary-fg, currentColor))); align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; box-shadow: none; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Stacking + touch reliability fix (mobile, scrolled state): 1. position:relative + z-index ensures the toggle always sits above any scrolled-state pseudo-element / sibling overlay inside the inner shell. Without an explicit z-index the open drawer's backdrop-filter stacking context could float a sibling above the toggle on iOS. 2. touch-action:manipulation removes the 300ms double-tap-zoom delay AND prevents iOS Safari from swallowing the tap when the parent .el-navbar__inner has `backdrop-filter` (a known WebKit quirk where backdrop-filter ancestors intermittently block synthetic click events on interactive descendants). */ position: relative; z-index: 2; touch-action: manipulation; }.el-navbar__links--open{--navbar-drawer-surface: var(--navbar-drawer-bg, var(--site-bg, var(--site-surface, transparent))); --navbar-drawer-ink: var(--navbar-drawer-text, var(--site-text, var(--site-primary, inherit))); --navbar-drawer-line: var(--navbar-drawer-divider, color-mix(in srgb, var(--navbar-drawer-ink) 11%, transparent)); --navbar-drawer-primary-soft: color-mix(in srgb, var(--site-primary, currentColor) 9%, var(--navbar-drawer-surface)); --navbar-drawer-accent-soft: color-mix(in srgb, var(--site-accent, var(--site-primary, currentColor)) 12%, transparent); background: linear-gradient(180deg, var(--navbar-drawer-primary-soft) 0%, var(--navbar-drawer-surface) 42%) !important; color: var(--navbar-drawer-ink) !important; /* The drawer Content carries both `.el-navbar__links` (desktop row layout) AND `.el-navbar__links--open` (open drawer). The desktop rule sets `align-items: center`, which on a flex-column collapses children to content width on the cross axis. Force stretch so nav/li/link rows fill the full drawer width. */ align-items: stretch !important; justify-content: flex-start !important;}.el-navbar__links--open .el-navbar__link--active{color: var(--site-accent, var(--navbar-dropdown-active-text, currentColor)) !important;}.el-navbar__links--open .el-navbar__link--active::after{display: none;}.el-navbar__links--open .el-navbar__dropdown-item--active{color: var(--site-accent, var(--navbar-dropdown-active-text, currentColor)) !important; background: transparent; box-shadow: none;}@property --scrollbar-w{ syntax: ''; inherits: true; initial-value: 0px; }body{--scrollbar-w: calc(100vw - 100%);}.el-navbar--scrolled{background: transparent !important; border-bottom-color: transparent !important; box-shadow: none; backdrop-filter: none;}.el-navbar__link--active{color: var(--site-nav-active-color, var(--site-accent, var(--site-primary))) !important; position: relative;}.el-navbar__link--active::after{content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; border-radius: 999px; transform: scaleX(1); transform-origin: center; opacity: 0.9; transition: transform 0.25s ease, opacity 0.25s ease;}.el-navbar--scrolled .el-navbar__link--active{color: var(--site-nav-active-color-scrolled, var(--site-primary, var(--site-accent))) !important;}.el-navbar--scrolled .el-navbar__link--active::after{background: var(--site-nav-active-color-scrolled, var(--site-primary, var(--site-accent)));}.el--intent-card{ /* Grid equal-height contract: `display:contents` on the card-shell means this ElementWrapper IS the actual grid item. `.el-compound-section__cards > *` targets the shell and never reaches here, so height:100% must be declared explicitly so the nested `.el-intent-router__card { height:100% }` can resolve against a definite containing-block height. */ height: 100%; --el-padding-default: var(--ir-card-padding, clamp(1.75rem, 2.5vw, 2.5rem)); /* Inherit the router's card-radius knob so the `.el > :not(style)` rule (specificity 0,1,1) — which otherwise wins over `.el-intent-router__card` (0,1,0) — resolves to the author-set radius instead of the `:where(.el .el)` reset's 0px default. The fallback chain mirrors `.el-intent-router__card` so visuals stay identical whichever rule ultimately paints. */ --el-radius-default: var(--intent-router-card-radius, var(--site-radius-lg, 16px)); /* Same pattern for bg and shadow — without these, :where(.el .el) resets --el-bg-default to transparent and --el-shadow-default to none, causing .el > :not(style) to zero the card background and shadow on light-tone sections (dark-tone has a higher-specificity override at (0,2,0)). */ --el-bg-default: var(--ir-card-bg, color-mix(in srgb, var(--site-surface, transparent) 92%, transparent)); --el-shadow-default: var(--ir-card-shadow, var(--site-card-shadow)); }@keyframes el-navbar-fadeIn{ from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }.el-navbar__dropdown-item--active{background: var(--navbar-dropdown-active-bg, var(--navbar-dropdown-hover-bg, color-mix(in srgb, var(--site-accent, currentColor) 12%, transparent))); color: var(--navbar-dropdown-active-text, var(--navbar-dropdown-text, var(--site-text, currentColor)));}@keyframes el-navbar-flyIn{ from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }@media (max-width: 1024px){.site-layout:has(.el-navbar--transparent-to-solid.el-navbar--sticky) > header{position: fixed; top: 0; left: 0; right: 0; width: 100vw; height: max(var(--navbar-height, 64px), 64px); min-height: max(var(--navbar-height, 64px), 64px); overflow: visible; pointer-events: auto;}.site-layout:has(.el-navbar--transparent-to-solid.el-navbar--sticky) > header .el--navbar{position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: max(var(--navbar-height, 64px), 64px) !important; min-height: max(var(--navbar-height, 64px), 64px) !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible;}}.el{position: relative; box-sizing: border-box;}.el.el--navbar{position: sticky; top: 0; z-index: 4000;}:root{--site-section-pad-y: var(--site-section-pad-y-desktop, 5rem);}@container site style(--site-bp: mobile) or style(--site-bp: tablet){:root{--site-section-pad-y: var(--site-section-pad-y-tablet, 4rem);}}@media (max-width: 1024px){:root{--site-section-pad-y: var(--site-section-pad-y-tablet, 4rem);}}@container site style(--site-bp: mobile){:root{--site-section-pad-y: var(--site-section-pad-y-mobile, 3rem);}}@media (max-width: 768px){:root{--site-section-pad-y: var(--site-section-pad-y-mobile, 3rem);}}.el--stats:not(.el-section__inner *){padding: 0;}.el--gallery:not(.el-section__inner *):not([style*="--el-padding-top:"]){padding-top: var(--site-section-pad-y);}.el--gallery:not(.el-section__inner *):not([style*="--el-padding-bottom:"]){padding-bottom: var(--site-section-pad-y);}.el--contact-section:not(.el-section__inner *):not([style*="--el-padding-top:"]){padding-top: var(--site-section-pad-y);}.el--contact-section:not(.el-section__inner *):not([style*="--el-padding-bottom:"]){padding-bottom: var(--site-section-pad-y);}.el--feature-cards:not(.el-section__inner *):not([style*="--el-padding-top:"]){padding-top: var(--site-section-pad-y);}.el--feature-cards:not(.el-section__inner *):not([style*="--el-padding-bottom:"]){padding-bottom: var(--site-section-pad-y);}.el--team:not(.el-section__inner *):not([style*="--el-padding-top:"]){padding-top: var(--site-section-pad-y);}.el--team:not(.el-section__inner *):not([style*="--el-padding-bottom:"]){padding-bottom: var(--site-section-pad-y);}.el--button{display: inline-block; margin: 0.25rem 0.5rem 0.25rem 0;}@container site style(--site-bp: mobile){.el--button{display: block; margin: 0.5rem 0;}}@media (max-width: 480px){.el--button{display: block; margin: 0.5rem 0;}}@container site style(--site-bp: mobile){.el--hide-mobile{display: none !important;}}@media (max-width: 480px){.el--hide-mobile{display: none !important;}}@container site (min-width: 481px) and (max-width: 768px){.el--hide-tablet{display: none !important;}}@media (min-width: 481px) and (max-width: 768px){.el--hide-tablet{display: none !important;}}@container site style(--site-bp: tablet) or style(--site-bp: desktop){.el--hide-desktop{display: none !important;}}@media (min-width: 769px){.el--hide-desktop{display: none !important;}}.skip-nav{position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 12px 24px; background: var(--site-primary); color: var(--site-primary-fg, currentColor); font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 8px; transition: top 0.15s ease;}.skip-nav:focus{top: 0; outline: 2px solid var(--site-primary); outline-offset: 2px;}:focus-visible{outline: 2px solid var(--site-primary); outline-offset: 2px;}@media (forced-colors: active){.el-tabs__tab--active{border-bottom: 3px solid Highlight;}.skip-nav{border: 2px solid ButtonText;}}@container site style(--site-bp: mobile){.el--button{display: block; margin: 0.375rem 0;}}@media (max-width: 768px){.el--button{display: block; margin: 0.375rem 0;}}.el-footer__status--visible::after{opacity: 1;}@keyframes el-footer-status-aurora{ 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -3%) scale(1.05); } 100% { transform: translate(-3%, 4%) scale(0.97); } }@keyframes el-footer-status-live-blink{ 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }@keyframes el-footer-status-gauge-pulse{ 0%, 100% { opacity: 0.38; transform: scale(0.92); } 50% { opacity: 0.74; transform: scale(1.06); } }@keyframes el-footer-status-gauge-pulse-ring{ 0% { opacity: 0.56; transform: scale(0.86); } 100% { opacity: 0; transform: scale(1.16); } }@keyframes el-footer-status-ring-blowout{ 0% { opacity: 1; transform: scale(1); } 55% { opacity: 0; transform: scale(1.55); } 100% { opacity: 0; transform: scale(1.6); } }@keyframes el-footer-status-ring-fresh-in{ 0% { opacity: 0; transform: scale(0.86); } 55% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }@keyframes el-footer-status-caret-blink{ 0%, 49% { opacity: 0.85; } 50%, 100% { opacity: 0; } }@keyframes el-footer-status-complete-pulse{ 0% { opacity: 0.85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }@keyframes el-footer-logo-float{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }:where(.el-site-container){width: 100%; max-width: var(--site-max-width, 1280px); margin-inline: auto; padding-inline: var(--site-content-gutter, clamp(1rem, 4vw, 2rem)); box-sizing: border-box;}:where(.el-site-container--narrow){max-width: var(--site-container-narrow, 720px);}:where(.el-site-container--wide){max-width: var(--site-container, 1440px);}:where(.el-site-container--full){max-width: 100%; padding-inline: 0;}.el-site-container .el-site-container{padding-inline: 0;} :where(:root){--site-card-shadow: 0 4px 16px -8px rgba(2, 12, 27, 0.20), 0 12px 32px -12px rgba(2, 12, 27, 0.12); --site-card-hover-shadow: 0 12px 36px -10px rgba(2, 12, 27, 0.28), 0 24px 64px -16px rgba(2, 12, 27, 0.18); --site-card-hover-lift: 4px; --site-card-transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1);}[data-dot-style="round"] > button[class*="__dot"]{border-radius: 999px;}[data-dot-style="round"] > button[class*="__dot"][class*="--active"]{width: var(--carousel-dot-size, 8px); /* equal width — round, no pill expansion */ border-radius: 999px;}[data-dot-style="square"] > button[class*="__dot"],[data-dot-style="square"] > button[class*="__dot"][class*="--active"]{border-radius: 2px;}[data-dot-style="bar"] > button[class*="__dot"]{height: 3px; border-radius: 0; width: var(--carousel-dot-active-width, 24px);}[data-dot-style="bar"] > button[class*="__dot"][class*="--active"]{height: 3px; border-radius: 0;}[data-dot-style="ring"] > button[class*="__dot"]{background: transparent !important; border: 2px solid var(--carousel-dot-color, currentColor); border-radius: 999px; box-sizing: border-box;}[data-dot-style="ring"] > button[class*="__dot"][class*="--active"]{background: var(--carousel-dot-active-color, var(--site-accent)) !important; border-color: var(--carousel-dot-active-color, var(--site-accent)); width: var(--carousel-dot-size, 8px); /* ring active stays round, not pill */}.el-comparison-carousel__dot--active{background: var(--carousel-dot-active-color, var(--site-accent)); width: var(--carousel-dot-active-width, 1.5rem);}.el--hero{width: 100vw; margin-left: calc(-50vw + 50%);}.el--editorial-marquee{width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;}.el-compound-section__cards .el--feature-card{display: flex; height: 100%;}.el-feature-cards__dot--active{background: var(--carousel-dot-active-color, var(--site-primary)); width: var(--carousel-dot-active-width, 24px); border-radius: 4px;}.el-cta-with-image--has-section-bg::before{content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 135deg, color-mix(in srgb, var(--site-surface, transparent) 82%, transparent), color-mix(in srgb, var(--site-surface, transparent) 55%, transparent) );}.el.el--team-member{/* Match wrapper radius to card radius so any builder-configured border on the wrapper follows the card's rounded corners (borders go on .el, radius via --el-* goes on .el > :not(style) by default). */ --el-radius-default: var(--team-card-border-radius, 24px);}@keyframes testimonial-star-fill{ 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); color: var(--site-border); } }@keyframes testimonial-star-fill-gold{ 0% { opacity: 0; transform: scale(0.5); } 60% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); color: var(--el-star-fill, var(--site-surface)); } }.el-testimonials__dot--active{background: var(--carousel-dot-active-color, var(--site-primary)); width: var(--carousel-dot-active-width, 24px); border-radius: 4px;}.el--section:has(.el-stats--dark),.el--section:has(.el-compound-section--tone-dark.el-stats){margin: 0;}.el--hero + .el--stats{margin-top: -3.5rem; position: relative; z-index: 3;}@keyframes el-stats-icon-pulse{ 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }.el-gallery__filter--active{background: var(--site-primary); border-color: var(--site-primary); color: var(--site-primary-fg);}.el-pricing-card__plan{ position: relative; /* Equal-height contract: the wrapper grid declares grid-auto-rows: 1fr + align-items: stretch, but without explicit height the card collapses to content height — so cards with different feature counts or optional badges render at different sizes. Force full track height. */ height: 100%; min-height: 0; background: var(--pricing-card-bg, var(--site-surface, transparent)); backdrop-filter: var(--pricing-card-backdrop-filter, none); -webkit-backdrop-filter: var(--pricing-card-backdrop-filter, none); border: var(--pricing-card-border-width, 1px) solid var(--pricing-card-border-color, var(--site-border)); /* Per-side accent bars rendered via border-{side}-width / border-{side}-color (NOT pseudos) so each stripe inherits the card's border-radius cleanly — pseudos get their corner radius clamped to half their own thickness, which overshoots past the much-larger card radius. When --pricing-card-accent-bar-* is unset, vars fall back to the regular 1px border above. */ border-top-width: var(--pricing-card-accent-bar-height, var(--pricing-card-border-width, 1px)); border-top-color: var(--pricing-card-accent-bar-color, var(--pricing-card-border-color, var(--site-border))); border-right-width: var(--pricing-card-accent-bar-right-height, var(--pricing-card-border-width, 1px)); border-right-color: var(--pricing-card-accent-bar-right-color, var(--pricing-card-border-color, var(--site-border))); border-bottom-width: var(--pricing-card-accent-bar-bottom-height, var(--pricing-card-border-width, 1px)); border-bottom-color: var(--pricing-card-accent-bar-bottom-color, var(--pricing-card-border-color, var(--site-border))); border-left-width: var(--pricing-card-accent-bar-left-height, var(--pricing-card-border-width, 1px)); border-left-color: var(--pricing-card-accent-bar-left-color, var(--pricing-card-border-color, var(--site-border))); border-radius: var(--pricing-card-border-radius, var(--site-card-radius, var(--site-radius, 8px))); padding: var(--pricing-card-padding, var(--site-card-padding, 2.5rem 2rem)); /* Glass cards stack the inner highlight on top of the regular shadow. Both layer fallbacks MUST be '0 0 transparent' (NOT 'none') so the comma-joined declaration stays valid when either var is unset. Resting elevation falls through --site-card-elevation. */ box-shadow: var(--pricing-card-highlight, 0 0 transparent), var(--pricing-card-shadow, var(--site-card-elevation, var(--site-card-shadow))); text-align: center; display: flex; flex-direction: column; align-items: center; transition: var(--site-card-transition), background 280ms cubic-bezier(0.4, 0, 0.2, 1); }@keyframes logo-slider-marquee{ from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }.el-content-slider__dot--active{background: var(--carousel-dot-active-color, var(--site-accent)); width: var(--carousel-dot-active-width, 20px); border-radius: 4px;}@keyframes el-upload-shimmer{ from { transform: translateX(-100%); } to { transform: translateX(100%); } }:where(:root, .el-site-root){ /* Typography scale — single source of truth for display/h1..h6. Renderers should apply via the .el-heading--{display|h1..h6} class hooks below, never by setting fontSize inline. */ --site-heading-display-size: clamp(2.75rem, 5.5vw, 4.5rem); --site-heading-display-tracking: -0.04em; --site-heading-h1-size: clamp(2rem, 4vw, 3rem); --site-heading-h1-tracking: -0.03em; --site-heading-h2-size: clamp(1.625rem, 3vw, 2.25rem); --site-heading-h2-tracking: -0.02em; --site-heading-h3-size: clamp(1.25rem, 2.2vw, 1.625rem); --site-heading-h3-tracking: -0.015em; --site-heading-h4-size: 1.125rem; --site-heading-h4-tracking: -0.01em; --site-heading-h5-size: 1rem; --site-heading-h5-tracking: 0; --site-heading-h6-size: 0.875rem; --site-heading-h6-tracking: 0.02em; --site-heading-line: 1.15; --site-heading-weight: 700; /* Eyebrow / subheading contract — applied to anything uppercase-tracked. */ --site-eyebrow-size: 0.72rem; --site-eyebrow-tracking: 0.18em; --site-eyebrow-weight: 800; --site-eyebrow-transform: uppercase; --site-subheading-size: 1.0625rem; --site-subheading-line: 1.55; --site-subheading-weight: 500; /* Media aspect ratios — applied via .el-media--{variant} classes. Override at any scope: `--site-media-aspect-card: 1 / 1`, etc. These :root values are CSS-only fallbacks used when ThemeProvider is not in the tree (e.g. plain template previews). When ThemeProvider is present, the values from src/lib/themeContract.ts win — see SKILL.md § Media Aspect Ratio Contract. */ --site-media-aspect-hero: 21 / 9; --site-media-aspect-wide: 21 / 9; --site-media-aspect-card: 4 / 3; --site-media-aspect-portrait: 4 / 5; --site-media-aspect-square: 1 / 1; --site-media-aspect-story: 9 / 16; --site-media-aspect-landscape: 16 / 10; --site-media-aspect-video: 16 / 9; --site-media-aspect-cinematic: 2.4 / 1; }.el-has-quote-chrome::before{content: '\201C'; position: absolute; top: var(--quote-chrome-top, -0.35em); left: var(--quote-chrome-left, 0.35em); font-family: var(--quote-chrome-font, 'Georgia', 'Times New Roman', serif); font-size: var(--quote-chrome-size, 4.5rem); line-height: 1; color: var(--quote-chrome-color, var(--site-accent, var(--site-primary, currentColor))); opacity: var(--quote-chrome-opacity, 0.22); pointer-events: none; font-weight: 900;}.el-has-quote-chrome{position: relative;}.el-pricing-billing-toggle__btn--active{background: var(--pbt-active-bg); color: var(--pbt-active-fg); box-shadow: 0 6px 18px color-mix(in srgb, var(--pbt-active-bg) 30%, transparent);}.el--form.el--top-level{padding: clamp(56px, 7vw, 96px) var(--site-content-gutter, 24px); background: var(--site-surface-alt, color-mix(in srgb, var(--site-surface, transparent), var(--site-text, currentColor) 4%));}:where(.el .el).el--form{max-width: var(--el-form-max-width, 920px); margin-inline: auto;}@keyframes el-gallery-lightbox-fade-in{ from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }@keyframes ic-ken-burns{ from { transform: scale(1); } to { transform: scale(calc(1 + var(--ic-kb-intensity, 0) * 0.01)); } }@container site style(--site-bp: mobile){.el-compound-section__cards{grid-auto-rows: auto;}.el-compound-section__cards > *{height: auto;}}@media (max-width: 480px){.el-compound-section__cards{grid-auto-rows: auto;}.el-compound-section__cards > *{height: auto;}}.el-search-results__chip--active{background: var(--sr-accent, var(--site-accent)); border-color: var(--sr-accent, var(--site-accent)); color: var(--site-accent-fg, var(--site-bg));}:root{--el-tap-floor: 44px;} .el-compound-section--has-section-bg::before{/* Subtle scrim above the decorative section background to keep content readable when the user hasn't configured an explicit overlay. When --cs-bg-gradient is set (renderer wires gradientDirection + gradientEndColor + backgroundColor) the gradient takes precedence so the composed gradient shows through instead of being shadowed by the flat --site-overlay scrim. */ content: ''; position: absolute; inset: 0; background: var(--cs-bg-gradient, var(--site-overlay, transparent)); z-index: 1; pointer-events: none;}.el-compound-section__cards{display: grid; grid-template-columns: repeat( var(--cs-grid-columns, 3), minmax(min(var(--cs-card-min-width, 240px), calc(50% - var(--cs-grid-gap, 1.5rem) / 2)), 1fr) ); /* Rows size to their OWN content. `align-items: stretch` (grid default, reasserted below) already gives every card in a row a shared bottom edge, which is the "row of cards" intent. `grid-auto-rows: 1fr` went further and made every row as tall as the TALLEST row, coupling rows that are not adjacent: below the desktop breakpoint the grid drops to one or two columns, so a short card inherited a tall card's height from a row it was not in and the surplus opened INSIDE the card, under the last line, reading as a paragraph that failed to load. Measured on a live tenant: at 768 a lone spanning card carried 176 of empty against 29 in its siblings; at 390, where every row holds one card, it reached 70. With `auto` the same cards measured 29 and 25 — their own padding and nothing else — while cards sharing a row kept their shared edge. */ grid-auto-rows: auto; align-items: stretch; justify-items: stretch; /* Gap defaults to the unified card-gap token so testimonials grids, feature-cards grids, services grids, etc. share the same inter-card spacing on every breakpoint. */ gap: var(--cs-grid-gap, var(--site-card-gap, 1.5rem)); width: 100%;}.el-compound-section__cards > *{/* Stretch every grid item to fill its allocated column AND row. Without this, a card whose intrinsic content is narrower than 1fr would shrink to its content width, producing the "row 1 wide / row 2 narrow" pattern reported by authors. min-width: 0 prevents flex/grid blowout from long unbroken strings. */ width: 100%; height: 100%; min-width: 0; align-self: stretch; justify-self: stretch;}@container site style(--site-bp: mobile){.el-compound-section__cards{grid-template-columns: repeat(2, minmax(0, 1fr)); /* WITHIN a row, cards still share a baseline — `align-items: stretch` below is what delivers that, and it is untouched. What is dropped is the ROW-TO-ROW coupling: the earlier note here argued that equal heights beat slack space and that cards would distribute internally via flex-column + `flex: 1`. Measured on a live tenant, that mitigation does not reach these cards: at 768 a lone spanning card carried 176 of empty against 29 in its siblings, and at 390 up to 70. The void the note wanted to avoid is exactly what `1fr` produced, so the row now sizes to its own content. */ grid-auto-rows: auto; align-items: stretch;}.el-compound-section__cards > *{height: 100%; align-self: stretch;}}@media (max-width: 768px){.el-compound-section__cards{grid-template-columns: repeat(2, minmax(0, 1fr)); /* WITHIN a row, cards still share a baseline — `align-items: stretch` below is what delivers that, and it is untouched. What is dropped is the ROW-TO-ROW coupling: the earlier note here argued that equal heights beat slack space and that cards would distribute internally via flex-column + `flex: 1`. Measured on a live tenant, that mitigation does not reach these cards: at 768 a lone spanning card carried 176 of empty against 29 in its siblings, and at 390 up to 70. The void the note wanted to avoid is exactly what `1fr` produced, so the row now sizes to its own content. */ grid-auto-rows: auto; align-items: stretch;}.el-compound-section__cards > *{height: 100%; align-self: stretch;}}@container site style(--site-bp: mobile){.el-compound-section__cards{grid-template-columns: 1fr;}}@media (max-width: 480px){.el-compound-section__cards{grid-template-columns: 1fr;}}@container compound-grid (max-width: 840px){.el-compound-section__cards{grid-template-columns: repeat(2, minmax(0, 1fr));}}@container compound-grid (max-width: 560px){.el-compound-section__cards{grid-template-columns: 1fr;}}[data-slot-role] > .el{margin: 0;}.el-cta-band-wrap > .el-compound-section--background{ position: relative; z-index: 1; /* Vertical breathing room between the glass panel and the bg media's top/bottom edges. Without this, at wide viewports (≥1280px) where the bg image fills a tall hero band, the section's `align-items: center` can't visibly center the panel because the panel's natural height plus internal padding equals (or exceeds) the section min-height — panel top edge sits flush with the bg image's top edge. The `padding-block` here pushes the panel inward on the Y axis so the bg image always shows above + below the panel. We keep `background-origin: border-box` so the bg image still paints full edge-to-edge (default `padding-box` would crop the image to the padded inner box, exposing the page background through the gutter). Inline (left/right) is intentionally NOT padded here — the existing `__bg-content { max-width: min(1200px, 100%); margin: 0 auto }` rule already centers the panel horizontally with site-container gutters. Adding padding-inline here would double-gutter on wide screens. Author override: --cs-bg-section-padding-y (projected by renderer when an explicit section-spacing field lands). */ padding-block: var(--cs-bg-section-padding-y, clamp(2.5rem, 5vh, 5rem)); background-origin: border-box; background-clip: border-box; }.el-compound-section__cards > *{height: 100%; min-height: 0;}.el-compound-section__cards > * > [class*="el-node-"]{height: 100%; min-height: 0; display: flex; flex-direction: column;}[data-card-badge],[data-pricing-badge]{position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);} btnSecondary*/btnOutline* tokens) 3. --site-accent / --site-primary / --site-border (legacy palette fallback so old tokens still work) Adding a new button-emitting renderer? Give its /