# Cycle 03 — reimagining the landing

Built-in imagegen produced concept-a.png and concept-b.png from the same actual landing
screenshots. Exact prompts: prompt-a.txt and prompt-b.txt. Product/content rules and
hypotheses: brief.md. Adopt/adapt/reject decisions: triage.md.

Selected B's interactive worked-example structure. Implemented a native HTML/CSS holding,
price/date ticket and conditional outcome graphic. Both example choices and fees disclosure
work without JavaScript. All labels are real text. No generated asset is used as a UI control.

## Verified on https://thetanuts.finance/dev/cow/

- Actual Buy/Sell clicks switch USDC/2,400 to WETH/3,300 with USDC-per-WETH units.
- ArrowLeft selects Buy from Sell and shows the focus outline; Tab reaches the native
  fees summary; Enter expands it. The fee and risk text are present in the accessible tree.
- Both choices with fees open/closed fit 320, 390, 768 and 1440px. No page overflow.
- Primary action is 54px tall. On a 390 × 844 viewport, its top moves from 818.86 to 324.13px.
- Main visible text falls from 348 to 81 whitespace-delimited words, about 77% less.
  Includes decorative glyphs in innerText; it is a consistent text-volume measure, not NLP.
- Mobile content height falls from 2063 to 1134px with fees closed.
- Actual Try a sample link opens isolated demo mode with three fictional holdings and
  disabled wallet, approve and create controls. Browser consoles show no errors/warnings.
- Landing has unique IDs, resolvable local links and no application/wallet scripts.
- Earlier cycle 01/02 sections were compared byte for byte during journal append and preserved.

Full-page captures exclude the 15px scrollbar. Reference/proposal/after file dimensions and
hashes are in capture-manifest.json. Static examples have no live data, wallet or browser
state injection. before-index.html / before-app.css preserve original sources.

This validates presentation, native interactions and links. It does not establish a human
comprehension or conversion improvement. A useful next human check is whether a newcomer
can identify their chosen price/date and explain why either asset may remain at the end.

Final resource check: index.html?v=23 and landing.css?v=2. Native radio hit areas span the full 46px-high choices. Both actual pointer selections and ArrowRight/ArrowLeft select the expected state. Final responsive results: final-validation.json.

Journal verification: all cycle 03 images decoded on the production URL, Desktop/Mobile toggles affected only their own cycle, and the 390px journal had no horizontal overflow. Console clean.