Each section is padding: 4px 0 with a 1px --gray-5 bottom rule, holding rows of min-height 32px laid out as Stack direction="row" justifyContent="space-between" alignItems="center". Header rows are h5 gray-0 and always visible; item rows are body4 gray-2 and appear only when open. Indentation is 16px and arrives two ways: .indented on a section's item rows, or an inline paddingLeft: 16 inside a subsection — the same value, declared twice. PaymentSummary drives every section from one shared open state, so "Review Details" expands the whole stack at once; the toggle appears both as a row inside any header that sets withToggleOpen and again at the bottom of the summary, both calling the same handler. A NestedSubsection is the exception: it owns its own open state behind "Show Breakdown", so taxes and fees stay collapsed while everything else is open. strikethrough applies to both the name and the value, and is how a superseded MSRP is shown.
PaymentSummary's own stylesheet is four one-line rules (flex-grow, an 8px list offset, a 16px row offset). The EditButton is not an edit affordance in the usual sense: it calls unlock on the desk, which requires verification when the deal has a dealId — showing "Please verify your account to view payment details" — and on success refreshes the deal, closes the Verification sub-tab if open, and resets the Finance stepper. It renders only in isPreview, with the retailing package, when isDeskUnlockDisabled is false and no unlock is in flight. The legal paragraph beneath is fixed copy in the component, body4 in --gray-3.
Worth stating plainly, because it is easy to assume otherwise: there is no blur here. The component replaces each value with a literal asterisk mask from const/placeholders.ts — $****, $**,***, $****.** /mo, ******** — while leaving every label real. The customer sees exactly which figures exist and that they are theirs, without seeing any of them; no CSS filter is involved, so nothing can be recovered by inspecting the DOM. (The widget's only blurs are Container's isBlurred and the VDP's 2px backdrop-filter — neither is used for gating.) Three types gate three surfaces: finance (Price, then a Divider, then Payment Method and Payment), tradeIn (Estimated Equity in gray-0 over Value and Loan Balance in gray-2), and appointments — a single row reading "Scheduled", the one case where the value is not masked, because the existence of an appointment is not sensitive. Every row is h6, making this the densest summary in the widget. "Log In to View" is an ActionText under a Divider at gap 16; it calls requireAuthentication and then opens the matching tab. It substitutes at six call sites: the finance, trade-in and appointment result screens, and the same three SubmitResult modules.