.cadence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--line);
}
.cadence article { padding: 1.25rem; background: var(--wash); }
.cadence b { display: block; font-size: 1.7rem; letter-spacing: -.045em; }
.cadence span { display: block; margin: .15rem 0 .65rem; color: var(--orange); font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.cadence p { margin: 0; color: var(--muted); font-size: .83rem; }
.pipeline-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.2rem;
  margin-top: 4rem;
}
.pipeline-stage {
  position: relative;
  min-height: 190px;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 35, 63, .06);
}
.pipeline-stage:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -1.55rem;
  top: 50%;
  z-index: 2;
  color: #9aa9ba;
  font-size: 1.15rem;
  font-weight: 850;
  transform: translateY(-50%);
}
.pipeline-stage:nth-child(4) { grid-column: 3; }
.pipeline-stage:nth-child(5) { grid-column: 2; grid-row: 2; }
.pipeline-stage:nth-child(6) { grid-column: 1; grid-row: 2; }
.pipeline-stage:nth-child(7) { grid-column: 1; grid-row: 3; }
.pipeline-stage:nth-child(8) { grid-column: 2; grid-row: 3; }
.pipeline-stage:nth-child(9) { grid-column: 3; grid-row: 3; }
.pipeline-stage:nth-child(10) { grid-column: 3; grid-row: 4; }
.pipeline-stage:nth-child(11) { grid-column: 2; grid-row: 4; }
.pipeline-stage:nth-child(3)::after,
.pipeline-stage:nth-child(6)::after,
.pipeline-stage:nth-child(9)::after {
  content: "↓";
  right: auto;
  top: auto;
  bottom: -1.65rem;
  left: 50%;
  transform: translateX(-50%);
}
.pipeline-stage:nth-child(4)::after,
.pipeline-stage:nth-child(5)::after,
.pipeline-stage:nth-child(10)::after {
  content: "←";
  right: auto;
  left: -1.55rem;
}
.pipeline-stage span { color: var(--teal); font-size: .66rem; font-weight: 850; letter-spacing: .1em; }
.pipeline-stage h3 { margin: 1.65rem 0 .55rem; font-size: 1.02rem; letter-spacing: -.02em; }
.pipeline-stage p { margin: 0; color: var(--muted); font-size: .84rem; }
.pipeline-stage.gate { border-top-color: #d08b1d; }
.pipeline-stage.gate span { color: #a76c0b; }
.pipeline-stage.build { border-top-color: var(--orange); }
.pipeline-stage.build span { color: var(--orange); }
.pipeline-stage.notify, .pipeline-stage.action { border-top-color: #4679b8; }
.pipeline-stage.notify span, .pipeline-stage.action span { color: #35679f; }
.pipeline-stage.organise, .pipeline-stage.plan { border-top-color: #7755a6; }
.pipeline-stage.organise span, .pipeline-stage.plan span { color: #664591; }
.pipeline-stage.intelligence, .pipeline-stage.contact { border-top-color: #153d60; }
.pipeline-stage.intelligence span, .pipeline-stage.contact span { color: #153d60; }
.decision-gates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 4rem; }
.decision-gates article { padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, #fff, #f7f9fc); }
.decision-gates span, .workflow-outputs span { display: block; color: var(--orange); font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.decision-gates strong { display: block; margin: .55rem 0; font-size: 1.04rem; }
.decision-gates p { margin: 0; color: var(--muted); font-size: .82rem; }
.workflow-outputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; padding: 1.25rem; border-radius: 18px; background: var(--navy); color: #fff; }
.workflow-outputs > div { padding: 1rem; border: 1px solid #29425f; border-radius: 12px; }
.workflow-outputs span { color: #ffa17a; margin-bottom: .65rem; }
.workflow-outputs strong { display: block; margin: .35rem 0; font-size: .9rem; }
.workflow-outputs .human-loop { grid-column: 1 / -1; display: grid; grid-template-columns: .6fr 1.2fr 1.6fr; align-items: center; gap: 1rem; border-color: #536f88; background: #102641; }
.workflow-outputs .human-loop span { margin: 0; }
.workflow-outputs .human-loop p { margin: 0; color: #b8c5d4; font-size: .82rem; }
@media (max-width: 900px) {
  .cadence, .decision-gates { grid-template-columns: 1fr 1fr; }
  .pipeline-diagram { grid-template-columns: 1fr 1fr; }
  .pipeline-stage { grid-column: auto !important; grid-row: auto !important; }
  .pipeline-stage:not(:last-child):nth-child(odd)::after { content: "→"; right: -1.55rem; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
  .pipeline-stage:nth-child(3)::after,
  .pipeline-stage:nth-child(6)::after,
  .pipeline-stage:nth-child(9)::after { content: "→"; right: -1.55rem; top: 50%; bottom: auto; left: auto; transform: translateY(-50%); }
  .pipeline-stage:nth-child(even)::after { content: "↓"; right: auto; top: auto; bottom: -1.65rem; left: 50%; transform: translateX(-50%); }
  .workflow-outputs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .cadence, .pipeline-diagram, .decision-gates, .workflow-outputs { grid-template-columns: 1fr; }
  .pipeline-stage:not(:last-child)::after,
  .pipeline-stage:not(:last-child):nth-child(odd)::after,
  .pipeline-stage:nth-child(even)::after,
  .pipeline-stage:nth-child(3)::after,
  .pipeline-stage:nth-child(6)::after,
  .pipeline-stage:nth-child(9)::after { content: "↓"; right: auto; top: auto; bottom: -1.65rem; left: 50%; transform: translateX(-50%); }
  .workflow-outputs .human-loop { grid-column: auto; display: block; }
  .workflow-outputs .human-loop strong, .workflow-outputs .human-loop p { margin-top: .6rem; }
}