Refactor connected systems styles for improved layout and responsiveness; adjust route card alignment and visibility for better mobile experience.

skiply/skiply-connected-systems.css

@@ -37,6 +37,7 @@ body {
 .connected {
   background: var(--navy-deep);
   padding: 96px 32px 80px;
+  overflow-x: hidden;
 }
 
 .connected__inner {
@@ -193,6 +194,11 @@ body {
     drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(110, 165, 255, 0.8)) drop-shadow(0 0 30px rgba(70, 120, 255, 0.5));
 
   overflow: visible;
+
+  @media (max-width: 1024px) {
+    left: 0;
+    right: 0;
+  }
 }
 
 /* Moving wave */
@@ -486,12 +492,53 @@ body {
     font-size: 2.1rem;
   }
 
-  .connected__routes {
+  /* The tree SVG's rendered height scales down with its container, so
-    flex-wrap: wrap;
+     the pull-up that tucks it under the shoe must scale down with it too. */
+  .connected__tree {
+    margin-top: -160px;
   }
 
+  /* Keep all 5 cards on one row and let them shrink together, rather
+     than wrapping to 3+2 — the tree SVG's branch endpoints are laid
+     out assuming a single row of 5, so wrapping breaks the alignment
+     between each branch and the card underneath it (they'd only line
+     up for the first 3 cards). Shrinking in place keeps them synced
+     at any width down to the mobile breakpoint below. */
   .route {
-    flex: 1 1 calc(33.333% - 10px);
+    min-height: 130px;
+    padding: 24px 14px;
+    gap: 16px;
+  }
+
+  .route__badge {
+    width: 44px;
+    height: 44px;
+  }
+
+  .route__label {
+    font-size: 0.95rem;
+  }
+}
+
+@media (max-width: 860px) {
+  .route {
+    min-height: 110px;
+    padding: 18px 10px;
+    gap: 12px;
+  }
+
+  .route__badge {
+    width: 36px;
+    height: 36px;
+  }
+
+  .route__badge img {
+    width: 18px;
+    height: 18px;
+  }
+
+  .route__label {
+    font-size: 0.8rem;
   }
 }
 
@@ -508,10 +555,18 @@ body {
     font-size: 0.8rem;
   }
 
-  .connected__branches {
+  .connected__branches,
+  .connected__flow {
     display: none;
   }
 
+  /* Branches are hidden below this width, so the tree wrapper only
+     holds the route cards now — give them normal breathing room
+     instead of the desktop pull-up meant for the SVG above them. */
+  .connected__tree {
+    margin-top: 24px;
+  }
+
   .scan-label {
     font-size: 0.7rem;
     gap: 8px;
@@ -531,12 +586,44 @@ body {
     font-size: 0.8rem;
   }
 
+  /* Pull the chips that sit at a negative offset back within the
+     stage bounds so they don't clip against the section's edge. */
+  .scan-label--condition {
+    left: 0%;
+  }
+
+  .scan-label--value {
+    right: 0%;
+  }
+
+  /* The branch-fan SVG only makes sense as a wide horizontal spread —
+     it has no sensible equivalent once the cards stack into a single
+     column, so instead of hiding the "connected" idea entirely, a
+     simple vertical timeline rail takes over: one dot per card, lit
+     via the same .is-lit toggle the desktop tree already drives. */
   .connected__routes {
+    position: relative;
     flex-direction: column;
     gap: 12px;
+    padding-left: 26px;
+  }
+
+  .connected__routes::before {
+    content: "";
+    position: absolute;
+    left: 3px;
+    top: 10px;
+    bottom: 10px;
+    width: 2px;
+    background: linear-gradient(to bottom,
+        transparent,
+        rgba(150, 195, 255, 0.5) 10%,
+        rgba(150, 195, 255, 0.5) 90%,
+        transparent);
   }
 
   .route {
+    position: relative;
     flex: 1 1 auto;
     width: 100%;
     flex-direction: row;
@@ -547,6 +634,26 @@ body {
     padding: 14px 20px;
   }
 
+  .route::before {
+    content: "";
+    position: absolute;
+    left: -26px;
+    top: 50%;
+    width: 8px;
+    height: 8px;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    background: var(--navy-deep);
+    border: 2px solid rgba(150, 195, 255, 0.6);
+    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
+  }
+
+  .route.is-lit::before {
+    background: #eaf2ff;
+    border-color: #6ba8ff;
+    box-shadow: 0 0 8px 2px #6ba8ff, 0 0 14px 5px rgba(63, 123, 255, 0.6);
+  }
+
   .route__label {
     font-size: 1rem;
   }