diff --git a/docs/demos/circuit-breaker.md b/docs/demos/circuit-breaker.md
index cd98ebb..d526e03 100644
--- a/docs/demos/circuit-breaker.md
+++ b/docs/demos/circuit-breaker.md
@@ -10,6 +10,7 @@ and probing for recovery.
 <script>
 document.addEventListener('DOMContentLoaded', function () {
   HttpwareDemo.mount('#cb-demo', {
+  ring: 'reset',
   scenarios: [
     { id: 'down', label: 'Backend goes down', dur: 12.5,
       fault: (now) => (now >= 2.0 && now < 8.0)
diff --git a/docs/demos/demos.css b/docs/demos/demos.css
index 38e6b46..dfeecf4 100644
--- a/docs/demos/demos.css
+++ b/docs/demos/demos.css
@@ -132,3 +132,35 @@
 @media (prefers-reduced-motion: reduce) {
   .hw-demo .playhead, .hw-demo .ring, .hw-demo .box, .hw-demo .lane, .hw-demo .dot { transition: none; }
 }
+
+/* thundering-herd rate strips */
+.hw-demo .herd-wrap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hw-line); }
+.hw-demo .herd-lane { border: 2px solid var(--hw-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
+.hw-demo .herd-lane h3 { margin: 0 0 10px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
+.hw-demo .herd-strip { height: 96px; }
+.hw-demo .herd-svg { width: 100%; height: 96px; display: block; }
+.hw-demo .herd-band { fill: rgba(229, 72, 77, .12); }
+.hw-demo .herd-baseline { stroke: var(--hw-muted); stroke-width: .6; stroke-dasharray: 2 2; opacity: .7; }
+.hw-demo .herd-bar-naive { fill: var(--hw-bad); }
+.hw-demo .herd-bar-hw { fill: var(--hw-ok); }
+
+/* countdown ring overlaid on a lane element */
+.hw-demo .counting { position: relative; }
+.hw-demo .counting::after {
+  content: ""; position: absolute; right: -18px; top: 50%; width: 13px; height: 13px;
+  margin-top: -6px; border-radius: 50%;
+  background: conic-gradient(var(--hw-warn) var(--hw-ring, 0deg), var(--hw-line) 0);
+}
+
+/* jagged failure dot: readable without color (star/spikes vs the round success dot) */
+.hw-demo .dot.bad {
+  border-radius: 0;
+  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+  width: 11px; height: 11px; top: 4px;
+}
+
+/* full-stack macro strip (reuses .herd-strip / .herd-bar-hw) */
+.hw-demo .macro { margin-top: 6px; }
+.hw-demo .macro-head { font-family: var(--hw-mono); font-size: .72rem; color: var(--hw-muted); margin-bottom: 4px; }
+.hw-demo .macro .herd-strip { height: 54px; }
+.hw-demo .macro .herd-svg { height: 54px; }
diff --git a/docs/demos/engine.js b/docs/demos/engine.js
index d5dbc21..b8806c2 100644
--- a/docs/demos/engine.js
+++ b/docs/demos/engine.js
@@ -27,6 +27,11 @@ window.HttpwareDemo = (function () {
   // its OPEN-state stop.
   const SEED = 103;
 
+  // Thundering-herd sim knobs. dt = bucket width (s); reqInterval = per-client
+  // request spacing (s) so N clients emit a steady baseline; maxNaive is a pure
+  // safety cap on the unbounded naive retry loop (an outage can't outlast dur).
+  const HERD = { dt: 0.35, reqInterval: 0.5, maxNaive: 5000 };
+
   // seeded PRNG so both lanes face the identical fault timeline
   function mulberry(a) { return function () { a |= 0; a = a + 0x6D2B79F5 | 0;
     let t = Math.imul(a ^ a >>> 15, 1 | a); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
@@ -179,6 +184,308 @@ window.HttpwareDemo = (function () {
     return { from, to: Math.min(scenario.dur, to + scenario.dur / steps), label };
   }
 
+  // All contiguous "backend in trouble" intervals (down or slow), for a strip that
+  // shades each outage window separately — so a flapping backend's recovery GAPS stay
+  // visibly unshaded between the shaded dips. Decorative; never drives the sim.
+  function computeOutageBands(scenario) {
+    const steps = 400, worst = () => 0;
+    const bands = [];
+    let start = null;
+    for (let i = 0; i <= steps; i++) {
+      const t = (scenario.dur * i) / steps;
+      const f = scenario.fault(t, worst);
+      const down = !f.ok || (f.ok && f.ms >= 1.0);
+      if (down && start === null) start = t;
+      else if (!down && start !== null) { bands.push({ from: start, to: t }); start = null; }
+    }
+    if (start !== null) bands.push({ from: start, to: scenario.dur });
+    return bands;
+  }
+
+  // ---- shared guided-tour driver: spotlight cutout + side-placed coach ----
+  // Extracted from mount() so a second mount mode (herd) reuses one implementation.
+  // `els` supplies the tour DOM (dimT/dimB/dimL/dimR/ring/coach/cArrow/cStep/
+  // cTitle/cBody/cGo). Behavior is identical to the previous inline closures.
+  function makeTour(els) {
+    // 4 dim panels leave a bright hole over the union of target rects.
+    function spotlight(nodes) {
+      const rs = nodes.map((n) => n.getBoundingClientRect());
+      const pad = 6;
+      const x0 = Math.min(...rs.map((r) => r.left)) - pad, y0 = Math.min(...rs.map((r) => r.top)) - pad;
+      const x1 = Math.max(...rs.map((r) => r.right)) + pad, y1 = Math.max(...rs.map((r) => r.bottom)) + pad;
+      const W = window.innerWidth, H = window.innerHeight;
+      const set = (node, l, t, w, h) => {
+        node.style.left = l + 'px'; node.style.top = t + 'px';
+        node.style.width = Math.max(0, w) + 'px'; node.style.height = Math.max(0, h) + 'px';
+        node.classList.add('show');
+      };
+      set(els.dimT, 0, 0, W, y0);
+      set(els.dimB, 0, y1, W, H - y1);
+      set(els.dimL, 0, y0, x0, y1 - y0);
+      set(els.dimR, x1, y0, W - x1, y1 - y0);
+      els.ring.style.left = x0 + 'px'; els.ring.style.top = y0 + 'px';
+      els.ring.style.width = (x1 - x0) + 'px'; els.ring.style.height = (y1 - y0) + 'px';
+      els.ring.classList.add('show');
+      return { x0, y0, x1, y1 };
+    }
+    function hideSpot() {
+      [els.dimT, els.dimB, els.dimL, els.dimR, els.ring].forEach((n) => n.classList.remove('show'));
+    }
+    function placeCoach(hole) {
+      const c = els.coach;
+      c.classList.add('show');
+      const cw = c.offsetWidth, ch = c.offsetHeight, gap = 16;
+      const W = window.innerWidth, H = window.innerHeight, cy = (hole.y0 + hole.y1) / 2, cx = (hole.x0 + hole.x1) / 2;
+      const room = { right: W - hole.x1, left: hole.x0, bottom: H - hole.y1, top: hole.y0 };
+      let side, left, top;
+      if (room.right >= cw + gap) { side = 'right'; left = hole.x1 + gap; top = cy - ch / 2; }
+      else if (room.left >= cw + gap) { side = 'left'; left = hole.x0 - gap - cw; top = cy - ch / 2; }
+      else if (room.bottom >= ch + gap) { side = 'bottom'; top = hole.y1 + gap; left = cx - cw / 2; }
+      else { side = 'top'; top = hole.y0 - gap - ch; left = cx - cw / 2; }
+      left = Math.min(Math.max(10, left), W - cw - 10);
+      top = Math.min(Math.max(10, top), H - ch - 10);
+      c.style.left = left + 'px'; c.style.top = top + 'px';
+      const a = els.cArrow;
+      a.style.transform = 'rotate(45deg)';
+      if (side === 'right') { a.style.left = '-7px'; a.style.top = (cy - top - 6) + 'px'; a.style.borderTop = 'none'; a.style.borderRight = 'none'; a.style.borderLeft = '1px solid var(--hw-line)'; a.style.borderBottom = '1px solid var(--hw-line)'; }
+      else if (side === 'left') { a.style.left = (cw - 7) + 'px'; a.style.top = (cy - top - 6) + 'px'; a.style.borderBottom = 'none'; a.style.borderLeft = 'none'; a.style.borderTop = '1px solid var(--hw-line)'; a.style.borderRight = '1px solid var(--hw-line)'; }
+      else if (side === 'bottom') { a.style.top = '-7px'; a.style.left = (cx - left - 6) + 'px'; a.style.borderBottom = 'none'; a.style.borderRight = 'none'; }
+      else { a.style.top = (ch - 7) + 'px'; a.style.left = (cx - left - 6) + 'px'; a.style.borderTop = 'none'; a.style.borderLeft = 'none'; }
+    }
+    let onContinue = null;
+    els.cGo.addEventListener('click', () => {
+      els.coach.classList.remove('show'); hideSpot();
+      if (onContinue) onContinue();
+    });
+    return {
+      show(stop, stepIdx, total, spotLookup) {
+        const nodes = stop.spot.map((key) => spotLookup[key]).filter(Boolean);
+        const hole = spotlight(nodes);
+        els.cStep.textContent = `Step ${stepIdx + 1} of ${total}`;
+        els.cTitle.textContent = stop.title;
+        els.cBody.textContent = stop.body;
+        placeCoach(hole);
+      },
+      hideAll() { els.coach.classList.remove('show'); hideSpot(); },
+      setContinue(fn) { onContinue = fn; },
+    };
+  }
+
+  // ---- thundering-herd simulation (faithful; reuses the real RetryBudget model) ----
+  // N independent clients hit ONE backend through a FLAPPING outage (down, recover,
+  // down, recover...). Every backend attempt (initial + each retry) is counted into a
+  // per-bucket series for each lane.
+  //   naive: FIXED backoff, NO jitter, UNBOUNDED retries -> during each outage dip a
+  //          client retries until the backend recovers, so retries ACCUMULATE into a
+  //          surge that clears the instant the dip ends (its retry succeeds) -> a spike
+  //          per dip with a recovery gap between. The gaps are the backend healing, not
+  //          client synchronization (arrivals are phase-staggered, never lockstep).
+  //   httpware: FULL-JITTER backoff + per-client RetryBudget + maxAttempts cap ->
+  //          retry timing decorrelates into a near-constant rate; the budget and the
+  //          attempt cap bound amplification. The budget is PER CLIENT, never shared.
+  function simulateHerd(scenario, opts) {
+    const N = opts.clients, cfg = opts.retry, budgetCfg = opts.budget;
+    const dur = scenario.dur, dt = HERD.dt, ri = HERD.reqInterval;
+    const buckets = Math.ceil(dur / dt);
+    const naive = new Array(buckets).fill(0);
+    const hw = new Array(buckets).fill(0);
+    const bkt = (t) => Math.min(buckets - 1, Math.max(0, Math.floor(t / dt)));
+    const rnd = mulberry(SEED); // one deterministic stream drives jitter + any probabilistic fault
+    for (let c = 0; c < N; c++) {
+      const phase = (c / N) * ri; // spread arrivals across a request interval
+      // naive: unbounded fixed-backoff retries, no jitter
+      for (let t0 = phase; t0 < dur; t0 += ri) {
+        let t = t0, guard = 0;
+        while (t < dur) {
+          naive[bkt(t)]++;
+          const f = scenario.fault(t, rnd);
+          if (f.ok) break;
+          t += cfg.baseDelay; // fixed, no jitter, no attempt cap
+          if (++guard > HERD.maxNaive) break;
+        }
+      }
+      // httpware: full jitter + per-client budget + maxAttempts
+      const budget = makeRetryBudget(budgetCfg);
+      for (let t0 = phase; t0 < dur; t0 += ri) {
+        let t = t0, attempt = 0;
+        budget.deposit(t);           // deposit once per operation (matches terminal)
+        hw[bkt(t)]++;
+        let f = scenario.fault(t, rnd);
+        while (!f.ok && (attempt + 1) < cfg.maxAttempts && budget.tryWithdraw(t)) {
+          const backoff = rnd() * Math.min(cfg.maxDelay, cfg.baseDelay * Math.pow(2, attempt));
+          t += backoff;
+          if (t >= dur) break;
+          attempt++;
+          hw[bkt(t)]++;
+          f = scenario.fault(t, rnd);
+        }
+      }
+    }
+    const baseline = N * (dt / ri); // healthy backend calls per bucket
+    const stat = (arr) => {
+      const peak = arr.reduce((m, v) => Math.max(m, v), 0);
+      const total = arr.reduce((a, b) => a + b, 0);
+      return { series: arr, peak, total, mult: baseline > 0 ? peak / baseline : 0 };
+    };
+    return { naive: stat(naive), hw: stat(hw), buckets, dt, baseline,
+      outage: computeOutageWindow(scenario), outageBands: computeOutageBands(scenario) };
+  }
+
+  // Render a call-rate strip as an SVG of vertical bars into `el`. Buckets [0,
+  // revealUpTo) are drawn (progressive reveal during playback). peakScale is shared
+  // across both strips so their heights are comparable and httpware's flatness reads
+  // honestly against naive's spikes. viewBox is unitless; CSS sizes the strip.
+  function renderRateStrip(el, series, revealUpTo, opts) {
+    const n = series.length, W = 100, H = 100, bw = W / n;
+    const scale = opts.peakScale > 0 ? H / opts.peakScale : 0;
+    let body = '';
+    const bands = opts.outageBands || (opts.outage ? [opts.outage] : []);
+    for (const b of bands) {
+      const ox = (b.from / opts.dur) * W;
+      const ow = ((b.to - b.from) / opts.dur) * W;
+      body += `<rect x="${ox.toFixed(2)}" y="0" width="${ow.toFixed(2)}" height="${H}" class="herd-band"/>`;
+    }
+    const upto = Math.min(revealUpTo, n);
+    for (let i = 0; i < upto; i++) {
+      const h = Math.min(H, series[i] * scale);
+      if (h <= 0) continue;
+      body += `<rect x="${(i * bw).toFixed(2)}" y="${(H - h).toFixed(2)}" width="${Math.max(0.5, bw - 0.3).toFixed(2)}" height="${h.toFixed(2)}" class="${opts.cls}"/>`;
+    }
+    const by = H - Math.min(H, opts.baseline * scale);
+    body += `<line x1="0" y1="${by.toFixed(2)}" x2="${W}" y2="${by.toFixed(2)}" class="herd-baseline"/>`;
+    el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" class="herd-svg">${body}</svg>`;
+  }
+
+  // CSS-driven conic countdown ring overlaid on an element. fraction 0..1 is the
+  // ELAPSED share of the wait; 0 or >=1 clears it. No per-frame DOM churn — sets a
+  // custom property the ::after conic-gradient reads.
+  function renderCountdownRing(el, fraction) {
+    if (!el) return;
+    const f = Math.max(0, Math.min(1, fraction));
+    if (f <= 0 || f >= 1) { el.classList.remove('counting'); el.style.removeProperty('--hw-ring'); return; }
+    el.classList.add('counting');
+    el.style.setProperty('--hw-ring', (f * 360).toFixed(0) + 'deg');
+  }
+
+  function herdTemplate(config) {
+    const title = config.title || 'Now scale it to 20 clients';
+    const intro = config.intro || 'One client retrying a blip is invisible. Twenty clients retrying an ' +
+      'outage is a traffic weapon — unless their retries are spread out and capped. ' +
+      'These strips show <b>backend call-rate over time</b>. Press play and watch the shape.';
+    return `
+<div class="hw-wrap herd-wrap">
+  <h2>${esc(title)}</h2>
+  <p class="intro">${intro}</p>
+  <div class="ctl">
+    <button type="button" class="play" data-el="hplay">&#9654; Run the storm</button>
+    <button type="button" class="play ghost" data-el="hreplay">&#8635; Replay</button>
+  </div>
+
+  <div class="herd-lane">
+    <h3>20 naive clients <span class="badge bad">fixed backoff, no jitter, unbounded</span></h3>
+    <div class="herd-strip" data-el="naiveStrip"></div>
+    <div class="score">
+      <span class="stat" data-el="naiveMult"><span class="k">peak load</span> <span class="fail-big" data-el="naiveMultN">1&times;</span></span>
+      <span class="stat" data-el="naiveTotal"><span class="k">calls sent</span> <span class="big" data-el="naiveTotalN">0</span></span>
+    </div>
+  </div>
+
+  <div class="herd-lane">
+    <h3>20 httpware clients <span class="badge ok">full jitter + per-client budget</span></h3>
+    <div class="herd-strip" data-el="hwStrip"></div>
+    <div class="score">
+      <span class="stat" data-el="hwMult"><span class="k">peak load</span> <span class="fail-big" data-el="hwMultN">1&times;</span></span>
+      <span class="stat" data-el="hwTotal"><span class="k">calls sent</span> <span class="big" data-el="hwTotalN">0</span></span>
+    </div>
+  </div>
+
+  <p class="note">Faithful model: each httpware client owns its RetryBudget (never shared). Jitter flattens the visible spikes; the budget + max_attempts cap what a longer storm could do.</p>
+</div>
+
+<div class="dim" data-el="dimT"></div><div class="dim" data-el="dimB"></div>
+<div class="dim" data-el="dimL"></div><div class="dim" data-el="dimR"></div>
+<div class="ring" data-el="ring"></div>
+<div class="coach" data-el="coach">
+  <div class="c-arrow" data-el="cArrow"></div>
+  <div class="step" data-el="cStep">Step 1 of 1</div>
+  <h4 data-el="cTitle"></h4><p data-el="cBody"></p>
+  <button type="button" class="go" data-el="cGo">Continue &#9654;</button>
+</div>`;
+  }
+
+  function mountHerd(selector, config) {
+    const container = document.querySelector(selector);
+    if (!container) return;
+    container.classList.add('hw-demo');
+    container.innerHTML = herdTemplate(config);
+    const $ = (k) => container.querySelector('[data-el="' + k + '"]');
+    const els = {
+      hplay: $('hplay'), hreplay: $('hreplay'),
+      naiveStrip: $('naiveStrip'), hwStrip: $('hwStrip'),
+      naiveMult: $('naiveMult'), naiveMultN: $('naiveMultN'), naiveTotal: $('naiveTotal'), naiveTotalN: $('naiveTotalN'),
+      hwMult: $('hwMult'), hwMultN: $('hwMultN'), hwTotal: $('hwTotal'), hwTotalN: $('hwTotalN'),
+      dimT: $('dimT'), dimB: $('dimB'), dimL: $('dimL'), dimR: $('dimR'), ring: $('ring'),
+      coach: $('coach'), cArrow: $('cArrow'), cStep: $('cStep'), cTitle: $('cTitle'), cBody: $('cBody'), cGo: $('cGo'),
+    };
+    const SPOT = { naiveMult: els.naiveMult, hwMult: els.hwMult, naiveTotal: els.naiveTotal,
+      hwTotal: els.hwTotal, naiveStrip: els.naiveStrip, hwStrip: els.hwStrip };
+    const tour = makeTour(els);
+
+    let timer = null, paused = false, reveal = 0, stopIdx = 0, STOPS = [];
+    const scenario = config.scenario;
+    let sim = null;
+
+    function paint() {
+      const peakScale = Math.max(sim.naive.peak, sim.hw.peak, 1);
+      const stripOpts = (cls) => ({ peakScale, baseline: sim.baseline, outage: sim.outage, outageBands: sim.outageBands, dur: scenario.dur, cls });
+      renderRateStrip(els.naiveStrip, sim.naive.series, reveal, stripOpts('herd-bar-naive'));
+      renderRateStrip(els.hwStrip, sim.hw.series, reveal, stripOpts('herd-bar-hw'));
+      // running peak/total over revealed buckets so the numbers climb with the bars
+      const upto = Math.min(reveal, sim.buckets);
+      const runPeak = (arr) => arr.slice(0, upto).reduce((m, v) => Math.max(m, v), 0);
+      const runTot = (arr) => arr.slice(0, upto).reduce((a, b) => a + b, 0);
+      const nm = sim.baseline > 0 ? runPeak(sim.naive.series) / sim.baseline : 0;
+      const hm = sim.baseline > 0 ? runPeak(sim.hw.series) / sim.baseline : 0;
+      els.naiveMultN.textContent = nm.toFixed(1) + '×';
+      els.hwMultN.textContent = hm.toFixed(1) + '×';
+      els.naiveTotalN.textContent = String(runTot(sim.naive.series));
+      els.hwTotalN.textContent = String(runTot(sim.hw.series));
+      // httpware is bounded by max_attempts, not a hard multiplier cap — it settles
+      // near ~3x for this scenario, never near naive's per-dip ~18x. Thresholds
+      // reflect that measured gap, not the placeholder "<=2x is good" assumption.
+      els.naiveMultN.style.color = nm > 5 ? 'var(--hw-bad)' : '';
+      els.hwMultN.style.color = hm <= 4 ? 'var(--hw-ok)' : '';
+    }
+
+    function reset() {
+      clearInterval(timer); reveal = 0; stopIdx = 0; paused = false;
+      sim = simulateHerd(scenario, { clients: config.clients, retry: config.retry, budget: config.budget });
+      STOPS = config.buildStops(sim);
+      tour.hideAll();
+      paint();
+    }
+    tour.setContinue(() => { paused = false; stopIdx++; });
+
+    function run() {
+      reset();
+      timer = setInterval(() => {
+        if (paused) return;
+        const state = { bucket: reveal, revealed: reveal, sim,
+          naiveShown: sim.naive.series.slice(0, reveal).reduce((a, b) => a + b, 0),
+          hwShown: sim.hw.series.slice(0, reveal).reduce((a, b) => a + b, 0) };
+        if (stopIdx < STOPS.length && STOPS[stopIdx].when(state)) {
+          paused = true; tour.show(STOPS[stopIdx], stopIdx, STOPS.length, SPOT); return;
+        }
+        reveal++;
+        paint();
+        if (reveal > sim.buckets) clearInterval(timer);
+      }, TICK);
+    }
+    els.hplay.addEventListener('click', run);
+    els.hreplay.addEventListener('click', run);
+    reset(); // first paint shows the empty strips + baseline, ready to play
+  }
+
   function template(config) {
     const scenarioBtns = config.scenarios.map((sc) =>
       `<button type="button" class="scenario-btn" data-scenario="${esc(sc.id)}">${esc(sc.label)}</button>`
@@ -238,6 +545,11 @@ window.HttpwareDemo = (function () {
   </div>
 
   <p class="note" data-el="note">Faithful model of httpware, not httpware running in your browser. Pick a scenario above to begin.</p>
+
+  <div class="macro" data-el="macroWrap" style="display:none">
+    <div class="macro-head"><span class="k">backend call-rate</span> &mdash; <span data-el="macroStage">healthy</span></div>
+    <div class="herd-strip" data-el="macroStrip"></div>
+  </div>
 </div>
 
 <div class="dim" data-el="dimT"></div><div class="dim" data-el="dimB"></div>
@@ -268,10 +580,17 @@ window.HttpwareDemo = (function () {
       poolWrap: $('poolWrap'), poolB: $('poolB'),
       elapsedWrap: $('elapsedWrap'), elapsedB: $('elapsedB'),
       note: $('note'),
+      macroWrap: $('macroWrap'), macroStrip: $('macroStrip'), macroStage: $('macroStage'),
       dimT: $('dimT'), dimB: $('dimB'), dimL: $('dimL'), dimR: $('dimR'), ring: $('ring'),
       coach: $('coach'), cArrow: $('cArrow'), cStep: $('cStep'), cTitle: $('cTitle'), cBody: $('cBody'), cGo: $('cGo'),
     };
     const ELS = { ifA: els.ifA, latA: els.latA, badWrapA: els.badWrapA, ifB: els.ifB, latB: els.latB, badWrapB: els.badWrapB, brkB: els.brkB, poolB: els.poolB, elapsedB: els.elapsedB };
+    const tour = makeTour(els);
+    tour.setContinue(() => { paused = false; stopIdx++; });
+    function showStop(s) {
+      paused = true;
+      tour.show(s, stopIdx, STOPS.length, ELS);
+    }
 
     // Built fresh inside run() from the selected scenario (STOPS is never read before a
     // scenario is played, so it's safe to leave empty until then) — pages with one
@@ -287,6 +606,7 @@ window.HttpwareDemo = (function () {
     let A = { ok: 0, bad: 0, if: 0, pend: [] };
     let B = { ok: 0, bad: 0, rej: 0, if: 0, pend: [] };
     let brk = null;
+    let macroSeries = []; // lane-B backend calls per tick, for config.macroStrip
     let bulk = null;
     let retryCfg = null, budget = null, budgetExhausted = false;
     let tmoCfg = null, timedOutCount = 0;
@@ -315,70 +635,6 @@ window.HttpwareDemo = (function () {
       }
     }
 
-    // ---- spotlight: 4 dim panels leave a bright hole over the union of targets ----
-    function spotlight(nodes) {
-      const rs = nodes.map((n) => n.getBoundingClientRect());
-      const pad = 6;
-      const x0 = Math.min(...rs.map((r) => r.left)) - pad, y0 = Math.min(...rs.map((r) => r.top)) - pad;
-      const x1 = Math.max(...rs.map((r) => r.right)) + pad, y1 = Math.max(...rs.map((r) => r.bottom)) + pad;
-      const W = window.innerWidth, H = window.innerHeight;
-      const set = (node, l, t, w, h) => {
-        node.style.left = l + 'px'; node.style.top = t + 'px';
-        node.style.width = Math.max(0, w) + 'px'; node.style.height = Math.max(0, h) + 'px';
-        node.classList.add('show');
-      };
-      set(els.dimT, 0, 0, W, y0);
-      set(els.dimB, 0, y1, W, H - y1);
-      set(els.dimL, 0, y0, x0, y1 - y0);
-      set(els.dimR, x1, y0, W - x1, y1 - y0);
-      els.ring.style.left = x0 + 'px'; els.ring.style.top = y0 + 'px';
-      els.ring.style.width = (x1 - x0) + 'px'; els.ring.style.height = (y1 - y0) + 'px';
-      els.ring.classList.add('show');
-      return { x0, y0, x1, y1 };
-    }
-    function hideSpot() {
-      [els.dimT, els.dimB, els.dimL, els.dimR, els.ring].forEach((n) => n.classList.remove('show'));
-    }
-
-    // ---- place coach on the side with the most room; arrow points at target ----
-    function placeCoach(hole) {
-      const c = els.coach;
-      c.classList.add('show');
-      const cw = c.offsetWidth, ch = c.offsetHeight, gap = 16;
-      const W = window.innerWidth, H = window.innerHeight, cy = (hole.y0 + hole.y1) / 2, cx = (hole.x0 + hole.x1) / 2;
-      const room = { right: W - hole.x1, left: hole.x0, bottom: H - hole.y1, top: hole.y0 };
-      let side, left, top;
-      if (room.right >= cw + gap) { side = 'right'; left = hole.x1 + gap; top = cy - ch / 2; }
-      else if (room.left >= cw + gap) { side = 'left'; left = hole.x0 - gap - cw; top = cy - ch / 2; }
-      else if (room.bottom >= ch + gap) { side = 'bottom'; top = hole.y1 + gap; left = cx - cw / 2; }
-      else { side = 'top'; top = hole.y0 - gap - ch; left = cx - cw / 2; }
-      left = Math.min(Math.max(10, left), W - cw - 10);
-      top = Math.min(Math.max(10, top), H - ch - 10);
-      c.style.left = left + 'px'; c.style.top = top + 'px';
-      const a = els.cArrow;
-      a.style.transform = 'rotate(45deg)';
-      if (side === 'right') { a.style.left = '-7px'; a.style.top = (cy - top - 6) + 'px'; a.style.borderTop = 'none'; a.style.borderRight = 'none'; a.style.borderLeft = '1px solid var(--hw-line)'; a.style.borderBottom = '1px solid var(--hw-line)'; }
-      else if (side === 'left') { a.style.left = (cw - 7) + 'px'; a.style.top = (cy - top - 6) + 'px'; a.style.borderBottom = 'none'; a.style.borderLeft = 'none'; a.style.borderTop = '1px solid var(--hw-line)'; a.style.borderRight = '1px solid var(--hw-line)'; }
-      else if (side === 'bottom') { a.style.top = '-7px'; a.style.left = (cx - left - 6) + 'px'; a.style.borderBottom = 'none'; a.style.borderRight = 'none'; }
-      else { a.style.top = (ch - 7) + 'px'; a.style.left = (cx - left - 6) + 'px'; a.style.borderTop = 'none'; a.style.borderLeft = 'none'; }
-    }
-
-    function showStop(s) {
-      paused = true;
-      const nodes = s.spot.map((key) => ELS[key]).filter(Boolean);
-      const hole = spotlight(nodes);
-      els.cStep.textContent = `Step ${stopIdx + 1} of ${STOPS.length}`;
-      els.cTitle.textContent = s.title;
-      els.cBody.textContent = s.body;
-      placeCoach(hole);
-    }
-    els.cGo.addEventListener('click', () => {
-      els.coach.classList.remove('show');
-      hideSpot();
-      paused = false;
-      stopIdx++;
-    });
-
     function setupOutageBar(scenario) {
       const win = computeOutageWindow(scenario);
       if (win) {
@@ -407,17 +663,20 @@ window.HttpwareDemo = (function () {
       // box reads "no breaker" on a circuit-breaker page until the first Play.
       const cfgB = selectedScenario ? selectedScenario.chainB : {};
       els.brkB.className = 'box'; els.brkB.textContent = cfgB.circuitBreaker ? 'breaker CLOSED' : 'no breaker';
+      els.brkB.classList.remove('counting'); els.brkB.style.removeProperty('--hw-ring');
+      els.elapsedB.classList.remove('counting'); els.elapsedB.style.removeProperty('--hw-ring');
       els.poolWrap.style.display = cfgB.bulkhead ? '' : 'none';
       els.poolB.textContent = cfgB.bulkhead ? ('0/' + cfgB.bulkhead.maxConcurrent) : '—';
       els.elapsedWrap.style.display = cfgB.timeout ? '' : 'none';
       els.elapsedB.textContent = cfgB.timeout ? ('0.0s / ' + cfgB.timeout.timeout.toFixed(1) + 's') : '—';
+      els.macroWrap.style.display = (selectedScenario && config.macroStrip) ? '' : 'none';
       els.srvA.className = 'box'; els.srvA.textContent = 'server ✓';
       els.srvB.className = 'box'; els.srvB.textContent = 'server ✓';
       els.laneA.className = 'lane'; els.laneB.className = 'lane';
       els.playhead.style.left = '0%';
       els.badgeA.className = 'badge'; els.badgeA.textContent = 'no protection';
       els.badgeB.className = 'badge'; els.badgeB.textContent = selectedScenario ? chainLabel(selectedScenario.chainB) : 'CircuitBreaker';
-      els.coach.classList.remove('show'); hideSpot();
+      tour.hideAll();
     }
 
     function updateUI(now, lastFault) {
@@ -469,6 +728,15 @@ window.HttpwareDemo = (function () {
       const okBadge = st === 'CLOSED' && brk && !stressed;
       els.badgeB.className = 'badge ' + (st === 'OPEN' ? 'warn' : okBadge ? 'ok' : '');
       els.badgeB.textContent = st === 'OPEN' ? 'fast-failing' : st === 'HALF_OPEN' ? 'probing' : chainLabel(selectedScenario.chainB);
+      // countdown ring (config.ring): show the multi-second wait this page is about.
+      if (config.ring === 'deadline' && tmoCfg) {
+        renderCountdownRing(els.elapsedB, maxElapsed / tmoCfg.timeout);
+      } else if (config.ring === 'reset' && brk && brk.state === 'OPEN') {
+        const R = selectedScenario.chainB.circuitBreaker.resetTimeout;
+        renderCountdownRing(els.brkB, (now - brk.openedAt) / R);
+      } else if (config.ring === 'reset') {
+        renderCountdownRing(els.brkB, 0); // clear once the breaker leaves OPEN
+      }
     }
 
     function run() {
@@ -490,6 +758,8 @@ window.HttpwareDemo = (function () {
       timedOutCount = 0;
       rnd = mulberry(SEED);
       resetVisual();
+      macroSeries = new Array(Math.ceil(scenario.dur * 1000 / TICK) + 2).fill(0);
+      if (config.macroStrip) els.macroWrap.style.display = '';
 
       timer = setInterval(() => {
         if (paused) return;
@@ -537,6 +807,7 @@ window.HttpwareDemo = (function () {
                   L.pend.push({ land, ok: f2.ok, attempt: nextAttempt, bh: p.bh, start: p.start, deadline: p.deadline, timedOut });
                   spawnDot(dotsB, els.trackB, f2.ok ? 'ok' : 'bad');
                   retried = true;
+                  if (config.macroStrip) macroSeries[tick]++;
                 } else if (budget) {
                   budgetExhausted = true;
                 }
@@ -583,9 +854,16 @@ window.HttpwareDemo = (function () {
             const { land, timedOut } = clampToDeadline(tick, landTicks, deadline);
             B.if++; B.pend.push({ land, ok: f.ok, attempt: 0, bh: !!bulk, start: now, deadline, timedOut });
             spawnDot(dotsB, els.trackB, f.ok ? 'ok' : 'bad');
+            if (config.macroStrip) macroSeries[tick]++;
           }
         }
         updateUI(now, lastFault);
+        if (config.macroStrip) {
+          const peak = macroSeries.reduce((m, v) => Math.max(m, v), 0) || 1;
+          renderRateStrip(els.macroStrip, macroSeries, tick + 1,
+            { peakScale: peak, baseline: 0, outage: null, dur: scenario.dur * 1000 / TICK, cls: 'herd-bar-hw' });
+          els.macroStage.textContent = config.stageLabel ? config.stageLabel(now) : '';
+        }
         tick++;
         if (now >= scenario.dur) clearInterval(timer);
       }, TICK);
@@ -614,5 +892,6 @@ window.HttpwareDemo = (function () {
     if (firstScenarioBtn) firstScenarioBtn.click();
   }
 
-  return { mount, _models: { makeCircuitBreaker, makeRetryBudget, makeBulkhead }, _util: { mulberry }, REAL, TICK, ADV };
+  return { mount, mountHerd, _models: { makeCircuitBreaker, makeRetryBudget, makeBulkhead, simulateHerd },
+    _render: { renderRateStrip }, _util: { mulberry }, REAL, TICK, ADV };
 })();
diff --git a/docs/demos/full-stack.md b/docs/demos/full-stack.md
index 77aab6a..81f8fb3 100644
--- a/docs/demos/full-stack.md
+++ b/docs/demos/full-stack.md
@@ -24,6 +24,11 @@ document.addEventListener('DOMContentLoaded', function () {
                 retry: { maxAttempts: 3, baseDelay: 0.1, maxDelay: 5.0 },
                 budget: { ttl: 10.0, minRetriesPerSec: 10.0, percentCanRetry: 0.2 } } },
   ],
+  macroStrip: true,
+  stageLabel: (now) => now < 2 ? 'healthy'
+    : now < 5 ? 'phase 1 — latency spike'
+    : now < 8 ? 'phase 2 — brownout'
+    : now < 12 ? 'phase 3 — hard down' : 'recovered',
   buildStops: () => [
     { when: (s) => s.now >= 2.4, spot: ['poolB', 'elapsedB'], title: 'Phase 1 — latency spike',
       body: 'Bulkhead caps concurrency so the slow phase can’t exhaust the client; timeout bounds each operation at 2s.' },
diff --git a/docs/demos/retry.md b/docs/demos/retry.md
index c7cbb99..9ce0fe0 100644
--- a/docs/demos/retry.md
+++ b/docs/demos/retry.md
@@ -7,6 +7,10 @@ a dead backend can't be amplified.
 
 <div class="hw-demo" id="retry-demo"></div>
 
+<p>That was <b>one</b> client. The real danger of blind retries shows up at scale — when <b>many</b> clients retry the same outage at once.</p>
+
+<div class="hw-demo" id="retry-herd"></div>
+
 <script>
 document.addEventListener('DOMContentLoaded', function () {
   HttpwareDemo.mount('#retry-demo', {
@@ -40,5 +44,31 @@ document.addEventListener('DOMContentLoaded', function () {
       body: 'The backend healed. Compare the ✗ failed counts: the plain client surfaced far more failures than httpware. That gap is exactly what retry buys you on a transient blip.' },
   ],
   });
+
+  HttpwareDemo.mountHerd('#retry-herd', {
+    clients: 20,
+    intro: 'A real backend rarely dies cleanly — it <b>flaps</b>: fails, recovers, fails again. These strips show <b>backend call-rate over time</b> for twenty clients through three dips. Press play and watch the shape.',
+    scenario: { id: 'storm', dur: 12.5,
+      fault: (now) => {
+        const down = (now >= 2.0 && now < 4.0) || (now >= 5.5 && now < 7.5) || (now >= 9.0 && now < 11.0);
+        return down ? { ok: false, ms: 0.05, label: 'DOWN' } : { ok: true, ms: 0.05 };
+      } },
+    retry: { maxAttempts: 3, baseDelay: 0.1, maxDelay: 5.0 },
+    budget: { ttl: 10.0, minRetriesPerSec: 10.0, percentCanRetry: 0.2 },
+    buildStops: (sim) => [
+      { when: (s) => s.revealed >= Math.round(2.2 / sim.dt), spot: ['naiveStrip', 'hwStrip'],
+        title: 'A flapping backend',
+        body: 'The backend drops, recovers, drops again — three dips (shaded). Every failed request wants to retry. Watch what each herd does to the backend call-rate through the dips.' },
+      { when: (s) => s.revealed >= Math.round(4.6 / sim.dt), spot: ['naiveStrip'],
+        title: 'Naive: a surge on every dip',
+        body: 'On each dip, twenty clients retry unbounded — the load piles up into a surge that keeps climbing until the backend recovers, then clears. Three dips, three spikes, with recovery gaps between: the retry storm hitting a backend every time it tries to come back.' },
+      { when: (s) => s.revealed >= Math.round(8.2 / sim.dt), spot: ['hwStrip'],
+        title: 'httpware: flat through every dip',
+        body: 'Full jitter spreads each client’s retries out, and each client’s own max_attempts=3 cap (with its per-client budget as the guarantee at higher volume) limits how much it can add — so httpware holds a low, steady few-times-baseline through every dip instead of spiking.' },
+      { when: (s) => s.revealed >= sim.buckets - 1, spot: ['naiveMult', 'hwMult'],
+        title: 'Peak load: the whole point',
+        body: 'On its worst dip the naive herd spiked to about 18× the healthy load; httpware never exceeded about 3×, capped by each client’s max_attempts. That flat rate is exactly what lets the backend recover in the gaps — instead of being knocked back down by a retry surge every time it heals.' },
+    ],
+  });
 });
 </script>
diff --git a/docs/demos/timeout.md b/docs/demos/timeout.md
index 486888a..2a30ca4 100644
--- a/docs/demos/timeout.md
+++ b/docs/demos/timeout.md
@@ -9,6 +9,7 @@ including every retry and every backoff sleep, so one call can't blow your laten
 <script>
 document.addEventListener('DOMContentLoaded', function () {
   HttpwareDemo.mount('#to-demo', {
+  ring: 'deadline',
   scenarios: [
     { id: 'brownout', label: 'Slow brownout under retry', dur: 12.5,
       fault: (now, rnd) => (now >= 2.0 && now < 9.0)
diff --git a/planning/changes/2026-07-19.02-resilience-demo-herd-and-enrich.md b/planning/changes/2026-07-19.02-resilience-demo-herd-and-enrich.md
new file mode 100644
index 0000000..829a785
--- /dev/null
+++ b/planning/changes/2026-07-19.02-resilience-demo-herd-and-enrich.md
@@ -0,0 +1,136 @@
+---
+summary: Added a many-client thundering-herd macro view to the retry page (naive ~18x vs httpware ~3x peak backend load through a flapping outage, httpware bounded by max_attempts at demo scale with a per-client budget) and folded three enrich techniques across the demo suite — a backoff countdown ring on timeout + circuit-breaker only (retry's sub-tick backoff makes a faithful ring there impossible, so it's dropped, not faked), a color-independent jagged failure shape everywhere, and a live backend call-rate macro strip with active-phase label on the full-stack page.
+---
+
+# Design: Resilience demo herd view + enrich pass
+
+## Summary
+
+Improve the resilience demo suite (shipped in `2026-07-18.02`) using techniques
+proven by the best existing visualizations. Two parts: (1) a **thundering-herd
+macro view** stacked below the single-client retry/budget demo — 20 naive clients
+vs 20 httpware clients, rate-into-the-backend over a flapping outage, so the
+retry storm is *shown* not just described; (2) an **enrich pass** folding three
+smaller techniques into the existing pages — a backoff/wait **countdown ring**, a
+color-independent **jagged failure shape**, and a small **macro strip** on the
+full-stack page. Still a faithful model, still pure static assets, still no
+sandbox sliders. `architecture/` unchanged — docs only.
+
+## Motivation
+
+Surveying the strongest existing work — [Encore's interactive retries
+study](https://encore.dev/blog/retries) and the [AWS exponential-backoff-and-jitter
+post](https://aws.amazon.com/blogs/architecture/exponential-backoff-and-jitter/) —
+exposes one real gap and a few cheap wins:
+
+- **The thundering herd is invisible.** Our retry/budget demo is single-client, so
+  the one visual that makes "retry storm" and "why jitter" click — a flapping backend
+  driving unbounded retries into spikes-with-gaps, jitter smoothing them into a flat
+  rate — we only assert in prose. AWS's canonical framing is a call-rate-over-time
+  chart: without jitter, "clusters of calls" with dead gaps; with jitter, an
+  approximately constant rate. We don't draw it.
+- **The backoff wait isn't shown.** A dot just eventually resolves; Encore renders a
+  countdown timer *while a client waits between attempts*, making the delay tangible.
+- **Failures lean on color.** A failed request is a flat square distinguished mainly
+  by red; Encore's "spiked edges" read without color.
+
+## Design
+
+**Herd view — stacked section on the retry/budget page.** Below the current
+single-client side-by-side, a distinct "Now scale it to 20 clients" section with its
+own play button and mini-tour, preserving a micro → macro arc down the page (one
+client's retries, then the herd). A new engine **rate-strip render mode** (isolated
+from the existing lane renderer, selected by mount config) draws two stacked strips
+plotting calls-into-the-backend per tick over a **flapping** outage — the backend
+goes down, recovers, goes down again, three dips with real recovery gaps between:
+
+- **Naive lane:** 20 clients, fixed backoff, no jitter, unbounded retries → on each
+  dip a client retries until the backend recovers, so retries accumulate into a
+  surge that clears the instant the dip ends — a spike per dip with a genuine
+  recovery gap between (AWS's finding; the gaps come from the backend healing, not
+  from client synchronization — arrivals are phase-staggered, never lockstep).
+- **httpware lane:** 20 clients, full-jitter backoff + per-client budget → jitter
+  decorrelates retry timing into a near-constant rate through every dip; at this
+  client count each client's `max_attempts=3` cap is what bounds its amplification
+  (the per-client budget's floor doesn't bind until far higher per-client volume —
+  it's the guarantee that holds as the herd grows).
+
+Both lanes reuse the *real* retry + budget models from the engine's source-of-truth
+constants block, one model instance per simulated client. **Fidelity framing that
+must hold:** the budget is **per-client**, not shared across the herd — at demo
+traffic levels the *visible* flattening is jitter decorrelating timing, and
+httpware's peak is bounded near its `max_attempts` cap (~3×), with the per-client
+budget the ceiling that holds as volume grows. Copy says exactly that; it must not
+imply a shared/global budget or that the budget (rather than `max_attempts`) does the
+capping at this scale.
+
+**Payoff metric.** The mini-tour spotlights the **peak load multiplier** — "backend
+saw N× baseline". Measured against the fixed seed on the flapping scenario: **naive
+~18×** on its worst dip (unbounded retries surge each time the backend drops) **vs
+httpware ~3×** (bounded by `max_attempts` at this client count) — the number reads
+directly off the tallest spike the strip already draws (spotlight number == visible
+fact). **Total calls** during the outage is a secondary, un-spotlighted counter
+(volume story). "The flat rate leaves the backend room to recover" is the qualitative
+closing beat, grounded in the scenario itself (the backend genuinely recovers between
+dips) rather than an invented recovery number. ~4 beats: the flapping backend →
+naive's first dip-spike → httpware stays flat (jitter + the `max_attempts` cap) →
+peak-multiplier payoff.
+
+**Enrich pass.**
+
+| Technique | Pages | What it shows |
+|---|---|---|
+| Countdown ring | circuit-breaker, timeout | CB: `reset_timeout` until OPEN→HALF_OPEN probe · timeout: the deadline ticking down |
+| Jagged failure shape | all five (CSS only) | failure readable without color |
+| Macro strip | full-stack only | small rate + which-stage-active sparkline |
+
+The countdown ring is a CSS-conic overlay on a fixed lane-B element, showing
+elapsed-wait as a fraction; each page's mount config names which wait it visualizes.
+Skipped on bulkhead (the `acquire_timeout` wait either grants a slot instantly or
+fast-rejects — no visible dwell), on full-stack (a ring per stage is noise), and — a
+fidelity call taken during planning — on **retry**: at the demo's time compression a
+full-jitter `base_delay=0.1s` backoff rounds to 0–1 engine ticks (sub-tick), so a
+faithful ring there would never render and inflating it would misstate the modeled
+wait. Retry teaches backoff timing through the herd view's fixed-vs-jittered contrast
+instead. The full-stack macro strip reuses the herd's rate-series renderer at small
+size. Jagged failure shape is one `demos.css` change.
+
+## Non-goals
+
+- No shared/global budget across the herd — would misrepresent httpware; per-client only.
+- No backend-recovery number — not modeled; recovery stays qualitative.
+- No sandbox sliders — the herd is seeded and guided, like every other scenario.
+- No per-page bespoke sparklines (CB failure-count, bulkhead slots, timeout latency)
+  — those signals are already live as counters/flow-box state; a macro strip goes
+  only where *rate* is the story (full-stack; herd covers retry).
+- No JS test runner, no new Python dependency — unchanged from `2026-07-18.02`.
+- `architecture/` untouched — docs only; no capability contract moves.
+
+## Testing
+
+`just docs-build --strict` clean (pages resolve, nav valid, no broken links).
+`node --check docs/demos/engine.js`. Scratchpad jsdom harnesses extended: the
+existing `verify-demos.js` / `verify-real-page.js` drive every stop including the new
+herd mini-tour to completion without stalling; a herd trace asserts naive peak
+multiplier ≫ httpware peak (dramatic gap, ~18× vs ~3×) with the spikes-with-gaps
+shape itself (multiple separated naive spikes, one per flapping dip, with
+near-baseline recovery gaps between), httpware bounded near the `max_attempts` cap,
+and a fine bucket count for a smooth strip. Manual: retry page
+reads micro → macro top-to-bottom under mkdocs-material light and dark; countdown
+ring animates and empties on CB / timeout; failure shape distinguishable in
+grayscale; `prefers-reduced-motion` degrades to stepped updates.
+
+## Risk
+
+- **Herd fidelity overclaim (medium × medium).** Easy to imply lockstep
+  synchronization or a shared budget. Mitigation: spikes-with-gaps come from the
+  flapping backend's dip/recovery cycle (not lockstep), per-client budget instances,
+  and copy reviewed specifically against the fidelity framing above; reuse the real
+  models rather than a bespoke herd approximation.
+- **Rate-strip renderer as new surface (low × medium).** A second render mode adds
+  engine branching and bug surface. Mitigation: isolate it from the lane renderer
+  behind mount config; the full-stack macro strip reuses it, so one renderer serves
+  both.
+- **Retry page grows long/busy (low × low).** Two stacked demos plus a tour.
+  Mitigation: the herd section is visually distinct with its own play control; the
+  single-client demo is unchanged above it.