Fix product

src/components/verifier/HowItWorks.astro

@@ -107,9 +107,17 @@ const groups = v.groups.map((g, i) => ({ title: g.title, body: g.body, desc: g.d
       height: 100%;
       padding-block: var(--how-inset);
     }
-    .how__text { grid-column: 1; }
-    /* The box on the right is tied to this, so it ends where the text ends. */
-    .how__text-inner { position: relative; }
+    .how__text {
+      grid-column: 1;
+      display: grid;
+      align-content: center;
+    }
+    /* The box on the right is tied to this, so it ends where the text ends. Holding it at the
+       height of the longest step keeps both of them still as the steps change. */
+    .how__text-inner {
+      position: relative;
+      min-height: var(--how-text-h, auto);
+    }
     .how__title { max-width: 14em; }
     .how__steps { margin-top: clamp(1.5rem, 9vh, 5rem); }
     .how__step {
@@ -225,6 +233,8 @@ const groups = v.groups.map((g, i) => ({ title: g.title, body: g.body, desc: g.d
     const activeIndex = () => steps.findIndex((step) => step.hasAttribute('data-active'));
     const measure = () => {
       if (!textInner) return;
+      /* Let it fall back to its natural height first, or it would measure its own floor. */
+      root.style.removeProperty('--how-text-h');
       const open = inners[activeIndex()]?.offsetHeight ?? 0;
       const base = textInner.offsetHeight - open;
       const tallest = inners.reduce((max, el) => Math.max(max, el.offsetHeight), 0);