.template-copy-id{border:0;background:transparent;color:inherit;font:inherit;font-size:11px;cursor:pointer;margin-top:12px;opacity:.65;padding:0}.template-copy-id:only-child{display:block;margin-top:0}.template-copy-id:hover{opacity:1;color:var(--accent-ink)}
.managed-banners{position:relative;margin-block:50px;overflow:hidden;border-radius:24px}.managed-banners>img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover}.managed-banners>div:not(.managed-banner-controls){display:none}.managed-banners[data-layout="split"]{display:grid;grid-template-columns:1fr 1fr;background:var(--accent-soft);align-items:center}.managed-banners[data-layout="split"]>img{grid-column:2;aspect-ratio:1.5;grid-row:1}.managed-banners[data-layout="split"]>div:not(.managed-banner-controls){display:block;grid-column:1;grid-row:1;padding:30px}.managed-banners h2{font-size:28px;margin:0 0 16px}.managed-banner-controls{display:flex;gap:8px;position:absolute;bottom:12px;right:12px}.managed-banner-controls button{border:0;border-radius:20px;background:var(--surface);color:var(--ink);padding:9px 15px;cursor:pointer}.managed-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;padding-block:45px 75px}.managed-benefits h3{font-size:18px}.managed-benefits p{font-size:13px;line-height:1.8;opacity:.7}.benefit-icon .icon,.highlight-icon .icon{display:inline-block;width:var(--highlight-glyph-size);height:var(--highlight-glyph-size);vertical-align:middle}.content-error{padding:30px;grid-column:1/-1}.feature-rail a[hidden]{display:none}
@media(max-width:600px){.managed-banners[data-layout="split"]{display:flex;flex-direction:column}.managed-banners[data-layout="split"]>img{aspect-ratio:1.5}.managed-banners[data-layout="split"]>div:not(.managed-banner-controls){padding:24px 24px 55px}.managed-banners>img{aspect-ratio:2/1}.managed-benefits{gap:15px}}

/* The page control floats over the viewport without reserving a gutter. */
:root{scrollbar-width:none;scrollbar-gutter:auto}
:root::-webkit-scrollbar{display:none;width:0;height:0}
.page-scrollbar[hidden]{display:none}
.page-scrollbar{--pink:var(--accent,#ED3457);position:fixed;z-index:45;top:20vh;top:20dvh;right:0;width:20px;height:60vh;height:60dvh;touch-action:none;user-select:none;cursor:pointer;outline-offset:-3px}
.template-dialog{scrollbar-width:none}
.template-dialog::-webkit-scrollbar{display:none;width:0;height:0}
.preview-chrome .dialog-scrollbar{position:absolute;right:0}
.page-scrollbar-track{position:absolute;top:0;bottom:0;right:5px;width:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 20%,transparent)}
.page-scrollbar-progress{position:absolute;inset:0 0 auto;height:var(--scroll-progress,0%);border-radius:inherit;background:color-mix(in srgb,var(--pink) 45%,transparent);pointer-events:none}
.page-scrollbar-thumb{position:absolute;top:0;left:-1px;width:6px;min-height:28px;border-radius:999px;background:var(--pink);box-shadow:0 0 9px color-mix(in srgb,var(--pink) 25%,transparent);cursor:grab;transition:background .2s,box-shadow .2s}
.page-scrollbar:is(:hover,:focus-visible,.is-dragging) .page-scrollbar-thumb{box-shadow:0 0 12px color-mix(in srgb,var(--pink) 55%,transparent)}
.page-scrollbar.is-dragging,.page-scrollbar.is-dragging .page-scrollbar-thumb{cursor:grabbing}
.page-scrollbar:focus-visible{outline:2px solid var(--pink)!important;border-radius:999px}
@media(forced-colors:active){.page-scrollbar-track{background:CanvasText}.page-scrollbar-progress{background:Highlight}.page-scrollbar-thumb{background:Highlight;border:1px solid Canvas}}

/* Both carousel forms occupy the same opening slot and keep separate slide lists. */
#overview>.showroom-hero[hidden],.hero-image-carousel[hidden],.showroom-media [hidden],.hero-carousel-controls [hidden]{display:none!important}
.showroom-copy h1 .hero-title-line{display:block;color:var(--ink)}
.showroom-copy h1 .hero-title-accent{display:block;color:var(--pink)}
.showroom-copy>p{white-space:pre-line;overflow-wrap:anywhere}
.showroom-copy h1{overflow-wrap:anywhere}
.showroom-hero{position:relative}
.hero-custom-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:hero-slide-in .45s ease both}
.showroom-media[data-artwork=image]{mask-image:none}
.hero-carousel-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px}
.hero-carousel-controls>button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--tag);color:var(--ink);font-size:23px;line-height:1}
.hero-carousel-controls>button:hover{color:var(--pink)}
.hero-carousel-dots{display:flex;gap:8px;align-items:center}
.hero-carousel-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:var(--muted);opacity:.4}
.hero-carousel-dots button[aria-current=true]{width:25px;background:var(--pink);opacity:1}
.hero-image-carousel{position:relative;width:100%;background:var(--tag);overflow:hidden}
.hero-image-stage :is(.banner-image,.banner-reference){display:block;width:100%;height:clamp(280px,33vw,640px);object-fit:cover}
.hero-image-stage .swiper-slide{width:100%}
.hero-image-carousel .hero-carousel-controls{background:var(--tag);padding:6px 10px;border-radius:30px}
.banner-type-tabs{display:flex;gap:10px;margin:16px 0}
@keyframes hero-slide-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:600px){.hero-carousel-controls{bottom:14px}.showroom-hero .hero-carousel-controls{left:24px;transform:none}.hero-image-stage :is(.banner-image,.banner-reference){height:260px}.banner-type-tabs .button{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){.hero-custom-image{animation:none}}

/* Keep the benefits above the sticky hero, with an opaque full-width surface. */
.managed-benefits-surface{position:relative;z-index:1;isolation:isolate;background:#fff}
[data-appearance="dark"] .managed-benefits-surface{background:#151a25}
/* Feature highlights share the active brand accent in both appearances. */
.managed-benefits{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;padding-block:40px 48px}
.managed-benefits article{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;text-align:center}
.managed-benefits .benefit-icon{display:grid;place-items:center;width:var(--highlight-circle-size);height:var(--highlight-circle-size);flex:0 0 var(--highlight-circle-size);border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);line-height:1}

.managed-benefits h3{margin:0;color:#697180;font-size:14px;line-height:1.5;font-weight:400;overflow-wrap:anywhere}
.managed-benefits p{display:none}
[data-appearance="dark"] .managed-benefits h3{color:var(--muted)}
@media(max-width:600px){.managed-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;padding-block:32px 40px}.managed-benefits article{gap:12px}.managed-benefits h3{font-size:13px}}
/* Preserve the official artwork without inheriting generic icon strokes or skew. */
.brand{--accent:var(--pink);transform:none;color:var(--ink);line-height:0}
.brand .brand-logo{display:block;width:144px;height:36px;stroke:none}
.tags li.feature-more{position:relative}
.feature-more a{display:flex;align-items:center;gap:6px}
.feature-more a svg{width:14px;height:14px;flex:none}
.feature-more a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tags li.feature-more:is(:hover,:focus-within){color:var(--pink)}
@media(max-width:600px){.brand .brand-logo{width:120px;height:30px}}
@media(forced-colors:active){.brand .brand-logo path{fill:CanvasText}}