The live demo was built from exactly this text — nothing added.

# Mortgage Broker Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a polished one-page website for [BRAND], an invented mortgage brokerage led by the fictional [BROKER] in [LOCATION], serving [AUDIENCE]. The hero contains a working fixed-rate payment calculator initialized from [HOME_PRICE], not a static mockup. Shared calculator state drives a sample rate comparison, an annual principal-versus-interest amortization chart, and a complete accessible schedule. Four loan-type cards, four pre-approval steps, a portrait-led broker profile, a three-step application-start form, and five FAQs complete the page. Every rate and financial figure is illustrative and never an offer; the application draft stays in the browser and is never transmitted.

- Audience: [AUDIENCE] who want to understand a monthly payment and prepare for a broker conversation before sharing documents. They may be comparing down payments, trying to decode loan terminology, or wondering what pre-approval involves. Secondary visitors are independent brokers who need a trustworthy educational site rather than a generic lead-capture page.
- Goal: Let a visitor explore a realistic payment scenario without a credit check, understand how principal and interest change over time, and leave with a locally saved application-start draft. Trust must come from visible assumptions and useful explanations, not claims of guaranteed approval or lowest rates.
- Tone: Warm, precise, and unhurried. Use plain US English, short sentences, and specific examples. Explain necessary terms without condescension. Never use urgency, pressure, jargon-heavy sales copy, or homeownership clichés about dreams coming true.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource-variable/newsreader (OFL-1.1), @fontsource-variable/manrope (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. Deliver one standalone index.html at the project root with entry src/main.tsx; use section anchors, not a router.
  - In vite.config.ts set base './', plugins [react()], build.outDir 'dist', build.sourcemap false, and build.assetsInlineLimit 0. Do not copy src/ into dist/.
  - Use Tailwind 3.4 through PostCSS with content ['./index.html', './src/**/*.{ts,tsx}']. Add the Design colors as parchment, paper, ink, muted, pine, pinelight, sand, rule, and footer; add fontFamily display ['Newsreader Variable', 'Georgia', 'serif'] and sans ['Manrope Variable', 'system-ui', 'sans-serif']; add maxWidth container 1180px.
  - In src/fonts.ts import '@fontsource-variable/newsreader' and '@fontsource-variable/manrope'; import src/fonts.ts and src/index.css from src/main.tsx. Enable font-variant-numeric: tabular-nums on every amount, rate, table, and calculator result.
  - Put every headline, paragraph, label, sample rate, loan type, process step, FAQ, image path, and disclosure in typed src/content.ts, keyed by section. In src/lib/brand.ts derive brandSlug from [BRAND] by lowercasing and replacing each run of non-alphanumerics with '-'; use brandSlug only for localStorage key prefixes, never as an external service name.
  - Implement src/lib/mortgage.ts as pure tested-by-inspection functions with no financial library: loanAmount = price * (1 - downPercent / 100); r = annualRate / 100 / 12; n = years * 12; monthlyPayment = loanAmount === 0 ? 0 : r === 0 ? loanAmount / n : loanAmount * r * (1 + r)^n / ((1 + r)^n - 1). Generate monthly rows with interest = balance * r and principal = min(monthlyPayment - interest, balance), clamping the final balance to zero, then aggregate rows by year. Keep full precision internally and round only for display with Intl.NumberFormat('en-US', currency USD). Handle a zero-percent rate and reject negative or non-finite inputs.
  - Use a CalculatorProvider in src/state/CalculatorContext.tsx for { price, downPercent, annualRate, years }. Defaults are [HOME_PRICE] as a number, 20, 6.25, and 30. Price allows 25000–2000000 in 5000 steps, down payment 0–90 in 1 steps, rate 0–15 in 0.05 steps, and terms 30/20/15. Synchronize each range input with a labeled numeric input. Hero results, sample payments, chart, schedule, and application scenario must all derive from this one state.
  - Components in src/components/: Header.tsx, Reveal.tsx, Hero.tsx, PaymentCalculator.tsx, MoneyInput.tsx, RateTable.tsx, AmortizationChart.tsx (hand-rolled responsive SVG), YearlySchedule.tsx, LoanTypes.tsx, Process.tsx, BrokerProfile.tsx, ApplicationStarter.tsx, Faq.tsx, Footer.tsx, and Disclaimer.tsx. src/pages/Home.tsx composes them. src/lib/storage.ts wraps localStorage reads and writes in try/catch.
  - Before the first build, download the three generated images listed under Assets into public/images/ with curl -L -o using exactly those file names. The build and the running site must never fetch those source URLs.
  - Create public/favicon.svg from the code-drawn geometry under Assets. index.html has lang='en', meta theme-color '#F4F0E6', a local favicon link, and <title>[BRAND] — Mortgage guidance in [LOCATION]</title>. Do not add SEO metadata, analytics, or third-party tags.
  - Write ASSETS.md at the project root with every photo, font, and icon dependency as specified under Assets. Keep dist/ under 8 MB with only index.html, favicon.svg, hashed local JS/CSS, woff2 fonts, and the three local images.

## Variables
- [BRAND] — Brokerage brand (default: "Cedar & Slate Mortgage"). An invented brokerage name used in the wordmark, title, hero, profile, form, footer, and localStorage prefix. Never use a real lender or VibeFather.
- [BROKER] — Broker name (default: "Maya Chen"). The fictional broker's name. Use it in the profile, portrait alt text, form introduction, and footer; the generated portrait is a replaceable placeholder and never a real individual.
- [LOCATION] — Service location (default: "Bend, Oregon"). A city and state or region used in the eyebrow, title, profile, and footer. Adapt surrounding copy when it changes.
- [AUDIENCE] — Primary audience (default: "first-time home buyers"). A lowercase audience phrase that drives the hero, process examples, broker bio, and FAQs. Keep the same length and educational tone when changed.
- [HOME_PRICE] — Example home price (default: "420000"). Digits only, with no currency symbol. Initializes the calculator and example application scenario; derive the default 20% down payment and every displayed payment rather than hard-coding results.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/mortgage-broker-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Parchment `#F4F0E6` — Main page background and generous negative space.
- Paper `#FCFAF5` — Calculator, form, table, and profile card surfaces.
- Ink `#1E2924` — Headlines, primary body text, and dark icons.
- Muted `#667169` — Secondary copy, labels, captions, and assumptions; never use for text below 13px.
- Pine `#285844` — Primary buttons, links, selected controls, chart principal area, and focus rings.
- Pine Light `#DDE8DE` — Selected chips, calculator result wash, and soft section bands.
- Sand `#D7B98A` — Interest series in the amortization chart and small data highlights only.
- Rule `#D9D4C8` — One-pixel borders, table rules, input outlines, and chart grid lines.
- Footer `#1D332B` — Footer background with Paper text and Pine Light secondary text.

### Typography
- Display for H1, H2, H3, wordmark, and the large monthly payment: Newsreader Variable (OFL), weights 400/500/600
- Interface and body for navigation, labels, buttons, tables, disclosures, and form controls: Manrope Variable (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: 8px base unit. Centered container max-width 1180px with 40px desktop side padding, 28px tablet, and 20px below 640px; 12-column grid with 24px gutters. Header 72px. Hero padding 48px top and 80px bottom; other sections 96px desktop, 72px tablet, 56px mobile. H1 Newsreader 500, clamp(46px, 5.2vw, 68px), line-height 1.02, letter-spacing -0.035em; H2 clamp(34px, 3.6vw, 48px), line-height 1.08, letter-spacing -0.025em; H3 24px / 1.2; lead 18px / 1.65; body 16px / 1.7, max 65ch; labels 13px / 1.4 weight 700; eyebrows 11px uppercase, letter-spacing 0.17em. Calculator payment Newsreader 500, 52px, Pine. Buttons and inputs 48px minimum height; primary buttons Pine with Paper text, secondary buttons transparent with Ink 1px border. All interactive elements get a 2px Pine focus outline with 3px offset.
- Radius: 18px for major cards and photographs, 12px for inputs and small panels, 999px only for chips, segmented controls, and pills. Use 1px Rule borders and almost no shadow; only the hero calculator gets 0 18px 50px rgba(30,41,36,0.08).
- Motion: Use --ease-out cubic-bezier(0.22, 0.61, 0.36, 1) for entrances and --ease-io cubic-bezier(0.65, 0, 0.35, 1) for interface changes. Movement is functional and restrained.
- Motion: Reveal major section headers and cards from opacity 0 and translateY(16px) to rest over 600ms when 15% visible, once, with 70ms sibling stagger using Motion whileInView.
- Motion: Hero copy and photograph fade-rise in sequence; the calculator enters from translateY(12px) after 120ms. No parallax, cursor follower, autoplay carousel, or looping ambient animation.
- Motion: Calculator result numbers tween to updated values over 250ms with Motion animate, canceling the previous tween on new input. SVG chart paths update immediately and crossfade from 65% to 100% opacity over 180ms; never animate on every keystroke beyond these short transitions.
- Motion: Rate rows highlight with a Pine Light background over 150ms on hover; loan-card icons translate no more than 2px. Anchor scrolling uses smooth behavior only when reduced motion is not requested.
- Motion: Application steps crossfade and translateX(10px) over 220ms; validation errors appear without shaking. FAQ chevrons rotate 180 degrees over 180ms.
- Motion: For prefers-reduced-motion: reduce, disable reveals, smooth scrolling, number tweens, chart fades, and step transforms; show final values immediately while retaining color and border state changes.
- Imagery: Use exactly three warm editorial generated photographs with soft morning light, cream, cedar, pine, and sand tones. hero-home.webp is a spacious generic home exterior, never a landmark; broker-maya.webp is a medium working portrait of a fictional person not resembling any real individual, supplied as a replaceable placeholder for [BROKER]; planning-desk.webp is a people-free still life with blank papers. Apply 18px corners, object-fit cover, and the object-position specified under Assets. Do not put text or logos over faces. Draw the amortization chart, favicon, small step numerals, and UI ornaments in SVG/CSS. Use lucide-react icons at 1.6px stroke, never brand or government icons.

## Pages & Sections
### Brokerage, calculator and application start (`index.html`)
1. **Content, defaults and financial behavior** — Render all copy from src/content.ts for [BRAND] = Cedar & Slate Mortgage, [BROKER] = Maya Chen, [LOCATION] = Bend, Oregon, [AUDIENCE] = first-time home buyers, and [HOME_PRICE] = 420000. If any variable changes, rewrite every dependent headline, example, bio, FAQ, and alt text for the new values while retaining the section order, counts, layout, and design. Default calculator: price $420,000, down 20% ($84,000), loan $336,000, sample note rate 6.25%, 30 years; the correctly computed principal-and-interest payment is $2,069 per month and full-term interest is approximately $408,772. Never type those results as static copy: calculate them from state so alternate values work. Sample-rate roster, each using the current loan amount: 30-year fixed 6.25% / 30 years / default payment $2,069 / 'Same note rate for the full term'; 15-year fixed 5.70% / 15 years / default payment $2,781 / 'Higher payment, less total interest'; 7/6 ARM 5.80% initial / 30-year amortization / default initial payment $1,971 / 'Fixed for seven years, then adjusts every six months'; FHA 30-year 6.00% / 30 years / default P&I $2,014 / 'Mortgage insurance is not included'. Loan roster: Conventional, FHA, VA, USDA. Process roster: Share the outline; Verify the numbers; Compare written scenarios; Request the letter. FAQ count five. Application count three steps. Contact display is the reserved fictional number (555) 014-7286, with no real lender email or link.
   Layout: n/a
   Motion: n/a
2. **Header** — Left: an original code-drawn ledger-and-key mark beside [BRAND], linking ./index.html. Desktop nav: 'Sample rates' → ./index.html#rates, 'Amortization' → ./index.html#amortization, 'Loan options' → ./index.html#loans, 'Pre-approval' → ./index.html#process, 'Your broker' → ./index.html#broker. Right primary button 'Start an application' → ./index.html#apply. Below 820px show only the wordmark and a shorter 'Start' button; keep all other destinations available in the footer.
   Layout: Sticky top with z-index 30, 72px high, Parchment at 94% opacity with backdrop blur and a Rule bottom border. Wordmark stays on one line; nav uses Manrope 600 13px with 20px gaps.
   Motion: No hide-on-scroll. The active anchor link receives a small Pine underline; hover underlines draw over 180ms.
3. **Hero with working payment calculator** — Left eyebrow: 'MORTGAGE GUIDANCE · [LOCATION]'. H1: 'The numbers behind your next front door.' Lead: '[BRAND] helps [AUDIENCE] compare payments, understand loan options, and prepare for pre-approval—before committing to a lender.' Primary CTA 'Start an application' → #apply; secondary text link 'Explore loan options' → #loans. Under the CTAs place three compact reassurance lines with generic check icons: 'Example figures, clearly labeled', 'No credit check to calculate', 'Inputs stay in this browser'. Place hero-home.webp below those lines with caption 'A place to begin, not a property listing.' Right: PaymentCalculator titled 'Payment sketch' with a persistent Pine Light 'EXAMPLE · NOT A LOAN OFFER' badge. Inputs: Home price, Down payment (%), Sample note rate (%), Loan term segmented 30/20/15 years. Output label 'Estimated monthly principal & interest'; default $2,069. Supporting rows: 'Loan amount' $336,000 and 'Down payment' $84,000 by default. Caption: 'Principal and interest only. Taxes, homeowners insurance, HOA dues, and mortgage insurance are not included.' If down is below 20%, add 'Mortgage insurance may apply and is not included in this example.' Link 'See the yearly amortization' → #amortization.
   Layout: Parchment background. Desktop grid: left 5 columns, right 6 columns with one blank column gap; align starts. Left H1 max 560px, CTAs in a row, reassurance lines in a compact two-column wrap, home photo width 100% at 16:9 with minimum 170px height. Right Paper calculator card with 28px padding; two-column field grid except full-width result panel. At mobile stack copy, CTAs, reassurances, photo, then calculator; fields remain one column and the payment fits without clipping.
   Motion: Hero enters as described in Design. Every control updates all dependent figures immediately; result tween 250ms and selected term chip fill 150ms.
4. **Sample rate table** — Section id='rates'. Eyebrow 'SAMPLE RATE TABLE'; H2 'Compare the structure, not just the rate.' Intro: 'Four illustrative scenarios use the same loan amount so the trade-offs are easier to see. These are not live rates, offers, or commitments to lend.' Table columns: 'Loan type', 'Example note rate', 'Example monthly P&I', 'What changes'. Populate exactly the four-row roster from the content rules. Directly beneath repeat: 'Examples use your current calculator loan amount. Payments exclude taxes, insurance, HOA dues, mortgage insurance, points, and fees. The ARM payment is initial only and can change after the fixed period. Eligibility and actual terms depend on a lender.'
   Layout: Paper section with a bordered table, no outer floating card. Header row Pine Light, Manrope 700 12px uppercase; rows 64px minimum with Rule dividers and right-aligned tabular money. On mobile convert each row to a two-column labeled grid so no horizontal page overflow occurs. Disclosure max-width 80ch.
   Motion: Section reveal once. Row hover uses background color only; payments tween when loan amount changes.
5. **Amortization chart and yearly schedule** — Section id='amortization'. Eyebrow 'THE LONG VIEW'; H2 'Watch the balance shift, year by year.' Explain: 'Early payments send more toward interest. Over time, more of the same fixed principal-and-interest payment goes toward principal.' Summary chips: 'Principal' current loan amount, 'Interest if held to term' calculated schedule total, 'Term' selected years. Default chips read $336,000, approximately $408,772, and 30 years. AmortizationChart is a hand-rolled SVG stacked-area chart of annual payment composition: Sand interest at the bottom and Pine principal above it; x-axis Year 1 through selected term and y-axis annual principal-plus-interest dollars. Provide a visible legend and grid labels. Pointer hover or keyboard focus on a year updates a small detail card with that year's principal, interest, and ending balance. The identical data appears in YearlySchedule columns 'Year', 'Principal', 'Interest', 'Ending balance'; include every year, not only the first five. Wrap the table in an open-by-default <details> titled 'Yearly payment schedule'. State: 'Rounded for display. Assumes on-time payments, no extra payments, no rate changes, and no fees. Fixed-rate examples only; the separate ARM table row does not change this fixed-rate chart.'
   Layout: Parchment background. Chart and year-detail card occupy 8 and 4 columns; chart viewBox 0 0 760 360 with responsive width and 16:9-ish height, never canvas-only. Detail card is Paper with 20px padding. Schedule spans full width below, Paper surface, max-height 380px with internal vertical scroll and sticky header; mobile allows horizontal scrolling inside the table container only.
   Motion: Chart crossfades 180ms on input changes. Hover detail swaps instantly; no scroll-scrubbing. Reduced motion shows the final chart immediately.
6. **Loan types explained** — Section id='loans'. Eyebrow 'LOAN OPTIONS'; H2 'Four routes, explained without the alphabet soup.' Four cards: Conventional — 'A common fixed- or adjustable-rate option. Some eligible buyers can put less than 20% down; mortgage insurance may apply.' Ask about: 'How long would mortgage insurance remain?' FHA — 'A government-insured loan program with flexible qualification rules for eligible borrowers, plus upfront and ongoing mortgage insurance.' Ask about: 'What does mortgage insurance add to this scenario?' VA — 'A program for eligible service members, veterans, and some surviving spouses. Funding-fee and occupancy rules can apply.' Ask about: 'Am I exempt from the funding fee?' USDA — 'A program for eligible rural properties and qualifying households, with location and income limits.' Ask about: 'Does both the property and my household qualify?' Footer note: 'Program names describe general categories, not eligibility decisions. A lender verifies current requirements.' Use generic House, FileText, ShieldCheck, and MapPin line icons, never official seals.
   Layout: Paper background. Four cards in two-by-two grid with 24px gaps, 24px padding, icon top left, and 'Ask about' line separated by a Rule border. Desktop card heights match; mobile one column.
   Motion: Cards stagger 70ms on entry. No accordion and no auto-rotating content.
7. **Pre-approval steps** — Section id='process'. Eyebrow 'FROM QUESTIONS TO A LETTER'; H2 'Pre-approval, one understandable step at a time.' Four numbered steps: 01 'Share the outline' — 'Discuss your goal, approximate price range, down payment, and timing. A first conversation is not an approval.' 02 'Verify the numbers' — 'With your consent, a real intake process reviews income, assets, debts, identity, and credit. Common documents include pay stubs or business records, bank statements, and tax returns.' 03 'Compare written scenarios' — 'Review payment, cash to close, mortgage insurance, and rate-adjustment trade-offs before choosing a direction.' 04 'Request the letter' — 'After documentation and lender review, ask for a pre-approval letter with its amount and conditions. It is still not a final loan commitment.' Add a Pine Light side note: 'For [AUDIENCE], [BROKER] starts with a document list tailored to the scenario—not a generic demand for every file at once.'
   Layout: Parchment background with a vertical four-row timeline. Number column 72px wide, rule down the center, explanatory text max 62ch; side note spans columns 8–12 beside the first two steps on desktop and moves below on mobile.
   Motion: Steps reveal in order with 70ms stagger; timeline rule draws once over 600ms, disabled for reduced motion.
8. **Broker profile** — Section id='broker'. Left: broker-maya.webp with caption '[BROKER] · fictional broker portrait · replace with your own photo'. Right eyebrow 'YOUR BROKER'; H2 'A person to ask, not a pipeline to enter.' Bio: '[BROKER] is the invented broker behind [BRAND] in [LOCATION]. Her approach is simple: translate lender jargon, show the trade-offs, and leave enough room to think. With 12 years across mortgage operations and brokerage, she has learned that a useful first call starts with listening.' Three commitments: 'A payment range before a sales pitch', 'A written document list and closing-cost outline', 'A clear answer when a scenario is not a good fit'. Personal detail: 'Outside the office, she keeps a shelf of trail guides and a very patient sourdough starter.' Contact line: 'A fictional practice for demonstration · (555) 014-7286'. Adapt her bio and examples to [AUDIENCE] when variables change; never turn the invented history into a real credential or licensing claim.
   Layout: Paper background. Image spans 5 columns at 3:4, text spans 6 columns with one-column gap. Commitments are three border-top rows with small Pine check icons. Mobile image comes after the heading and before the bio, with a maximum height of 560px.
   Motion: Portrait and copy reveal once; no image zoom or face-following effect.
9. **Application start form** — Section id='apply'. Eyebrow 'A LOW-PRESSURE START'; H2 'Start with the shape of your plan.' Intro: 'Three short steps create a private draft in this browser. No Social Security number, bank details, document upload, credit pull, or lender submission.' Place planning-desk.webp above the form intro on the left. Right ApplicationStarter has a visible 'Step 1 of 3' indicator and three-step progress bar. Step 1 'Your goal': radio cards 'Buy a home', 'Refinance', 'Buy an investment property'; timeline chips 'Just exploring', 'Within 3–6 months', 'Ready to talk now'. Step 2 'Your scenario': property-use select 'Primary home', 'Second home', 'Investment'; price and down payment initialized from calculator state with editable synchronized values; preferred loan type select 'Not sure yet', 'Conventional', 'FHA', 'VA', 'USDA', 'Fixed or ARM guidance'. Step 3 'Your contact preferences': name, email, preferred contact 'Email', 'Phone', 'Either', and optional phone shown only when relevant; a required acknowledgment checkbox 'I understand this preview stores my draft only on this device and does not send it.' Validate each step inline and focus the first invalid field. Final button reads 'Save my draft', never Submit. Confirmation: 'Your draft is saved on this device. Nothing has been sent to [BRAND] or a lender.' Show a concise review of non-sensitive choices, an 'Edit my draft' button, and 'Clear this draft' with confirmation. Persist non-sensitive fields in localStorage under brandSlug + ':application-draft'; do not persist the phone field. No success animation implies an application was transmitted.
   Layout: Pine Light background. Left 5 columns contains intro and 4:3 planning photograph; right 6 columns contains a Paper form card with 28px padding, leaving one column gap. Progress has three equal segments. Radio cards are two columns desktop and one mobile. Buttons are Back secondary and Continue primary, aligned at the card bottom.
   Motion: Step content crossfades and shifts 10px over 220ms. Confirmation uses a static Check icon and 180ms fade only. Reduced motion removes all transforms.
10. **FAQ and footer** — Five FAQs in native buttons with keyboard-accessible accordion panels: 'Does using the calculator affect my credit?' → 'No. It is arithmetic in your browser. There is no credit pull, lender connection, or data transmission.' 'Are the rates available right now?' → 'No. Every rate is an invented example for comparing structures. Ask a lender for a current written quote and its assumptions.' 'How much down payment do I need?' → 'It depends on the program, property, and your eligibility. Less than 20% can be possible for some buyers, but mortgage insurance and other costs may change the comparison.' 'How does a mortgage broker get paid?' → 'Compensation can come from the borrower, the lender, or a combination depending on the arrangement. Ask for it in writing before proceeding.' 'What happens after I save this draft?' → 'Nothing leaves your device in this preview. A production brokerage would need a secure, compliant intake system before requesting real documents or sensitive information.' Footer on Footer color: [BRAND], 'Mortgage guidance for [AUDIENCE] in [LOCATION]', anchor links to Calculator, Rates, Loan options, Pre-approval, Broker, and Start, plus fictional phone (555) 014-7286. Bottom disclosure: 'All brands, people, rates, and figures shown are illustrative examples, not offers, approvals, or commitments to lend. Calculations exclude taxes, insurance, fees, and mortgage insurance unless explicitly stated. © [BRAND].' Include only the optional [CREDIT] link after that disclosure; no current year.
   Layout: FAQ section Paper, content max-width 820px with Rule row dividers and 20px vertical padding. Footer follows with three desktop columns, 64px padding, and a full-width disclosure separated by a translucent Paper rule. Mobile stacks links and keeps 16px minimum text.
   Motion: Only one FAQ needs to be open at a time; first item starts open. Chevron rotates 180ms and answer fades 160ms, both instant under reduced motion.

## Assets
- image: Three generated photos, each credited 'Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template'. Download with curl -L -o before building: https://media.vibefather.ai/assets/a4ca6feb-c9a2-4a50-a5a1-12ad817574bb/hero-home.webp → public/images/hero-home.webp, used in Hero at object-position 50% 58%, alt 'Sunlit cedar-sided home with a deep green front door'; https://media.vibefather.ai/assets/a4ca6feb-c9a2-4a50-a5a1-12ad817574bb/broker-maya.webp → public/images/broker-maya.webp, used in Broker profile at object-position 50% 35%, alt '[BROKER], a fictional mortgage broker, seated at a sunlit desk'; https://media.vibefather.ai/assets/a4ca6feb-c9a2-4a50-a5a1-12ad817574bb/planning-desk.webp → public/images/planning-desk.webp, used beside Application start at object-position 50% 50%, alt 'Blank planning papers, a pencil and keys on a light oak desk'. Store paths and rewritten alt text in src/content.ts; never hotlink the media URLs in the running site.
- image: Write ASSETS.md at the project root with columns path, source URL, author, license. Include one row per photo with its exact media.vibefather.ai source URL and author/license text 'Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template'. Add @fontsource-variable/newsreader and @fontsource-variable/manrope as OFL-1.1 and lucide-react as ISC. State that the broker is a fictional AI-generated person, not resembling any real individual, and the photo is a placeholder users may replace.
- icon: Use lucide-react only for ArrowRight, ArrowLeft, Check, Calculator, House, FileText, ShieldCheck, MapPin, KeyRound, ChevronDown, and Trash2. Stroke width 1.6, 18–22px, color inherits. No lender, card-network, government, social-media, or other brand icons. Create public/favicon.svg as original geometry: 32x32 rounded square filled Pine #285844, a Paper three-line ledger shape and a small Sand key circle; do not copy any existing logo.
- font: Install and self-host @fontsource-variable/newsreader and @fontsource-variable/manrope, imported in src/fonts.ts. Vite must emit the woff2 files locally into dist/. No Google Fonts or other font CDN.
- image: Draw the amortization areas, axes, legend marks, progress bar, ledger-and-key favicon, and step numbers in SVG/CSS. Use no chart image, map tile, placeholder-image service, additional bitmap, stock photograph, signature illustration, or recognizable landmark.

## Don'ts
- No backend, server code, API routes, database, authentication, external API calls, form transmission, document upload, or third-party service. Calculations run locally and the application draft stays on the device with explicit nothing-sent copy.
- Never request Social Security numbers, full bank details, credit-card data, identity documents, account passwords, or exact credit reports in this static demo. Do not claim an application was submitted, received, approved, or reviewed.
- Every rate, payment, interest total, and financial scenario must be visibly labeled as an example. Never present figures as live rates, personalized quotes, offers, guaranteed savings, eligibility decisions, pre-approvals, or commitments to lend.
- Use the exact amortization formula and zero-rate branch from Setup, preserve full precision until display, and handle invalid or extreme inputs without NaN, Infinity, negative balances, or console errors. Taxes, insurance, fees, and mortgage insurance must never be silently included.
- No real lender names, loan-product brands, lender logos, government seals, official-looking badges, certification marks, or implied institutional endorsement. Program names such as FHA, VA, and USDA may appear only as plain explanatory text.
- The broker, brokerage, testimonial-like statements, history, and phone number are invented. Never use a real person's identity or likeness; the portrait must remain a fictional generated placeholder not resembling any real individual.
- Do not copy any reference site's code, copy, prompt text, imagery, logo, custom font, signature illustration, unique iconography, or exact palette. Keep all site copy original US English.
- Self-host every font, image, icon, and script. No CDN script or link tags, Google Fonts, hotlinked media, analytics, tracking pixels, placeholder-image services, Unsplash, Pexels, Pixabay, CC BY-NC assets, or restricted UI source.
- Production must build with npm run build into minified dist/ under 8 MB, with no source maps and no src/ copied. Use Vite base './' and relative local asset paths; keep all three downloaded images in public/images/.
- This is one index.html page. Internal navigation uses ./index.html#section or local #section anchors only; no bare-directory links, router dependency, dead buttons, fake external lender links, or current-year/date display.
- Never mention VibeFather inside the site except the optional [CREDIT] footer link. Do not add SEO metadata, Open Graph tags, JSON-LD, keyword-stuffed headings, or content about the template's license, pricing, or audience numbers.
- Respect prefers-reduced-motion. Ensure 1440x900 desktop and 390x844 mobile layouts have no clipping or horizontal page overflow, all controls work by keyboard with visible focus, and the chart has both an accessible SVG label and the complete equivalent yearly table.
- Do not add theatrical motion, glassmorphism, gradients, glowing finance clichés, stock market tickers, countdowns, urgency banners, fake live activity, or decorative card grids that dilute the calculator and guidance.

---
— Prompt by VibeFather · https://vibefather.ai/t/mortgage-broker-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.