AI answer from Sonnet 5.5 · low effort · 2 Oct 2026
9 of 9
Show the code and the answer.
Yearly prices are 10 × monthly (two months free): Starter $90, Pro $190, Team $490.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Brindlebill – Invoicing for freelancers</title>
<meta name="description" content="Brindlebill is simple invoicing for freelancers. Send invoices, chase payments gently, and get paid by card or bank.">
<style>
:root {
--ink: #1d2433;
--muted: #4b5563;
--bg: #fbf9f4;
--card: #ffffff;
--line: #e2ddd0;
--accent: #1f6f5c;
--accent-dark: #175647;
--accent-soft: #e3f1ec;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
}
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }
section { padding: 3rem 0; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-size: clamp(2rem, 7vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2rem); text-align: center; margin-bottom: 1.5rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--accent); padding: 1.25rem 0 0; }
.hero { text-align: center; padding: 3rem 0 3.5rem; }
.pitch { font-size: 1.25rem; color: var(--muted); max-width: 36rem; margin: 0 auto 1.75rem; }
.btn {
display: inline-block;
background: var(--accent);
color: #fff;
font: inherit;
font-weight: 700;
text-decoration: none;
padding: .85rem 1.75rem;
min-height: 44px;
border: 0;
border-radius: .6rem;
cursor: pointer;
}
.btn:hover { background: var(--accent-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #f0a500; outline-offset: 2px; }
.grid { display: grid; gap: 1rem; }
.features { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: .8rem;
padding: 1.5rem;
}
.card p:last-child { margin-bottom: 0; }
.toggle {
display: flex;
justify-content: center;
gap: .25rem;
background: var(--accent-soft);
border-radius: 999px;
padding: .25rem;
width: fit-content;
margin: 0 auto 1.5rem;
}
.toggle button {
font: inherit;
font-weight: 600;
color: var(--ink);
background: transparent;
border: 0;
border-radius: 999px;
padding: .5rem 1.25rem;
min-height: 44px;
cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.plans { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.plan h3 { margin-bottom: .25rem; }
.price { font-size: 2.25rem; font-weight: 800; margin: .5rem 0 0; line-height: 1.1; }
.period { color: var(--muted); margin-bottom: 1rem; }
.plan ul { padding-left: 1.25rem; margin: 0; }
.plan li { margin-bottom: .4rem; }
.plan.featured { border: 2px solid var(--accent); }
.note { text-align: center; color: var(--muted); min-height: 1.6em; }
.faq { max-width: 44rem; margin: 0 auto; }
details {
background: var(--card);
border: 1px solid var(--line);
border-radius: .6rem;
margin-bottom: .75rem;
}
summary {
cursor: pointer;
font-weight: 600;
padding: 1rem 1.25rem;
min-height: 44px;
}
details p { padding: 0 1.25rem; margin: 0 0 1rem; }
.cta { text-align: center; }
footer { text-align: center; color: var(--muted); padding: 2rem 0; border-top: 1px solid var(--line); }
</style>
</head>
<body>
<header class="wrap"><div class="brand">Brindlebill</div></header>
<main>
<section class="hero wrap">
<h1>Invoicing that gets you paid.</h1>
<p class="pitch">Brindlebill helps freelancers send professional invoices and get paid on time, without the admin.</p>
<a class="btn" href="#signup">Start free trial</a>
</section>
<section class="wrap" aria-labelledby="features-h">
<h2 id="features-h">Why freelancers choose Brindlebill</h2>
<div class="grid features">
<div class="card">
<h3>Invoices in a minute</h3>
<p>Pick a client, add your line items and send a polished invoice before your coffee cools.</p>
</div>
<div class="card">
<h3>Gentle reminders</h3>
<p>Friendly nudges go out when an invoice is overdue, so you never have to chase awkwardly.</p>
</div>
<div class="card">
<h3>Card and bank payments</h3>
<p>Clients pay straight from the invoice by card or bank transfer, and you see it the moment it lands.</p>
</div>
</div>
</section>
<section class="wrap" aria-labelledby="pricing-h">
<h2 id="pricing-h">Pricing</h2>
<div class="toggle" role="group" aria-label="Billing period">
<button type="button" id="btn-monthly" aria-pressed="true">Monthly</button>
<button type="button" id="btn-yearly" aria-pressed="false">Yearly</button>
</div>
<p class="note" id="note" aria-live="polite">Billed monthly.</p>
<div class="grid plans">
<div class="card plan">
<h3>Starter</h3>
<p class="price"><span data-monthly="9" data-yearly="90">$9</span></p>
<p class="period" data-period>per month</p>
<ul>
<li>5 clients</li>
<li>PDF invoices</li>
</ul>
</div>
<div class="card plan featured">
<h3>Pro</h3>
<p class="price"><span data-monthly="19" data-yearly="190">$19</span></p>
<p class="period" data-period>per month</p>
<ul>
<li>Unlimited clients</li>
<li>Automatic reminders</li>
<li>Your own logo</li>
</ul>
</div>
<div class="card plan">
<h3>Team</h3>
<p class="price"><span data-monthly="49" data-yearly="490">$49</span></p>
<p class="period" data-period>per month</p>
<ul>
<li>Everything in Pro</li>
<li>5 seats</li>
<li>A shared client list</li>
</ul>
</div>
</div>
</section>
<section class="wrap" aria-labelledby="faq-h">
<h2 id="faq-h">Questions, answered</h2>
<div class="faq">
<details>
<summary>Can I cancel any time?</summary>
<p>Yes. Cancel from your account page and you won't be charged again. Nothing is locked in.</p>
</details>
<details>
<summary>Do my clients need an account?</summary>
<p>No. They open a link, see the invoice and pay. They never have to sign up.</p>
</details>
<details>
<summary>Which currencies can I invoice in?</summary>
<p>You can invoice in 30 currencies, and each invoice shows the amount in your client's currency.</p>
</details>
<details>
<summary>What happens when the free trial ends?</summary>
<p>You pick a plan. If you don't, your account switches to view-only and your invoices stay safe for 90 days.</p>
</details>
</div>
</section>
<section class="wrap cta" id="signup" aria-labelledby="cta-h">
<h2 id="cta-h">Ready when you are</h2>
<a class="btn" href="#signup">Start free trial</a>
</section>
</main>
<footer><div class="wrap">© Brindlebill</div></footer>
<script>
(function () {
var monthlyBtn = document.getElementById('btn-monthly');
var yearlyBtn = document.getElementById('btn-yearly');
var note = document.getElementById('note');
var prices = document.querySelectorAll('[data-monthly]');
var periods = document.querySelectorAll('[data-period]');
function setPeriod(yearly) {
monthlyBtn.setAttribute('aria-pressed', String(!yearly));
yearlyBtn.setAttribute('aria-pressed', String(yearly));
prices.forEach(function (el) {
el.textContent = '$' + (yearly ? el.dataset.yearly : el.dataset.monthly);
});
periods.forEach(function (el) {
el.textContent = yearly ? 'per year' : 'per month';
});
note.textContent = yearly ? 'Billed yearly. You get two months free.' : 'Billed monthly.';
}
monthlyBtn.addEventListener('click', function () { setPeriod(false); });
yearlyBtn.addEventListener('click', function () { setPeriod(true); });
})();
</script>
</body>
</html>Notes:
- Yearly prices are $90, $190 and $490, shown per year, with "per year" under each.
- The FAQ uses native
<details>, so it opens and closes without JavaScript and works with keyboards and screen readers. - Both "Start free trial" buttons link to
#signup. Point thehrefat your real sign-up URL when you have one. - The page uses a single
h1, withh2for sections andh3for features and plans. Body text is 16px or larger. - The feature sentences are my own wording, since you only gave titles. Edit them as you like.
- Floor2/2, 100% passed
- Middle4/4, 100% passed
- Top3/3, 100% passed
9 of 9 checks passedfloor 2/2, middle 4/4, top 3/3
- The page loads with no errors in the console
- Every section is there, with the exact plan names, prices and text
- No sideways scroll on a 375 px phone
- Nothing is loaded from outside the file
- One h1, no skipped heading levels, text 16 px or larger, enough contrast
- The page looks finished: clear hierarchy, pricing easy to compare, nothing broken
- Yearly shows $90, $190 and $490, and Monthly brings back $9, $19, $49
- Each FAQ question opens and closes from the keyboard
- Still no sideways scroll on a phone with Yearly on and every FAQ open
- Took 20 s.
- First words after 1.6 s.
- Wrote 3,835 tokens.
- 4.2¢ at API prices.
All numbers.
| Time to finish | 20 s |
|---|---|
| Time to first words | 1.6 s |
| Input tokens | 2 |
| Cached tokens | 1,275 |
| Output tokens | 3,835 |
| Thinking tokens | 0 |
| Words in the answer | 982 |
| Price at API rates | 4.2¢ |













