diff --git a/src/components/pages/GrowBusinessPage.tsx b/src/components/pages/GrowBusinessPage.tsx
index 812b007..6c5448b 100644
--- a/src/components/pages/GrowBusinessPage.tsx
+++ b/src/components/pages/GrowBusinessPage.tsx
@@ -304,6 +304,55 @@ export default function GrowBusinessPage() {
         </div>
       </section>
 
+      {/* Every Advantage Built Into Your Storefront */}
+      <section className="section py-8 px-4" style={{ backgroundColor: '#FAF8F5', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
+        <div className="container is-max-widescreen">
+          <div className="has-text-centered mb-6">
+            <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-teal)', letterSpacing: '0.1em', fontSize: '0.82rem' }}>
+              OUR COMMITMENT TO MAKERS
+            </span>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: '#1A1A1A' }}>
+              Every Advantage Built Into Your Storefront
+            </h2>
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '640px' }}>
+              Designed with genuine cultural respect and operational simplicity to empower regional creators.
+            </p>
+          </div>
+
+          <div className="columns is-multiline">
+            <div className="column is-4-desktop is-12-mobile">
+              <div className="box p-5" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E7E3DA', backgroundColor: '#FFFFFF' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 800, color: 'var(--trad-maroon)', letterSpacing: '-0.01em' }}>Priority</div>
+                <div style={{ fontSize: '1rem', fontWeight: 700, color: '#1A1A1A', marginTop: '4px' }}>Direct Catalog Discovery</div>
+                <p className="is-size-6 mt-3" style={{ color: '#564243', lineHeight: 1.6 }}>
+                  Organic search visibility and curated craft cluster spotlights designed to connect your authentic creations with discerning buyers across India.
+                </p>
+              </div>
+            </div>
+
+            <div className="column is-4-desktop is-12-mobile">
+              <div className="box p-5" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E7E3DA', backgroundColor: '#FFFFFF' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 800, color: 'var(--trad-teal)', letterSpacing: '-0.01em' }}>Verified</div>
+                <div style={{ fontSize: '1rem', fontWeight: 700, color: '#1A1A1A', marginTop: '4px' }}>Heritage Provenance</div>
+                <p className="is-size-6 mt-3" style={{ color: '#564243', lineHeight: 1.6 }}>
+                  Build lasting customer loyalty through verified craft authenticity badges and direct maker storytelling highlighting generational technique.
+                </p>
+              </div>
+            </div>
+
+            <div className="column is-4-desktop is-12-mobile">
+              <div className="box p-5" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E7E3DA', backgroundColor: '#FFFFFF' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 800, color: 'var(--trad-navy)', letterSpacing: '-0.01em' }}>Doorstep</div>
+                <div style={{ fontSize: '1rem', fontWeight: 700, color: '#1A1A1A', marginTop: '4px' }}>Simplified Dispatch</div>
+                <p className="is-size-6 mt-3" style={{ color: '#564243', lineHeight: 1.6 }}>
+                  Hassle-free doorstep logistics and protective packaging with Product Fulfillment by Tradhox across 15,000+ pin codes in India.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Proven Impact Across Craft Clusters */}
       <section className="py-6 px-4" style={{ backgroundColor: '#FAF8F6', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
         <div className="container is-max-widescreen">
diff --git a/src/components/pages/HowItWorksPage.tsx b/src/components/pages/HowItWorksPage.tsx
index 1648453..d7271a3 100644
--- a/src/components/pages/HowItWorksPage.tsx
+++ b/src/components/pages/HowItWorksPage.tsx
@@ -9,66 +9,96 @@ export default function HowItWorksPage() {
   const steps = [
     {
       num: 1,
+      id: 'step-1',
+      stage: 'Stage One',
       title: 'Set up your seller profile',
       badge: 'Step 1: Setup',
       icon: 'fa-user-check',
+      visualBadge: '✨ 5-minute Paperless Onboarding',
+      img: '/images/login-potter.jpg',
       shortDesc: 'Register with mobile OTP, PAN & GSTIN (or artisan enrollment ID).',
-      desc: 'Register with your mobile number, verify via instant OTP, and submit your PAN and GSTIN (or artisan cluster exemption enrollment). Configure your personalized maker storefront URL and workshop biography in minutes.',
+      desc: 'Begin with a simple, guided verification. All you need is your mobile number, bank account details, and GSTIN or enrollment number (if applicable). Our artisan regional liaison team verifies your workshop credibility to protect genuine regional crafts.',
+      tags: ['Mobile verification', 'GSTIN / UID', 'Bank details'],
       docs: 'Aadhaar / Mobile, PAN Card, GSTIN (optional for exempt artisans), Bank IFSC',
       time: '3–5 minutes',
       perk: 'Dedicated cluster coordinator assistance'
     },
     {
       num: 2,
+      id: 'step-2',
+      stage: 'Stage Two',
       title: 'Add your products',
-      badge: 'Step 2: Showcase',
+      badge: 'Step 2: Products',
       icon: 'fa-boxes-stacked',
+      visualBadge: '🏷️ 0% Listing Fee Guarantee',
+      img: '/kanchipuram_silk.jpg',
       shortDesc: 'Upload crisp photos, mark GI tags, and set your artisan pricing.',
-      desc: 'List your handcrafted catalog with high-resolution imagery, detailed artisan technique descriptions, and authentic Geographical Indication (GI) / ODOP badges with zero upfront listing fees.',
+      desc: 'Upload high-resolution craft photos from your smartphone or camera. Assign dimensions, available stock, material purity, and your desired craft price. We provide smart pricing recommendations and categorization across GI tags, pottery, handloom, and metal crafts.',
+      tags: ['Category tagging', 'Fair pricing', 'Photos & details'],
       docs: 'Product photos (up to 6), dimensions, craft material specs, maker price',
       time: 'Instant live listing',
       perk: 'Zero listing fees & free organic catalog indexing'
     },
     {
       num: 3,
+      id: 'step-3',
+      stage: 'Stage Three',
       title: "Share your craft's story",
-      badge: 'Step 3: Heritage',
+      badge: 'Step 3: Story',
       icon: 'fa-feather-pointed',
+      visualBadge: '📜 GI & Heritage Provenance Badges',
+      img: '/artisan_weaving.jpg',
       shortDesc: 'Connect patrons with your generational legacy and workshop roots.',
-      desc: 'Every handcrafted piece carries generational soul. Publish your artisan bio, workshop heritage, raw material sourcing ethics, and cluster origin to build genuine customer appreciation.',
+      desc: 'Buyers cherish what makes your work rare. Create an artisan bio, document the generational lineage of your technique, and attach short making-of clips. Each product page features the creator\'s profile, reinforcing authentic provenance and value.',
+      tags: ['Maker profile', 'Origin & craft heritage', 'Photos/video clips'],
       docs: 'Artisan workshop bio, craft heritage photo, cluster location',
       time: '1-time profile setup',
       perk: 'Featured in Tradhox Heritage Spotlight'
     },
     {
       num: 4,
+      id: 'step-4',
+      stage: 'Stage Four',
       title: 'Receive customer orders',
       badge: 'Step 4: Orders',
       icon: 'fa-bell',
+      visualBadge: '🔔 Instant Alerts via SMS & WhatsApp',
+      img: '/images/pricing/fast-settlement.png',
       shortDesc: 'Get real-time order alerts via WhatsApp, SMS, and your maker desk.',
-      desc: 'Whenever a conscious buyer purchases your craft, receive real-time notifications via WhatsApp, SMS, and your Seller Central dashboard with automated customer dispatch invoices and shipping labels.',
+      desc: 'Get instant SMS and dashboard notifications whenever an admirer purchases your artwork. Review customer requirements, confirm dispatch readiness with one tap, and print pre-generated shipping waybills right from your seller portal.',
+      tags: ['Instant SMS alerts', '1-click confirm', 'Prepare for pickup'],
       docs: 'Digital packing slip & pre-generated courier label',
       time: 'Instant order alert',
       perk: 'Real-time order tracking & inventory sync'
     },
     {
       num: 5,
+      id: 'step-5',
+      stage: 'Stage Five',
       title: 'Pack & ship with Tradhox support',
-      badge: 'Step 5: Transit',
+      badge: 'Step 5: Ship',
       icon: 'fa-truck-ramp-box',
+      visualBadge: '🚚 Doorstep Pickup Across India',
+      img: '/images/clusters/sustainable-jute.png',
       shortDesc: 'Safe packaging and doorstep courier collection across 15,000+ pin codes.',
-      desc: 'Pack your authentic creations securely using eco-friendly craft boxes. Our certified logistics partners pick up packages directly from your workshop or village home across 15,000+ pin codes nationwide with transit protection.',
+      desc: 'Never stress over parcel counters or couriers. We provide sturdy craft-protective packaging guidelines, while our nationwide logistics partner picks up the packaged craft straight from your home or workshop with live GPS tracking.',
+      tags: ['Product FF by Tradhox', 'Doorstep pickup', '15,000+ pincode delivery'],
       docs: 'Affix Tradhox shipping label to exterior carton',
       time: 'Doorstep pickup in 24 hrs',
       perk: 'Zero courier coordination hassle & full transit insurance'
     },
     {
       num: 6,
-      title: 'Guaranteed 7-Day Payouts',
+      id: 'step-6',
+      stage: 'Stage Six',
+      title: 'Guaranteed 7-Day Payouts: Get paid on schedule',
       badge: 'Step 6: Payout',
       icon: 'fa-indian-rupee-sign',
+      visualBadge: '💳 7-Day Direct Bank Transfers',
+      img: '/images/pricing/transparent-weaver.png',
       shortDesc: '100% direct bank deposits settled on schedule with zero hidden deductions.',
-      desc: 'Receive direct NEFT/RTGS bank transfers for every delivered order within 7 days. Complete transparency on gross sale, minimal marketplace fee, and net earnings credited straight to your verified account.',
+      desc: 'Timely payouts right to your bank account with zero hidden fees. Track sales numbers, view transparent margin statements, and monitor your scheduled settlements every 7 days through your intuitive seller dashboard.',
+      tags: ['7-day payout cycle', 'Direct bank transfer', 'Transparent earnings dashboard'],
       docs: 'Verified bank account (cancelled cheque or passbook copy)',
       time: 'Settled every 7 days',
       perk: '100% direct bank deposits with transparent split'
@@ -82,7 +112,7 @@ export default function HowItWorksPage() {
     },
     {
       q: 'How does doorstep pickup work from remote artisan villages?',
-      a: 'We partner with India).replace(‘, s leading logistics network covering over 15,000 pin codes. If your village cluster has courier accessibility, scheduled pickups happen right at your home workshop.'
+      a: 'We partner with India\'s leading logistics network covering over 15,000 pin codes. If your village cluster has courier accessibility, scheduled pickups happen right at your home workshop.'
     },
     {
       q: 'When and how do I receive money for my sales?',
@@ -102,7 +132,13 @@ export default function HowItWorksPage() {
     setActiveFaq(activeFaq === idx ? null : idx);
   };
 
-  const selectedStep = steps.find(s => s.num === activeStep) || steps[0];
+  const scrollToStep = (stepNum: number, stepId: string) => {
+    setActiveStep(stepNum);
+    const el = document.getElementById(stepId);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
 
   return (
     <div className="how-it-works-page" style={{ minHeight: '100vh', backgroundColor: '#FCF9F8' }}>
@@ -115,7 +151,7 @@ export default function HowItWorksPage() {
                 <a 
                   onClick={() => { setCurrentPage('home'); window.scrollTo(0, 0); }}
                   className="has-text-grey"
-                  style={{ textDecoration: 'none' }}
+                  style={{ textDecoration: 'none', cursor: 'pointer' }}
                 >
                   Home
                 </a>
@@ -131,7 +167,7 @@ export default function HowItWorksPage() {
       </div>
 
       {/* Hero Section */}
-      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #FBF8F6 0%, #FCF9F8 100%)', borderBottom: '1px solid #E7DED9' }}>
+      <section className="py-8 px-4" style={{ background: 'linear-gradient(180deg, #FBF8F6 0%, #FCF9F8 100%)', borderBottom: '1px solid #E7DED9' }}>
         <div className="container is-max-desktop has-text-centered py-4">
           <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#FBECEE', color: '#791B2C', fontWeight: 700, letterSpacing: '0.08em', padding: '6px 14px' }}>
             EMPOWERING INDIAN ARTISANS
@@ -146,7 +182,7 @@ export default function HowItWorksPage() {
             A transparent, step-by-step pathway empowering verified Indian craftsmen and creative masters to showcase heritage artistry, fulfill orders effortlessly, and reach patrons nationwide.
           </p>
 
-          <div className="is-flex is-justify-content-center is-align-items-center mb-5" style={{ gap: '1.75rem', flexWrap: 'wrap' }}>
+          <div className="is-flex is-justify-content-center is-align-items-center mb-6" style={{ gap: '1.75rem', flexWrap: 'wrap' }}>
             <span className="has-text-weight-semibold" style={{ color: '#4A4543' }}>
               <i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> Zero Listing Fees
             </span>
@@ -170,176 +206,139 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      {/* Visual Workshop Banner */}
-      <section className="px-4 py-5" style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid #ECE7E4' }}>
+      {/* Sticky Step Navigator Bar */}
+      <nav 
+        aria-label="Process navigation" 
+        className="sticky top-[60px] z-30 bg-white/95 backdrop-blur-md border-b border-stone-200 py-3 px-4 shadow-xs"
+      >
         <div className="container is-max-widescreen">
-          <div style={{ borderRadius: '20px', overflow: 'hidden', border: '1px solid #E2DBD6', position: 'relative', maxHeight: '340px' }}>
-            <img 
-              src="/images/how-it-works/artisan-banner.png" 
-              alt="Smiling Indian artisan craftsman in traditional handicraft workshop"
-              style={{ width: '100%', height: '340px', objectFit: 'cover', display: 'block' }}
-            />
-            <div 
-              style={{ 
-                position: 'absolute', 
-                bottom: 0, 
-                left: 0, 
-                right: 0, 
-                background: 'linear-gradient(0deg, rgba(27,38,103,0.85) 0%, rgba(27,38,103,0) 100%)', 
-                padding: '2.5rem 2rem 1.5rem 2rem', 
-                color: '#FFFFFF' 
-              }}
-            >
-              <p className="has-text-weight-bold is-size-4 mb-1">
-                Preserving Heritage. Empowering Livelihoods.
-              </p>
-              <p className="is-size-6" style={{ color: '#E2E6FB', maxWidth: '640px' }}>
-                Join over 4,500+ master weavers, potters, sculptors, and craft guilds flourishing on India&apos;s dedicated artisan platform.
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* The 6-Step Journey Section */}
-      <section className="py-6 px-4">
-        <div className="container is-max-widescreen">
-          <div className="has-text-centered mb-6">
-            <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
-              CLEAR PATHWAY TO SUCCESS
-            </span>
-            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
+          <div className="is-flex is-align-items-center is-justify-content-between mb-2">
+            <h2 className="is-size-7 font-bold text-stone-500 uppercase tracking-wider mb-0">
               The 6-Step Journey
             </h2>
-            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
-              Every step is designed for ease of use by traditional makers, supported by regional cluster coordinators.
-            </p>
+            <span className="is-size-7 text-stone-400 font-medium">Click step to explore</span>
           </div>
-
-          {/* Interactive Step Navigator Grid */}
-          <div className="columns is-multiline mb-6">
+          <div className="columns is-mobile is-variable is-2" style={{ overflowX: 'auto', margin: 0, paddingBottom: '4px' }}>
             {steps.map((s) => {
               const isCurrent = s.num === activeStep;
               return (
-                <div key={s.num} className="column is-4-desktop is-6-tablet">
-                  <div 
-                    onClick={() => setActiveStep(s.num)}
-                    className="box p-5 is-flex is-flex-direction-column is-clickable" 
-                    style={{ 
-                      height: '100%', 
-                      borderRadius: '16px', 
-                      border: isCurrent ? '2px solid var(--trad-maroon)' : '1px solid #ECE7E4',
-                      backgroundColor: isCurrent ? '#FFFBFB' : '#FFFFFF',
-                      boxShadow: isCurrent ? '0 8px 24px rgba(103,27,38,0.12)' : '0 2px 8px rgba(0,0,0,0.02)',
-                      transition: 'all 0.2s ease',
-                      cursor: 'pointer'
+                <div key={s.num} className="column is-narrow" style={{ minWidth: '130px' }}>
+                  <button
+                    onClick={() => scrollToStep(s.num, s.id)}
+                    type="button"
+                    className="w-full text-left p-2 rounded-xl transition-all border flex items-center gap-2 cursor-pointer"
+                    style={{
+                      backgroundColor: isCurrent ? '#FBECEE' : '#FFFFFF',
+                      borderColor: isCurrent ? 'var(--trad-maroon)' : '#E7E3DA',
+                      color: isCurrent ? 'var(--trad-maroon)' : '#5A5550'
                     }}
                   >
-                    <div className="is-flex is-justify-content-between is-align-items-center mb-3">
-                      <div 
-                        style={{ 
-                          width: '44px', 
-                          height: '44px', 
-                          borderRadius: '12px', 
-                          backgroundColor: isCurrent ? 'var(--trad-maroon)' : '#F5EFEF', 
-                          color: isCurrent ? '#FFFFFF' : 'var(--trad-maroon)', 
-                          display: 'flex', 
-                          alignItems: 'center', 
-                          justifyContent: 'center', 
-                          fontSize: '1.25rem' 
-                        }}
-                      >
-                        <i className={`fa-solid ${s.icon}`}></i>
-                      </div>
-                      <span 
-                        className={`tag is-rounded has-text-weight-bold ${isCurrent ? 'is-danger' : 'is-light'}`}
-                        style={{ fontSize: '0.75rem', backgroundColor: isCurrent ? 'var(--trad-maroon)' : '#F2EDE9', color: isCurrent ? '#FFF' : '#5E544F' }}
-                      >
-                        {s.badge}
-                      </span>
-                    </div>
-
-                    <h3 className="title is-5 mb-2 font-serif-trad" style={{ color: '#2B2523' }}>
-                      {s.title}
-                    </h3>
-                    <p className="has-text-grey-dark is-size-6 mb-4 is-flex-grow-1" style={{ lineHeight: 1.55 }}>
-                      {s.shortDesc}
-                    </p>
-
-                    <div className="is-flex is-align-items-center is-size-7 has-text-weight-semibold" style={{ color: 'var(--trad-maroon)' }}>
-                      <span>View Step Details</span>
-                      <i className="fa-solid fa-arrow-right ml-2"></i>
-                    </div>
-                  </div>
+                    <span 
+                      className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0"
+                      style={{
+                        backgroundColor: isCurrent ? 'var(--trad-maroon)' : '#F0EDED',
+                        color: isCurrent ? '#FFFFFF' : '#5A5550'
+                      }}
+                    >
+                      {s.num}
+                    </span>
+                    <span className="text-xs font-semibold truncate">
+                      {s.badge.replace(`Step ${s.num}: `, '')}
+                    </span>
+                  </button>
                 </div>
               );
             })}
           </div>
-
-          {/* Detailed Spotlight Box for Selected Step */}
-          <div className="box p-6 mb-6" style={{ backgroundColor: '#FFFFFF', borderRadius: '20px', border: '1px solid #E2DBD6', boxShadow: '0 8px 28px rgba(0,0,0,0.04)' }}>
-            <div className="columns is-vcentered">
-              <div className="column is-8">
-                <div className="is-flex is-align-items-center mb-3" style={{ gap: '0.75rem' }}>
-                  <span className="tag is-rounded is-medium has-text-weight-bold" style={{ backgroundColor: '#FBECEE', color: 'var(--trad-maroon)' }}>
-                    Step {selectedStep.num} of 6
-                  </span>
-                  <span className="tag is-success is-light is-rounded has-text-weight-bold">
-                    <i className="fa-solid fa-clock mr-1"></i> {selectedStep.time}
-                  </span>
-                </div>
-                
-                <h3 className="title is-3 font-serif-trad mb-3" style={{ color: 'var(--trad-maroon)' }}>
-                  {selectedStep.title}
-                </h3>
-                
-                <p className="has-text-grey-dark mb-4" style={{ fontSize: '1.05rem', lineHeight: 1.7 }}>
-                  {selectedStep.desc}
-                </p>
-
-                <div className="columns is-multiline">
-                  <div className="column is-6">
-                    <div className="p-3" style={{ backgroundColor: '#FAF8F6', borderRadius: '10px', border: '1px solid #ECE7E4' }}>
-                      <p className="is-size-7 has-text-weight-bold is-uppercase mb-1" style={{ color: '#791B2C' }}>
-                        <i className="fa-solid fa-file-lines mr-1"></i> Documentation Required:
-                      </p>
-                      <p className="is-size-6 has-text-grey-dark">{selectedStep.docs}</p>
-                    </div>
-                  </div>
-                  <div className="column is-6">
-                    <div className="p-3" style={{ backgroundColor: '#FAF8F6', borderRadius: '10px', border: '1px solid #ECE7E4' }}>
-                      <p className="is-size-7 has-text-weight-bold is-uppercase mb-1" style={{ color: 'var(--trad-teal)' }}>
-                        <i className="fa-solid fa-gift mr-1"></i> Tradhox Maker Perk:
-                      </p>
-                      <p className="is-size-6 has-text-grey-dark">{selectedStep.perk}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="column is-4 has-text-centered">
-                <div className="p-5" style={{ backgroundColor: '#FAF8F6', borderRadius: '16px', border: '1px solid #ECE7E4' }}>
-                  <div style={{ width: '64px', height: '64px', borderRadius: '50%', backgroundColor: '#FBECEE', color: 'var(--trad-maroon)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.8rem', marginBottom: '1rem' }}>
-                    <i className={`fa-solid ${selectedStep.icon}`}></i>
-                  </div>
-                  <h4 className="title is-5 mb-2" style={{ color: '#2B2523' }}>Ready for this step?</h4>
-                  <p className="is-size-7 has-text-grey mb-4">Start your application now and take your craft nationwide.</p>
-                  <button 
-                    className="button is-rounded is-fullwidth has-text-weight-bold" 
-                    onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-                    style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff' }}
-                  >
-                    Start Registration
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
-      </section>
+      </nav>
+
+      {/* Alternating 6 Step Deep-Dive Sections */}
+      <div className="steps-container py-8 space-y-16">
+        {steps.map((s, idx) => {
+          const isEven = idx % 2 === 1;
+          return (
+            <section 
+              key={s.num} 
+              id={s.id} 
+              className="py-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 scroll-mt-28"
+            >
+              <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
+                {/* Visual Column */}
+                <div className={`lg:col-span-6 ${isEven ? 'order-1 lg:order-2' : 'order-2 lg:order-1'}`}>
+                  <div className="relative rounded-2xl overflow-hidden step-img-frame border border-stone-200/80 bg-white shadow-sm hover:shadow-md transition-shadow">
+                    <img 
+                      src={s.img} 
+                      alt={s.title}
+                      className="w-full h-72 sm:h-80 object-cover transform hover:scale-105 transition-transform duration-500"
+                    />
+                    <div className="absolute bottom-4 left-4 bg-white/95 backdrop-blur-sm px-4 py-2 rounded-xl border border-stone-200 text-xs font-bold text-brand-maroon shadow-sm">
+                      {s.visualBadge}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Content Column */}
+                <div className={`lg:col-span-6 ${isEven ? 'order-2 lg:order-1' : 'order-1 lg:order-2'} space-y-4`}>
+                  <div className="flex items-center gap-3">
+                    <span 
+                      className="w-9 h-9 rounded-full text-white font-bold flex items-center justify-center shadow-md text-sm"
+                      style={{ backgroundColor: 'var(--trad-maroon)' }}
+                    >
+                      {s.num}
+                    </span>
+                    <span 
+                      className="text-xs font-bold uppercase tracking-wider px-2.5 py-0.5 rounded-full border"
+                      style={{ backgroundColor: '#FBECEE', color: 'var(--trad-maroon)', borderColor: '#F2D3D7' }}
+                    >
+                      {s.stage}
+                    </span>
+                  </div>
+
+                  <h3 className="text-2xl font-extrabold text-slate-900 tracking-tight font-serif-trad">
+                    {s.title}
+                  </h3>
+
+                  <p className="text-slate-600 text-base leading-relaxed">
+                    {s.desc}
+                  </p>
+
+                  {/* Metadata Tags */}
+                  <div className="flex flex-wrap items-center gap-2 pt-1">
+                    {s.tags.map((tag, tIdx) => (
+                      <span 
+                        key={tIdx} 
+                        className="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-stone-100 text-stone-700 border border-stone-200"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+
+                  {/* Documentation & Perk Badges */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-3">
+                    <div className="p-3 bg-stone-50 rounded-xl border border-stone-200">
+                      <p className="text-xs font-bold uppercase mb-1" style={{ color: 'var(--trad-maroon)' }}>
+                        <i className="fa-solid fa-file-lines mr-1"></i> Documentation:
+                      </p>
+                      <p className="text-xs text-stone-600 leading-snug">{s.docs}</p>
+                    </div>
+                    <div className="p-3 bg-stone-50 rounded-xl border border-stone-200">
+                      <p className="text-xs font-bold uppercase mb-1" style={{ color: 'var(--trad-teal)' }}>
+                        <i className="fa-solid fa-gift mr-1"></i> Tradhox Perk:
+                      </p>
+                      <p className="text-xs text-stone-600 leading-snug">{s.perk}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          );
+        })}
+      </div>
 
       {/* Doorstep Logistics Spotlight */}
-      <section className="py-6 px-4" style={{ backgroundColor: '#FAF8F6', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
+      <section className="py-12 px-4" style={{ backgroundColor: '#FAF8F6', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
         <div className="container is-max-widescreen">
           <div className="columns is-vcentered">
             <div className="column is-6 pr-5">
@@ -394,7 +393,7 @@ export default function HowItWorksPage() {
       </section>
 
       {/* FAQs Section */}
-      <section className="py-6 px-4">
+      <section className="py-12 px-4">
         <div className="container is-max-desktop">
           <div className="has-text-centered mb-6">
             <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
@@ -456,7 +455,7 @@ export default function HowItWorksPage() {
 
           {/* Bottom CTA Banner */}
           <div 
-            className="box has-text-centered py-6 px-5 mt-6" 
+            className="box has-text-centered py-8 px-6 mt-8" 
             style={{ 
               background: 'linear-gradient(135deg, #671B26 0%, #791B2C 100%)', 
               color: '#ffffff', 
@@ -467,16 +466,25 @@ export default function HowItWorksPage() {
             <h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
               Ready to start selling your authentic creations?
             </h2>
-            <p className="subtitle is-5 mb-5" style={{ color: '#FAD4D8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
-              Join India&apos;s dedicated artisan marketplace. Zero registration fees, free catalog listing, and guaranteed 7-day bank payouts.
+            <p className="subtitle is-5 mb-6" style={{ color: '#FAD4D8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
+              Join hundreds of verified masters, cooperatives, and artisanal creators reaching appreciative patrons every day. Zero registration fees, free catalog listing, and guaranteed 7-day bank payouts.
             </p>
-            <button 
-              className="button is-rounded is-large has-text-weight-bold px-6" 
-              onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-              style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none', boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}
-            >
-              Become a seller <i className="fa-solid fa-arrow-right ml-2"></i>
-            </button>
+            <div className="flex flex-wrap items-center justify-center gap-4">
+              <button 
+                className="button is-rounded is-large has-text-weight-bold px-6" 
+                onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
+                style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none', boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}
+              >
+                Register as a seller <i className="fa-solid fa-arrow-right ml-2"></i>
+              </button>
+              <button 
+                className="button is-rounded is-large is-outlined has-text-weight-bold px-6 text-white" 
+                onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
+                style={{ borderColor: '#ffffff', color: '#ffffff', backgroundColor: 'transparent' }}
+              >
+                View Pricing &amp; Fees
+              </button>
+            </div>
           </div>
         </div>
       </section>
diff --git a/src/components/pages/LandingPage.tsx b/src/components/pages/LandingPage.tsx
index fe1904b..4fbbc9e 100644
--- a/src/components/pages/LandingPage.tsx
+++ b/src/components/pages/LandingPage.tsx
@@ -805,6 +805,54 @@ export default function LandingPage() {
           </div>
         </section>
 
+        {/* BEGIN: Pricing Section */}
+        <section className="py-16 bg-white border-b border-gray-200" id="pricing">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="bg-[#fbf9f5] border border-stone-200 rounded-2xl p-8 lg:p-12 shadow-sm">
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
+                <div className="lg:col-span-2 space-y-4">
+                  <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#791B2C]/10 text-brand-maroon">
+                    Transparent Pricing Policy
+                  </div>
+                  <h3 className="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">
+                    0% Listing Fees. Pay Only When You Sell.
+                  </h3>
+                  <p className="text-slate-600 text-sm sm:text-base leading-relaxed">
+                    Unlike standard retail platforms that charge recurring shelf or monthly subscription fees, TRADHOX only deducts a minimal handling commission once an order is verified and completed.
+                  </p>
+                  <div className="grid grid-cols-3 gap-4 pt-3">
+                    <div className="border-l-2 border-brand-maroon pl-3">
+                      <span className="block text-2xl font-black text-brand-maroon">₹0</span>
+                      <span className="text-xs text-slate-500 font-medium">Upfront Platform Cost</span>
+                    </div>
+                    <div className="border-l-2 border-brand-maroon pl-3">
+                      <span className="block text-2xl font-black text-brand-maroon">100%</span>
+                      <span className="text-xs text-slate-500 font-medium">Transparent Payout</span>
+                    </div>
+                    <div className="border-l-2 border-brand-maroon pl-3">
+                      <span className="block text-2xl font-black text-brand-maroon">7 Days</span>
+                      <span className="text-xs text-slate-500 font-medium">Fast Bank Settlement</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="text-center lg:text-right">
+                  <button
+                    className="w-full sm:w-auto px-8 py-4 bg-brand-maroon hover:bg-brand-maroonHover text-white font-bold text-base rounded-xl transition-all shadow-md hover:shadow-lg cursor-pointer inline-flex items-center justify-center gap-2"
+                    onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
+                    type="button"
+                  >
+                    <span>Explore Transparent Pricing</span>
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path d="M17 8l4 4m0 0l-4 4m4-4H3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        {/* END: Pricing Section */}
+
         {/* BEGIN: FinalCallToAction */}
         <section className="py-14 bg-[#f4ede4] border-b border-gray-200" id="register">
           <div className="max-w-4xl mx-auto px-4 text-center">
diff --git a/src/components/pages/OnboardingWizard.tsx b/src/components/pages/OnboardingWizard.tsx
index 2eb4cdb..1b451e8 100644
--- a/src/components/pages/OnboardingWizard.tsx
+++ b/src/components/pages/OnboardingWizard.tsx
@@ -144,7 +144,7 @@ export default function OnboardingWizard() {
               Application submitted!
             </h1>
             <p className="subtitle is-5 has-text-grey-dark mb-4">
-              Thanks for registering · we).replace(‘, re reviewing your details
+              Thanks for registering · we&apos;re reviewing your details
             </p>
 
             <div className="columns is-mobile is-centered mb-5">
@@ -226,6 +226,43 @@ export default function OnboardingWizard() {
               </button>
             </div>
           </div>
+
+          {/* Trust Value Props matching Stitch Application Submitted */}
+          <div className="columns is-multiline mt-5">
+            <div className="column is-4-tablet is-12-mobile">
+              <div className="box p-4 is-flex is-align-items-center" style={{ height: '100%', borderRadius: '14px', border: '1px solid #E2DBD6', gap: '1rem', backgroundColor: '#FFFFFF' }}>
+                <div style={{ width: '44px', height: '44px', borderRadius: '12px', backgroundColor: '#FBECEE', color: 'var(--trad-maroon)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.25rem', flexShrink: 0 }}>
+                  <i className="fa-solid fa-truck-fast"></i>
+                </div>
+                <div>
+                  <div className="has-text-weight-bold is-size-6" style={{ color: '#1A1A1A' }}>Priority Dispatch</div>
+                  <div className="is-size-7 has-text-grey" style={{ lineHeight: 1.4 }}>Doorstep pickup by Tradhox Express logistics partners once orders arrive.</div>
+                </div>
+              </div>
+            </div>
+            <div className="column is-4-tablet is-12-mobile">
+              <div className="box p-4 is-flex is-align-items-center" style={{ height: '100%', borderRadius: '14px', border: '1px solid #E2DBD6', gap: '1rem', backgroundColor: '#FFFFFF' }}>
+                <div style={{ width: '44px', height: '44px', borderRadius: '12px', backgroundColor: '#EBF7EE', color: 'var(--trad-teal)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.25rem', flexShrink: 0 }}>
+                  <i className="fa-solid fa-shield-halved"></i>
+                </div>
+                <div>
+                  <div className="has-text-weight-bold is-size-6" style={{ color: '#1A1A1A' }}>Transparent Settlements</div>
+                  <div className="is-size-7 has-text-grey" style={{ lineHeight: 1.4 }}>Direct 7-day bank deposits with zero hidden commission deductions.</div>
+                </div>
+              </div>
+            </div>
+            <div className="column is-4-tablet is-12-mobile">
+              <div className="box p-4 is-flex is-align-items-center" style={{ height: '100%', borderRadius: '14px', border: '1px solid #E2DBD6', gap: '1rem', backgroundColor: '#FFFFFF' }}>
+                <div style={{ width: '44px', height: '44px', borderRadius: '12px', backgroundColor: '#EDF0FB', color: 'var(--trad-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.25rem', flexShrink: 0 }}>
+                  <i className="fa-solid fa-headset"></i>
+                </div>
+                <div>
+                  <div className="has-text-weight-bold is-size-6" style={{ color: '#1A1A1A' }}>Dedicated Support</div>
+                  <div className="is-size-7 has-text-grey" style={{ lineHeight: 1.4 }}>Direct WhatsApp &amp; regional liaison assistance for all verified artisans.</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
     );