.oct31-visual { margin: 28px 0; padding: 24px; border: 1px solid #dde1e9; border-radius: 6px; background: #fff; color: #082832; font-family: inherit; }
.oct31-visual .oct31-kicker { margin: 0 0 8px; color: #00415d; font: 500 11px/1.5 'Fira Code', monospace; letter-spacing: .08em; text-transform: uppercase; }
.oct31-visual .oct31-title { margin: 0 0 24px; color: #082832; font-size: 18px; font-weight: 600; line-height: 1.4; }
.oct31-visual .oct31-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.oct31-visual .oct31-stage { position: relative; min-width: 0; border-top: 2px solid #dde1e9; padding-top: 12px; }
.oct31-visual .oct31-stage:first-child { border-color: #0081ba; }
.oct31-visual .oct31-stage:not(:last-child)::after { content: '→'; position: absolute; top: 35px; right: -17px; color: #94a3b8; font-size: 16px; }
.oct31-visual .oct31-number { display: block; margin-bottom: 12px; color: #00415d; font: 500 11px/1.5 'Fira Code', monospace; }
.oct31-visual .oct31-label { display: block; color: #082832; font-size: 14px; font-weight: 600; line-height: 1.5; }
.oct31-visual .oct31-detail { display: block; margin-top: 6px; color: #656d76; font-size: 12px; line-height: 1.6; }
.oct31-visual .oct31-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #edf0f3; color: #656d76; font-size: 12px; line-height: 1.7; }
@media (max-width: 600px) {
  .oct31-visual { padding: 20px; }
  .oct31-visual .oct31-title { font-size: 17px; margin-bottom: 20px; }
  .oct31-visual .oct31-stages { grid-template-columns: 1fr; gap: 18px; }
  .oct31-visual .oct31-stage { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; border-top: 0; padding: 0 0 0 12px; border-left: 2px solid #dde1e9; }
  .oct31-visual .oct31-number { grid-row: 1 / 3; margin: 2px 0 0; }
  .oct31-visual .oct31-stage:not(:last-child)::after { content: ''; }
  .oct31-visual .oct31-detail { grid-column: 2; margin-top: 2px; }
}