chore: create Multica handoff checkpoint

app/frontend/pages/ladder/foundation.css

@@ -66,7 +66,7 @@
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 767px) {
 
   .ladder-more {
     grid-column: auto;
@@ -81,7 +81,7 @@
   box-shadow: rgba(22, 34, 46, 0.04) 0px 1px 3px;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 767px) {
   .ladder-board {
     align-items: stretch;
 
@@ -1015,7 +1015,7 @@
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 767px) {
   .redesigned-ladder-view {
     padding: 0px;
   }
@@ -1097,7 +1097,7 @@
   }
 }
 
-@media (min-width: 721px) {
+@media (min-width: 768px) {
   :root #ladderView.active-view {
     height: auto;
 
@@ -1170,3 +1170,98 @@
 
   color: var(--text-secondary);
 }
+
+/* Mobile ladder becomes a readable vertical hierarchy instead of a narrow rail. */
+@media (max-width: 767px) {
+  #ladderView {
+    padding-inline: 0;
+  }
+
+  #ladderView .ladder-page-head {
+    gap: var(--space-8);
+  }
+
+  #ladderView .ladder-head-actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--space-8);
+  }
+
+  #ladderView .ladder-sort-segment {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  #ladderView .market-ladder-workspace,
+  #ladderView .lad-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+  }
+
+  #ladderView .market-ladder-board {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #ladderView .market-ladder-tier {
+    width: 100%;
+    min-height: 0;
+    display: block;
+  }
+
+  #ladderView .market-ladder-label {
+    width: 100%;
+    min-height: var(--mobile-touch-size);
+    display: flex;
+    align-items: center;
+    gap: var(--space-8);
+    padding: var(--space-8) var(--space-12);
+    border-right: 0;
+    border-bottom: 1px solid var(--border-subtle);
+    writing-mode: horizontal-tb;
+  }
+
+  #ladderView .market-ladder-level {
+    display: inline-flex;
+    margin: 0;
+    writing-mode: horizontal-tb;
+  }
+
+  #ladderView .market-ladder-rate {
+    display: inline-flex;
+    writing-mode: horizontal-tb;
+    margin-left: auto;
+  }
+
+  #ladderView .market-ladder-stocks {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-8);
+    padding: var(--space-8);
+  }
+
+  #ladderView .market-ladder-stock {
+    width: 100%;
+    min-width: 0;
+  }
+
+  #ladderView .market-ladder-gap-note,
+  #ladderView .market-ladder-more {
+    width: 100%;
+    min-height: var(--mobile-touch-size);
+    margin: 0;
+    justify-content: center;
+  }
+
+  #ladderView .market-ladder-insights {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-12);
+  }
+}