/* HBRAND Before / After — no images, fonts or frontend scripts. */
.hb-before-after{min-width:0;width:100%;max-width:585px;margin:0;position:relative;isolation:isolate;color:#f4f6fc;font-family:inherit}
.hb-before-after::before{content:"";pointer-events:none;position:absolute;inset:-66px -45px -64px -40px;border:1px solid rgba(182,212,146,.14);border-radius:50%;z-index:-1}
.hb-compare-shell{position:relative;z-index:1;border-radius:24px;padding:clamp(20px,2.2vw,28px);background:linear-gradient(150deg,rgba(40,48,67,.97),rgba(22,28,46,.98));border:1px solid rgba(200,214,244,.15);box-shadow:0 24px 66px rgba(0,0,0,.17)}
.hb-compare-label{font-size:.66rem!important;letter-spacing:.16em;text-transform:uppercase;font-weight:650;line-height:1.45;color:#aeb9cc!important;margin:0 0 21px!important}
.hb-compare-panes{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:clamp(9px,1.3vw,18px)}
.hb-compare-pane{min-width:0;align-self:stretch;background:rgba(255,255,255,.035);border:1px solid rgba(217,231,255,.12);border-radius:15px;padding:clamp(15px,1.5vw,22px)}
.hb-compare-pane h3{font-size:1rem!important;line-height:1.3!important;letter-spacing:-.02em;font-weight:700;color:#fff!important;margin:0 0 16px!important}
.hb-compare-list{list-style:none!important;padding:0!important;margin:0!important;display:grid;gap:11px}
.hb-compare-list li{position:relative;min-width:0;padding-left:17px;font-size:clamp(.75rem,.87vw,.85rem);line-height:1.43;color:#cbd2df;overflow-wrap:anywhere}
.hb-compare-list li::before{content:"";position:absolute;left:0;top:.51em;width:7px;height:7px;border-radius:50%;background:#697386}
.hb-compare-pane--after .hb-compare-list li::before{background:#c7ff30;box-shadow:0 0 0 2px rgba(199,255,48,.13)}
.hb-compare-arrow{font-size:1.43rem;color:#c7ff30;font-weight:700;text-align:center;line-height:1}
.hb-compare-summary{display:block;margin-top:20px;padding-top:19px;border-top:1px solid rgba(217,231,255,.12);font-size:clamp(.76rem,.95vw,.9rem);line-height:1.5;color:#cbd2df}
.hb-compare-summary strong{color:#c7ff30;font-weight:740}
.hb-compare-badge{display:inline-flex;gap:10px;align-items:center;max-width:100%;position:relative;margin:14px 0 0 auto;float:right;padding:13px 17px;border-radius:13px;background:#c7ff30;color:#101426;font-weight:750;line-height:1.3;font-size:.81rem;box-shadow:0 8px 35px rgba(103,140,0,.18)}
.hb-compare-badge span{font-size:1.15rem;flex-shrink:0}
.hb-before-after::after{content:"";display:block;clear:both}
/* Animate the *meaningful* transformation in place, not a heavy scroll-linked scene. */
@keyframes hb-compare-enter{from{opacity:.4;transform:translate3d(0,9px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hb-compare-arrow{0%,100%{transform:translateX(0);opacity:.85}50%{transform:translateX(3px);opacity:1}}
body.hb-motion .hb-before-after.hb-visible:not(.hb-compare--static) .hb-compare-pane--after{animation:hb-compare-enter .8s ease-out both}
body.hb-motion .hb-before-after.hb-visible:not(.hb-compare--static) .hb-compare-arrow{animation:hb-compare-arrow 3.5s ease-in-out infinite}
.hb-compare--static .hb-compare-arrow{animation:none!important}
@media(max-width:1100px){.hb-before-after::before{inset:-30px -18px}.hb-compare-panes{gap:9px;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}.hb-compare-pane{padding:17px}}
@media(max-width:640px){.hb-before-after{max-width:100%}.hb-before-after::before{inset:-16px -7px}.hb-compare-shell{border-radius:19px;padding:18px}.hb-compare-panes{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:7px}.hb-compare-pane{padding:12px 10px;border-radius:12px}.hb-compare-pane h3{margin-bottom:13px!important;font-size:.9rem!important}.hb-compare-list{gap:10px}.hb-compare-list li{padding-left:12px;font-size:.73rem}.hb-compare-list li::before{width:5px;height:5px}.hb-compare-label{font-size:.6rem!important}.hb-compare-badge{font-size:.74rem;margin-top:12px;padding:11px 13px}}
@media(max-width:360px){.hb-compare-panes{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);gap:4px}.hb-compare-pane{padding:11px 8px}.hb-compare-list li{font-size:.68rem}.hb-compare-arrow{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.hb-before-after,.hb-before-after *{animation:none!important;transition:none!important}}
/* Editor preview stays visible, consistent with frontend. */
.editor-styles-wrapper .hb-before-after{margin:25px 0;max-width:585px;float:none!important}
.editor-styles-wrapper .hb-before-after .hb-compare-shell{background:#222b40}
.editor-styles-wrapper .hb-compare-editor-hint{margin:18px 0 0!important;color:#fff;font-size:.78rem;opacity:.73}
.editor-styles-wrapper .hb-before-after .hb-compare-pane h3{color:#fff}