/* Clever Storage — Before and after — Preview V2.
   Scoped component: no body, heading or button rules leak into the host site.
   Local Poppins and Lato fonts bundled for offline review. */
.cs-ba {
  --cs-ba-blue: #2A6DB2;
  --cs-ba-ink: #19181A;
  --cs-ba-grey: #4D4D4D;
  --cs-ba-paper: #F9F9F9;
  --cs-ba-line: #dedede;
  --cs-ba-position: 50%;
  padding: 56px 24px 64px;
  color: var(--cs-ba-ink);
  background: #fff;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
  isolation: isolate;
}
.cs-ba, .cs-ba *, .cs-ba *::before, .cs-ba *::after { box-sizing: border-box; }
.cs-ba [hidden] { display: none !important; }
.cs-ba .cs-ba__container { width: 100%; max-width: 1200px; margin: 0 auto; }
.cs-ba .cs-ba__header { margin: 0 auto 30px; }
.cs-ba .cs-ba__logo { display: block; width: 210px; height: auto; margin: 0 auto 22px; }
.cs-ba .cs-ba__title {
  margin: 0 0 12px;
  color: var(--cs-ba-ink);
  font-family: 'Poppins', 'Lato', Arial, sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-transform: none;
}
.cs-ba .cs-ba__intro { max-width: 870px; margin: 0 auto; font-size: 20px; line-height: 1.6; color: var(--cs-ba-grey); }
.cs-ba .cs-ba__figure { margin: 0; padding: 0; }
/* Progressive enhancement: without JS, both images remain visible side by side. */
.cs-ba .cs-ba__viewer { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-radius: 12px; }
.cs-ba .cs-ba__layer { position: relative; min-width: 0; margin: 0; overflow: hidden; border-radius: 12px; }
.cs-ba .cs-ba__layer picture { display: block; width: 100%; height: 100%; }
.cs-ba .cs-ba__layer img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; }
.cs-ba .cs-ba__label {
  position: absolute; top: 22px; z-index: 2; padding: 6px 22px; min-width: 96px;
  border-radius: 999px; background: var(--cs-ba-grey); color: #fff;
  font: 700 16px/1.6 'Lato', Arial, sans-serif; white-space: nowrap;
  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}
.cs-ba .cs-ba__label--before { left: 22px; }
.cs-ba .cs-ba__label--after { right: 22px; background: var(--cs-ba-blue); }
.cs-ba .cs-ba__viewer.is-ready {
  display: block; aspect-ratio: 1395 / 915; overflow: hidden; background: #eee;
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.cs-ba .cs-ba__viewer.is-ready .cs-ba__layer { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.cs-ba .cs-ba__viewer.is-ready .cs-ba__layer img { height: 100%; object-fit: contain; }
.cs-ba .cs-ba__viewer.is-ready .cs-ba__layer--after { z-index: 1; }
.cs-ba .cs-ba__viewer.is-ready .cs-ba__layer--before {
  z-index: 2; clip-path: inset(0 calc(100% - var(--cs-ba-position)) 0 0);
}
.cs-ba .cs-ba__viewer:focus-within { outline: 3px solid var(--cs-ba-blue); outline-offset: 5px; }
.cs-ba .cs-ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--cs-ba-position); width: 3px;
  transform: translateX(-50%); background: #fff; z-index: 3; pointer-events: none;
  box-shadow: 0 0 2px rgb(0 0 0 / 12%);
}
.cs-ba .cs-ba__handle {
  position: absolute; top: 50%; left: clamp(30px, var(--cs-ba-position), calc(100% - 30px));
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  transform: translate(-50%, -50%); z-index: 4; background: #fff; color: var(--cs-ba-ink);
  box-shadow: 0 2px 12px rgb(0 0 0 / 14%); pointer-events: none;
}
.cs-ba .cs-ba__handle svg { display: block; width: 30px; height: 30px; }
/* Native range remains focusable and available to screen readers / arrow keys.
   Pointer interaction is handled on the complete image surface. */
.cs-ba .cs-ba__range, .cs-ba .cs-ba__sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important;
  border: 0 !important; white-space: nowrap !important;
}
.cs-ba .cs-ba__range { top: 50%; left: 50%; }
.cs-ba .cs-ba__review-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin: 14px 0 0; text-align: left;
}
.cs-ba .cs-ba__caption { margin: 0; color: #626262; font-size: 13px; line-height: 1.55; }
.cs-ba .cs-ba__switch {
  flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid #e5e5e5; border-radius: 7px; background: var(--cs-ba-paper);
}
.cs-ba .cs-ba__switch button {
  appearance: none; margin: 0; min-height: 44px; min-width: 75px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: var(--cs-ba-grey); cursor: pointer; box-shadow: none;
  font: 700 13px/1.2 'Lato', Arial, sans-serif; letter-spacing: 0; text-transform: none;
}
.cs-ba .cs-ba__switch button[aria-pressed='true'] { background: #fff; border-color: #d4d4d4; color: var(--cs-ba-blue); }
.cs-ba .cs-ba__switch button:hover { color: var(--cs-ba-blue); background: #fff; }
.cs-ba .cs-ba__switch button:focus-visible, .cs-ba .cs-ba__cta:focus-visible {
  outline: 3px solid var(--cs-ba-blue); outline-offset: 4px;
}
.cs-ba .cs-ba__benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 30px 0 26px; padding: 0; list-style: none;
}
.cs-ba .cs-ba__benefit {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  min-height: 66px; padding: 0 28px; margin: 0; text-align: left;
  list-style: none; font-size: 19px; line-height: 1.4;
}
.cs-ba .cs-ba__benefit + .cs-ba__benefit { border-left: 1px solid var(--cs-ba-line); }
.cs-ba .cs-ba__benefit::before { display: none; }
.cs-ba .cs-ba__benefit svg { flex: 0 0 44px; width: 44px; height: 44px; display: block; color: var(--cs-ba-ink); }
.cs-ba .cs-ba__benefit span { max-width: 175px; }
.cs-ba .cs-ba__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 20px;
  appearance: none; min-height: 58px; padding: 17px 28px; margin: 0;
  border: 1px solid var(--cs-ba-blue); border-radius: 4px;
  background: var(--cs-ba-blue); color: #fff; box-shadow: none;
  font: 700 14px/1.5 'Lato', Arial, sans-serif; letter-spacing: 1px;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.cs-ba .cs-ba__cta:hover { background: var(--cs-ba-grey); border-color: var(--cs-ba-grey); color: var(--cs-ba-paper); }
.cs-ba .cs-ba__cta svg { width: 20px; height: 20px; flex: 0 0 20px; }
.cs-ba .cs-ba__preview-response { max-width: 560px; margin: 16px auto 0; padding: 12px 16px; background: var(--cs-ba-paper); color: var(--cs-ba-grey); border-radius: 4px; font-size: 14px; line-height: 1.6; }
.cs-ba .cs-ba__nojs { margin: 12px 0 0; color: var(--cs-ba-grey); font-size: 14px; }
@media (max-width: 760px) {
  .cs-ba { padding: 36px 20px 44px; }
  .cs-ba .cs-ba__logo { width: 180px; margin-bottom: 18px; }
  .cs-ba .cs-ba__header { margin-bottom: 24px; }
  .cs-ba .cs-ba__intro { font-size: 17px; max-width: 560px; }
  .cs-ba .cs-ba__review-row { flex-direction: column; gap: 12px; }
  .cs-ba .cs-ba__caption { text-align: center; }
  .cs-ba .cs-ba__switch { align-self: center; }
  .cs-ba .cs-ba__benefit { gap: 12px; padding: 0 16px; font-size: 16px; }
  .cs-ba .cs-ba__benefit svg { width: 34px; height: 34px; flex-basis: 34px; }
}
@media (max-width: 560px) {
  .cs-ba { padding: 30px 16px 36px; }
  .cs-ba .cs-ba__logo { width: 164px; margin-bottom: 15px; }
  .cs-ba .cs-ba__title { font-size: 32px; margin-bottom: 10px; }
  .cs-ba .cs-ba__intro { max-width: 350px; font-size: 16px; line-height: 1.65; }
  .cs-ba .cs-ba__viewer, .cs-ba .cs-ba__layer { border-radius: 8px; }
  .cs-ba .cs-ba__viewer:not(.is-ready) { grid-template-columns: 1fr; }
  .cs-ba .cs-ba__label { top: 10px; min-width: 65px; padding: 5px 12px; font-size: 12px; }
  .cs-ba .cs-ba__label--before { left: 10px; }
  .cs-ba .cs-ba__label--after { right: 10px; }
  .cs-ba .cs-ba__handle { width: 48px; height: 48px; left: clamp(24px, var(--cs-ba-position), calc(100% - 24px)); }
  .cs-ba .cs-ba__handle svg { width: 25px; height: 25px; }
  .cs-ba .cs-ba__divider { width: 2px; }
  .cs-ba .cs-ba__caption { font-size: 12px; max-width: 330px; }
  .cs-ba .cs-ba__review-row { margin-top: 12px; }
  .cs-ba .cs-ba__benefits { grid-template-columns: 1fr; max-width: 330px; margin: 22px auto; }
  .cs-ba .cs-ba__benefit { padding: 14px 22px; min-height: 64px; gap: 18px; justify-content: flex-start; font-size: 16px; }
  .cs-ba .cs-ba__benefit + .cs-ba__benefit { border-left: 0; border-top: 1px solid var(--cs-ba-line); }
  .cs-ba .cs-ba__benefit span { max-width: none; }
  .cs-ba .cs-ba__cta { width: 100%; min-height: 56px; padding: 15px 14px; gap: 12px; font-size: 12px; letter-spacing: .7px; }
}
@media (prefers-reduced-motion: reduce) { .cs-ba .cs-ba__cta { transition: none; } }
@media (forced-colors: active) {
  .cs-ba .cs-ba__handle, .cs-ba .cs-ba__label, .cs-ba .cs-ba__cta { border: 2px solid CanvasText; }
  .cs-ba .cs-ba__divider { background: CanvasText; }
}


/* V2: styling aligned with the supplied live-site screenshots. */
.cs-ba { padding:72px 32px 64px; background:var(--cs-ba-paper); text-align:left; }
.cs-ba .cs-ba__container { max-width:1240px; }
.cs-ba .cs-ba__header { margin:0 0 32px; display:grid; grid-template-columns:1fr 1fr; gap:20px 60px; align-items:end; }
.cs-ba .cs-ba__eyebrow { margin:0 0 12px; color:var(--cs-ba-blue); font:800 14px/1.5 'Poppins',sans-serif; letter-spacing:1.5px; text-transform:uppercase; }
.cs-ba .cs-ba__title { font-size:clamp(36px,4.3vw,60px); font-weight:800; line-height:1.08; letter-spacing:-.035em; margin:0; }
.cs-ba .cs-ba__intro { max-width:560px; margin:0; font-size:18px; line-height:1.65; }
.cs-ba .cs-ba__hint { display:block; margin-top:10px; font-size:14px; color:var(--cs-ba-grey); }
.cs-ba .cs-ba__viewer { box-shadow:0 12px 32px rgb(25 24 26 / 8%); }
.cs-ba .cs-ba__label { border-radius:6px; font:800 13px/1.5 'Lato',sans-serif; letter-spacing:1px; text-transform:uppercase; background:var(--cs-ba-ink); }
.cs-ba .cs-ba__label--after { background:var(--cs-ba-blue); }
.cs-ba .cs-ba__handle { color:var(--cs-ba-blue); border:2px solid var(--cs-ba-blue); }
.cs-ba .cs-ba__benefits { margin:36px 0; }
.cs-ba .cs-ba__benefit { justify-content:flex-start; align-items:flex-start; gap:18px; padding:0 30px; }
.cs-ba .cs-ba__benefit:first-child { padding-left:0; }
.cs-ba .cs-ba__benefit svg { color:var(--cs-ba-blue); stroke-width:1.8; width:36px; height:36px; flex-basis:36px; }
.cs-ba .cs-ba__benefit span { max-width:none; }
.cs-ba .cs-ba__benefit strong { display:block; margin-bottom:7px; font:700 17px/1.3 'Poppins',sans-serif; letter-spacing:-.025em; }
.cs-ba .cs-ba__benefit small { display:block; font:400 16px/1.55 'Lato',sans-serif; color:var(--cs-ba-grey); }
.cs-ba .cs-ba__booking { display:flex; justify-content:space-between; align-items:center; gap:28px; padding-top:32px; border-top:1px solid var(--cs-ba-line); }
.cs-ba .cs-ba__booking h3 { margin:0 0 8px; font:700 23px/1.25 'Poppins',sans-serif; letter-spacing:-.025em; }
.cs-ba .cs-ba__booking p { margin:0; color:var(--cs-ba-grey); }
.cs-ba .cs-ba__cta { border-radius:7px; font-weight:900; font-size:14px; letter-spacing:.5px; flex-shrink:0; }
.cs-ba .cs-ba__cta:hover { background:var(--cs-ba-ink); border-color:var(--cs-ba-ink); }
.cs-ba .cs-ba__preview-response { margin:18px 0 0; border:1px solid var(--cs-ba-line); background:#fff; }
@media(max-width:760px) {
 .cs-ba { padding:40px 20px; }
 .cs-ba .cs-ba__header { grid-template-columns:1fr; gap:20px; margin-bottom:26px; }
 .cs-ba .cs-ba__title { font-size:40px; }
 .cs-ba .cs-ba__intro { font-size:17px; max-width:100%; }
 .cs-ba .cs-ba__eyebrow { font-size:12px; }
 .cs-ba .cs-ba__benefits { grid-template-columns:1fr; max-width:none; margin:28px 0; }
 .cs-ba .cs-ba__benefit, .cs-ba .cs-ba__benefit:first-child { padding:20px 0; }
 .cs-ba .cs-ba__benefit + .cs-ba__benefit { border-left:0; border-top:1px solid var(--cs-ba-line); }
 .cs-ba .cs-ba__booking { display:block; padding-top:26px; }
 .cs-ba .cs-ba__booking h3 { font-size:22px; }
 .cs-ba .cs-ba__cta { margin-top:22px; width:100%; font-size:12px; }
 .cs-ba .cs-ba__caption { max-width:none; }
}

/* Preview V2.1 — v137 branded card container.
   Keep the comparison stationary while dragging; rollover changes border/shadow. */
.cs-ba .cs-ba__figure {
  overflow:hidden;
  border:1px solid rgba(42,109,178,.14);
  border-radius:15px;
  background:#fff;
  box-shadow:0 18px 50px rgba(25,24,26,.11);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.cs-ba .cs-ba__figure:focus-within {
  border-color:#2A6DB2;
  box-shadow:0 24px 58px rgba(25,24,26,.15);
}
@media (hover:hover) {
  .cs-ba .cs-ba__figure:hover {
    border-color:#2A6DB2;
    box-shadow:0 24px 58px rgba(25,24,26,.15);
  }
}
.cs-ba .cs-ba__figure .cs-ba__viewer {
  border-radius:0;
  box-shadow:none;
}
.cs-ba .cs-ba__viewer:focus-within {
  outline:3px solid #2A6DB2;
  outline-offset:-3px;
}
.cs-ba .cs-ba__review-row { margin:0; padding:20px 24px; }
.cs-ba .cs-ba__nojs { padding:0 24px; }
@media(max-width:760px) {
  .cs-ba .cs-ba__review-row { padding:18px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .cs-ba .cs-ba__figure { transition:none; }
}
@media(forced-colors:active) {
  .cs-ba .cs-ba__figure { border-color:CanvasText; }
  .cs-ba .cs-ba__figure:focus-within { outline:2px solid Highlight; }
}

/* v138-2: compact comparison, without preset button row. */
.cs-ba { padding-top:52px; padding-bottom:48px; }
.cs-ba .cs-ba__figure { max-width:920px; margin:0 auto; }
.cs-ba .cs-ba__review-row { justify-content:center; padding:12px 18px; }
.cs-ba .cs-ba__caption { text-align:center; }
.cs-ba .cs-ba__benefits { margin:28px 0; }
@media(max-width:760px) {
 .cs-ba { padding:32px 20px; }
 .cs-ba .cs-ba__review-row { padding:12px 14px; }
}

/* v138-4: unified heading and introduction; distinct white section. */
.cs-ba { background:#fff; }
.cs-ba .cs-ba__header {
 display:block; max-width:920px; margin:0 auto 28px;
}
.cs-ba .cs-ba__title { margin:0 0 18px; }
.cs-ba .cs-ba__intro { max-width:760px; margin:0; }
.cs-ba .cs-ba__hint { margin-top:12px; }
@media(max-width:760px) {
 .cs-ba .cs-ba__header { margin-bottom:24px; }
 .cs-ba .cs-ba__title { margin-bottom:16px; }
}

.cs-ba { scroll-margin-top:calc(var(--cs-header-height,190px) + 24px); }