PaymentOptions — Figma calls it the Matrix — is a 2×2 grid of 92px rows at a 16px gap, and it is position: fixed. The source comment says why: "Fixed position styles to prevent overflow clipping", because the checked cell's 32px glow would be cut off by the scrolling step content. The cost is that it takes no flow space, so the calculator reserves 200px after it — two 92px rows plus the gap — as either margin-top on the trade-in row or padding-top on the disclaimer, both carrying their own source comments. Width is calc(100% − 32px) capped at calc(488px − 32px), i.e. the tray minus its body padding, computed rather than inherited because a fixed element has no containing block here. The specimens above pass a twin-only staticPosition, since a card cannot show a fixed element in place.

Unchecked is white with a --gray-6 border at a 10px radius (off the 3/5/7/15 scale). Checked changes register entirely: type h4 → h3, every colour to white, and the cell takes radial-gradient(100% 685.61% at 100% 52.63%, #007aff, #3f9bff 45.83%, #005abd) over a flat #e5f2ff, with a 0 0 32px #007affcc glow and z-index 1 so the glow sits above its neighbours. A locked deal uses the same geometry with a green family — #34c759 / #24eb56 / #00ac2b and a #34c759cc glow. None of those eight hexes is a token: this is the same off-token blue family already recorded for ValueBox, the date day buttons and the sliders, plus a green sibling. Tokenisation candidate; mirrored as written. The 92px height carries the comment "this height determines fixed position matrix height", and the term label is nudged top: 10px so it sits on the price's baseline.

Each digit is a column of 0..n stacked vertically and translated up by 28px per row over 0.5s ease-out — so every digit arrives at the same moment regardless of how far it travels, and the price appears to roll. The row is height: 28px; line-height: 28px with a source comment reading "Don't remove - fixes height of animated text", plus font-variant-numeric: tabular-nums so the width does not shift. The digit height is hard-coded to 28 in the tsx, not derived from the type. A paymentRange renders a second counter so the cell reads "$505-$531". Separators are recovered by diffing the localised string against the raw digits.

The Option shell — white, 7px radius, --gray-6 border, 0 16px padding, gap 2 — is the only consumer of --payment-option-height, because the matrix writes its grid rows as literal 92px rather than through the variable. Loading fills it with three Skeletons at exactly 24px, 16×83px and 16×50px. Contact replaces a null result with an h6 gray-2 line and a "Contact Dealership" ActionText; its text is currently the literal "Term unavailable", and the source carries a TODO saying the design wants the term number there but the backend does not yet return it on a null result. Cash expects exactly one result in first position and renders nothing for the others.

The range input runs 0-100 and maps onto 300-850 through the five-band table, so each band gets equal travel — dragging across "Poor" (280 points wide) covers the same distance as "Excellent" (50). The band bar is both legend and scale: five flex-1 segments, 24px tall, each taking its own foreground and background from CreditScoreBands (indigo, red, orange, blue, green — the only use of the indigo tokens in the widget), with borders collapsed by zeroing border-right except on the last and 5px radius on the outer corners only. Each band also carries an apr (19 / 14 / 9 / 6 / 4.5) and an estimate, so a band alone is enough to desk a payment. The whole holder is half-opacity and inert below 300 — the pre-entry state, not a disabled one. The track is an inline linear-gradient split at the progress percentage; the 36px thumb has a 5px white border and its outline and focus glow are raw #007AFF80 and #007aff, off-token again. The value label is hidden until hover or focus and is positioned by calc(-1px + progress × (100% − 36px) / 100), where 36px is the thumb and the −1px is its outline.

DeskingStatus is a centred column at gap 16 and 16px padding: an h3 gray-0 title over a body1 gray-2 subtitle, with the copy coming from DESKING_RESULTS_ERRORS keyed by preview/full and then by status. A server-provided errorMessage is rendered between them for the error and unavailable cases. The pendingError status is different in kind — it returns a ScreenLoader with the title as its text, so a pending failure still reads as loading. On error the step's CTA becomes "Contact Us" and opens the dealer's contact page instead of advancing. PriceSticker's entire stylesheet is margin-bottom: 16px; it is body1 gray-0 over body4 gray-2, and the source notes it is not yet configured for desk previews.