<svg viewBox="-40 -40 1208 590" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="diagram-title diagram-desc">
  <title id="diagram-title">Feedback loop</title>
  <desc id="diagram-desc">A four-stage pipeline: reviewing opportunities produces feedback signals that train an alignment model, which yields a better next batch of high-confidence quick wins. A dashed loop returns from the final stage to the first, showing that every labeled input improves future discovery.</desc>

  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
            markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 Z" fill="#f0f0f0" />
    </marker>
    <marker id="arrow-accent" viewBox="0 0 10 10" refX="9" refY="5"
            markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 Z" fill="#93c5fd" />
    </marker>
  </defs>

  <!-- ============ Title ============ -->
  <text x="0" y="6" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
        font-size="18" font-weight="500" fill="#f0f0f0">Feedback loop</text>

  <!-- Column geometry: width 240, pitch 296 (240 + 56 gap).
       Col1 x=0, Col2 x=296, Col3 x=592, Col4 x=888.
       Card top y=40. Stage arrows on a shared centerline. -->

  <!-- ============ Column 1 — Review opportunities ============ -->
  <g transform="translate(0, 40)">
    <rect width="240" height="356" rx="12" ry="12" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <text x="20" y="34" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="14" font-weight="500" fill="#93c5fd">1. Review opportunities</text>

    <!-- Opportunity row 1: top = 24(pad below title area at y=20) -> first row top y=56 -->
    <g transform="translate(20, 56)">
      <rect width="200" height="84" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <text x="16" y="30" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="500" fill="#f0f0f0">Reduce checkout drop-off</text>
      <!-- status pill (neutral) -->
      <rect x="16" y="46" width="72" height="22" rx="11" ry="11" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="52" y="61" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="11" font-weight="500" fill="#a8a8a8">Planned</text>
      <!-- thumbs up / down pair, ink, scaled 0.667 -> 16px -->
      <g transform="translate(128,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Comment</title>
        <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
      </g>
      <g transform="translate(152,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Thumbs up</title>
        <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
        <path d="M7 10v12" />
      </g>
      <g transform="translate(176,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Thumbs down</title>
        <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" />
        <path d="M17 14V2" />
      </g>
    </g>

    <!-- Opportunity row 2: top = 56 + 84 + 12 = 152 -->
    <g transform="translate(20, 152)">
      <rect width="200" height="84" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <text x="16" y="30" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="500" fill="#f0f0f0">Fix payment retry loop</text>
      <rect x="16" y="46" width="86" height="22" rx="11" ry="11" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="59" y="61" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="11" font-weight="500" fill="#a8a8a8">In progress</text>
      <g transform="translate(128,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Comment</title>
        <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
      </g>
      <g transform="translate(152,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Thumbs up</title>
        <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
        <path d="M7 10v12" />
      </g>
      <g transform="translate(176,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Thumbs down</title>
        <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" />
        <path d="M17 14V2" />
      </g>
    </g>

    <!-- Opportunity row 3: top = 152 + 84 + 12 = 248 -->
    <g transform="translate(20, 248)">
      <rect width="200" height="84" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <text x="16" y="30" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="500" fill="#f0f0f0">Explore loyalty upsell</text>
      <rect x="16" y="46" width="80" height="22" rx="11" ry="11" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="56" y="61" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="11" font-weight="500" fill="#f87171">Dismissed</text>
      <g transform="translate(128,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Comment</title>
        <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
      </g>
      <g transform="translate(152,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Thumbs up</title>
        <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
        <path d="M7 10v12" />
      </g>
      <g transform="translate(176,49) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Thumbs down</title>
        <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" />
        <path d="M17 14V2" />
      </g>
    </g>
  </g>

  <!-- ============ Column 2 — Feedback signals ============ -->
  <g transform="translate(296, 40)">
    <rect width="240" height="356" rx="12" ry="12" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <text x="20" y="34" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="14" font-weight="500" fill="#93c5fd">2. Feedback signals</text>

    <!-- Row 1: thumbs up + Thumbs up/down -->
    <g transform="translate(20, 56)">
      <rect width="200" height="48" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <g transform="translate(16,16) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Thumbs up</title>
        <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
        <path d="M7 10v12" />
      </g>
      <text x="48" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Thumbs up/down</text>
    </g>

    <!-- Row 2: message-square + Comments -->
    <g transform="translate(20, 116)">
      <rect width="200" height="48" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <g transform="translate(16,16) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Comments</title>
        <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
      </g>
      <text x="48" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Comments</text>
    </g>

    <!-- Row 3: refresh-cw + Status changes -->
    <g transform="translate(20, 176)">
      <rect width="200" height="48" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <g transform="translate(16,16) scale(0.667)" fill="none" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <title>Status changes</title>
        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
        <path d="M21 3v5h-5" />
        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
        <path d="M8 16H3v5" />
      </g>
      <text x="48" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Status changes</text>
    </g>

    <!-- Caption -->
    <text x="20" y="256" font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="11" font-weight="400" fill="#a8a8a8">Triage decisions become</text>
    <text x="20" y="272" font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="11" font-weight="400" fill="#a8a8a8">learning signal.</text>
  </g>

  <!-- ============ Column 3 — Alignment model (FOCAL) ============ -->
  <g transform="translate(592, 40)">
    <rect width="240" height="356" rx="12" ry="12" fill="#1c3252" stroke="#444444" stroke-width="1" />
    <text x="20" y="34" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="14" font-weight="500" fill="#93c5fd">3. Alignment model</text>

    <!-- Sub-row 1 -->
    <g transform="translate(20, 56)">
      <rect width="200" height="48" rx="8" ry="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="16" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Scope</text>
    </g>
    <!-- Sub-row 2 -->
    <g transform="translate(20, 116)">
      <rect width="200" height="48" rx="8" ry="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="16" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Evidence quality</text>
    </g>
    <!-- Sub-row 3 -->
    <g transform="translate(20, 176)">
      <rect width="200" height="48" rx="8" ry="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="16" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Preferred work types</text>
    </g>
    <!-- Sub-row 4 -->
    <g transform="translate(20, 236)">
      <rect width="200" height="48" rx="8" ry="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="16" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Metric fit</text>
    </g>
  </g>

  <!-- ============ Column 4 — Better next batch ============ -->
  <g transform="translate(888, 40)">
    <rect width="240" height="356" rx="12" ry="12" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <text x="20" y="34" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="14" font-weight="500" fill="#93c5fd">4. Better next batch</text>

    <!-- Card title -->
    <text x="20" y="62" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="14" font-weight="500" fill="#f0f0f0">High-confidence quick win</text>

    <!-- Check row 1 -->
    <g transform="translate(20, 80)">
      <rect width="200" height="44" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <g transform="translate(14,14) scale(0.667)" fill="none" stroke="#3ecf8e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <title>Check</title>
        <path d="M20 6 9 17l-5-5" />
      </g>
      <text x="46" y="27" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Better scoped</text>
    </g>
    <!-- Check row 2 -->
    <g transform="translate(20, 136)">
      <rect width="200" height="44" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <g transform="translate(14,14) scale(0.667)" fill="none" stroke="#3ecf8e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <title>Check</title>
        <path d="M20 6 9 17l-5-5" />
      </g>
      <text x="46" y="27" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">Stronger evidence</text>
    </g>
    <!-- Check row 3 -->
    <g transform="translate(20, 192)">
      <rect width="200" height="44" rx="8" ry="8" fill="#232323" stroke="#444444" stroke-width="1" />
      <g transform="translate(14,14) scale(0.667)" fill="none" stroke="#3ecf8e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <title>Check</title>
        <path d="M20 6 9 17l-5-5" />
      </g>
      <text x="46" y="27" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#f0f0f0">More relevant plan</text>
    </g>

    <!-- Confidence indicator row -->
    <g transform="translate(20, 256)">
      <rect width="200" height="48" rx="8" ry="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
      <text x="16" y="29" font-family="'IBM Plex Sans', system-ui, sans-serif"
            font-size="13" font-weight="400" fill="#a8a8a8">Confidence</text>
      <text x="184" y="30" text-anchor="end" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
            font-size="16" font-weight="500" fill="#93c5fd">90%</text>
    </g>
  </g>

  <!-- ============ Stage arrows (horizontal, centerline y=218, 8px gaps) ============ -->
  <!-- Col1 right edge x=240 -> tail 248; Col2 left edge x=296 -> head stops 288 -->
  <line x1="248" y1="218" x2="288" y2="218" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />
  <!-- Col2 right edge x=536 -> tail 544; Col3 left edge x=592 -> head stops 584 -->
  <line x1="544" y1="218" x2="584" y2="218" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />
  <!-- Col3 right edge x=832 -> tail 840; Col4 left edge x=888 -> head stops 880 -->
  <line x1="840" y1="218" x2="880" y2="218" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />

  <!-- ============ Feedback loop (dashed accent, bottom, Col4 -> Col1) ============ -->
  <!-- Col4 bottom edge y=396 (40+356). Drop 8px to y=404, run along y=480, up to Col1 bottom; head stops 8px above 396 -> y=404. -->
  <path d="M1008,404 V480 H120 V404"
        fill="none" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="5 4" marker-end="url(#arrow-accent)" />

  <!-- Feedback-loop label in a white pad clearing the dashed line on both sides.
       Line at y=480. Label centered at x=564 (midpoint of 120..1008). -->
  <rect x="370" y="470" width="388" height="20" fill="#2a2a2a" />
  <text x="564" y="484" text-anchor="middle"
        font-family="'IBM Plex Sans', system-ui, sans-serif"
        font-size="11" font-weight="500" fill="#a8a8a8">Every labeled input helps future discovery match your Product Area.</text>
</svg>
