Receipt-First Protected Mobile Checkout

Build a mobile-first checkout for Harbor Goods, a small-batch homewares marketplace. The customer is buying limited-stock goods on a phone and needs to understand exactly what is reserved, when it arrives, how payment is protected, and whether the total can change. Make trust inspectable through the interface rather than through generic shield icons or reassuring marketing copy.

The product is organized around one long Harbor Trust Ledger: a paper receipt containing real product rows, guarantee rows, totals, a compact Bag → Delivery → Payment → Review stepper, and a thumb-reachable primary action. Avoid a stack of generic checkout cards, a full-screen illustration, glass panels, a bank-logo strip, fake reviews, or hidden order details.

Use this demonstrated order: Harbor Goods; Checkout protected; Harbor Trust Ledger; Stonewashed linen sheet set; $128.00; Hand-thrown pantry bowls; $64.00; Reserved until 08:00; Arrives Tue, Jul 14; Payment tokenized; Total locked; $213.50; Use this delivery. Product cutouts may be original generated raster images; the receipt, stamps, controls, values, and messages must be semantic UI. Do not add unsupported carbon-neutral, insurance, savings, or security-certification claims.

The visual system uses white #ffffff, receipt gray #ececeb, navy #0d4385, orange #e9673b, green #2f8a64, and charcoal #202020. Pair a humanist sans with mono receipt values. Use a perforated paper edge only when it can render cleanly, strong typographic alignment, small product cutouts, clear rules, and stamped states that include words as well as color. Do not place the UI in a phone-device frame.

Delivery is the deliberate five-second action. From 0–1.0 seconds the Delivery step becomes active. From 1.0–2.2 seconds the receipt reveals its delivery section with a restrained unroll. From 2.2–4.2 seconds Reserved until 08:00, Arrives Tue, Jul 14, Payment tokenized, and Total locked stamp in sequence, each becoming readable before the next. From 4.2–5.0 seconds the sticky action changes to Use this delivery and the $213.50 total locks. The settled state must be repeatable and free of layout shift.

Include bag, delivery-selected, promo-error, payment-protected, review-ready, order-success, loading, offline, and reduced-motion states. A promo entry can demonstrate a specific invalid-code error without applying a fake discount. All steps, disclosures, and product rows need proper labels; changes are announced politely; focus remains visible; the action stays above the safe-area inset. Add data-preview-ready to the stable checkout and data-preview-action to the Delivery step.

Design natively for 390×844, then provide a considered tablet/desktop presentation that centers the ledger at a readable width with contextual order notes beside it. At 320px, preserve two-column price alignment, do not truncate guarantee text, and keep the primary action reachable. For prefers-reduced-motion or Save-Data, render the fully unrolled Delivery ledger and all stamped guarantees immediately while keeping the stepper interactive.

Return a standalone responsive HTML document with internal CSS and JavaScript. Do not use a framework, external checkout, stock security badge, handcrafted SVG illustration, placeholder image box, lorem ipsum, or explanatory text beyond the product. Include one understated source-prompt link.