# Wrenboard startup website

## Reader and page job
Wrenboard is a fictional research tool for product managers.
Help a visitor decide whether to request access to its private beta.
This template is a project note, not a tool-specific file format.

## Facts and copy
The product groups interview notes by research question.
Use this h1: Keep interview notes beside the question.
Use this paragraph: Group notes by research question for your next review.
Use this main action: Request access
Link it to #access. This local sample does not collect submissions.
Use this access note: Ask the product owner for a beta invitation.
Do not invent prices, customer logos, testimonials or usage counts.

## Files and exact values
index.html contains the page. styles.css owns exact style values.
Use system-ui; do not fetch fonts or images.
Use --page, --ink, --muted, --action, --on-action and --focus from styles.css.
Use .button-primary for the main action; do not create a second button style.
Use --page-width and --gutter for the outer container.
If a required value is missing, name it before proposing an addition.

## Reading order and layout
Use a header with the Wrenboard name and a main element.
Inside main, use one h1, the product paragraph, the main action,
then an access section with id="access" and an h2 labelled Beta access.
Do not add feature cards, a pricing table or a second main action.
Keep the content in one column, with the title and paragraph left-aligned.

## Interaction and phone layout
Keep the link keyboard reachable and preserve its focus-visible outline.
The action's hover state uses --action-hover.
Allow text to wrap. Do not set a fixed content height.
At 390px and 1440px, keep the page inside the viewport.
Respect prefers-reduced-motion if motion is added later.

## Check after editing
Open the page at 390x844 and 1440x900.
Tab to Request access, follow it and confirm #access is reached.
Report the files read, changed files, widths checked and any failed check.