/* -------------------- Three tools vs one system comparison -------------------- */
/* Visualizes the "duct-taped" line in the headline. Left column shows the
   scattered legacy stack, right shows the unified RBS system. */
.muted-h2 { color: var(--muted-strong); font-weight: 600; display: block; }
@media (min-width: 768px) { .muted-h2 { display: inline; } }

.vs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .vs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; }
}

.vs-col {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
}
.vs-col-head { margin-bottom: 1.25rem; }
.vs-col-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.vs-col-tag--bad  { background: #FEE2E2; color: #991B1B; }
.vs-col-tag--good { background: var(--tint); color: var(--primary-darker); }
.vs-col h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}

/* Stage = the visual area where the diagram sits */
.vs-stage {
  position: relative;
  height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

/* LEFT — chaotic, faded background, scattered tool tiles */
.vs-stage--chaos {
  background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%);
  border: 1px dashed #CBD5E1;
}
.vs-tangles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.65;
}
.vs-tool {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  z-index: 1;
}
.vs-tool strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
}
.vs-tool span {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.1rem;
}
.vs-tool-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-display);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
/* Slight tilts and offsets sell the "scattered" feel without being too cute */
.vs-tool--a { top: 16%; left: 6%;  transform: rotate(-3deg); }
.vs-tool--b { top: 14%; right: 6%; transform: rotate(2.5deg); }
.vs-tool--c { bottom: 14%; left: 7%; transform: rotate(2deg); }
.vs-tool--d { bottom: 16%; right: 6%; transform: rotate(-2.5deg); }

.vs-manual {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  z-index: 2;
  white-space: nowrap;
}
.vs-manual--top    { top: 44%; }
.vs-manual--bottom { top: 56%; }

/* RIGHT — clean, teal, unified flow */
.vs-stage--clean {
  background:
    radial-gradient(600px 200px at 50% 100%, rgba(45, 212, 191, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--tint-soft) 100%);
  border: 1px solid var(--border);
}
.vs-system {
  position: absolute;
  inset: 0;
}
.vs-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.vs-node {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 12px;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 6px 14px rgba(15, 118, 110, 0.12);
  z-index: 1;
  white-space: nowrap;
}
.vs-node strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
}
.vs-node-icon {
  width: 22px; height: 22px;
  background: var(--tint);
  color: var(--primary-darker);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vs-node-icon svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.vs-node--top      { top: 8%;  left: 50%; transform: translateX(-50%); }
.vs-node--mid      { top: 42%; left: 50%; transform: translateX(-50%); }
.vs-node--bottom-l { bottom: 8%; left: 4%; }
.vs-node--bottom-r { bottom: 8%; right: 4%; }

.vs-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.vs-list li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  color: var(--muted-strong);
}
.vs-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 0.55rem;
  flex-shrink: 0;
}
.vs-list--bad  li::before { background: #DC2626; }
.vs-list--good li::before { background: var(--primary); }

/* The two cards stack vertically below 900px, so on mobile the section is
   the longest one on the page. Compress aggressively: smaller diagrams,
   tighter padding, denser bullets, smaller section heading. */
@media (max-width: 767px) {
  #services .section-head { margin-bottom: 1.5rem; }
  #services .section-head h2 {
    font-size: clamp(1.4rem, 5.2vw, 2rem);
    line-height: 1.18;
  }
  .vs-grid { gap: 1rem; }
  .vs-col { padding: 1.25rem 1.15rem; }
  .vs-col-head { margin-bottom: 0.9rem; }
  .vs-col-tag { margin-bottom: 0.45rem; padding: 0.22rem 0.6rem; font-size: 0.66rem; }
  .vs-col h3 { font-size: 1.08rem; line-height: 1.25; }
  .vs-stage { height: 160px; margin-bottom: 0.9rem; }
  .vs-list { font-size: 0.88rem; gap: 0.4rem; }
  .vs-list li::before { margin-top: 0.45rem; width: 5px; height: 5px; }
}
@media (max-width: 480px) {
  .vs-col { padding: 1.1rem 0.95rem; }
  .vs-stage { height: 140px; }
  .vs-tool { padding: 0.32rem 0.45rem; gap: 0.28rem; border-radius: 8px; }
  .vs-tool strong { font-size: 0.66rem; }
  .vs-tool span { display: none; }
  .vs-tool-mark { width: 18px; height: 18px; font-size: 0.66rem; border-radius: 5px; }
  .vs-tool--a { top: 12%; left: 4%; }
  .vs-tool--b { top: 12%; right: 4%; }
  .vs-tool--c { bottom: 12%; left: 4%; }
  .vs-tool--d { bottom: 12%; right: 4%; }
  .vs-manual { font-size: 0.55rem; padding: 0.1rem 0.42rem; letter-spacing: 0.07em; }
  .vs-node { padding: 0.35rem 0.55rem; gap: 0.3rem; border-radius: 9px; }
  .vs-node strong { font-size: 0.66rem; }
  .vs-node-icon { width: 18px; height: 18px; }
  .vs-node-icon svg { width: 11px; height: 11px; }
  .vs-list { font-size: 0.85rem; }
}