/* ── HOW IT WORKS — Process flow ── */
#how { background: var(--cream); }

.process-flow {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:2rem;
  position:relative;
}
.process-flow::before {
  content:''; position:absolute;
  top:2.2rem; left:3rem; right:3rem; height:1px;
  background: linear-gradient(90deg,
    var(--signal) 0%, rgba(0,109,107,0.3) 50%, transparent 100%);
}

.process-step {
  position:relative; padding:1.5rem;
  background:var(--parchment);
  border:1px solid var(--border2);
  border-radius:2px;
  transition:border-color 0.3s, box-shadow 0.3s;
}
.process-step:hover {
  border-color: rgba(0,109,107,0.25);
  box-shadow: 0 8px 32px rgba(0,109,107,0.08);
}

.step-circle {
  width:44px; height:44px;
  background:var(--cream); border:1.5px solid var(--signal);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif;
  font-size:1.1rem; color:var(--signal);
  margin-bottom:1.2rem;
}

.step-title-zh {
  font-family:'Noto Serif SC', serif;
  font-size:1.2rem; font-weight:400;
  color:var(--ink); margin-bottom:0.2rem;
}
.step-title-en {
  font-family:'IBM Plex Mono', monospace;
  font-size:0.55rem; letter-spacing:0.18em;
  color:var(--signal); text-transform:uppercase;
  margin-bottom:0.8rem;
}
.step-body {
  font-family:'Noto Sans SC', sans-serif;
  font-size:0.78rem; line-height:1.75;
  color:var(--muted);
}

@media(max-width:900px) {
  .process-flow { grid-template-columns:1fr 1fr; }
  .process-flow::before { display:none; }
}