/* pipe */
.pipe__dot{position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--white);
  border:2px solid var(--accent)}
.pipe__k{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  color:var(--muted);margin-bottom:8px}
.pipe__step h4{font-size:16px;line-height:1.8;margin-bottom:8px}
.pipe__step--final{border-left-color:transparent}
.pipe__step--final .pipe__dot{background:var(--accent);border-color:var(--accent)}
.pipe__step--final h4{color:var(--accent)}
/* ladder */
.ladder{margin-top:48px;display:flex;flex-direction:column;gap:16px}
/* rung */
.rung{display:grid;grid-template-columns:104px 1fr auto;gap:24px;align-items:center;padding:24px 32px;
  border-radius:var(--r-card);background:var(--bg-card);border:1px solid var(--line);
  transition:transform .25s ease,box-shadow .25s ease}
.rung:hover{transform:translateX(4px)}
.rung__lv{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--muted)}
.rung__body h3{font-size:20px;line-height:1.8;margin-bottom:8px}
.rung__body p{font-size:14px;line-height:1.8;color:var(--body)}
.rung__use{font-size:12px;font-weight:600;line-height:1.8;color:var(--muted);padding:8px 16px;
  border-radius:var(--r-pill);background:var(--bg-tint);border:1px solid var(--line);max-width:280px;
  text-align:center}
.rung--target{background:var(--dark);border-color:transparent;box-shadow:var(--shadow-dark)}
.rung--target .rung__lv{color:var(--accent-soft)}
.rung--target .rung__body h3{color:var(--white);font-size:20px}
.rung--target .rung__body p{color:rgba(255,255,255,.7)}
.rung--target .rung__use{background:rgba(99,102,241,.22);border-color:rgba(129,140,248,.45);color:var(--accent-pale)}
.rung--target{background:linear-gradient(135deg,var(--accent-wash) 0%,var(--bg-tint) 100%);
  border-color:rgba(99,102,241,.32);box-shadow:var(--shadow-accent)}
.rung--target .rung__lv{color:#5457E5}
.rung--target .rung__body h3{color:#2E2F8C;font-size:20px}
.rung--target .rung__body p{color:#4C4C6E}
.rung--target .rung__use,.section--dark .rung--target .rung__use{background:rgba(99,102,241,.13);border-color:rgba(99,102,241,.3);color:var(--accent-strong)}
.section--dark .rung{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.section--dark .rung:hover{background:rgba(255,255,255,.07)}
.section--dark .rung__lv{color:rgba(255,255,255,.45)}
.section--dark .rung__body h3{color:var(--white)}
.section--dark .rung__body p{color:rgba(255,255,255,.66)}
.section--dark .rung__use{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.section--dark .rung--target{background:linear-gradient(135deg,var(--accent-wash) 0%,var(--bg-tint) 100%);
  border-color:rgba(129,140,248,.5);box-shadow:var(--shadow-dark)}
.section--dark .rung--target .rung__lv{color:#5457E5}
.section--dark .rung--target .rung__body h3{color:#2E2F8C}
.section--dark .rung--target .rung__body p{color:#4C4C6E}
@media (max-width:1024px){
  .rung{grid-template-columns:90px 1fr;gap:16px}
  .rung__use{grid-column:2;justify-self:start}
}
@media (max-width:520px){
  .rung{grid-template-columns:1fr;gap:12px;padding:24px 24px}
  .rung__use{grid-column:1}
}
/* uc-card */
.uc-card strong{font-weight:600}
/* ============================================================
PIPELINE STEPS
   ============================================================ */
.pipe{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}
.pipe__step{position:relative;padding:0 0 32px 32px;border-left:2px solid var(--line)}
.pipe__step:last-child{border-left-color:transparent}
.pipe__step p{font-size:14px;line-height:1.8;color:var(--body)}
/* ============================================================
RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
.pipe{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
.pipe{grid-template-columns:1fr}
}
/* figure 既定の左右マージン(40px)を消してコンテナ幅いっぱいに */
.bench-body .bench-hero__figure{font-size:clamp(28px,3.2vw,42px)}
/* ---------- 7. diagrams at 75% of the box ---------- */
@media (max-width:1024px){
.bench-body .bench-hero__figure{font-size:clamp(34px,5vw,54px)}
}
/* architecture diagrams keep their drawing width on phones (the frame scrolls) */
.figure--scroll{--fig-w:820px}