.pipe-band, .pipe-band * { box-sizing:border-box; }  /* the references assume a global border-box reset the page does not have */
  .pipe-band { border-bottom:1px solid #e7e4f0; background:#f7f7fb; padding:88px 48px; }
  .pipe-line { display:flex; align-items:center; gap:0; }
  .pipe-card { flex:1; min-width:0; background:#ffffff; border:1.5px solid #e7e4f0; border-radius:13px; padding:13px 15px 14px;
    transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .3s cubic-bezier(.34,1.4,.64,1); }
  .pipe-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .pipe-num { display:inline-flex; align-items:center; justify-content:center; font:500 11px 'IBM Plex Mono',monospace;
    background:#f5ecfd; color:#a34ef0; border-radius:6px; padding:3px 8px; transition:background-color .4s ease, color .4s ease; }
  .pipe-ic { width:26px; height:26px; border-radius:50%; background:#f5f5fa; display:flex; align-items:center; justify-content:center; transition:background-color .4s ease; }
  .pipe-ic svg { width:13px; height:13px; color:#8f8ba6; transition:color .4s ease; }
  .pipe-card h4 { font:700 14px 'Sora',sans-serif; color:#1d1b33; margin:0 0 3px; }
  .pipe-card p { font-size:11.5px; line-height:1.4; color:#686386; margin:0; }
  .pipe-arrow { flex:none; width:26px; display:flex; align-items:center; justify-content:center; color:#d8d3e6; transition:color .5s ease; }
  .pipe-arrow svg { width:13px; height:13px; }
  .pipe-card.pipe-active { background:rgba(163,78,240,.05); border-color:#a34ef0; box-shadow:0 10px 22px rgba(163,78,240,.16); }
  .pipe-card.pipe-active .pipe-num { background:#a34ef0; color:#ffffff; }
  .pipe-card.pipe-active .pipe-ic { background:#f5ecfd; }
  .pipe-card.pipe-active .pipe-ic svg { color:#a34ef0; }
  .pipe-card.pipe-pop { animation:pipePop .5s cubic-bezier(.34,1.4,.64,1); }
  @keyframes pipePop { 0% { transform:scale(1); } 40% { transform:scale(1.035); } 100% { transform:scale(1); } }
  .pipe-arrow.pipe-lit { color:#a34ef0; }
  .pipe-rail { position:relative; height:20px; margin-top:16px; }
  .pipe-rail-line { position:absolute; left:0; right:0; top:50%; height:2px; background:#e7e4f0; transform:translateY(-50%); border-radius:2px; }
  .pipe-puck { position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#a34ef0;
    box-shadow:0 0 0 5px rgba(163,78,240,.14); transform:translate(-50%,-50%); transition:left .55s cubic-bezier(.65,0,.35,1); }
  .pipe-tick { position:absolute; top:50%; width:5px; height:5px; border-radius:50%; background:#d8d3e6; transform:translate(-50%,-50%); }
  @media (max-width:1100px) {
    .pipe-line { flex-direction:column; align-items:stretch; gap:10px; }
    .pipe-arrow { transform:rotate(90deg); width:auto; height:18px; margin:-2px 0; }
    .pipe-rail { display:none; }
  }