diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11fb1c7..2383c6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Formatnya mengikuti prinsip [Keep a Changelog](https://keepachangelog.com/) dan
 
 ### Changed
 
+- Mobile Phase 4 menghapus persistent bottom dock dan `mobile.js`, menjadikan setup small-screen task-first dengan sticky 4-step rail, target sentuh minimal 44px, header lebih fokus, serta regression 390px/320px; responsive homepage CSS juga dikunci agar kurung stylesheet seimbang.
 - Setup desktop dirombak menjadi workspace 4 langkah yang lebih padat: sticky step navigation, pack summary ringkas, action hierarchy lebih jelas, dan course pack sebagai accordion rows; browser regression mengunci desktop state sekaligus mobile no-overflow.
 - Homepage Phase 2 mengganti fake ChatGPT phone mockup dengan live Ramu pack preview, menambahkan jalur Pack vs Ramu Starter, memadatkan workflow/layer hierarchy, dan mengubah course catalog menjadi resource list yang lebih tenang di desktop maupun mobile.
 - Browser regression sekarang memiliki mobile viewport contract untuk homepage/setup, termasuk no-horizontal-overflow dan visibility pada primary content.
diff --git a/scripts/validate_site.py b/scripts/validate_site.py
index ad4e89d..ceb8456 100644
--- a/scripts/validate_site.py
+++ b/scripts/validate_site.py
@@ -40,6 +40,7 @@ def main() -> int:
         'data-setup-link',
         'href="catalog.css"',
         'href="homepage.css"',
+        '<body class="home-page">',
         'id="hero-preview-courses"',
         'href="https://github.com/man612/ramu/blob/main/starter/README.md"',
         'id="course-list"',
@@ -58,6 +59,9 @@ def main() -> int:
         'data-pack-picker-menu',
         'href="catalog.css"',
         'href="setup-phase3.css"',
+        '<body class="setup-page">',
+        'aria-label="Langkah 1: Cek Memory"',
+        'id="progress-title" aria-live="polite"',
         'id="setup-pack-name"',
         'id="setup-courses"',
         'id="copy-instructions"',
@@ -100,6 +104,13 @@ def main() -> int:
         ".setup-course summary",
         "@media (max-width: 720px)",
     ])
+    require_text(SITE / "mobile.css", [
+        ".setup-page .site-header nav",
+        ".setup-nav a span",
+        "grid-template-columns: repeat(4, minmax(0, 1fr))",
+        "min-height: 44px",
+        "@media (max-width: 430px)",
+    ])
 
     app_text = (SITE / "app.js").read_text(encoding="utf-8") if (SITE / "app.js").is_file() else ""
     for forbidden in (
@@ -121,6 +132,22 @@ def main() -> int:
     for path_name, text in (("site/index.html", index_text), ("site/setup.html", setup_text)):
         if "<select" in text.lower():
             fail(f"{path_name} masih memakai native browser select untuk pack picker.")
+        if "mobile.js" in text or "mobile-dock" in text:
+            fail(f"{path_name} masih memuat mobile dock/script lama.")
+
+    if (SITE / "mobile.js").exists():
+        fail("site/mobile.js harus dihapus setelah mobile dock dipensiunkan.")
+
+    mobile_text = (SITE / "mobile.css").read_text(encoding="utf-8") if (SITE / "mobile.css").is_file() else ""
+    if "mobile-dock" in mobile_text:
+        fail("site/mobile.css masih memuat mobile dock lama.")
+
+    for css_name in ("homepage.css", "mobile.css", "setup-phase3.css"):
+        css_path = SITE / css_name
+        if css_path.is_file():
+            css_text = css_path.read_text(encoding="utf-8")
+            if css_text.count("{") != css_text.count("}"):
+                fail(f"site/{css_name} punya kurung CSS tidak seimbang.")
 
     for forbidden in (
         "kecuali manifest pack menyatakan berbeda",
diff --git a/site/homepage.css b/site/homepage.css
index 174839a..9e5b0ab 100644
--- a/site/homepage.css
+++ b/site/homepage.css
@@ -257,7 +257,7 @@
   .entry-section { padding: 18px 0 56px; }
   .entry-path { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
   .entry-path small { font-size: .76rem; }
-}  .workflow-list li { grid-template-columns: 42px minmax(0, 1fr); min-height: 0; }
+  .workflow-list li { grid-template-columns: 42px minmax(0, 1fr); min-height: 0; }
   .workflow-list div { grid-template-columns: 1fr; gap: 6px; }
   .workflow-list p { font-size: .82rem; }
   .layer-list article { grid-template-columns: 1fr; gap: 5px; min-height: 0; padding: 16px 0; }
diff --git a/site/index.html b/site/index.html
index f06aed7..3f752c4 100644
--- a/site/index.html
+++ b/site/index.html
@@ -18,11 +18,12 @@
   <link rel="stylesheet" href="catalog.css">
   <link rel="stylesheet" href="responsive.css">
   <link rel="stylesheet" href="motion.css">
-  <link rel="stylesheet" href="mobile.css">
   <link rel="stylesheet" href="foundations.css">
   <link rel="stylesheet" href="homepage.css">
+  <link rel="stylesheet" href="mobile.css">
 </head>
-<body>  <header class="site-header">
+<body class="home-page">
+  <header class="site-header">
     <a class="brand" href="./" aria-label="Beranda Ramu"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span><span>ramu</span></a>
     <nav aria-label="Navigasi utama">
       <a href="#cara-kerja">Cara kerja</a>
@@ -189,7 +190,6 @@ <h2>Ramu merapikan konteks, bukan menggantikan penilaian pengguna.</h2>
     <p>Proyek independen. Bukan layanan resmi institusi pendidikan mana pun maupun OpenAI.</p>
   </footer>
   <script src="motion.js" defer></script>
-  <script src="mobile.js" defer></script>
   <script src="app.js?v=homepage-phase2" defer></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/site/mobile.css b/site/mobile.css
index ee8a22a..0129ba4 100644
--- a/site/mobile.css
+++ b/site/mobile.css
@@ -1,119 +1,108 @@
-/* Mobile-only navigation and touch refinements. */
-.mobile-dock { display: none; }
-
+/* Phase 4 mobile UX: task-first, no persistent bottom dock. */
 @media (max-width: 720px) {
-  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
-  .site-header nav { gap: 8px; }
-  .site-header nav a:not(.nav-github) { display: none; }
-  .site-header { min-height: 58px; padding-inline: 14px; }
-  .nav-github { padding: 8px 11px; font-size: .78rem; }
+  body { padding-bottom: env(safe-area-inset-bottom); }
 
-  .mobile-dock {
-    position: fixed;
-    z-index: 900;
-    left: 12px;
-    right: 12px;
-    bottom: calc(10px + env(safe-area-inset-bottom));
-    min-height: 62px;
-    padding: 7px;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 6px;
-    border: 1px solid rgba(30,33,29,.12);
-    border-radius: 20px;
-    background: rgba(255,253,248,.92);
-    backdrop-filter: blur(18px) saturate(1.15);
-    box-shadow: 0 18px 52px rgba(30,33,29,.16);
-    transform: translateY(130%);
-    animation: dock-enter 620ms var(--motion-ease) 460ms forwards;
+  .site-header {
+    min-height: 56px;
+    padding-inline: 12px;
+    border-radius: 9px;
   }
 
-  @keyframes dock-enter { to { transform: translateY(0); } }
+  .site-header nav { gap: 6px; }
+  .site-header nav a:not(.nav-github) { display: none; }
+  .nav-github { min-height: 42px; padding: 0 10px; font-size: .76rem; }
 
-  .mobile-dock a,
-  .mobile-dock button {
-    min-width: 0;
-    min-height: 48px;
-    padding: 6px 8px;
-    border: 0;
-    border-radius: 14px;
-    background: transparent;
-    color: var(--muted);
-    text-decoration: none;
-    display: grid;
-    place-items: center;
-    align-content: center;
-    gap: 2px;
-    font: inherit;
-    font-size: .68rem;
-    font-weight: 780;
-    line-height: 1.1;
-    text-align: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    transition: transform 180ms var(--motion-ease), background 220ms ease, color 220ms ease;
-  }
+  .setup-page .site-header nav { display: none; }
 
-  .mobile-dock a:active,
-  .mobile-dock button:active { transform: scale(.94); }
+  .hero { padding-top: 44px; }
+  .hero-actions { display: grid; grid-template-columns: 1fr; }
+  .hero-actions .button { width: 100%; min-height: 50px; }
 
-  .mobile-dock .dock-primary {
-    background: var(--ink);
-    color: var(--white);
-  }
+  .comparison, .use-card, .foundation-card, .course-card,
+  .trust-grid article, .setup-step-card { scroll-margin-top: 132px; }
+  .setup-main { width: min(100% - 24px, 900px); padding-top: 20px; }
+  .setup-main .back-link { margin-bottom: 16px; }
+  .setup-pack-picker { margin-bottom: 20px; }
+  .setup-intro { margin-bottom: 22px; gap: 18px; }
+  .setup-intro h1 { font-size: clamp(2.25rem, 11.5vw, 3.15rem); }
+  .setup-lead { font-size: .94rem; line-height: 1.6; }
+  .setup-summary-card { padding: 15px; }
 
-  .mobile-dock .dock-icon {
-    width: 22px;
-    height: 22px;
-    display: grid;
-    place-items: center;
-    font-size: 1rem;
-    line-height: 1;
+  .setup-layout { display: block; }
+  .setup-nav {
+    position: sticky;
+    z-index: 30;
+    top: 72px;
+    margin: 0 0 14px;
+    padding: 8px 0 10px;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 5px;
+    background: rgba(247, 246, 242, .97);
+    border-bottom: 1px solid var(--border);
   }
 
-  .mobile-dock .dock-progress {
-    color: var(--ink);
-    background: var(--sage-soft);
+  .setup-nav-label { display: none; }
+  .nav-progress {
+    grid-column: 1 / -1;
+    order: -1;
+    margin: 0 0 4px;
+    padding: 0;
+    border: 0;
+    background: transparent;
   }
+  .nav-progress span { margin-bottom: 6px; font-size: .68rem; }
+  .progress-track { height: 3px; }
 
-  .mobile-dock .dock-progress strong {
-    font-size: .85rem;
-    letter-spacing: -.03em;
+  .setup-nav a {
+    min-height: 44px;
+    padding: 4px;
+    justify-content: center;
+    border-radius: var(--radius-sm);
   }
+  .setup-nav a span { display: none; }
+  .setup-nav b { width: 28px; height: 28px; }
 
-  .mobile-dock.is-quiet {
-    transform: translateY(calc(100% + 24px));
-    opacity: .2;
-    transition: transform 320ms var(--motion-ease), opacity 320ms ease;
-  }
+  .setup-content { gap: 12px; }
+  .setup-step-card { margin: 0; padding: 18px 16px; border-radius: 10px; }
+  .step-heading { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
+  .big-step { width: 30px; height: 30px; font-size: .8rem; }
+  .setup-step-card h2 { font-size: 1.42rem; line-height: 1.12; }
+  .step-explain { margin-top: 12px; margin-bottom: 18px; font-size: .9rem; }
 
-  .hero { padding-top: 62px; }
-  .hero-actions { display: grid; grid-template-columns: 1fr; }
-  .hero-actions .button { width: 100%; }
-  .hero-facts { gap: 6px; }
-  .hero-facts div { padding: 10px 6px; border-radius: 13px; background: rgba(255,255,255,.36); text-align: center; }
+  .settings-path { gap: 5px; }
+  .settings-path span { min-height: 38px; display: inline-flex; align-items: center; }
+  .check-list label { min-height: 48px; }
+  .info-box { padding: 13px; }
 
-  .comparison, .use-card, .foundation-card, .course-card, .trust-grid article, .setup-step-card {
-    scroll-margin-top: 82px;
+  .copy-panel { padding: 14px; gap: 14px; }
+  .copy-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
+  .copy-actions .button { width: 100%; min-height: 48px; }
+  .setup-course summary {
+    min-height: 70px;
+    padding: 12px;
+    grid-template-columns: 32px minmax(0, 1fr);
+    gap: 10px;
   }
+  .course-number { width: 30px; height: 30px; }
+  .done-pill { grid-column: 2; justify-self: start; margin-top: 2px; }
+  .setup-body { padding: 12px; }
+  .setup-body ol { padding-left: 20px; }
+  .setup-body li { margin: 10px 0; }
 
-  .setup-layout { display: block; }
-  .setup-nav { position: relative; top: auto; margin-bottom: 18px; }
-  .setup-step-card { margin-bottom: 14px; }
-  .setup-course summary { min-height: 72px; }
-  .setup-body { padding-inline: 15px; }
-  .inline-actions { display: grid; grid-template-columns: 1fr; }
-  .inline-actions .small-button { width: 100%; }
-  .copy-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
-  .copy-actions .button { width: 100%; }
-  .prompt-grid { grid-template-columns: 1fr; }
-}
+  .inline-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
+  .inline-actions .small-button { width: 100%; min-height: 48px; justify-content: center; }
+  .complete-check { min-height: 48px; }
 
-@media (max-width: 390px) {
-  .mobile-dock { left: 8px; right: 8px; border-radius: 18px; }
-  .mobile-dock a, .mobile-dock button { font-size: .64rem; padding-inline: 4px; }
+  .phone-mini-flow { display: grid; grid-template-columns: 1fr; gap: 6px; }
+  .phone-mini-flow i { display: none; }
+  .prompt-grid { grid-template-columns: 1fr; }
+  .prompt-grid button { min-height: 48px; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .mobile-dock { animation: none; transform: none; }
+@media (max-width: 430px) {
+  .shell { width: min(100% - 24px, 1160px); }
+  .site-header { width: calc(100% - 14px); }
+  .preview-course { grid-template-columns: 58px minmax(0, 1fr) auto; }
+  .entry-path { grid-template-columns: 32px minmax(0, 1fr); }
+  .entry-path > span:last-child { grid-column: 2; justify-self: start; }
 }
diff --git a/site/mobile.js b/site/mobile.js
deleted file mode 100644
index add0ac5..0000000
--- a/site/mobile.js
+++ /dev/null
@@ -1,68 +0,0 @@
-(() => {
-  if (!window.matchMedia('(max-width: 720px)').matches) return;
-
-  const dock = document.createElement('nav');
-  dock.className = 'mobile-dock';
-  dock.setAttribute('aria-label', 'Navigasi cepat mobile');
-
-  const isSetup = Boolean(document.querySelector('.setup-main'));
-
-  if (isSetup) {
-    dock.innerHTML = `
-      <a href="./"><span class="dock-icon">⌂</span><span>Beranda</span></a>
-      <button type="button" class="dock-progress" id="dock-progress"><strong>0/5</strong><span>Project</span></button>
-      <a href="https://chatgpt.com/" target="_blank" rel="noopener" class="dock-primary"><span class="dock-icon">↗</span><span>Buka ChatGPT</span></a>
-    `;
-  } else {
-    dock.innerHTML = `
-      <a href="#cara-pakai"><span class="dock-icon">↓</span><span>Cara pakai</span></a>
-      <a href="setup.html" class="dock-primary"><span class="dock-icon">＋</span><span>Mulai setup</span></a>
-      <a href="#paket"><span class="dock-icon">▦</span><span>Paket</span></a>
-    `;
-  }
-
-  document.body.appendChild(dock);
-
-  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
-  dock.querySelectorAll('a[href^="#"]').forEach(link => {
-    link.addEventListener('click', event => {
-      const target = document.querySelector(link.getAttribute('href'));
-      if (!target) return;
-      event.preventDefault();
-      const top = target.getBoundingClientRect().top + scrollY - 76;
-      window.scrollTo({ top, behavior: reduceMotion ? 'auto' : 'smooth' });
-    });
-  });
-
-  if (isSetup) {
-    const dockProgress = dock.querySelector('#dock-progress strong');
-    const source = document.querySelector('#progress-title');
-
-    const syncProgress = () => {
-      if (!dockProgress || !source) return;
-      const match = source.textContent.match(/(\d+)\s+dari\s+(\d+)/i);
-      dockProgress.textContent = match ? `${match[1]}/${match[2]}` : '0/5';
-    };
-
-    syncProgress();
-    if (source) new MutationObserver(syncProgress).observe(source, { childList: true, characterData: true, subtree: true });
-
-    dock.querySelector('#dock-progress')?.addEventListener('click', () => {
-      const target = document.querySelector('#langkah-3');
-      if (!target) return;
-      window.scrollTo({ top: target.getBoundingClientRect().top + scrollY - 76, behavior: reduceMotion ? 'auto' : 'smooth' });
-    });
-  }
-
-  let lastY = scrollY;
-  let timer;
-  addEventListener('scroll', () => {
-    const y = scrollY;
-    const movingDown = y > lastY;
-    if (movingDown && y > 240) dock.classList.add('is-quiet');
-    else dock.classList.remove('is-quiet');
-    clearTimeout(timer);
-    timer = setTimeout(() => dock.classList.remove('is-quiet'), 260);
-    lastY = y;
-  }, { passive: true });
-})();
diff --git a/site/setup.html b/site/setup.html
index ba6faec..71b683d 100644
--- a/site/setup.html
+++ b/site/setup.html
@@ -18,11 +18,11 @@
   <link rel="stylesheet" href="catalog.css">
   <link rel="stylesheet" href="responsive.css">
   <link rel="stylesheet" href="motion.css">
-  <link rel="stylesheet" href="mobile.css">
   <link rel="stylesheet" href="foundations.css">
   <link rel="stylesheet" href="setup-phase3.css">
+  <link rel="stylesheet" href="mobile.css">
 </head>
-<body>
+<body class="setup-page">
   <header class="site-header"><a class="brand" href="./" aria-label="Beranda Ramu"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span><span>ramu</span></a><nav aria-label="Navigasi utama"><a href="./">Beranda</a><a href="https://github.com/man612/ramu/blob/main/README.en.md" lang="en">English</a><a class="nav-github" href="https://github.com/man612/ramu">GitHub</a></nav></header>
   <main class="setup-main shell">
     <a class="back-link" href="./">← Kembali ke beranda</a>
@@ -41,7 +41,7 @@
     <section class="setup-intro"><div><p class="eyebrow"><span></span> Public beta · mulai dari satu mata kuliah</p><h1>Siapkan satu ChatGPT Project.</h1><p class="setup-lead">Pilih mata kuliah yang sedang dipakai, pasang Project Instructions, lalu unggah course pack. Project lain bisa menyusul setelah yang pertama siap.</p></div><div class="setup-summary-card"><span class="summary-label">Pack aktif</span><strong id="setup-pack-name">Memuat pack…</strong><span id="setup-pack-count" class="small-note">—</span><ul id="setup-summary-list"><li>Memuat mata kuliah…</li></ul><p class="small-note">Tidak perlu menyiapkan semua mata kuliah sekaligus.</p></div></section>
 
     <div class="setup-layout">
-      <aside class="setup-nav" aria-label="Ringkasan langkah setup"><span class="setup-nav-label">Setup · 4 langkah</span><a href="#langkah-1"><b>1</b><span>Cek Memory</span></a><a href="#langkah-2"><b>2</b><span>Salin instruksi</span></a><a href="#langkah-3"><b>3</b><span>Setup 1 Project</span></a><a href="#langkah-4"><b>4</b><span>Mulai gunakan</span></a><div class="nav-progress"><span id="progress-title">Memuat progres…</span><div class="progress-track"><div id="progress-bar"></div></div></div></aside>
+      <aside class="setup-nav" aria-label="Ringkasan langkah setup"><span class="setup-nav-label">Setup · 4 langkah</span><a href="#langkah-1" aria-label="Langkah 1: Cek Memory"><b>1</b><span>Cek Memory</span></a><a href="#langkah-2" aria-label="Langkah 2: Salin instruksi"><b>2</b><span>Salin instruksi</span></a><a href="#langkah-3" aria-label="Langkah 3: Setup 1 Project"><b>3</b><span>Setup 1 Project</span></a><a href="#langkah-4" aria-label="Langkah 4: Mulai gunakan"><b>4</b><span>Mulai gunakan</span></a><div class="nav-progress"><span id="progress-title" aria-live="polite">Memuat progres…</span><div class="progress-track"><div id="progress-bar"></div></div></div></aside>
       <div class="setup-content">
         <section id="langkah-1" class="setup-step-card"><div class="step-heading"><span class="big-step">1</span><div><p class="step-caption">Sebelum membuat Project</p><h2>Gunakan Project-only memory.</h2></div></div><p class="step-explain">Untuk Project baru, pilih <strong>Project-only memory</strong>. Pada eligible Project yang sudah ada, buka <strong>⋯ → Project settings → Memory</strong> lalu pilih opsi yang sama. Perubahan dapat membutuhkan beberapa waktu untuk berlaku; Shared Project tetap memakai Project-only memory.</p><div class="settings-path"><span>ChatGPT</span><i>→</i><span>Settings</span><i>→</i><span>Personalization</span><i>→</i><span>Memory</span></div><div class="check-list"><label><input type="checkbox" data-progress="saved-memory"><span><strong>Reference saved memories</strong> aktif</span></label><label><input type="checkbox" data-progress="chat-history"><span><strong>Reference chat history</strong> aktif</span></label></div><div class="info-box"><strong>UI bisa berbeda</strong><p>Nama menu dan tata letak dapat berubah antarversi aplikasi. Dokumentasi OpenAI yang direview saat ini menyatakan Study Mode tidak berlaku pada Project conversations; workflow belajar di sini tidak membutuhkan Study Mode.</p></div><div class="info-box"><strong>Privasi</strong><p>Data Controls adalah pengaturan akun ChatGPT. Website ini statis; file kuliah pribadi diunggah langsung ke ChatGPT Project, bukan ke server Ramu.</p></div></section>
 
@@ -55,7 +55,6 @@
   </main>
   <footer class="site-footer shell"><a class="brand footer-brand" href="./"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span><span>ramu</span></a><p>Proyek independen. Bukan layanan resmi institusi pendidikan mana pun maupun OpenAI.</p></footer>
   <script src="motion.js" defer></script>
-  <script src="mobile.js" defer></script>
   <script src="app.js?v=plain-copy-picker1" defer></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/test_site_browser.py b/tests/test_site_browser.py
index d85ccc0..3aa5ba8 100644
--- a/tests/test_site_browser.py
+++ b/tests/test_site_browser.py
@@ -206,16 +206,49 @@ def main() -> int:
                 expect(mobile_page.locator(".product-preview")).to_be_visible()
                 expect(mobile_page.locator(".hero-actions .primary")).to_be_visible()
                 expect(mobile_page.locator("#course-list .course-card").first).to_be_visible()
+                if mobile_page.locator(".mobile-dock").count():
+                    raise AssertionError("Homepage mobile masih membuat bottom dock lama.")
+                if mobile_page.locator('script[src="mobile.js"]').count():
+                    raise AssertionError("Homepage masih memuat mobile.js lama.")
+                primary_height = mobile_page.locator(".hero-actions .primary").evaluate("el => el.getBoundingClientRect().height")
+                if primary_height < 44:
+                    raise AssertionError(f"CTA utama mobile terlalu kecil: {primary_height}px.")
                 overflow = mobile_page.evaluate("document.documentElement.scrollWidth - window.innerWidth")
                 if overflow > 1:
                     raise AssertionError(f"Homepage mobile overflow horizontal {overflow}px.")
                 mobile_page.goto(f"{base_url}/setup.html?pack={default_entry['id']}", wait_until="networkidle")
                 expect(mobile_page.locator("#setup-courses .setup-course").first).to_be_visible()
+                if mobile_page.locator(".site-header nav").is_visible():
+                    raise AssertionError("Setup mobile masih menampilkan navigation links yang mengganggu task flow.")
+                mobile_nav = mobile_page.locator(".setup-nav")
+                if mobile_nav.evaluate("el => getComputedStyle(el).position") != "sticky":
+                    raise AssertionError("Setup mobile kehilangan sticky step rail.")
+                step_links = mobile_nav.locator('a[href^="#langkah-"]')
+                if step_links.count() != 4:
+                    raise AssertionError("Setup mobile harus mempertahankan empat langkah linear.")
+                if any(step_links.nth(i).evaluate("el => el.getBoundingClientRect().height") < 44 for i in range(4)):
+                    raise AssertionError("Target langkah mobile harus minimal 44px.")
+                if any(not step_links.nth(i).get_attribute("aria-label") for i in range(4)):
+                    raise AssertionError("Step rail mobile kehilangan aria-label saat label visual disembunyikan.")
+                mobile_page.locator("#langkah-2").scroll_into_view_if_needed()
+                mobile_page.wait_for_timeout(150)
+                if step_links.nth(1).get_attribute("aria-current") != "step":
+                    raise AssertionError("Step rail mobile tidak mengikuti langkah aktif.")
                 setup_overflow = mobile_page.evaluate("document.documentElement.scrollWidth - window.innerWidth")
                 if setup_overflow > 1:
                     raise AssertionError(f"Setup mobile overflow horizontal {setup_overflow}px.")
                 assert_no_page_errors(mobile_page, mobile_errors, "mobile browser flow")
                 mobile_context.close()
+
+                narrow_context = browser.new_context(viewport={"width": 320, "height": 740}, is_mobile=True, has_touch=True)
+                narrow_page = narrow_context.new_page()
+                narrow_page.goto(f"{base_url}/", wait_until="networkidle")
+                if narrow_page.evaluate("document.documentElement.scrollWidth - window.innerWidth") > 1:
+                    raise AssertionError("Homepage pecah pada viewport 320px.")
+                narrow_page.goto(f"{base_url}/setup.html?pack={default_entry['id']}", wait_until="networkidle")
+                if narrow_page.evaluate("document.documentElement.scrollWidth - window.innerWidth") > 1:
+                    raise AssertionError("Setup pecah pada viewport 320px.")
+                narrow_context.close()
                 browser.close()
         finally:
             server.shutdown()