diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx
index 1906987a..16f078b3 100644
--- a/frontend/src/app/(public)/page.tsx
+++ b/frontend/src/app/(public)/page.tsx
@@ -1151,7 +1151,7 @@ export default function LandingPage() {
                     transition: 'all 0.18s', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                     fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif",
                   }}
-                  onMouseEnter={e => { if (!betaSubmitting) e.currentTarget.style.background = '#155A35'; }}
+                  onMouseEnter={e => { if (!betaSubmitting) e.currentTarget.style.background = 'var(--brand-forest-hover)'; }}
                   onMouseLeave={e => { if (!betaSubmitting) e.currentTarget.style.background = 'var(--brand-forest)'; }}
                 >
                   {betaSubmitting ? 'Planting your node…' : <>Sign Me Up <span style={{ opacity: 0.7 }}>→</span></>}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 10fdfaed..be686a94 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -20,6 +20,8 @@
 
   /* Canonical brand green ("forest"). Mirrored by BRAND_FOREST in lib/brand.ts. */
   --brand-forest: #1B6C42;
+  /* Hover-darken of the base forest, for primary-forest button :hover states. */
+  --brand-forest-hover: #155A35;
   /* Brighter forest used for the primary CTA fill + the hero "growth" leaf. */
   --brand-forest-bright: #2D8F5C;
   --brand-forest-bright-hover: #236F48;
diff --git a/frontend/src/components/HowItWorks.tsx b/frontend/src/components/HowItWorks.tsx
index 932da395..d7bd97cb 100644
--- a/frontend/src/components/HowItWorks.tsx
+++ b/frontend/src/components/HowItWorks.tsx
@@ -42,14 +42,14 @@ function SeedSVG({ active }: { active: boolean }) {
       <g style={{ transformOrigin: '100px 215px', transform: 'scale(0.55)' }}>
         {/* Stem */}
         <motion.path d="M100 215 L100 137"
-          stroke="#1B6C42" strokeWidth="5" strokeLinecap="round"
+          stroke="var(--brand-forest)" strokeWidth="5" strokeLinecap="round"
           initial={{ pathLength: 0 }}
           animate={active ? { pathLength: 1 } : { pathLength: 0 }}
           transition={{ duration: 0.55, ease: 'easeOut' }}
         />
         {/* Left leaf */}
         <motion.path d="M100 167 C100 167 58 155 52 119 C52 119 94 113 100 167 Z"
-          fill="#1B6C42"
+          fill="var(--brand-forest)"
           initial={{ scale: 0 }} animate={active ? { scale: 1 } : { scale: 0 }}
           transition={{ duration: 0.55, delay: 0.42, ease: [0.34, 1.56, 0.64, 1] }}
           style={{ transformOrigin: '100px 167px' }}
@@ -62,7 +62,7 @@ function SeedSVG({ active }: { active: boolean }) {
           style={{ transformOrigin: '100px 143px' }}
         />
         {/* Tip bud */}
-        <motion.circle cx="100" cy="131" r="7" fill="#1B6C42"
+        <motion.circle cx="100" cy="131" r="7" fill="var(--brand-forest)"
           initial={{ scale: 0 }} animate={active ? { scale: 1 } : { scale: 0 }}
           transition={{ duration: 0.38, delay: 0.32, ease: [0.34, 1.56, 0.64, 1] }}
           style={{ transformOrigin: '100px 131px' }}