.failure-path,
.isolation-flow {
  display: grid;
  max-width: 900px;
  gap: 12px;
  margin: 32px 0;
}

.failure-path {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.failure-path > div,
.isolation-flow > div {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
}

.failure-path i {
  color: #ff8291;
  font-size: 1.1rem;
}

.failure-path strong,
.isolation-flow strong {
  display: block;
  margin-top: 18px;
  color: var(--text);
  font-size: 0.82rem;
}

.failure-path p,
.isolation-flow p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.58;
}

.isolation-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.isolation-flow > div {
  position: relative;
  min-height: 158px;
}

.isolation-flow > div:not(:last-child)::after {
  position: absolute;
  top: 30px;
  right: -18px;
  z-index: 2;
  color: var(--cyan);
  font-family: var(--font-mono);
  content: "→";
}

.isolation-flow span {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.51rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proof-grid {
  display: grid;
  max-width: 900px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 30px 0;
}

.proof-grid > div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
}

.proof-grid b {
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.proof-grid p {
  margin: 9px 0 0;
  color: var(--muted-strong);
  font-size: 0.7rem;
  line-height: 1.58;
}

.role-warning {
  max-width: 860px;
  margin: 28px 0;
  padding: 23px;
  border: 1px solid color-mix(in srgb, #ffb15c 32%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, #ffb15c 6%, transparent);
}

.role-warning strong {
  color: #ffc17d;
}

.role-warning p {
  margin: 7px 0 0;
  color: var(--muted-strong);
  font-size: 0.74rem;
  line-height: 1.67;
}

@media (max-width: 860px) {
  .isolation-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .isolation-flow > div::after {
    display: none;
  }
}

@media (max-width: 620px) {
  .failure-path,
  .isolation-flow,
  .proof-grid {
    grid-template-columns: 1fr;
  }
}