/* The five-step diagram uses the site's Crafto grid and typography. */
.scenario .scenario-flow-request { background: var(--scenario-pale); }
.scenario .scenario-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.scenario .scenario-flow > li { display: flex; flex-direction: column; gap: 22px; min-width: 0; position: relative; }
.scenario .scenario-flow-step { position: relative; padding: 24px 16px; min-height: 265px; border: 1px solid #9ab2be; background: #fff; }
.scenario .scenario-flow-icon { display: block; width: fit-content; margin-bottom: 22px; color: var(--bs-primary); font-size: 38px; line-height: 1; }
.scenario .scenario-flow > li:not(:last-child) .scenario-flow-step::after { content: ''; position: absolute; right: -18px; top: 97px; width: 12px; border-top: 1px solid var(--bs-secondary); }
.scenario .scenario-flow > li:not(:last-child) .scenario-flow-step::before { content: ''; position: absolute; right: -18px; top: 94px; width: 6px; height: 6px; border-top: 1px solid var(--bs-secondary); border-right: 1px solid var(--bs-secondary); transform: rotate(45deg); }
.scenario .scenario-flow-contribution { padding: 20px 16px; border-top: 3px solid #9ab2be; flex: 1; }
.scenario .scenario-flow-owner { display: block; color: var(--bs-secondary); font-weight: 500; margin-bottom: 16px; }
.scenario .scenario-flow-owner i { margin-right: 5px; font-size: 17px; vertical-align: -1px; }
.scenario .scenario-flow-content .scenario-flow-owner i { color: #50752a; }
.scenario .scenario-flow-taxonomy .scenario-flow-owner i { color: #6e4d87; }
.scenario .scenario-flow-engine { background: #ebf0f2; }
.scenario .scenario-flow-content { background: #eff5e7; border-color: #7cb042; }
.scenario .scenario-flow-taxonomy { background: #f0ebf4; border-color: #6e4d87; }
.scenario .scenario-flow p { color: var(--scenario-ink); }
@media (max-width: 1199px) {
    .scenario .scenario-flow { grid-template-columns: 1fr; gap: 34px; }
    .scenario .scenario-flow > li { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
    .scenario .scenario-flow-step { min-height: 0; }
    .scenario .scenario-flow > li:not(:last-child) .scenario-flow-step::after,
    .scenario .scenario-flow > li:not(:last-child) .scenario-flow-step::before { display: none; }
    .scenario .scenario-flow > li:not(:last-child)::after { content: ''; position: absolute; bottom: -24px; left: 22px; height: 14px; border-left: 1px solid var(--bs-secondary); }
    .scenario .scenario-flow > li:not(:last-child)::before { content: ''; position: absolute; bottom: -24px; left: 19px; width: 6px; height: 6px; border-bottom: 1px solid var(--bs-secondary); border-right: 1px solid var(--bs-secondary); transform: rotate(45deg); }
}
@media (max-width: 575px) {
    .scenario .scenario-flow > li { grid-template-columns: 1fr; gap: 0; }
    .scenario .scenario-flow-step,
    .scenario .scenario-flow-contribution { padding: 20px; }
}
@media print {
    .scenario .scenario-flow { grid-template-columns: 1fr; }
    .scenario .scenario-flow > li { display: grid; grid-template-columns: 1fr 1.4fr; break-inside: avoid; }
    .scenario .scenario-flow-step { min-height: 0; }
    .scenario .scenario-flow-step::after,
    .scenario .scenario-flow-step::before,
    .scenario .scenario-flow > li::after,
    .scenario .scenario-flow > li::before { display: none; }
}