/* ================================================================
   writing-task2/reasons-not-advantages — local.css
   ================================================================ */

/* ================================================================
   Why Chain — vertical reasoning flow (merit → question → basis)
   ================================================================ */
.why-chain {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .8rem 0 1rem;
  padding: 1rem 1.2rem;
  background: rgba(4,63,109,.04);
  border-radius: 8px;
}
.why-chain__step {
  padding: .5rem .9rem;
  background: #fff;
  border: 1.5px solid rgba(70,162,218,.3);
  border-radius: 7px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--black);
}
.why-chain__step--merit {
  border-color: rgba(176,48,48,.3);
  background: rgba(176,48,48,.04);
}
.why-chain__step--demerit {
  border-color: rgba(176,48,48,.3);
  background: rgba(176,48,48,.04);
}
.why-chain__step--basis {
  border-color: rgba(29,107,58,.3);
  background: rgba(29,107,58,.04);
}
.why-chain__arrow {
  font-size: .82rem;
  color: var(--lb);
  font-weight: 700;
  padding: .05rem .9rem;
  font-family: 'Raleway', sans-serif;
}

@media (max-width: 640px) {
  .why-chain { padding: .85rem 1rem; }
  .why-chain__step { font-size: .87rem; }
}