Add sprint-cycle diagram to /about

Inline SVG above the six-step list visualises the loop as a clockwise
ring of numbered nodes with short labels, reinforcing the section's
"end-to-end" framing and echoing the hero's brand-cycle motif.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

views/about.twig

@@ -57,6 +57,66 @@
     <div class="space-y-6">
         <h2 class="text-2xl font-semibold tracking-tight text-center">How a sprint runs end-to-end</h2>
 
+        {# Sprint cycle diagram — six numbered steps arranged as a clockwise
+           loop. Mirrors the indigo brand-cycle motif used in the hero. #}
+        <div class="px-2 sm:px-6">
+            <svg viewBox="0 0 800 600"
+                 class="w-full max-w-2xl mx-auto h-auto"
+                 role="img"
+                 aria-labelledby="sprint-cycle-title sprint-cycle-desc">
+                <title id="sprint-cycle-title">The sprint cycle</title>
+                <desc id="sprint-cycle-desc">Six steps arranged as a clockwise loop: 1 Create the sprint, 2 Pick the team, 3 Capture the work, 4 Allocate days, 5 Track progress, 6 Present and audit.</desc>
+
+                <defs>
+                    <radialGradient id="sprint-cycle-glow" cx="400" cy="300" r="240" gradientUnits="userSpaceOnUse">
+                        <stop offset="0"   stop-color="#6366f1" stop-opacity="0.14"/>
+                        <stop offset="0.6" stop-color="#6366f1" stop-opacity="0.04"/>
+                        <stop offset="1"   stop-color="#6366f1" stop-opacity="0"/>
+                    </radialGradient>
+                </defs>
+
+                <circle cx="400" cy="300" r="240" fill="url(#sprint-cycle-glow)"/>
+                <circle cx="400" cy="300" r="180" fill="none" stroke="#6366f1" stroke-width="1.5" stroke-dasharray="2 8" opacity="0.55"/>
+
+                {# Clockwise direction indicators on the ring (tangent triangles). #}
+                <path d="M-5 -4 L5 0 L-5 4 Z" fill="#6366f1" opacity="0.9" transform="translate(490 144) rotate(30)"/>
+                <path d="M-5 -4 L5 0 L-5 4 Z" fill="#6366f1" opacity="0.9" transform="translate(310 456) rotate(210)"/>
+
+                {# Subtle centre accent — echoes the hero brand-cycle dot. #}
+                <circle cx="400" cy="300" r="5" fill="#6366f1" opacity="0.5"/>
+
+                {# Step 1 — top (12 o'clock) #}
+                <text x="400" y="64" text-anchor="middle" font-size="18" font-weight="600" class="fill-slate-700 dark:fill-slate-200">Create the sprint</text>
+                <circle cx="400" cy="120" r="30" fill="#6366f1"/>
+                <text x="400" y="120" text-anchor="middle" dominant-baseline="central" fill="white" font-size="26" font-weight="700">1</text>
+
+                {# Step 2 — upper right #}
+                <circle cx="556" cy="210" r="30" fill="#6366f1"/>
+                <text x="556" y="210" text-anchor="middle" dominant-baseline="central" fill="white" font-size="26" font-weight="700">2</text>
+                <text x="600" y="210" text-anchor="start" dominant-baseline="central" font-size="18" font-weight="600" class="fill-slate-700 dark:fill-slate-200">Pick the team</text>
+
+                {# Step 3 — lower right #}
+                <circle cx="556" cy="390" r="30" fill="#6366f1"/>
+                <text x="556" y="390" text-anchor="middle" dominant-baseline="central" fill="white" font-size="26" font-weight="700">3</text>
+                <text x="600" y="390" text-anchor="start" dominant-baseline="central" font-size="18" font-weight="600" class="fill-slate-700 dark:fill-slate-200">Capture the work</text>
+
+                {# Step 4 — bottom (6 o'clock) #}
+                <circle cx="400" cy="480" r="30" fill="#6366f1"/>
+                <text x="400" y="480" text-anchor="middle" dominant-baseline="central" fill="white" font-size="26" font-weight="700">4</text>
+                <text x="400" y="544" text-anchor="middle" dominant-baseline="hanging" font-size="18" font-weight="600" class="fill-slate-700 dark:fill-slate-200">Allocate days</text>
+
+                {# Step 5 — lower left #}
+                <circle cx="244" cy="390" r="30" fill="#6366f1"/>
+                <text x="244" y="390" text-anchor="middle" dominant-baseline="central" fill="white" font-size="26" font-weight="700">5</text>
+                <text x="200" y="390" text-anchor="end" dominant-baseline="central" font-size="18" font-weight="600" class="fill-slate-700 dark:fill-slate-200">Track progress</text>
+
+                {# Step 6 — upper left #}
+                <circle cx="244" cy="210" r="30" fill="#6366f1"/>
+                <text x="244" y="210" text-anchor="middle" dominant-baseline="central" fill="white" font-size="26" font-weight="700">6</text>
+                <text x="200" y="210" text-anchor="end" dominant-baseline="central" font-size="18" font-weight="600" class="fill-slate-700 dark:fill-slate-200">Present and audit</text>
+            </svg>
+        </div>
+
         <ol class="grid gap-4 md:grid-cols-2">
             <li class="rounded-lg border bg-white p-5 dark:bg-slate-800 dark:border-slate-700">
                 <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 font-semibold dark:bg-indigo-900 dark:text-indigo-200">1</span>