diff --git a/website/src/components/home/Cleanup.astro b/website/src/components/home/Cleanup.astro
index 622e99bb2..88dd21373 100644
--- a/website/src/components/home/Cleanup.astro
+++ b/website/src/components/home/Cleanup.astro
@@ -105,23 +105,20 @@ const icons = [
             <p class="polish-hint"><span aria-hidden="true">⇄</span>Swipe, or use the arrows</p>
           </div>
         </div>
-      </div><div class="polish-guards" id="polish-guards" data-open="true">
-        <button
-          class="polish-guards-toggle"
-          aria-expanded="true"
-          aria-controls="polish-guard-notes"
-          hidden
-          ><span>What each one means</span><i class="polish-guard-mark" aria-hidden="true"
-          ></i></button
-        ><div class="polish-guard-row" id="polish-guard-notes">
+      </div><div class="polish-guards" id="polish-guards">
+        <p class="polish-guards-heading">What each one means</p>
+        <div class="polish-guard-row" id="polish-guard-notes">
           {
             polish.guards.map((guard) => (
-              <div class="polish-guard">
+              <details class="polish-guard">
                 <>
-                  <p class="polish-guard-name">{guard.name}</p>
+                  <summary class="polish-guard-name">
+                    <span>{guard.name}</span>
+                    <i class="polish-guard-mark" aria-hidden="true" />
+                  </summary>
                   <p class="polish-guard-note">{guard.note}</p>
                 </>
-              </div>
+              </details>
             ))
           }
         </div>
diff --git a/website/src/components/home/CompatibleApps.astro b/website/src/components/home/CompatibleApps.astro
index bc33e17c7..a732af412 100644
--- a/website/src/components/home/CompatibleApps.astro
+++ b/website/src/components/home/CompatibleApps.astro
@@ -3,7 +3,9 @@ import apps from '../../data/home/compatibleApps.json';
 ---
 
 <aside class="compatible-strip" id="apps" aria-labelledby="compatible-title">
-  <p id="compatible-title">Works in the apps you already use.</p>
+  <div class="wrap">
+    <p class="eyebrow" id="compatible-title">Works in the apps you already use</p>
+  </div>
   <div
     class="compatible-viewport"
     tabindex="0"
diff --git a/website/src/components/home/UseCases.astro b/website/src/components/home/UseCases.astro
index 469458601..b8e69e162 100644
--- a/website/src/components/home/UseCases.astro
+++ b/website/src/components/home/UseCases.astro
@@ -40,26 +40,30 @@ const first = cases[0];
         ))
       }
     </div>
-    <div class="case-stage" data-case="0" data-case-assets={JSON.stringify(assets)}>
-      <div class="case-copy">
-        <h3>{first.title}</h3><p>{first.note}</p><span class="case-status"
-          >{first.sampleLabel || ''}</span
-        >
-      </div><figure class="case-person">
-        <img
-          class="case-scene"
-          src={assets[0].src}
-          srcset={assets[0].srcset}
-          sizes="(max-width:600px) 100vw, 50vw"
-          width={assets[0].width}
-          height={assets[0].height}
-          loading="lazy"
-          decoding="async"
-          alt="Illustrated developer speaking toward a computer"
-        />
-      </figure><div class="case-screen" data-phase="finished">
-        <AppDemo app="vscode" text={first.final} />
+    <div class="case-frame">
+      <div class="case-stage" data-case="0" data-case-assets={JSON.stringify(assets)}>
+        <div class="case-copy">
+          <h3>{first.title}</h3><p>{first.note}</p><span class="case-status"
+            >{first.sampleLabel || ''}</span
+          >
+        </div><figure class="case-person">
+          <img
+            class="case-scene"
+            src={assets[0].src}
+            srcset={assets[0].srcset}
+            sizes="(max-width:600px) 100vw, 50vw"
+            width={assets[0].width}
+            height={assets[0].height}
+            loading="lazy"
+            decoding="async"
+            draggable="false"
+            alt="Illustrated developer speaking toward a computer"
+          />
+        </figure><div class="case-screen" data-phase="finished">
+          <AppDemo app="vscode" text={first.final} />
+        </div>
       </div>
+      <p class="case-swipe-hint" aria-hidden="true">Swipe to explore more ways to use it ↔</p>
     </div>
     <div class="case-controls">
       <div>
diff --git a/website/src/components/home/Workflow.astro b/website/src/components/home/Workflow.astro
index 53e55b2a4..0164779a2 100644
--- a/website/src/components/home/Workflow.astro
+++ b/website/src/components/home/Workflow.astro
@@ -17,14 +17,7 @@ import Icon from './Icon.astro';
       transcription and your choice of local or cloud AI polish.
     </p>
   </div>
-  <p class="mobile-swipe-hint">
-    Swipe through the five steps <span aria-hidden="true">↔</span>
-  </p><ol
-    class="hood-steps swipe-row"
-    id="hood-steps"
-    tabindex="0"
-    aria-label="Five workflow steps"
-  >
+  <ol class="hood-steps" id="hood-steps" aria-label="Five workflow steps">
     {
       hood.steps.map((step, i) => (
         <li class:list={['hood-step', 'is-' + step.where]}>
diff --git a/website/src/scripts/home/apps.js b/website/src/scripts/home/apps.js
index 33e07dc5f..41467f826 100644
--- a/website/src/scripts/home/apps.js
+++ b/website/src/scripts/home/apps.js
@@ -5,11 +5,15 @@ export function init(root, motion, scope) {
   duplicate.classList.add('compatible-duplicate');
   duplicate.setAttribute('aria-hidden', 'true');
   list.after(duplicate);
-  const manual = matchMedia('(max-width:999px), (pointer:coarse)');
+  scope.defer(() => duplicate.remove());
   let hovered = false,
+    touching = false,
+    dragging = false,
+    settling = false,
+    settleTimer,
     offset = viewport.scrollLeft;
   const clock = scope.timeline(root, (delta) => {
-    if (manual.matches || hovered) return false;
+    if (hovered || touching || dragging || settling) return false;
     const width = list.offsetWidth;
     if (!width) return false;
     offset = (offset + delta * 0.025) % width;
@@ -20,24 +24,94 @@ export function init(root, motion, scope) {
     offset = viewport.scrollLeft;
     clock.wake();
   }
+  function finishInteraction() {
+    if (touching || dragging) return;
+    clearTimeout(settleTimer);
+    settling = false;
+    resume();
+  }
+  function settle() {
+    settling = true;
+    clearTimeout(settleTimer);
+    if (!touching && !dragging) settleTimer = setTimeout(finishInteraction, 180);
+  }
+  const passive = { passive: true, signal: scope.signal };
   viewport.addEventListener(
-    'mouseenter',
-    () => {
-      hovered = true;
+    'pointerenter',
+    (event) => {
+      if (event.pointerType === 'mouse') hovered = true;
     },
-    { signal: scope.signal },
+    passive,
   );
   viewport.addEventListener(
-    'mouseleave',
-    () => {
+    'pointerleave',
+    (event) => {
+      if (event.pointerType !== 'mouse') return;
       hovered = false;
       resume();
     },
-    { signal: scope.signal },
+    passive,
+  );
+  viewport.addEventListener(
+    'pointerdown',
+    (event) => {
+      if (event.pointerType !== 'touch') {
+        dragging = true;
+        settle();
+      }
+    },
+    passive,
+  );
+  for (const eventName of ['pointerup', 'pointercancel']) {
+    window.addEventListener(
+      eventName,
+      (event) => {
+        if (event.pointerType === 'touch' || !dragging) return;
+        dragging = false;
+        settle();
+      },
+      passive,
+    );
+  }
+  // Native panning cancels pointer events before the finger is lifted.
+  viewport.addEventListener(
+    'touchstart',
+    () => {
+      hovered = false;
+      touching = true;
+      settle();
+    },
+    passive,
+  );
+  for (const eventName of ['touchend', 'touchcancel']) {
+    window.addEventListener(
+      eventName,
+      (event) => {
+        if (!touching) return;
+        touching = event.touches.length > 0;
+        settle();
+      },
+      passive,
+    );
+  }
+  viewport.addEventListener('wheel', settle, passive);
+  viewport.addEventListener(
+    'scroll',
+    () => {
+      if (settling) settle();
+    },
+    passive,
+  );
+  viewport.addEventListener(
+    'scrollend',
+    () => {
+      if (settling) finishInteraction();
+    },
+    passive,
   );
   viewport.addEventListener('focusout', resume, { signal: scope.signal });
-  manual.addEventListener('change', resume, { signal: scope.signal });
   const observer = new ResizeObserver(resume);
   observer.observe(list);
   scope.defer(() => observer.disconnect());
+  scope.defer(() => clearTimeout(settleTimer));
 }
diff --git a/website/src/scripts/home/cases.js b/website/src/scripts/home/cases.js
index 9951a38a0..b3e790cd6 100644
--- a/website/src/scripts/home/cases.js
+++ b/website/src/scripts/home/cases.js
@@ -1,5 +1,6 @@
 import cases from '../../data/home/cases.json';
 import { mountDemo } from './demo.js';
+import { bindSwipe } from './swipe.js';
 const apps = ['vscode', 'clinical', 'keep', 'gmail', 'docs', 'slack', 'discord', 'notes', 'teams'];
 export function init(root, motion, scope) {
   const stage = root.querySelector('.case-stage'),
@@ -151,15 +152,16 @@ export function init(root, motion, scope) {
     { signal: scope.signal },
   );
   stage.addEventListener(
-    'mouseenter',
-    () => {
-      hovered = true;
+    'pointerenter',
+    (event) => {
+      if (event.pointerType === 'mouse') hovered = true;
     },
     { signal: scope.signal },
   );
   stage.addEventListener(
-    'mouseleave',
-    () => {
+    'pointerleave',
+    (event) => {
+      if (event.pointerType !== 'mouse') return;
       hovered = false;
       clock.wake();
     },
@@ -179,4 +181,18 @@ export function init(root, motion, scope) {
     },
     render,
   );
+  bindSwipe(
+    stage,
+    scope,
+    (direction) => {
+      choose(Math.max(0, Math.min(cases.length - 1, index + direction)), true);
+    },
+    (event) => {
+      auto = false;
+      if (event.pointerType !== 'mouse') hovered = false;
+      elapsed = Math.max(elapsed, 5400);
+      tour.textContent = 'Play tour';
+      render();
+    },
+  );
 }
diff --git a/website/src/scripts/home/cleanup.js b/website/src/scripts/home/cleanup.js
index 504bf39f6..1b68a345e 100644
--- a/website/src/scripts/home/cleanup.js
+++ b/website/src/scripts/home/cleanup.js
@@ -1,6 +1,7 @@
 import polish from '../../data/home/polish.json';
 import paths from '../../data/home/icons.json';
 import { renderTokens } from '../../utils/home/text.js';
+import { bindSwipe } from './swipe.js';
 const icons = [
   'person',
   'wave',
@@ -100,27 +101,6 @@ export function init(root, motion, scope) {
     },
     { signal: scope.signal },
   );
-  let touch;
-  card.addEventListener(
-    'touchstart',
-    (event) => {
-      const p = event.changedTouches[0];
-      touch = { x: p.clientX, y: p.clientY };
-    },
-    { signal: scope.signal, passive: true },
-  );
-  card.addEventListener(
-    'touchend',
-    (event) => {
-      if (!touch) return;
-      const p = event.changedTouches[0],
-        dx = p.clientX - touch.x,
-        dy = p.clientY - touch.y;
-      touch = null;
-      if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) choose(index + (dx < 0 ? 1 : -1));
-    },
-    { signal: scope.signal, passive: true },
-  );
   clock = scope.timeline(
     root,
     (delta) => {
@@ -143,18 +123,15 @@ export function init(root, motion, scope) {
       }
     },
   );
-  const guards = root.querySelector('#polish-guards'),
-    toggle = guards.querySelector('button');
-  function setGuards(open) {
-    guards.dataset.open = String(open);
-    toggle.setAttribute('aria-expanded', String(open));
-  }
-  toggle.addEventListener(
-    'click',
-    () => setGuards(toggle.getAttribute('aria-expanded') !== 'true'),
-    { signal: scope.signal },
+  bindSwipe(
+    card,
+    scope,
+    (direction) => choose(index + direction),
+    () => {
+      pinned = true;
+      reveal = 0;
+      raw.classList.add('is-live');
+    },
   );
-  toggle.hidden = false;
-  setGuards(false);
   show(0);
 }
diff --git a/website/src/scripts/home/swipe.js b/website/src/scripts/home/swipe.js
new file mode 100644
index 000000000..f565d400d
--- /dev/null
+++ b/website/src/scripts/home/swipe.js
@@ -0,0 +1,90 @@
+/** Recognize direction; each section keeps ownership of its selection and playback. */
+export function bindSwipe(card, scope, onSwipe, onStart = () => {}) {
+  const doc = card.ownerDocument,
+    win = doc.defaultView,
+    mobile = win.matchMedia('(max-width: 600px)'),
+    contacts = new Set();
+  let gesture;
+  const listen = (target, type, handler, options = {}) =>
+    target.addEventListener(type, handler, { ...options, signal: scope.signal });
+  function reset() {
+    const previous = gesture;
+    gesture = undefined;
+    card.classList.remove('is-swiping');
+    card.style.removeProperty('--swipe-offset');
+    if (previous && card.hasPointerCapture(previous.id)) card.releasePointerCapture(previous.id);
+  }
+  function clear() {
+    contacts.clear();
+    reset();
+  }
+  // Capture phase sees a second contact even when it starts outside this card.
+  listen(
+    win,
+    'pointerdown',
+    (event) => {
+      contacts.add(event.pointerId);
+      if (contacts.size > 1) reset();
+    },
+    { capture: true },
+  );
+  for (const type of ['pointerup', 'pointercancel']) {
+    listen(
+      win,
+      type,
+      (event) => {
+        contacts.delete(event.pointerId);
+        if (type === 'pointercancel' && gesture?.id === event.pointerId) reset();
+      },
+      { capture: true },
+    );
+  }
+  listen(card, 'pointerdown', (event) => {
+    if (contacts.size !== 1 || !event.isPrimary || event.button !== 0) return;
+    if (event.pointerType === 'mouse' && !mobile.matches) return;
+    if (event.target.closest('a, button, input, select, textarea, summary, [contenteditable]'))
+      return;
+    gesture = { id: event.pointerId, x: event.clientX, y: event.clientY, horizontal: false };
+    card.setPointerCapture(event.pointerId);
+    // Mobile-preview dragging should move the card, not select its demonstration text.
+    if (event.pointerType === 'mouse') event.preventDefault();
+  });
+  listen(card, 'pointermove', (event) => {
+    if (gesture?.id !== event.pointerId) return;
+    const dx = event.clientX - gesture.x,
+      dy = event.clientY - gesture.y;
+    if (!gesture.horizontal) {
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < 10) return;
+      if (Math.abs(dx) <= Math.abs(dy) * 1.2) {
+        reset();
+        return;
+      }
+      gesture.horizontal = true;
+      card.classList.add('is-swiping');
+      onStart(event);
+    }
+    if (event.cancelable) event.preventDefault();
+    card.style.setProperty('--swipe-offset', Math.max(-28, Math.min(28, dx * 0.2)) + 'px');
+  });
+  listen(card, 'pointerup', (event) => {
+    if (gesture?.id !== event.pointerId) return;
+    const dx = event.clientX - gesture.x,
+      dy = event.clientY - gesture.y,
+      select = gesture.horizontal && Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy) * 1.2;
+    reset();
+    if (select) onSwipe(dx < 0 ? 1 : -1);
+  });
+  listen(card, 'lostpointercapture', (event) => {
+    if (gesture?.id === event.pointerId) reset();
+  });
+  listen(win, 'blur', clear);
+  listen(doc, 'visibilitychange', () => {
+    if (doc.hidden) clear();
+  });
+  listen(mobile, 'change', clear);
+  card.setAttribute('data-swipeable', '');
+  scope.defer(() => {
+    clear();
+    card.removeAttribute('data-swipeable');
+  });
+}
diff --git a/website/src/styles/home/apps.css b/website/src/styles/home/apps.css
index 1f8d9171c..fbd0cf2ea 100644
--- a/website/src/styles/home/apps.css
+++ b/website/src/styles/home/apps.css
@@ -3,13 +3,6 @@
   min-width: 0;
   padding: 8px 0 24px;
 }
-.compatible-strip > p {
-  color: var(--body);
-  font-size: 14px;
-  line-height: 1.5;
-  margin: 0 16px 12px;
-  text-align: center;
-}
 .compatible-viewport {
   mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
   overflow-x: auto;
@@ -63,13 +56,12 @@ html[data-theme='dark']
   svg {
   color: var(--ink);
 }
-@media (max-width: 999px), (pointer: coarse), (prefers-reduced-motion: reduce) {
-  .compatible-duplicate {
-    display: none;
-  }
+@media (max-width: 999px), (pointer: coarse) {
   .compatible-list {
     padding-inline: 16px;
   }
+}
+@media (max-width: 999px), (pointer: coarse), (prefers-reduced-motion: reduce) {
   .compatible-viewport {
     scrollbar-color: var(--line) transparent;
     scrollbar-width: thin;
@@ -79,10 +71,6 @@ html[data-theme='dark']
   .compatible-strip {
     padding: 8px 0 18px;
   }
-  .compatible-strip > p {
-    font-size: 13px;
-    margin-bottom: 8px;
-  }
   .compatible-list {
     gap: 9px;
   }
diff --git a/website/src/styles/home/cleanup.css b/website/src/styles/home/cleanup.css
index e81b7caf9..8a3dfbb87 100644
--- a/website/src/styles/home/cleanup.css
+++ b/website/src/styles/home/cleanup.css
@@ -18,7 +18,6 @@
   gap: 22px;
   padding: 28px 30px 18px;
   position: relative;
-  touch-action: pan-y;
 }
 .polish-card,
 .polish-card-head {
@@ -260,24 +259,13 @@
   flex-direction: column;
   gap: 14px;
 }
-.polish-guards-toggle {
-  align-items: center;
+.polish-guards-heading {
   align-self: flex-end;
-  background: none;
-  border: 0;
   color: var(--eg-body);
-  cursor: pointer;
-  display: flex;
-  font: inherit;
   font-size: 14px;
   font-weight: 500;
-  gap: 10px;
-  min-height: 44px;
+  margin: 0;
   padding: 0;
-  transition: color 0.2s;
-}
-.polish-guards-toggle:hover {
-  color: var(--eg-accent);
 }
 .polish-guard-row {
   align-items: start;
@@ -289,13 +277,23 @@
   min-width: 0;
 }
 .polish-guard-name {
+  align-items: center;
   border-bottom: 2px solid var(--eg-hi-line);
   color: var(--eg-ink);
+  cursor: pointer;
+  display: flex;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.2px;
+  gap: 12px;
+  justify-content: space-between;
+  list-style: none;
   margin: 0;
-  padding-bottom: 12px;
+  min-height: 54px;
+  padding-block: 12px;
+}
+.polish-guard-name::-webkit-details-marker {
+  display: none;
 }
 .polish-guard-note {
   color: var(--eg-body);
@@ -304,9 +302,6 @@
   margin: 12px 0 0;
   text-wrap: pretty;
 }
-.polish-guards[data-open='false'] .polish-guard-note {
-  display: none;
-}
 .polish-guard-mark {
   border: 1px solid var(--eg-line);
   border-radius: 50%;
@@ -337,11 +332,11 @@
   transform: translate(-50%, -50%);
   width: 1.5px;
 }
-.polish-guards[data-open='true'] .polish-guard-mark {
+.polish-guard[open] .polish-guard-mark {
   border-color: var(--eg-accent);
   transform: rotate(45deg);
 }
-.polish-guards-toggle:hover .polish-guard-mark {
+.polish-guard-name:hover .polish-guard-mark {
   border-color: var(--eg-accent);
 }
 @media (max-width: 1320px) {
@@ -818,8 +813,17 @@ html[data-theme='dark'] #polish .polish-raw.is-live .is-cut {
   }
   #polish .polish-explorer {
     border-radius: 18px;
+    overflow: hidden;
     padding: 10px;
   }
+  #polish .polish-nav {
+    flex-wrap: wrap;
+  }
+  #polish[data-enhancement='ready'] .polish-hint {
+    display: flex;
+    flex-basis: 100%;
+    justify-content: center;
+  }
   #polish .polish-dots {
     display: grid;
     gap: 3px;
@@ -861,7 +865,8 @@ main
     #story,
     #download
   )
-  .eyebrow {
+  .eyebrow,
+#apps .eyebrow {
   align-items: center;
   color: var(--body);
   display: flex;
@@ -886,7 +891,8 @@ main
     #story,
     #download
   )
-  .eyebrow:after {
+  .eyebrow:after,
+#apps .eyebrow:after {
   background: var(--line);
   content: '';
   display: block;
diff --git a/website/src/styles/home/foundation.css b/website/src/styles/home/foundation.css
index b80e00b36..d2f7c04c0 100644
--- a/website/src/styles/home/foundation.css
+++ b/website/src/styles/home/foundation.css
@@ -905,6 +905,30 @@ main > section:not(#opening) h2 {
   outline: 2px solid var(--accent);
   outline-offset: 4px;
 }
+[data-swipeable] {
+  touch-action: pan-y pinch-zoom;
+}
+[data-swipeable].is-swiping {
+  -webkit-user-select: none;
+  user-select: none;
+}
+@media (max-width: 600px) {
+  [data-swipeable] {
+    cursor: grab;
+    transform: translateX(var(--swipe-offset, 0px));
+    transition: transform 0.16s ease;
+  }
+  [data-swipeable].is-swiping {
+    cursor: grabbing;
+    transition: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-swipeable] {
+    transform: none;
+    transition: none;
+  }
+}
 @media (prefers-color-scheme: dark) {
   html:not([data-theme]) {
     color-scheme: dark;
diff --git a/website/src/styles/home/use-cases.css b/website/src/styles/home/use-cases.css
index e7477a1bd..77f144cf0 100644
--- a/website/src/styles/home/use-cases.css
+++ b/website/src/styles/home/use-cases.css
@@ -30,6 +30,9 @@ html[data-theme='dark'] .audience-choices button[aria-pressed='true'] {
   min-height: 410px;
   position: relative;
 }
+.case-swipe-hint {
+  display: none;
+}
 .case-copy {
   padding: 20px 12px 20px 0;
   position: relative;
@@ -609,38 +612,57 @@ main > #people .section-heading {
   #people .section-heading h2 {
     font-size: 37px;
   }
+  .case-frame {
+    background: var(--eg-card);
+    border: 1px solid var(--eg-line);
+    border-radius: 22px;
+    overflow: hidden;
+  }
   .case-stage {
     display: flex;
     flex-direction: column;
     gap: 0;
+    padding: 16px;
   }
   .case-copy {
-    margin-bottom: 18px;
+    margin-bottom: 14px;
   }
   .case-copy h3 {
-    font-size: 27px;
+    font-size: 23px;
   }
   .case-copy p {
-    font-size: 16px;
+    font-size: 15px;
+    line-height: 1.55;
   }
   .case-person {
     flex: none;
-    height: 330px;
+    height: 180px;
     margin: 0;
   }
-  .case-person .case-scene {
+  #people .case-person .case-scene {
     height: 100%;
     left: -16px;
     mask-image: linear-gradient(180deg, transparent, #000 5%, #000 87%, transparent);
-    object-position: 50% 36%;
+    object-position: 50% 16%;
     width: calc(100% + 32px);
   }
   .case-screen {
     flex: none;
-    height: 450px;
-    margin-top: -5px;
+    height: 400px;
+    margin-top: -18px;
     padding: 8px;
   }
+  .case-screen > .host-app {
+    overflow-y: auto;
+  }
+  #people[data-enhancement='ready'] .case-swipe-hint {
+    color: var(--eg-body);
+    display: block;
+    font-size: 13px;
+    margin: 0;
+    padding: 0 16px 16px;
+    text-align: center;
+  }
   .case-screen .clinical-notes .illustrated-result {
     font-size: 13px;
     line-height: 1.5;
diff --git a/website/src/styles/home/workflow.css b/website/src/styles/home/workflow.css
index 539c0c737..c887af249 100644
--- a/website/src/styles/home/workflow.css
+++ b/website/src/styles/home/workflow.css
@@ -321,14 +321,9 @@ main > #hood h2 {
     grid-template-columns: 1fr;
   }
   #hood .hood-steps {
-    gap: 22px;
-    grid-template-columns: repeat(5, minmax(180px, 1fr));
-    overflow-x: auto;
-    padding-bottom: 12px;
-    scroll-snap-type: x mandatory;
-  }
-  #hood .hood-step {
-    scroll-snap-align: start;
+    gap: 14px;
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0;
   }
   #hood .hood-privacy {
     padding: 18px;
@@ -336,26 +331,6 @@ main > #hood h2 {
   #hood .workflow-promise {
     display: none;
   }
-}
-@media (max-width: 600px) {
-  #hood {
-    padding-block: 34px;
-  }
-  main > #hood h2 {
-    font-size: 36px;
-  }
-  #hood .section-heading {
-    margin-bottom: 22px;
-  }
-  #hood .section-heading > p {
-    font-size: 17px;
-  }
-  #hood .hood-steps {
-    gap: 14px;
-    grid-template-columns: 1fr;
-    overflow: visible;
-    padding: 0;
-  }
   #hood .hood-step {
     align-items: center;
     border-radius: 16px;
@@ -400,6 +375,20 @@ main > #hood h2 {
     top: auto;
     z-index: 1;
   }
+}
+@media (max-width: 600px) {
+  #hood {
+    padding-block: 34px;
+  }
+  main > #hood h2 {
+    font-size: 36px;
+  }
+  #hood .section-heading {
+    margin-bottom: 22px;
+  }
+  #hood .section-heading > p {
+    font-size: 17px;
+  }
   #hood .hood-privacy {
     align-items: flex-start;
     gap: 12px;
@@ -442,30 +431,6 @@ main > #hood h2 {
     padding: 16px 20px;
   }
 }
-@media (max-width: 600px) {
-  #hood .hood-steps {
-    display: grid;
-    gap: 14px;
-    grid-auto-columns: 90%;
-    grid-auto-flow: column;
-    grid-template-columns: none;
-    overflow-x: auto;
-    overscroll-behavior-x: contain;
-    padding: 0 0 12px;
-    scroll-snap-type: x mandatory;
-    scrollbar-color: var(--line) transparent;
-    scrollbar-width: thin;
-  }
-  #hood .hood-step {
-    align-content: start;
-    min-height: 200px;
-    min-width: 0;
-    scroll-snap-align: start;
-  }
-  #hood .hood-step:not(:last-child):after {
-    display: none;
-  }
-}
 main > section#hood .section-heading {
   gap: 14px;
   grid-template-columns: 1fr;
@@ -491,12 +456,11 @@ main > section#hood .section-heading > p {
   #hood h2 br {
     display: none;
   }
+}
+@media (max-width: 999px) {
   #hood .hood-step-name {
     font-size: 18px;
     justify-content: flex-start;
     min-height: 0;
   }
-  #hood .hood-step {
-    min-height: 220px;
-  }
 }