Annotated Invoice FAQ Block for React

Edit the constants at the top of the file: the seat price and count, the days in the cycle, the storage, the credit and the tax rate in basis points. LINES and the amounts are derived from them, and the answers quote them, so they never drift apart. Each entry in QUESTIONS names the invoice line it explains (line) and its number (n); the number appears on the question and on that line.

The open question's line decides which invoice row is ringed: the row gets a ring, a tint and a filled number, and the other rows turn muted. With every question closed nothing is ringed and the invoice reads normally. The ringed row also carries aria-current, so a screen reader can tell which line the open answer is about.

Money is formatted by one Intl.NumberFormat for US dollars, and each amount sits in its own dir="ltr" span so "-$9.00" keeps its order in right-to-left layouts. Prorating is rounded to a whole cent, and tax is rounded once on the subtotal, so the lines always add up to the total.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found". One answer is open at a time.

Each question is a button inside its own h3 under the section's h2; Tab moves between them and Enter or Space opens one. The invoice is a list named "Invoice lines" that a screen reader can read at any time, and its decorative numbers are hidden, since each answer names its line in words.

Below the lg breakpoint the title comes first, then the invoice, compact and without the sticky behaviour, and the questions follow, so the line that lights up is always on the screen with the question you opened. The visual order differs from the source order only for the invoice, which holds no controls. Nothing scrolls sideways at 320 pixels.