fix mobile screen issue

src/components/sections/CompetitiveEdge.tsx

@@ -498,26 +498,79 @@ export default function CompetitiveEdge() {
           .moat-heading {
             font-size: 1.8rem;
           }
+        }
 
-          /* Capability Matrix table gains responsive horizontal swipe scrolls */
+        /* On phones the 5-column table can't fit, so transform each row into a
+           stacked card: capability as the card title, then one "label: value"
+           line per competitor. Column labels are injected via nth-of-type so no
+           markup changes are needed (every row has the same column order). */
+        @media (max-width: 600px) {
           .table-wrapper {
-            width: 100%;
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
+            background: transparent;
+            border: none;
+            box-shadow: none;
+            border-radius: 0;
+            overflow: visible;
           }
-          
-          .comparison-table {
-            min-width: 720px; /* Forces optimal reading width swipe trail */
+          .comparison-table { min-width: 0; width: 100%; }
+          .comparison-table thead { display: none; }
+          .comparison-table tbody,
+          .comparison-table tr,
+          .comparison-table td { display: block; width: auto; }
+
+          .comparison-table tr {
+            background: #ffffff;
+            border: 1px solid rgba(0,0,0,0.07);
+            border-radius: 16px;
+            padding: 6px 16px 8px;
+            margin-bottom: 14px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.04);
           }
 
-          .comparison-table th, 
-          .comparison-table td {
-            padding: 16px 18px;
-            font-size: 0.9rem;
+          /* Capability = card title (icon + name), no label */
+          .comparison-table td.capability-cell {
+            display: flex;
+            justify-content: flex-start;
+            gap: 12px;
+            font-size: 1.02rem;
+            padding: 12px 0 12px;
+            border-bottom: 1.5px solid #eef0f4;
+            margin-bottom: 4px;
           }
 
-          .capability-cell {
-            font-size: 0.98rem;
+          /* Value cells = "Label .... value" rows */
+          .comparison-table td:not(.capability-cell) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            padding: 10px 0;
+            border-bottom: 1px solid #f4f5f7;
+            font-size: 0.95rem;
+            text-align: right;
+          }
+          .comparison-table tr td:last-child { border-bottom: none; }
+
+          .comparison-table td.col-highlight::before { content: "Doormile"; }
+          .comparison-table td:nth-of-type(3)::before { content: "Aggregators"; }
+          .comparison-table td:nth-of-type(4)::before { content: "Local Couriers"; }
+          .comparison-table td:nth-of-type(5)::before { content: "Software Platforms"; }
+          .comparison-table td:not(.capability-cell)::before {
+            font-weight: 700;
+            font-size: 0.72rem;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: #8a8f9d;
+            flex: 0 0 auto;
+          }
+
+          /* Neutralise the desktop highlight column styling inside the card */
+          .comparison-table td.col-highlight {
+            background: transparent !important;
+            border-left: none;
+            border-right: none;
+            animation: none !important;
+            color: inherit !important;
           }
         }
       `}} />