product page

README.md

@@ -127,17 +127,21 @@ Motion on the product page, all of it on wide screens: the hero's seventeen line
 and meet in one point (off under `prefers-reduced-motion`); hovering a node in a schematic dims
 everything that does not belong to it. The drawings themselves do not animate.
 
-The "How CipherVerifier works" cards are `position: sticky` with a growing top offset, so they
-stack into a deck under the pinned heading. Every card has the same height, bound to the viewport
-and capped at 37rem, and the drawing fills what the text leaves, so a card always fits and fully
-covers the one beneath it. The page snaps to each card (`scroll-snap-type: y proximity` on the
-root while this component is on the page, `scroll-snap-stop: always`) via invisible anchors placed
-at each card's natural position: snapping to the sticky cards themselves would create phantom snap
-points at the current offset in Chrome. The pinned bar carries one dot per card; the filled one is
-the card currently on top, and each dot links to its card. A small script sets `--covered` on each
-card as the next one slides over it (the card darkens under an opaque veil) and moves the filled
-dot. The heading is pinned inside a track that ends one card before the deck does, so heading and
-deck leave the screen together. Phones get the same drawings in a plain flow without any of this. This goes
+"How CipherVerifier works" follows the pattern of arcos.eu/technology. On wide screens the
+title and a bordered panel hold still while the page scrolls; the step list under the title
+advances, one step open at a time, and the panel crossfades to that step's drawing. The section is
+as tall as one pitch per step plus one panel height, so the panel stays pinned until the last step
+has been read. Which step is open is decided by invisible triggers tiling that height: whichever
+crosses the middle of the viewport wins, and the triggers start half a viewport down so the first
+step turns over exactly when the panel pins. A step's title is a button that scrolls to it.
+
+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
+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
 unchanged. Without JavaScript every sector panel
 and its image is shown in full; the `html.js` class set in `Base.astro` switches to one at a time.