.slide-banner__wrapper{
  --sb-max:1311px; 
  --sb-pad-x:clamp(16px,4vw,32px);
  --sb-title:#0a1633; 
  --sb-muted:#2b53d6;
  --sb-frame-bg:#eef1f6; 
  --sb-frame-radius:16px;
  --sb-handle-size:56px;
  --sb-handle-size-mobile:40px;
  --sb-handle-bg:#fff; 
  --sb-handle-ring:#d4dbeb;
  --sb-handle-shadow:0 10px 24px rgba(2,6,23,.18);
  --sb-divider-width:15px; 
  --sb-divider-color: linear-gradient(180deg, #123DB0 0%, #1250EF 50%, #2B82ED 100%);
}
.slide-banner__container{max-width:var(--sb-max);margin:0 auto;padding:0;}
.slide-banner__header{margin:0 0 clamp(16px,4vw,40px) 0}
.slide-banner__title{margin:0 0 20px;}
.slide-banner__lead{padding:0 0 20px;color:var(--sb-muted);display:flex;gap:12px;align-items:center}
.slide-banner__accent{width:6px;height:1.2em;border-radius:0;background:var(--sb-muted)}
.slide-banner__sub-title {
  margin: 10px 0;
  color: rgba(2, 13, 44, 1);
}
.slide-banner__frame{background:var(--sb-frame-bg);border-radius:var(--sb-frame-radius);position:relative;display:flex;justify-content:center}
.slide-banner__cta{margin:3.25rem auto 0;text-align:left;display:flex;gap:16px;flex-wrap:wrap}
/* The slider box will match the image height from HubSpot image object */
.slide-banner__compare{
  position: relative;
  width: 100%;
  max-width: 1311px; /* Limit maximum width */
  height: var(--image-height, auto); /* Use image height from HubSpot */
  --pos: 0; /* 0..1 from JS */
  margin: 0 auto; /* Center the container */
  /* overflow: hidden; /* Contain images but allow divider to overflow */
}

/* Both panes show the full image, forced to container dimensions */
.sb__pane{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-size: contain;             /* show full image in normal aspect ratio */
  background-position: center top;     /* center horizontally, align to top */
  user-select:none;
  z-index: 1;
}
.sb__pane--left {
  background-image: var(--sb-image-right);
  clip-path: var(--left-clip-path, polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%));
}
.sb__pane--right {
  background-image: var(--sb-image-left);
  clip-path: var(--right-clip-path, polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%));
}

/* No additional overlay clipping needed - handled by individual pane clip-paths */

/* Divider + handle move in the same frame */
.sb__divider,
.sb__handle { transition: none !important; }
.sb__divider{
  position:absolute; top:-20px; bottom:-20px; left:calc(var(--pos)*100%);
  transform: translate3d(-50%,0,0); width:var(--sb-divider-width);
  background:var(--sb-divider-color); border-radius:999px; pointer-events:none;
  z-index: 5;
}
.sb__handle{
  position:absolute; top:50%; left:calc(var(--pos)*100%);
  transform: translate3d(-50%,-50%,0); touch-action:none;
  width:var(--sb-handle-size); height:var(--sb-handle-size);
  border-radius:999px; background:#fff; border:1px solid #d4dbeb;
  box-shadow:0 10px 24px rgba(2,6,23,.18);
  display:flex;
  cursor:ew-resize;
  justify-content: space-between;
  z-index: 10;
align-items: center;
}

.sb__handle:focus{outline:2px solid #6aa2ff;outline-offset:2px}

.sb__chev{width:16px;height:16px;background:currentColor;color:#1c2c55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/16px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/16px;}
.sb__chev--right{transform:rotate(180deg)}

/* Mobile Layout (≤780px) */
.slide-banner__frame--mobile{
  display: none; /* Hidden by default, shown on mobile */
}

@media (max-width: 780px){
  /* Hide desktop, show mobile */
  .slide-banner__frame--desktop{ display: none; }
  .slide-banner__frame--mobile{ display: block; }

  /* Mobile layout styles */
  .slide-banner__mobile-compare{
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }

  .sb__mobile-scroll-container{
    height: var(--image-height, 400px);
    border-radius: var(--sb-frame-radius);
    /*overflow: hidden;*/
    position: relative;
    width: 100%;
  }

  .sb__mobile-img{
    height: 100%;
    width: 300vw; /* Make images 3x viewport width for scrolling */
    max-width: none;
    object-fit: contain; /* Ensure full image is visible within container height */
    object-position: left center;
    display: block;
    position: absolute;
    top: 0;
    left: var(--mobile-scroll-pos, 0px);
    transition: left 0.1s ease;
  }

  .sb__mobile-slider{
    position: relative;
    width: 100%;
    height: 60px;
    background: var(--sb-frame-bg);
    border-radius: var(--sb-frame-radius);
    display: flex;
    align-items: center;
  }

  .sb__mobile-divider{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: var(--sb-divider-width);
    background: var(--sb-divider-color);
    border-radius: 999px;
    pointer-events: none;
    z-index: 5;
  }

  .sb__mobile-handle{
    position: absolute;
    left: var(--mobile-pos, 50%);
    transform: translateX(-50%);
    width: var(--sb-handle-size-mobile);
    height: var(--sb-handle-size-mobile);
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d4dbeb;
    box-shadow: 0 10px 24px rgba(2,6,23,.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: ew-resize;
    touch-action: none;
    z-index: 10;
    transition: none !important;
  }

  .sb__mobile-handle:focus{
    outline: 2px solid #6aa2ff;
    outline-offset: 2px;
  }

  .sb__mobile-chev{
    width: 16px;
    height: 16px;
    background: currentColor;
    color: #1c2c55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/16px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/16px;
  }

  .sb__mobile-chev--right{
    transform: rotate(180deg);
  }
}

/* Desktop Layout (>780px) */
@media (min-width: 781px){
  .slide-banner__frame--desktop{ display: block; }
  .slide-banner__frame--mobile{ display: none; }
}