.ba-compare-section {
  padding-block: clamp(48px, 8vw, 96px);
  padding-inline: 16px;
}

.ba-compare {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 8px;
  cursor: default;
  --ba-pos: 50%;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.6);
}

.ba-panel {
  position: absolute;
  inset: 0;
  display: flex;
}

/* ---- BEFORE: deliberately dated, cramped, low-contrast ---- */
.ba-panel--before {
  background: #EAE5D9;
}

.ba-panel--after {
  background: var(--bg-elevated, #0F1114);
  clip-path: inset(0 0 0 var(--ba-pos));
}

.ba-compare:not(.ba-dragging) .ba-panel--after {
  transition: clip-path var(--dur-fast, 200ms) var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}

/* slower, more deliberate sweep for the one-time auto-intro */
.ba-compare.ba-auto:not(.ba-dragging) .ba-panel--after,
.ba-compare.ba-auto:not(.ba-dragging) .ba-handle {
  transition-duration: 700ms;
  transition-timing-function: var(--ease-in-out, cubic-bezier(.65,0,.35,1));
}

.ba-label {
  position: absolute;
  top: 20px;
  z-index: 2;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.55em 0.9em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ba-label--before {
  left: 24px;
  color: #E8E2D3;
}

.ba-label--after {
  right: 24px;
  color: var(--accent-2, #7AD1FF);
  border-color: rgba(62, 157, 255, 0.4);
}

/* ---- shared mock shell ---- */
.ba-mock {
  margin: auto;
  width: min(78%, 640px);
}

.ba-mock-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-bottom: none;
}

.ba-mock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: .5;
}

.ba-mock-address {
  margin-left: 8px;
  height: 8px;
  flex: 1;
  max-width: 140px;
  border-radius: 2px;
}

/* ---- BEFORE mock: cramped, serif, dated blue links, no clear CTA ---- */
.ba-mock--before .ba-mock-chrome {
  background: #DCD5C3;
  border-color: #C9C0A9;
}
.ba-mock--before .ba-mock-dot { background: #9a917a; }
.ba-mock--before .ba-mock-address { background: #C9C0A9; }

.ba-mock--before .ba-mock-body {
  background: #F5F1E6;
  border: 1px solid #C9C0A9;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ba-mock-oldnav {
  display: flex;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #D8CFB8;
}
.ba-mock-oldnav span {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  color: #1a0dab;
  text-decoration: underline;
}

.ba-mock-oldtitle {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  color: #2b2b26;
  text-shadow: 1px 1px 0 rgba(255,255,255,.6);
  margin: 2px 0 4px;
}

.ba-mock-oldtext {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10px;
  line-height: 1.5;
  color: #5c5646;
  margin: 0 0 6px;
}

.ba-mock-oldsubhead {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  font-weight: 700;
  color: #4a453a;
  margin: 4px 0 2px;
}

.ba-mock-line {
  height: 7px;
  width: 92%;
  border-radius: 1px;
  background: #b9ae95;
  opacity: .55;
}
.ba-mock-line--short { width: 46%; }
.ba-mock-line--title { height: 15px; width: 68%; opacity: .4; margin-bottom: 2px; }

.ba-mock-oldblock {
  height: 48px;
  margin-block: 6px;
  background: repeating-linear-gradient(45deg, #D8CFB8, #D8CFB8 6px, #CFC5AA 6px, #CFC5AA 12px);
  border: 1px solid #C9C0A9;
}

.ba-mock-oldlink {
  align-self: flex-start;
  margin-top: 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  color: #1a0dab;
  text-decoration: underline;
}

.ba-mock-stamp {
  margin-top: auto;
  padding-top: 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  color: #9a917a;
}

/* before: further flattened / softened as a whole to read as "weaker" */
.ba-panel--before .ba-mock {
  filter: saturate(.85);
}

/* ---- AFTER mock: sharp, spacious, clear single CTA ---- */
.ba-mock--after .ba-mock-chrome {
  background: var(--surface-2, #171A1F);
  border-color: var(--border-strong, rgba(255,255,255,.14));
}
.ba-mock--after .ba-mock-dot { background: var(--ink-ghost, #5C6169); }
.ba-mock--after .ba-mock-address { background: var(--border-strong, rgba(255,255,255,.14)); }

.ba-mock-accentbar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #3E9DFF), var(--accent-2, #7AD1FF));
}

.ba-mock-body {
  padding: 22px 20px 26px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--bg, #08090B);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ba-mock-newnav {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}
.ba-mock-newnav span {
  font-family: var(--font-body, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint, #7D838E);
}

.ba-mock-newtitle {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.15;
  color: var(--ink, #F4F5F7);
  margin: 0 0 6px;
  max-width: 22ch;
}

.ba-mock-newtext {
  font-family: var(--font-body, sans-serif);
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-dim, #9CA1AC);
  margin: 0 0 12px;
}

.ba-mock-newctas {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.ba-mock-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent, #3E9DFF);
  box-shadow: 0 0 26px var(--accent-glow, rgba(62,157,255,.35));
  font-family: var(--font-body, sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent-ink, #04101E);
}

.ba-mock-cta--outline {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--border-strong, rgba(255,255,255,.16));
  color: var(--ink, #F4F5F7);
}

.ba-mock-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}

.ba-mock-trust span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--ink-faint, #7D838E);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 999px;
  padding: 0.35em 0.7em;
}

/* ---- drag handle ---- */

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  transform: translateX(-50%);
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  cursor: ew-resize;
  touch-action: none;
}

.ba-compare:not(.ba-dragging) .ba-handle {
  transition: left var(--dur-fast, 200ms) var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}

.ba-handle-line {
  flex: 1;
  width: 1px;
  background: var(--border-strong, rgba(255,255,255,.14));
}

.ba-handle-knob {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2, #171A1F);
  border: 1px solid var(--border-strong, rgba(255,255,255,.14));
  color: var(--accent, #3E9DFF);
  transition: box-shadow var(--dur-fast, 200ms) var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
              border-color var(--dur-fast, 200ms) var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
              transform var(--dur-fast, 200ms) var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}

.ba-handle:hover .ba-handle-knob,
.ba-handle:focus-visible .ba-handle-knob,
.ba-compare.ba-dragging .ba-handle-knob {
  border-color: var(--accent, #3E9DFF);
  box-shadow: 0 0 0 6px var(--accent-glow, rgba(62,157,255,.35));
  transform: scale(1.06);
}

.ba-handle:focus-visible {
  outline: none;
}

.ba-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .ba-compare {
    aspect-ratio: 3 / 4;
  }
  .ba-mock { width: 88%; }
  .ba-label { top: 16px; font-size: 10px; }
  .ba-label--before { left: 16px; }
  .ba-label--after { right: 16px; }
  .ba-handle-knob { width: 36px; height: 36px; }
  .ba-handle { width: 40px; }
}

@media (max-width: 375px) {
  .ba-mock-body { padding: 14px 14px 18px; gap: 7px; }
  .ba-mock-oldblock { height: 40px; }
  .ba-mock-chrome { padding: 8px 12px; }
  .ba-mock-newctas { flex-wrap: wrap; }
  .ba-mock-newnav { gap: 10px; flex-wrap: wrap; }
  .ba-mock-trust { display: none; }
}