/* ============================================================
   landing-leverage.css — "05 · Human × AI teams" comparator
   Two-column: narrative + claims (left), draggable before/after
   stage + live readout (right). Stacks to one column on tablet.
   ============================================================ */

/* ---- layout ---- */
.lv-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 52px); }
.lv-intro { align-self: start; }
/* headline uses the shared .lp-section h2.is-large scale (consistent with the
   other section headers, e.g. 04) — the grid column constrains its width. */
.lv-intro h2 { max-width: 15ch; }
.lv-intro .lede { max-width: 48ch; }

/* Highlighter marker on the "legacy software fails" line — a warm amber
   stroke through the lower half of the text that sweeps in left-to-right
   once the intro reveals. box-decoration-break keeps it clean across wraps. */
.lv-mark {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(to right, rgba(232, 163, 61, 0.42), rgba(232, 163, 61, 0.42));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 42%;
  padding: 0 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 720ms 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lv-intro.is-in .lv-mark { background-size: 100% 42%; }
@media (prefers-reduced-motion: reduce) {
  .lv-mark { transition: none; background-size: 100% 42%; }
}

/* Two columns only once the viewport is wide enough that the right-hand
   stage stays comfortably large; below this the stage goes full width so the
   floating captions never get cramped. */
@media (min-width: 1200px) {
  .lv-grid {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: clamp(44px, 4.5vw, 80px);
    align-items: start;
  }
}

/* ---- stage column ---- */
.lv-stage-col { align-self: start; }

.lv-stage {
  position: relative;
  aspect-ratio: 1200 / 860;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-xl);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  background: var(--wb-ink-50);
}

.lv-svg { display: block; width: 100%; height: 100%; }

/* ---- SVG scene: shared ---- */
.lv-ground { stroke: var(--wb-ink-200); stroke-width: 1.5; }
.lv-rail   { stroke: var(--wb-ink-150); stroke-width: 1; }

/* ---- SVG scene: before ---- */
.lv-bg-b     { fill: #F5F6F8; }
.lv-bld-b    { fill: #FDFDFE; stroke: #C6CCD6; stroke-width: 1.5; }
.lv-bld-idle { fill: none; stroke: #CFD4DC; stroke-width: 1.5; stroke-dasharray: 5 5; }
.lv-win      { fill: none; stroke: #DDE0E6; stroke-width: 1; }
.lv-win-dim  { fill: #E4E7EC; }
.lv-line-b {
  fill: none;
  stroke: #AEB6C2;
  stroke-width: 1.5;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
}
.lv-line-b.is-hot { stroke: var(--wb-warning-500); opacity: 0.55; }
.lv-person-b circle, .lv-person-b path { fill: #99A1AE; }
.lv-alert circle { fill: var(--wb-accent); }
.lv-alert text {
  fill: #fff;
  font: 700 13px/1 var(--wb-font-sans);
  text-anchor: middle;
}

/* ---- SVG scene: after ---- */
.lv-bg-a  { fill: #F8FBFE; }
.lv-bld-a { fill: #FFFFFF; stroke: var(--wb-navy-400); stroke-width: 1.5; }
.lv-win-lit { fill: rgba(59, 120, 184, 0.32); }
.lv-line-a {
  fill: none;
  stroke: var(--wb-navy-300);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.lv-person-a circle, .lv-person-a path { fill: var(--wb-navy-700); }
.lv-robot-shell { fill: var(--wb-navy-700); }
.lv-robot-ant { stroke: var(--wb-navy-700); stroke-width: 2; stroke-linecap: round; }
.lv-robot-live { fill: var(--wb-success-500); }
.lv-robot-eye { fill: #fff; }
.lv-robot-badge { fill: #fff; }
.lv-tick circle { fill: var(--wb-success-500); }
.lv-tick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- divider + knob ---- */
.lv-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 31, 59, 0.16), 0 0 22px rgba(11, 31, 59, 0.22);
  pointer-events: none;
}
.lv-knob {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--wb-border-strong);
  background: #fff;
  color: var(--wb-navy-900);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  box-shadow: var(--wb-shadow-lg);
  padding: 0;
  transition: box-shadow var(--wb-dur-fast) var(--wb-ease-out);
}
.lv-knob:hover { box-shadow: var(--wb-shadow-xl); }
.lv-knob:focus-visible {
  outline: none;
  box-shadow: var(--wb-shadow-lg), 0 0 0 3px rgba(59, 120, 184, 0.4);
}
.lv-hint {
  position: absolute;
  top: calc(50% - 52px);
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-navy-900);
  color: #fff;
  font: 600 11px/1 var(--wb-font-sans);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 300ms var(--wb-ease-out);
}
.lv-hint.is-hidden { opacity: 0; }

/* ---- side pills ---- */
.lv-pill {
  position: absolute;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--wb-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--wb-border);
  box-shadow: var(--wb-shadow-xs);
  pointer-events: none;
  transition: opacity 240ms var(--wb-ease-out);
}
.lv-pill.is-before { left: 18px; }
.lv-pill.is-after { right: 18px; }
.lv-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.lv-pill.is-before .dot { background: var(--wb-accent); }
.lv-pill.is-after .dot { background: var(--wb-success-500); }
.lv-pill b { font: 700 12px/1 var(--wb-font-sans); color: var(--wb-navy-900); }
.lv-pill i { font: 500 11.5px/1 var(--wb-font-sans); font-style: normal; color: var(--wb-ink-500); }

/* ---- value cards (distributed across each half) ---- */
.lv-tag {
  position: absolute;
  width: 21%;
  max-width: 214px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 7px 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--wb-shadow-sm);
  pointer-events: none;
  transition: opacity 320ms var(--wb-ease-out);
}
.lv-tag-ic {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 0.5px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.lv-tag-tx {
  font: 600 11px/1.28 var(--wb-font-sans);
  letter-spacing: -0.004em;
}
.lv-tag.is-before { border: 1px solid var(--wb-border); }
.lv-tag.is-before .lv-tag-ic { background: var(--wb-warning-50); color: var(--wb-warning-700); }
.lv-tag.is-before .lv-tag-tx { color: var(--wb-ink-600); }
.lv-tag.is-after { border: 1px solid var(--wb-success-100); }
.lv-tag.is-after .lv-tag-ic { background: var(--wb-success-50); color: var(--wb-success-700); }
.lv-tag.is-after .lv-tag-tx { color: var(--wb-navy-800); }

/* ---- readout ---- */
.lv-readout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--wb-border);
}
.lv-stat { display: flex; flex-direction: column; gap: 7px; }
.lv-stat-label {
  font: 600 11px/1.35 var(--wb-font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wb-ink-400);
}
.lv-stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font: 600 30px/1 var(--wb-font-display);
  letter-spacing: -0.02em;
  color: var(--wb-navy-900);
  font-variant-numeric: tabular-nums;
}
.lv-stat-badge {
  font: 700 10.5px/1 var(--wb-font-sans);
  font-style: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wb-success-700);
  background: var(--wb-success-50);
  border: 1px solid var(--wb-success-100);
  border-radius: var(--wb-radius-xs);
  padding: 4px 7px;
  transform: translateY(-3px);
}
.lv-note {
  position: absolute;
  right: 0;
  top: -30px;
  font: 500 11px/1 var(--wb-font-sans);
  color: var(--wb-ink-300);
}

/* ---- claims (vertical, in the intro column) ---- */
.lv-claims {
  display: grid;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 40px);
}
.lv-claim + .lv-claim {
  padding-top: 18px;
  border-top: 1px solid var(--wb-border);
}
.lv-claim h3 {
  font: 600 16px/1.3 var(--wb-font-sans);
  letter-spacing: -0.01em;
  color: var(--wb-navy-900);
}
.lv-claim p {
  margin-top: 6px;
  font: 400 14px/1.6 var(--wb-font-sans);
  color: var(--wb-ink-500);
  max-width: 48ch;
}

/* ---- screen-reader text ---- */
.lv-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- mobile ---- */
@media (max-width: 720px) {
  .lv-stage { aspect-ratio: 680 / 600; border-radius: var(--wb-radius-lg); }
  .lv-tag { display: none; }
  .lv-pill { padding: 6px 10px; }
  .lv-knob { width: 40px; height: 40px; }
  .lv-hint { top: calc(50% - 48px); }
  .lv-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .lv-stat-label { font-size: 10px; letter-spacing: 0.06em; }
  .lv-stat-value { font-size: 24px; gap: 6px; }
  .lv-stat-badge { padding: 3px 5px; font-size: 9.5px; }
  .lv-note { position: static; order: 4; grid-column: 1 / -1; margin-top: 2px; }
  .lv-readout { display: grid; }
}