From 7da1f5811e36d48d19e16a4a55c3f45c62044685 Mon Sep 17 00:00:00 2001
From: Roberto Musso <roberto.musso@hpe.com>
Date: Sat, 11 Apr 2026 22:27:42 +0200
Subject: [PATCH] fix: hide pillars and suggestions on mobile to prevent
 overlap with step text

---
 index.html | 69 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index 8e5499b..cf661f6 100644
--- a/index.html
+++ b/index.html
@@ -781,30 +781,36 @@
         top: 72px;
         max-width: 100%;
         z-index: 1;
-        padding-bottom: 16px;
+        padding-bottom: 8px;
       }
+      .wt-device-frame { max-height: 35vh; }
+      .wt-app { min-height: 0; max-height: calc(35vh - 22px); overflow: hidden; }
       .wt-text {
         flex: none;
         width: 100%;
         position: relative;
-        z-index: 2;
       }
-      .wt-step-pin { min-height: auto; }
+      .wt-step-pin { min-height: 100vh; }
+      .wt-step-pin:last-child { min-height: 70vh; }
       .wt-step {
-        position: relative;
-        top: auto;
-        height: 80vh;
-        justify-content: center;
-        padding: 32px 16px;
-        background: linear-gradient(180deg, rgba(244,237,243,0.95) 0%, rgba(244,237,243,0.8) 80%, transparent 100%);
+        position: sticky;
+        top: calc(72px + 35vh + 16px);
+        min-height: 0;
+        height: auto;
+        padding: 24px 16px;
+        background: rgba(244,237,243,0.97);
         border-radius: 16px;
+        margin-bottom: 0;
       }
-      .wt-step:first-child { padding-top: 24px; }
-      .wt-step:last-child { height: 60vh; }
-      .wt-step.active { filter: blur(0px); }
-      .wt-app { min-height: 260px; }
-      .wt-main { padding: 20px 24px; }
-      .wt-greeting-name { font-size: 24px; }
+      .wt-device { max-width: 100%; }
+      .wt-app { min-height: 0; }
+      .wt-pillars { display: none; }
+      .wt-suggestions { display: none; }
+      .wt-main { padding: 14px 16px; }
+      .wt-greeting-name { font-size: 20px; }
+      .wt-greeting-label { font-size: 11px; }
+      .wt-topbar { height: 22px; }
+      .wt-topbar span { width: 6px; height: 6px; }
     }
 
     /* Walkthrough — Mobile */
@@ -812,21 +818,28 @@
       .walkthrough { padding: 24px 0 16px; }
       .walkthrough-inner { padding: 0 16px; }
       .wt-device { top: 68px; }
+      .wt-device-frame { max-height: 30vh; }
+      .wt-app { max-height: calc(30vh - 22px); }
       .wt-step {
-        height: 75vh;
+        top: calc(68px + 30vh + 12px);
         padding: 20px 12px;
       }
-      .wt-step:last-child { height: 55vh; }
-      .wt-app { min-height: 200px; font-size: 11px; }
-      .wt-main { padding: 16px 18px; }
-      .wt-greeting-name { font-size: 20px; }
-      .wt-greeting-name .wt-sparkle { font-size: 18px; }
-      .wt-sidebar { width: 36px; }
-      .wt-sidebar-icon { width: 26px; height: 26px; }
-      .wt-sidebar-icon i { width: 13px; height: 13px; }
-      .wt-brief { font-size: 11px; }
-      .wt-chat-input { padding: 8px 10px 8px 14px; }
-      .wt-suggestion { font-size: 11px; }
+      .wt-main { padding: 10px 12px; }
+      .wt-greeting-name { font-size: 16px; }
+      .wt-greeting-name .wt-sparkle { font-size: 14px; }
+      .wt-greeting-label { font-size: 9px; }
+      .wt-sidebar { width: 30px; }
+      .wt-sidebar-logo { width: 18px; height: 18px; }
+      .wt-sidebar-icon { width: 22px; height: 22px; }
+      .wt-sidebar-icon i { width: 11px; height: 11px; }
+      .wt-sidebar-avatar { width: 22px; height: 22px; font-size: 7px; }
+      .wt-brief { font-size: 9px; }
+      .wt-chat-input { padding: 6px 8px 6px 12px; }
+      .wt-chat-input span { font-size: 10px; }
+      .wt-chat-send { width: 22px; height: 22px; }
+      .wt-chat-send i { width: 11px; height: 11px; }
+      .wt-suggestion { font-size: 9px; }
+      .wt-suggestion i { width: 11px; height: 11px; }
     }
 
     /* ═══════════════════════════════════════
@@ -1318,7 +1331,7 @@
             </svg>
             <div>
               <div class="name">Roberto Musso</div>
-              <div class="title">CEO</div>
+              <div class="title">Founder</div>
             </div>
           </div>
         </div>