/* ba.css — before/after drag-to-compare slider for DeKAA demos */
.ba-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px}
@media(min-width:760px){.ba-grid{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}}
.ba-grid figure{margin:0}
.ba-grid figcaption{margin-top:8px;font-size:13px;color:var(--ink-soft,#666);text-align:center}

.ba{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;
  user-select:none;touch-action:none;cursor:ew-resize;background:#1a1a1a;
  box-shadow:0 6px 24px rgba(0,0,0,.14)}
.ba--4x3{aspect-ratio:4/3;max-width:560px;margin-left:auto;margin-right:auto}
.ba img,.ba video{position:absolute;top:0;left:0;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-after{width:100%}
.ba-before-wrap{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}
/* .ba-before img width is set in JS to the container width so both images stay aligned */
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;
  transform:translateX(-1.5px);box-shadow:0 0 8px rgba(0,0,0,.55);pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;
  margin:-20px 0 0 -20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FF8A00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l-6 6 6 6M15 6l6 6-6 6'/></svg>");
  background-repeat:no-repeat;background-position:center}
.ba-tag{position:absolute;bottom:12px;font-size:11px;font-weight:700;padding:5px 11px;
  border-radius:20px;color:#fff;letter-spacing:.4px;pointer-events:none;z-index:2}
.ba-tag-before{left:12px;background:rgba(0,0,0,.62)}
.ba-tag-after{right:12px;background:var(--brand,#1A73E8)}

/* "Great for" use-case card that fills the empty 4th grid cell */
.ba-uses{height:100%;box-sizing:border-box;border-radius:14px;
  background:linear-gradient(135deg,#EFF5FF 0%,#D9E8FE 100%);
  border:1px solid #CFE0F7;padding:20px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06)}
.ba-uses h3{margin:0;font-size:18px;color:var(--ink,#1a1a1a)}
.ba-use{display:flex;gap:11px;align-items:flex-start}
.ba-use .ic{font-size:22px;flex:none;line-height:1.2}
.ba-use b{display:block;font-size:13px;margin-bottom:7px;color:#16315C}
.ba-chips{display:flex;flex-wrap:wrap;gap:6px}
.ba-chips span{font-size:11.5px;padding:3px 10px;border-radius:20px;
  background:#fff;border:1px solid #CFE0F7;color:#1B4F9C;white-space:nowrap}
.ba-chips span.hot{background:var(--brand,#1A73E8);color:#fff;border-color:var(--brand,#1A73E8);font-weight:700}