/* 2026-11-02 the delivery framework road (static/landing/xfflow.js): stages side by side on a laptop, one column on a phone */
.xff { --xline: rgba(100, 116, 139, .28); }
.xff-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.xff-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--xline); overflow: hidden; }
.xff-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--xd), #34d399); }
.xff-of { font: 700 13.5px/1 var(--sans, system-ui); color: var(--xd); white-space: nowrap; }
.xff-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.xff-stage { border: 1px solid var(--xline); border-radius: 16px; padding: 12px; background: rgba(148, 163, 184, .06); position: relative; }
.xff-stage + .xff-stage::before { content: ""; position: absolute; left: -15px; top: 27px; width: 14px; height: 2px; background: var(--xline); }
.xff-stage.t-done { border-color: var(--xd); }
.xff-stage.t-done + .xff-stage::before { background: var(--xd); }
.xff-sh { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 10px; }
.xff-sh span { font: 700 11px/1.2 var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--xo); }
.xff-sh b { font: 700 16px/1.25 var(--sans, system-ui); }
.xff-stage.t-done .xff-sh span, .xff-stage.t-now .xff-sh span { color: var(--xd); }
.xff-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xff-step { min-width: 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; border: 1px solid var(--xline); position: relative; }
.xff-step b, .xff-step small { color: inherit; }
.xff-step b { overflow-wrap: anywhere; display: block; font: 650 14px/1.3 var(--sans, system-ui); }
.xff-step small { display: block; margin-top: 2px; font-size: 12px; opacity: .8; }
.xff-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12.5px/1 var(--sans, system-ui);
  border: 1.5px solid var(--xline); color: var(--xo); }
.xff-step.s-done { background: var(--xd); border-color: var(--xd); color: var(--xdi); }
.xff-step.s-done .xff-n { background: rgba(255, 255, 255, .22); border-color: transparent; color: var(--xdi); }
.xff-step.s-now, .xff-step.s-your_turn { background: var(--xn); border-color: var(--xd); color: var(--xni); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.xff-step.s-now .xff-n, .xff-step.s-your_turn .xff-n { background: var(--xd); color: #fff; border-color: transparent; animation: xffpulse 1.8s ease-in-out infinite; }
.xff-step.s-todo { color: var(--xo); background: transparent; }
.xff-turn { display: inline-block; margin-top: 6px; font: 700 11px/1 var(--sans, system-ui); font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--xt); padding: 4px 8px; border-radius: 99px; }
@keyframes xffpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .xff-step .xff-n { animation: none !important; } }
@media (max-width: 1100px) { .xff-stages { grid-template-columns: 1fr 1fr; } .xff-stage + .xff-stage::before { display: none; } }
@media (max-width: 620px) { .xff-stages { grid-template-columns: 1fr; } }