/* Homepage Compare: borderless drawing with the two panels stacked at right. */
html:not(.product-showcase-embed) .scroll-showreel #sc0.on{display:flex;flex-direction:column;height:100%;min-height:0;padding:24px 22px 20px}
html:not(.product-showcase-embed) .scroll-showreel #sc0>.hrow{flex:none}
html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmpcv{flex:1;min-height:0;height:auto;border:0;border-radius:0;background:#fff;cursor:default;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmp-plan-stage{border:0;border-radius:0;background:#fff;cursor:ew-resize}
html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmplg{position:relative;left:auto;right:auto;top:auto;width:218px;flex:none;order:2}
html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmppn{position:relative;right:auto;top:auto;width:218px;flex:none;order:1}
@media(max-width:860px){
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen:has(#sc0){height:auto;min-height:clamp(430px,65svh,640px)}
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen>#sc0{display:flex;flex-direction:column;height:auto;padding:16px 12px 20px}
 html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmpcv{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0;flex:none;overflow:visible}
 html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmp-plan-stage{position:relative;inset:auto;flex:none;order:2;width:100%;height:clamp(320px,44svh,440px);overflow:hidden}
 html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmplg{position:static;order:3;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px 12px;align-self:stretch;width:100%;min-width:0;max-width:100%;padding:11px 12px;font-size:10px;white-space:normal}
 html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmplg div{padding:0;gap:5px}
 html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmppn{display:block;position:static;order:1;align-self:stretch;width:100%;min-width:0;max-width:100%;padding:11px 12px}
 html:not(.product-showcase-embed) .scroll-showreel #sc0 :is(.cmppn,.cmplg){box-sizing:border-box;overflow-wrap:anywhere}
 html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmpfile .nm2{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;min-width:0}
}

/* Match the View panel entrance without coupling it to autoplay cancellation. */
:is(#sc0,#sc4).on .demo-panel-reveal{animation:demo-panel-enter .45s ease .6s both}
@keyframes demo-panel-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#sc4 .c4row{box-sizing:border-box;width:100%;border:0;background:transparent;text-align:left;font-family:inherit;line-height:1.4}
.scroll-showreel .scr #sc4 .c4row.on{color:#ef4129}
#sc4 .c4row:focus-visible{outline:2px solid #ef4129;outline-offset:2px;border-radius:3px}
@media(max-width:860px){
 /* Reserve the drawing gesture for the slider, including diagonal finger drags. */
 html:not(.product-showcase-embed) .scroll-showreel .scr #sc0 .cmp-plan-stage,
 html:not(.product-showcase-embed) .scroll-showreel .scr #sc0 .cmp-plan-stage *{touch-action:none!important;user-select:none}
 #sc4 .c4row{min-height:44px;padding-block:7px;font-size:11px}
 #sc4 .c4row>span:nth-child(2){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){:is(#sc0,#sc4).on .demo-panel-reveal{animation:none}}