Ledgerly SaaS Landing Page

Build a "Ledgerly SaaS Landing Page" React component.

CONCEPT: A landing page for a bookkeeping SaaS for freelancers and small studios. It must show the actual product in the first screen and convert to a free trial.

LAYOUT & CONTENT:
- Nav: logo 'Ledgerly', links Product / Pricing / Customers / Docs, 'Sign in' text and red 'Start free' button.
- Hero: headline 'Books that close themselves.' left; right a product card showing this month's income, expenses, a bar chart and 4 transactions, with a 'Close October' button and an 'x of 4 matched' status.
- Logo strip: 'Closing their books with Ledgerly this month' with 6 wordmarks (no invented customer counts).
- Features: 'Everything a month-end needs.' A list of six features (bank sync, invoices, VAT, receipts, reports, accountant access) beside a grey stage that shows a small live vignette for the selected one in a bordered card with a 12px hard shadow.
- Pricing: Monthly/Yearly toggle, three plans (Solo $12, Studio $29, Agency $79) with the middle one highlighted.
- FAQ: four questions in an accordion.
- CTA: full-width black band 'Close this month in 10 minutes.' and the trial button; footer with columns.

INTERACTIONS & MOTION:
- Hero bars grow from 0 with 60ms stagger; transactions slide in from the right one by one.
- Income figure counts up with a spring.
- 'Close October' matches transactions every 380ms: each row's check pops in (spring 500/18) and a one-line explanation ('Receipt found in Gmail') expands under it; at the end the status reads 'October closed. VAT drafted.' and the button offers 'Reopen'.
- Feature list: hover, focus or click selects a row, a red bar slides to it (layoutId), its description expands and the vignette swaps (enter 0.3s from 14px, exit 0.12s).
- Pricing numbers flip vertically when the billing period changes; FAQ height animates.

DESIGN SYSTEM — Swiss International (product edition):
- White #FFFFFF, ink #0B0B0C, grey #6B6B70, hairline #E6E6E8, one signal red #E30613 for emphasis and the primary button.
- Strict 12-column grid, bold grotesk (Inter Tight 700/800) with tight tracking, numbers as graphics.
- Product UI shown as real-looking cards with tabular numbers (IBM Plex Mono for figures).

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.