Deductible Slider FAQ Block for React

Edit STOPS at the top of the file: each stop has a deductibleCents and a premiumCents for a month, lowest deductible first. The slider's range, the tick labels, both bars and the saving line follow the table. CLAIMS_WITH_DEDUCTIBLE sets how many claims in a year carry the deductible, which is also how the second bar, the most you pay in a year, is worked out. The answers quote the same constants.

Each bar is a share of its own largest stop, so the premium bar is full at the lowest deductible and the other is full at the highest. The width is a CSS variable set from a helper, and it eases over 300 milliseconds, or jumps with reduced motion. The bars are decorative: the figures beside them are text, and the slider announces each stop as "$500 deductible".

Amounts come from one Intl.NumberFormat for US dollars and sit in dir="ltr" spans, so "$2,500" keeps its order in right-to-left layouts, and the bars read from the same side in every direction. The chevron at the start of each question points toward the reading direction.

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

The slider is a single control: the arrow keys move it one stop, Home and End jump to the ends, and the saving line under it is a polite status that is read out as the stop changes. The four amounts under it are buttons that jump to a stop. Each question is a button inside its own h3 under the section's h2.

Below the md breakpoint the card stacks: the slider with its four amounts first, then the two bars. The saving line keeps room for two lines, so moving the slider never shifts the questions below, and the first question starts well inside the first screen. Nothing scrolls sideways at 320 pixels.