Fix product

README.md

@@ -137,9 +137,10 @@ step turns over exactly when the panel pins. A step's title is a button that scr
 
 The panel is tied to the text, not to the pinned frame: it is positioned against
 `.how__text-inner`, so it starts at the title and its width is stated as 200% of the text column
-(4 of 12 against 8 of 12). Its height is measured once by script as the collapsed list plus the
-tallest step's text, so it never resizes as steps change while each step's text still takes only
-the room it needs. Without script the first step stays open, the panel takes the text's own
+(4 of 12 against 8 of 12). That block is held at one height, measured once by script as the
+collapsed list plus the tallest step's text, and centred in the pinned frame. So the title, the
+list and the panel all sit in the middle of the dark area and none of them move as the steps
+change, while each step's text still takes only the room it needs. Without script the first step stays open, the panel takes the text's own
 height, and the section reads as a plain sequence. Phones get that plain sequence in any case:
 every step open, the upright drawing under its text. This goes
 beyond the home page's single load moment on purpose, at the client's request; the home page is

package-lock.json

@@ -699,7 +699,6 @@
       "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.3",
         "tslib": "^2.4.0"
@@ -711,7 +710,6 @@
       "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -2097,7 +2095,6 @@
       "integrity": "sha512-TXyindR+lBr22aJIdMQzCFHPHR6cR4js838mRDCSz5hOKWZvZwsXSSiXDmjRj4iJmgl+sR9O+1mkoVBSMadNug==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -2235,7 +2232,6 @@
       "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -2868,7 +2864,6 @@
       "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -3917,7 +3912,6 @@
       "integrity": "sha512-WRFq3Wn3WId7LLROfMLdH7xaFr2jR62wU8nLO6rQUOLOxNZUviyJQs1M0iIhLexSFy+L+w0ch66wtoO2jRjG0A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -4394,7 +4388,6 @@
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4686,7 +4679,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.0.tgz",
       "integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.7",
@@ -5119,7 +5111,6 @@
       "integrity": "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==",
       "devOptional": true,
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },

scripts/panel-align-test.mjs

@@ -29,6 +29,8 @@ for (let i = 0; i < count; i++) {
       bottomVsList: Math.round(fig.bottom - last.bottom),
       rightVsEdge: Math.round(fig.right - rightEdge),
       listFits: Math.round(sticky.bottom - last.bottom),
+      spaceAbove: Math.round(fig.top - sticky.top),
+      spaceBelow: Math.round(sticky.bottom - fig.bottom),
     };
   }));
   await page.screenshot({ path: `${prefix}-${i}.png` });

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);