.factory-bg { position: relative; }
.factory-sky {
  position: absolute; top: -40px; bottom: -40px; left: 0; right: 0; z-index: -1;
  background:
    radial-gradient(circle at 20% 10%, #fff, transparent 40%),
    linear-gradient(135deg, #ffe9c7, #ffd9e6);
}

/* Assembly line / conveyor */
.belt { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
.stations { display: flex; justify-content: space-between; gap: 12px; }
.station {
  flex: 1; background: #fff; border-radius: 14px; padding: 14px 10px;
  box-shadow: var(--shadow); font-weight: 700; position: relative; transition: .3s;
}
.station.done { outline: 3px solid var(--hands); }
.station.jam  { outline: 3px solid #ff5d5d; background: #ffecec; animation: shake .4s; }
.station-num {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  background: var(--loop); color: #fff; align-items: center; justify-content: center;
  margin-right: 6px; font-size: 14px;
}
.belt-track {
  position: relative; height: 60px; border-radius: 12px;
  background: repeating-linear-gradient(90deg, #cbb89a, #cbb89a 18px, #b8a688 18px, #b8a688 36px);
}
.item {
  position: absolute; top: 6px; font-size: 40px; transition: left .8s ease; transform: translateX(-50%);
}
.item.jammed { animation: shake .4s infinite; }
@keyframes shake {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(-60%); }
  75% { transform: translateX(-40%); }
}

/* Side-by-side comparison */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.vs-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; text-align: left; transition: .3s;
}
.vs-card.jammed { outline: 3px solid #ff5d5d; }
.vs-head { font-weight: 800; font-size: 20px; margin-bottom: 10px; }
.vs-card ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.vs-result { margin-top: 14px; font-weight: 800; }
.vs-result.bad { color: #d63b3b; }
.vs-result.good { color: #1f9e63; }
.twist {
  display: inline-block; background: var(--accent); color: #3a2a00; font-weight: 800;
  border-radius: 12px; padding: 12px 16px; margin: 4px 0 14px;
}
@media (max-width: 820px) { .vs-grid { grid-template-columns: 1fr; } }