# Giant numeral steps > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The "how it works" section for "Fernhill", an invented off-site backup service for small offices. Three columns hang from a 1px ink rule. Each starts with a numeral set at about 250px in Bricolage Grotesque 800, tight enough that it reads as a shape, with the step's verb (Install, Choose, Restore) and a time beside it. A working artefact card slides 30px up over the foot of each numeral: a terminal transcript with a Copy button, a folder picker whose price updates as you tick, and a restore result you can run again. The detail to copy: the overlap. The number sits behind the proof, so the section reads as one composition, not three tiles. ## Reference behaviour 1. Initial state: headline (two lines at 52px) left, raspberry "Back up 1 TB free" and a price note right; a 1px `--ink` rule; three columns split by 1px `--line` verticals. 2. Hover or focus anything inside a column: its numeral turns from ink to raspberry over 240ms. 3. Install: Copy writes `sudo sh fernhill-install.sh` to the clipboard (guarded; failures are silent), and the button reads "Copied" for 1600ms. 4. Choose: three folder checkboxes (/Clients 412 GB on, /Accounts 38 GB on, /Photo shoots 1.24 TB off) and a "Keep versions for" select (30 days ×1, 90 days ×1.4, 1 year ×2.1). Price = GB × £0.014 × multiplier. Initial: "450 GB protected", £8.82 a month. Ticking /Photo shoots gives "1.69 TB protected", £33.12. 5. Restore: a done state "Restored to Tue 28 Oct, 14:00", path, a full 6px meter, and three stats (14,382 files, 41.7 GB, 6m 12s). "Run the restore again" refills the meter from 0 over 2400ms (expo-out), the status reads "Restoring 14,382 files" and the button is disabled until it finishes. 6. Footer hairline with company and proof line. ## Structure ``` 1280 × 800 ┌──────────────────────── wrap 1200 max, padding 64 / 44 / 48 ─────────────────────────┐ │ Off-site backups for the office, [Back up 1 TB free] 14 days… │ │ set up before the kettle boils. (52px, 700) │ │━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1px ink ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━│ │ █ Install │ ██ Choose │ ███ Restore │ │ █ About 2 minutes │ █ About 1 minute │ █ When the worst happens │ │ █ One command… │ █ Tick the folders… │ ███ Pick a folder… │ │┌terminal──────────┐ │┌form───────────────┐ │┌result────────────────┐ │ ││ $ sudo sh … │ ││ ☑ /Clients 412 GB │ ││ ✓ Restored to Tue… │ ← card overlaps │ ││ Linked to fra-02 │ ││ Keep versions [90]│ ││ meter · 3 stats │ numeral by 30 │ │└──────────────────┘ ││ 450 GB £8.82 │ │└──────────────────────┘ │ │ │└───────────────────┘ │ │ │ footer: Fernhill Backup Ltd, Bristol… 2,310 offices restored… │ └───────────────────────────────────────────────────────────────────────────────────────┘ columns 1fr ×3 · inner padding 28 either side of each vertical rule ``` - `
` → `.head` (`

` + `.cta`), `
    ` of three `
  1. `, `.foot`. - Each `
  2. `: `.top` grid (`auto 1fr`, gap 18) holding `