/* All three transitions use the same SVG, never a font glyph. */
.canvas-step-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  align-items: stretch;
}
.canvas-step-list > li::after {
  content: none !important;
  display: none !important;
}
.canvas-flow-arrow {
  position: absolute;
  top: calc(50% - 16px);
  right: -31px;
  display: block;
  width: 26px;
  height: 20px;
  color: #806c59;
  pointer-events: none;
}
.canvas-flow-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Exclude only the old incoming arrow at the artwork's left edge.
   The two characters, decorations and caption remain in the original crop. */
.canvas-friends-art {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 49%, 9% 49%, 9% 37%, 0 37%);
}
@media (max-width: 680px) {
  .canvas-step-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .canvas-step-list > li { width: min(100%, 240px); margin-inline: auto; }
  .canvas-flow-arrow {
    top: auto;
    right: auto;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}