.delivery-illustration { --route-green: #397654; --route-amber: #b88424; width: min(100%,860px); margin: 0 auto; color: var(--ink,#323232); }
.hero-character { position:relative; width:100%; }
.hero-character-image { display:block; width:100%; height:auto; aspect-ratio:3/2; }
.monitor-routes { position:absolute; left:51%; top:24%; width:16%; height:20%; transform:skewX(-6deg); pointer-events:none; }
.route-demo { position: relative; z-index:1; width:88%; margin:-15% 0 0 auto; padding:20px 24px 14px; border:1px solid #cbbda7; border-radius:5px 9px 7px 4px; background:#fff8eb; box-shadow:0 5px 0 #d7c9b733, 0 14px 26px -20px #55443266; }
.route-demo-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.route-demo-title { font-size: 1rem; font-weight: 600; }
.illustration-caption { margin: 0; font-size: .8125rem; color: #60656c; }
.route-diagram { position: relative; }
.route-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.route-drawing * { vector-effect:non-scaling-stroke; }
.route-path { stroke: var(--route-green); stroke-width:2; }
.route-stop, .transfer-stop-disc { fill: #e4efe7; stroke: var(--route-green); }
.route-transfer-guide { stroke: var(--route-amber); stroke-dasharray: 6 8; opacity: 0; }
.transfer-cursor { opacity: 0; }
.late-pulse { fill: none; stroke: var(--route-amber); opacity: 0; }
.route-lane-label { position: absolute; z-index:1; left: 12px; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.route-lane-label.top, .route-lane-status.top { top: 4%; }
.route-lane-label.bottom, .route-lane-status.bottom { top: 51%; }
.route-lane-status { position:absolute; z-index:1; right:12px; display:inline-flex; gap:6px; align-items:center; color:var(--route-green); font-size:.8125rem; font-weight:600; line-height:1.3; }
.route-lane-status::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.route-status-late { display:none; }
.route-caption { margin:12px 0 0; min-height:2.9em; font-size:1rem; line-height:1.45; text-align:center; text-wrap:balance; }
.illustration-bottom { display:flex; justify-content:center; margin-top:8px; min-height:44px; }
.route-replay { min-height:44px; padding:8px 14px; border:0; background:transparent; color:#60656c; font:500 .8125rem/1.4 'DM Sans',sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.route-replay:hover { color:#323232; }
.route-replay:focus-visible { outline:3px solid #91491f; outline-offset:3px; }
.delivery-illustration[data-state='late'] .transfer-stop-disc,
.delivery-illustration[data-state='transfer'] .transfer-stop-disc { fill:#f6e7c9; stroke:var(--route-amber); }
.delivery-illustration[data-state='late'] .route-lane-status.top,
.delivery-illustration[data-state='transfer'] .route-lane-status.top { color:#8a5b13; background:#f6e7c9; padding:3px 8px; border-radius:6px; margin-top:-3px; }
.delivery-illustration[data-state='late'] .route-status-ontime,
.delivery-illustration[data-state='transfer'] .route-status-ontime { display:none; }
.delivery-illustration[data-state='late'] .route-status-late,
.delivery-illustration[data-state='transfer'] .route-status-late { display:inline; }
.delivery-illustration[data-state='transfer'] .route-transfer-guide,
.delivery-illustration[data-state='transfer'] .transfer-cursor { opacity:1; }
.delivery-illustration[data-state='late'][data-playback='playing'] .late-pulse { animation: late-pulse 1s ease-out infinite; }
@keyframes late-pulse { from { opacity:.8; transform:scale(.85); } to { opacity:0; transform:scale(1.25); } }
@media (max-width:600px) {
  .route-demo { width:100%; margin:-5% 0 0; padding:16px 12px 10px; border-radius:5px 8px 6px 4px; }
  .route-demo-header { gap:8px; margin-bottom:16px; }
  .route-demo-title { font-size:.9375rem; }
  .illustration-caption { font-size:.75rem; }
  .route-lane-label,.route-lane-status { font-size:.6875rem; }
  .route-lane-label { left:8px; }
  .route-lane-status { right:8px; }
  .route-caption { margin-top:16px; min-height:3em; font-size:.9375rem; }
  .illustration-bottom { margin-top:4px; }
}
@media (prefers-reduced-motion:reduce) { .late-pulse { animation:none !important; } }