/* ════════════════════════════════════════════════════════════
   SIP vs Lumpsum — "The Two-Lane Race"
   Deep-night surface · steel-blue SIP lane · rust-saffron Lumpsum.
   Identity: a split-screen versus readout — two rival columns,
   the leader flagged — and a two-lane race motif.
   ════════════════════════════════════════════════════════════ */

body[data-tool="versus"] {
  --surface:        #0B0D13;
  --surface-raised: #13161F;
  --surface-high:   #1F2430;
  --hairline:       rgba(122, 168, 214, 0.14);
  --hairline-bold:  rgba(122, 168, 214, 0.30);
  --accent:         #7AA8D6;
  --accent-bright:  #A2C5E6;
  --accent-deep:    #1A2536;
  --accent-glow:    rgba(122, 168, 214, 0.42);
  --contrast:       #DB8A52;
  --contrast-bright:#EAA571;
  --contrast-soft:  rgba(219, 138, 82, 0.13);
  --contrast-glow:  rgba(219, 138, 82, 0.50);
}

/* split-screen versus readout */
.vs-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-bottom: clamp(16px, 2vw, 26px);
  overflow: hidden;
}
.vs-side {
  padding: clamp(24px, 3vw, 44px);
  transition: background 220ms ease;
}
.vs-side.vs-lump { text-align: right; }
.vs-side.is-winner.vs-sip {
  background: radial-gradient(150% 130% at 0% 50%, rgba(122,168,214,0.13), transparent 72%);
}
.vs-side.is-winner.vs-lump {
  background: radial-gradient(150% 130% at 100% 50%, rgba(219,138,82,0.13), transparent 72%);
}
.vs-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(12px, 2vw, 26px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 30px);
  color: var(--text-mute);
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.vs-tag {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.vs-sip .vs-tag  { color: var(--accent-bright); }
.vs-lump .vs-tag { color: var(--contrast-bright); }
.vs-figure {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 82px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  font-feature-settings: "tnum";
  font-variation-settings: "SOFT" 20, "opsz" 130;
}
.vs-sip .vs-figure  { color: var(--accent-bright); text-shadow: 0 0 56px var(--accent-glow); }
.vs-lump .vs-figure { color: var(--contrast-bright); text-shadow: 0 0 56px var(--contrast-glow); }
.vs-sub {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.vs-sub b { color: var(--text); font-weight: 600; }
.vs-win {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.vs-side.is-winner .vs-win { display: inline-flex; }
.vs-sip .vs-win  { color: var(--accent-bright); }
.vs-lump .vs-win { color: var(--contrast-bright); }
.vs-lump .vs-win { flex-direction: row-reverse; }
.vs-win::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.vs-figure.is-pulsing { animation: tk-pulse 520ms var(--ease, ease); }

@media (max-width: 720px) {
  .vs-split { grid-template-columns: 1fr; }
  .vs-side.vs-lump { text-align: left; }
  .vs-mark {
    border-left: none; border-right: none;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    padding: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vs-figure.is-pulsing { animation: none; }
}