/* PROCESS — one severed box against a chain that is still joined.
   The contrast is carried by shape and by colour: slate / --text-3 on the
   open-web side, cyan on the company side. */

.prc{
  display:grid;gap:clamp(1.5rem,3vw,2.4rem);
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  padding:clamp(1rem,2.6vw,1.9rem);
}
.prc__side{display:grid;gap:.9rem;align-content:start;min-width:0}
.prc__side--web{align-content:center;justify-items:start;padding-block:1rem}
.prc__side--co{
  border-left:1px solid var(--line);padding-left:clamp(1.1rem,2.4vw,2rem);
}
.prc__side--co:focus-visible{outline:none;box-shadow:inset 2px 0 0 var(--yellow)}

.prc__lab{color:var(--text-4)}
.prc__lab--co{color:var(--cyan)}

/* ---------------------------------------------- side A: the open web */
.prc__cut{
  width:26px;height:32px;flex:none;margin-left:1.05rem;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;color:var(--slate);opacity:.7;
}
.prc__cut--down{transform:scaleY(-1)}
.prc__cut-line{stroke-dasharray:3.5 4.5}
.prc__cut-x{stroke:var(--slate)}

.prc__box{
  width:100%;display:grid;gap:.5rem;
  border:1px dashed var(--slate-deep);border-radius:var(--radius);
  background:var(--surface);padding:1rem 1.05rem;
}
.prc__box-k{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4)}
.prc__box-t{font-size:clamp(1.08rem,2vw,1.32rem);line-height:1.24;color:var(--slate)}
.prc__box-d{font-size:.84rem;line-height:1.55;color:var(--text-3);max-width:34ch}
.prc__box-sys{
  display:flex;align-items:center;gap:.45rem;
  border-top:1px dashed var(--line);margin-top:.3rem;padding-top:.6rem;
  font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);
}
.prc__hon{font-size:.82rem;line-height:1.6;color:var(--text-3);max-width:36ch}
.prc__hon b{color:var(--slate);font-weight:600}

/* ---------------------------------------------- side B: the linked chain */
.prc__chain{display:grid;justify-items:stretch}
.prc__joint{display:flex}
.prc__link{
  width:24px;height:38px;margin-left:1.2rem;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  color:var(--cyan);opacity:.22;
  transition:opacity var(--dur-2) var(--ease);
}
.prc__link.is-on{opacity:1}
.prc__link-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-3) var(--ease)}
.prc__link.is-on .prc__link-line{stroke-dashoffset:0}
.prc__link-head{opacity:0;transition:opacity var(--dur-2) var(--ease) var(--dur-2)}
.prc__link.is-on .prc__link-head{opacity:1}

.prc__beat{
  display:grid;grid-template-columns:2rem minmax(0,1fr);gap:0 .75rem;align-items:start;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:.85rem .95rem;
  opacity:.32;filter:saturate(.2);
  transition:opacity var(--dur-2) var(--ease),filter var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.prc__beat.is-on{opacity:1;filter:none}
.prc__beat.is-cur{background:var(--surface-2);border-color:var(--cyan-deep)}

.prc__no{font-size:.62rem;font-weight:600;letter-spacing:.1em;color:var(--text-4);padding-top:.14rem}
.prc__beat.is-cur .prc__no{color:var(--yellow)}
.prc__b{display:grid;gap:.34rem;min-width:0}
.prc__k{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.prc__t{font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.24;color:var(--text)}
.prc__d{font-size:.84rem;line-height:1.55;color:var(--text-2);max-width:52ch}
.prc__sys{
  display:flex;align-items:center;gap:.45rem;
  border-top:1px dashed var(--line);margin-top:.3rem;padding-top:.55rem;
  font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.prc__sys-ico{width:.78rem;height:.78rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;color:var(--cyan);opacity:.8}
.prc__sys-ico--none{color:var(--text-4)}

/* ------------------------------------------------------------ readouts */
.prc__cap{border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.4rem;min-height:5.6rem}
.prc__cap-lab{color:var(--yellow);letter-spacing:.14em}
.prc__cap-body{font-size:.9rem;line-height:1.55;color:var(--text-2);max-width:56ch}

.prc__ctrl{border-top:1px solid var(--line);padding-top:.85rem}
.prc__ctrl .btn{min-height:40px}
/* the shared dot is a 4px bar; give it a 40px hit area without changing it */
.prc__ctrl .step__dot{height:2.5rem;padding:1.1rem 0;background-clip:content-box}

.prc__foot{grid-column:1/-1;margin-top:.4rem}

/* ------- narrow: one column, chain still vertical, divider on top ------- */
@media (max-width:880px){
  .prc{grid-template-columns:1fr;gap:1.6rem}
  .prc__side--web{align-content:start;padding-block:0}
  .prc__side--co{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.4rem}
  .prc__side--co:focus-visible{box-shadow:inset 0 2px 0 var(--yellow)}
  .prc__box,.prc__hon,.prc__box-d{max-width:none}
}
@media (max-width:460px){
  .prc{padding:1rem .9rem}
  .prc__beat{padding:.8rem .75rem;grid-template-columns:1.6rem minmax(0,1fr);gap:0 .6rem}
  .prc__link{margin-left:.95rem;height:32px}
  .prc__cut{margin-left:.95rem}
  .prc__d,.prc__box-d{font-size:.82rem}
  .prc__ctrl{justify-content:center;gap:.6rem}
  .prc__cap{min-height:6.8rem}
}