.n360-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; }
  .n360-mods > div { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
  .n360-mods b { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--link); }
  .n360-mods ol { list-style: none; margin: 0; padding: 0; }
  .n360-mods li { position: relative; padding: 0 0 12px 22px; font-size: 15px; line-height: 1.3; }
  .n360-mods li:last-child { padding-bottom: 0; }
  .n360-mods li::before { content: ""; position: absolute; left: 0; top: .32em; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--link); }
  .n360-mods li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: calc(.32em + 11px); bottom: 2px; width: 1px; background: var(--rule); }

  /* Two synchronized illustrated journeys; every label stays readable throughout. */
  .workflow-stepper li { padding: 7px 8px 7px 28px; margin-bottom: 4px; border-radius: 6px; transition: color 250ms ease-out, background-color 250ms ease-out; }
  .workflow-stepper li:last-child { padding-bottom: 7px; margin-bottom: 0; }
  .workflow-stepper li::before { left: 8px; top: 12px; width: 11px; height: 11px; }
  .workflow-stepper li:not(:last-child)::after { left: 13px; top: 25px; bottom: -10px; width: 2px; }
  .workflow-stepper li::before { transition: background-color 180ms ease-out, box-shadow 180ms ease-out; }
  .workflow-stepper li.flow-active { color: var(--link); background: color-mix(in srgb, var(--link) 16%, var(--surface)); }
  .workflow-stepper li.flow-active::before, .workflow-stepper li.flow-complete::before { background: var(--link); }
  .workflow-stepper li.flow-active::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--link) 24%, transparent); }
  .workflow-stepper li.flow-complete::after { background: var(--link); }
  .flow-replay { grid-column: 1 / -1; justify-self: center; display: none; align-items: center; min-height: 44px; max-width: 100%; margin-top: 0; padding: 8px 14px; border: 1px solid var(--link); border-radius: 6px; background: transparent; color: var(--link); font: inherit; font-size: 13px; line-height: 1.4; text-align: center; justify-content: center; cursor: pointer; }
  .workflow-demo[data-flow-ready] .flow-replay { display: inline-flex; }
  .workflow-demo[data-flow-state="paused"] li::before, .workflow-demo[data-flow-state="paused"] li::after { animation-play-state: paused; }
  .flow-replay:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) { .workflow-stepper li.flow-active::before { animation: crm-arrive 700ms ease-out; } .workflow-stepper li.flow-complete::after { animation: crm-connect 450ms ease-out; transform-origin:top; } @keyframes crm-arrive { from { transform:scale(.8); } 45% {transform:scale(1.2);} to {transform:scale(1);} } @keyframes crm-connect {from {clip-path:inset(0 0 100% 0);} to {clip-path:inset(0);}} }
@media (prefers-reduced-motion:reduce) {.workflow-stepper li,.workflow-stepper li::before {transition:none;}}