diff --git a/app/components/StepArrow.tsx b/app/components/StepArrow.tsx
index 9bb61e3..5785618 100644
--- a/app/components/StepArrow.tsx
+++ b/app/components/StepArrow.tsx
@@ -6,17 +6,17 @@
 //    object-contain aspect-ratio fix — too thin/subtle at these sizes.
 // 2. Its color lives in a `var(--stroke-0, #C9C9C9)` CSS custom property
 //    that's scoped to the SVG file's own document when loaded via <img
-//    src>/next/image — un-recolorable from the host page's CSS, so it could
-//    never actually become a solid dark color like the rest of this file's
-//    icons. Inline SVG sidesteps that entirely. Stroke color tried brand
-//    orange first, then switched to near-black (#222221, same as
-//    icon-check.svg's original fill) per feedback the same day.
+//    src>/next/image — un-recolorable from the host page's CSS. Inline SVG
+//    sidesteps that entirely. Stroke color: tried brand orange, then
+//    near-black, settled on the same light gray (#C9C9C9) the original
+//    asset's own fallback used, per feedback the same day — just bolder
+//    (strokeWidth 2.5 vs. the original's thin 1.5) and better-shaped.
 export function StepArrow({ className }: { className?: string }) {
   return (
     <svg width="40" height="16" viewBox="0 0 40 16" fill="none" aria-hidden="true" className={className}>
       <path
         d="M1 8H33M26 14.5L34.5 8L26 1.5"
-        stroke="#222221"
+        stroke="#C9C9C9"
         strokeWidth="2.5"
         strokeLinecap="round"
         strokeLinejoin="round"