/* ---------- Warehouse flow illustration ---------- */
.wms-process-section { background: #F8FAF7; }
.wms-process-section .sec-head { margin-bottom: 30px; }
.wms-line { position: relative; padding: 28px 28px 34px; border: 1px solid #DCE2DA; border-radius: 28px; background: #F4F6F3; }
.wms-line-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; }
.wms-line-step { position: relative; display: flex; flex-direction: column; padding-bottom: 26px; }
.wms-line-step::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 1.5px; height: 22px; background: #B5DEAA; }
.wms-line-art { position: relative; aspect-ratio: 200 / 120; border-radius: 16px; background: #fff; border: 1px solid #E1E6DF; }
.wms-line-art svg { display: block; width: 100%; height: 100%; }
.wms-line-step:not(:last-child) .wms-line-art::after { content: ""; position: absolute; top: 50%; right: -25px; width: 22px; height: 22px; translate: 0 -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 11h15m-5-5 5 5-5 5' fill='none' stroke='%23238D10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wms-line-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.wms-line-num { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); }
.wms-line-bot { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: #15171C; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.wms-line-bot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4CB838; }
.wms-line-bot.hub { background: var(--accent); }
.wms-line-bot.hub::before { background: #fff; }
a.wms-line-bot:hover { background: #2A2D33; }
.wms-line-step h3 { margin: 10px 0 4px; font-size: 17px; font-weight: 600; color: var(--ink); }
.wms-line-step p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.wms-line-rail { position: relative; height: 1.5px; margin: 0 calc((100% - 140px) / 12); background: #B5DEAA; }
.wms-line-rail span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 6px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid #B5DEAA; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.wms-line-rail b { color: var(--accent-ink); font-weight: 600; }

@media (max-width: 960px) {
  .wms-line-steps { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .wms-line-step:nth-child(3n) .wms-line-art::after { display: none; }
  .wms-line-step { padding-bottom: 0; }
  .wms-line-step::before { display: none; }
  .wms-line-rail { height: auto; margin: 28px 0 0; background: none; text-align: center; }
  .wms-line-rail span { position: static; translate: none; display: inline-block; }
}

@media (max-width: 640px) {
  .wms-line { padding: 18px 16px 22px; border-radius: 20px; }
  .wms-line-steps { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .wms-line-step:nth-child(3n) .wms-line-art::after { display: block; }
  .wms-line-step:nth-child(2n) .wms-line-art::after { display: none; }
  .wms-line-step:not(:last-child) .wms-line-art::after { right: -21px; width: 18px; height: 18px; }
  .wms-line-rail span { white-space: normal; }
}