/* The close, start to finish (index.html .close-books). One fictional client's
   month with the bank statement on one side and the books on the other. Seven
   stops play in the centre in the order the work happens, each a compact copy
   of the real screen: the side panel's Notes and To-dos, Cleanup, Books
   review, the Reconcile helper, then the Advisor report and Mark sent. The
   lines each stop settles tick off on both sides; after the last the sides
   meet, the totals agree, the Sumlino mark is drawn, night falls and the
   closing line rises. feature-story.js sizes and places everything on resize
   and moves it with transform and opacity on scroll; this sheet draws the
   rest. Without the pinned scene (reduced motion) the stops are a still list. */
.close-books { --close-ink: #13233b; --close-muted: #5e7390; --close-line: #e3e9f2; --close-blue: #075cff; --close-good: #18794e; --close-ease: cubic-bezier(.22, 1, .36, 1); position: relative; width: 100%; }
.books-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.books-head .eyebrow { margin: 0; color: #5e7390; }
.books-client { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #e1e8f2, 0 14px 30px -22px #17345466; color: var(--close-ink); font-size: 13px; white-space: nowrap; }
.books-client > b { font-weight: 650; }
.books-client-mark { width: 22px; color: var(--character-ink); }
.books-client-mark svg, .rp-avatar svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The stops as a still list: reduced motion, or before the scene is scripted. */
.books-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; margin-top: 40px; }
.books-stops { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 28px; margin: 0; padding: 0; list-style: none; }
.books-stop { display: grid; justify-items: center; align-content: start; gap: 14px; }
.books-label { display: grid; justify-items: center; gap: 2px; margin: 0; text-align: center; }
.books-label small { color: var(--close-muted); font-size: 12px; font-weight: 650; letter-spacing: .3px; }
.books-label b { display: inline-flex; align-items: center; gap: 6px; color: var(--close-ink); font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.books-label em { padding: 1px 6px; border-radius: 4px; background: #e8eefb; color: #2f4f8f; font-size: 10.5px; font-style: normal; font-weight: 650; letter-spacing: 0; }
.books-ruler { display: none; }
.books-stops { order: -1; } .books-agree { order: 1; }
.books-agree { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; margin: 0; color: var(--close-ink); font-family: Geist, Inter, "Segoe UI", sans-serif; text-align: center; white-space: nowrap; }
.books-agree b { display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 4.5vw, 40px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.books-agree b > span, .books-agree em { display: inline-block; will-change: transform, opacity; }
.books-agree em { margin: 0 .35em; color: var(--close-blue); font-style: normal; }
.agree-note { color: var(--close-muted); font-size: 13px; font-weight: 600; will-change: transform, opacity; }
.books-mark { display: block; width: 92px; height: auto; margin: 56px auto 0; overflow: visible; }
.books-mark-fill { fill: #fff; } .books-mark-night { fill: #fff; opacity: 0; } .books-mark-stroke { fill: none; stroke: none; }
/* As a still list each card zooms down to its column on a small phone instead of widening the page or squeezing its rows; without zoom it scrolls inside its frame. */
.books-stop > * { min-width: 0; max-width: 100%; }
.close-scene:not(.is-scripted) .books-card { width: 100%; container-type: inline-size; }
.close-scene:not(.is-scripted) .rp { max-width: 100%; margin-inline: auto; overflow-x: auto; zoom: min(1, calc(100cqw / var(--rp-w))); }

/* ---- The two sides: the bank statement and the books ----------------------- */
.ledger { width: 100%; max-width: 360px; color: var(--close-ink); font-family: Geist, Inter, "Segoe UI", sans-serif; text-align: left; }
.ledger-bank { justify-self: end; } .ledger-books { justify-self: start; }
.ledger h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; white-space: nowrap; color: var(--close-muted); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.ledger h4 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--close-ink); font-size: 13px; font-weight: 650; letter-spacing: -.2px; text-transform: none; }
.ledger-sheet { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e1e8f2, 0 24px 50px -36px #17345466; }
.ledger-rows { margin: 0; padding: 0; list-style: none; }
.ledger-rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid #eef2f7; font-size: 12px; }
.ledger-rows li:first-child { border-top: 0; }
.ledger-rows li::before { content: ""; position: absolute; inset: 0; background: #fff8ea; opacity: var(--pending, 0); }
.ledger-rows li::after { content: ""; position: absolute; inset: 0; background: #e6efff; opacity: var(--flash, 0); }
.ledger-rows li > * { position: relative; }
.ledger-who { min-width: 0; }
.ledger-who b { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ledger-who small { position: relative; display: block; height: 14px; color: var(--close-muted); font-size: 11px; }
.ledger-who small > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ledger-to { color: #1d7a62; opacity: 0; }
.is-pending .ledger-from { color: #8a5a00; }
.ledger-amt { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.ledger-ok { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #20a582; opacity: 0; transform: scale(.6); }
.ledger-ok svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ledger-ok path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ledger-total { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 12px; border-top: 1.5px solid var(--close-ink); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ledger-swap { display: grid; } .ledger-swap > span { grid-area: 1 / 1; text-align: right; } .ledger-b { color: #1d6b55; opacity: 0; }

/* ---- The cards: compact copies of the real screens ---------------------- */
.rp { --rp-w: 340px; width: var(--rp-w); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #dfe7f1, 0 30px 60px -34px #17345466, 0 2px 6px #1734540d; color: var(--close-ink); font-family: Geist, Inter, "Segoe UI", sans-serif; font-size: 12.5px; line-height: 1.4; text-align: left; }
.rp b { font-weight: 600; }
.rp-check { position: relative; display: grid; flex: none; place-items: center; width: 17px; height: 17px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #b8c4d6; }
.rp-check::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--close-blue); opacity: 0; }
.rp-check svg, .rp-ok svg { position: relative; width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.rp-check.is-on::before, .rp-check.is-on svg, .is-done > .rp-check::before, .is-done > .rp-check svg { opacity: 1; }
.rp-ok { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #20a582; }
.rp-ok svg { opacity: 1; }
.rp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--close-blue); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rp-input { display: block; min-height: 30px; padding: 6px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px #cfd9e8; background: #fff; color: var(--close-ink); font-size: 12.5px; }
.rp-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--close-blue); opacity: 0; }
.rp-typed.is-typing::after { opacity: 1; }
.rp-swap { position: relative; display: grid; min-width: 0; }
.rp-swap > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-to { color: var(--close-good); opacity: 0; }

/* The side panel (Inter, like the extension). */
.rp-panel { --rp-w: 300px; padding: 0 0 12px; background: #f8fafd; font-family: Inter, "Segoe UI", sans-serif; }
.rp-top { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #e6ecf4; color: var(--close-blue); font-size: 15px; letter-spacing: -.3px; }
.rp-top b { font-weight: 700; }
.rp-client { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 9px 10px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #e1e8f2; }
.rp-client b { display: block; font-size: 13.5px; }
.rp-client small { display: flex; align-items: center; gap: 5px; color: #1d7a62; font-size: 11.5px; font-weight: 550; }
.rp-client small i { width: 6px; height: 6px; border-radius: 50%; background: #20a582; }
.rp-avatar { display: block; flex: none; width: 30px; padding: 5px 4px; border-radius: 8px; background: #eaf1ff; color: var(--character-ink); }
.rp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 12px 0; border-bottom: 1px solid #e1e8f2; color: #5e7390; font-size: 12.5px; text-align: center; }
.rp-tabs span { padding: 7px 0 8px; }
.rp-tabs .is-on { color: var(--close-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--close-blue); }
.rp-tabs em { margin-left: 3px; color: #8193ad; font-style: normal; font-weight: 500; }
.rp-compose { margin: 10px 12px 0; padding: 10px 11px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #e1e8f2; }
.rp-compose small { display: block; color: #3e5272; font-size: 11.5px; font-weight: 600; }
.rp-compose .rp-typed { min-height: 38px; margin: 6px 0 8px; color: var(--close-ink); font-size: 13px; }
.rp-compose-foot { display: flex; align-items: center; justify-content: space-between; color: #5e7390; font-size: 11.5px; }
.rp-saved { margin: 8px 12px 0; padding: 9px 11px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #e1e8f2; opacity: 0; }
.rp-saved small { color: #5e7390; font-size: 11px; }
.rp-saved p { margin: 3px 0 0; font-size: 12.5px; }
.rp-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 12px 14px 0; color: #3e5272; font-size: 11.5px; font-weight: 600; }
.rp-meter { position: relative; grid-column: 1 / -1; height: 4px; border-radius: 4px; background: #e3e9f2; overflow: hidden; }
.rp-meter i { position: absolute; inset: 0; border-radius: inherit; background: var(--close-blue); transform-origin: left; }
.rp-meter-a { transform: scaleX(.333); } .rp-meter-b { transform: scaleX(.667); opacity: 0; }
.rp-todos { margin: 10px 12px 0; padding: 0; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #e1e8f2; list-style: none; }
.rp-todos li { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; font-size: 12.5px; }
.rp-todos li + li { border-top: 1px solid #edf1f7; }
.rp-todos li > span:last-child { position: relative; }
.rp-todos .is-done > span:last-child { color: #8193ad; text-decoration: line-through; }
.rp-todo-new .rp-check::before, .rp-todo-new .rp-check svg { transition: opacity 150ms ease-out; }

/* Dashboard windows (Geist, like the dashboard). */
.rp-win { --rp-w: 440px; }
.rp-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-bottom: 1px solid #e6ecf4; background: #f6f8fb; color: #5e7390; font-size: 11.5px; }
.rp-dots { display: flex; gap: 5px; } .rp-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d7dfea; }
.rp-crumb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--close-ink); }
.rp-crumb span { margin: 0 4px; color: #a3b1c6; }
.rp-badge { padding: 2px 7px; border-radius: 5px; background: #fff4dd; color: #8a5a00; font-size: 10.5px; font-weight: 650; }
.rp-pane { padding: 14px 16px 16px; }
.rp-h { margin: 0 0 10px; font-size: 14px; font-weight: 650; letter-spacing: -.2px; }
.rp-pane-head { display: flex; align-items: baseline; justify-content: space-between; }
.rp-left { color: #5e7390; font-size: 12px; font-variant-numeric: tabular-nums; }
.rp-left b { color: var(--close-ink); }
.rp-table { border-radius: 10px; box-shadow: 0 0 0 1px #e3e8f0; overflow: hidden; }
.rp-tr { display: grid; grid-template-columns: 17px minmax(0, 1.2fr) minmax(0, 1fr) 64px; align-items: center; gap: 10px; padding: 8px 11px; border-top: 1px solid #edf1f7; }
.rp-th { border-top: 0; background: #f6f8fb; color: #5e7390; font-size: 11px; font-weight: 600; }
.rp-tr b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rp-amt { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.rp-apply { display: grid; grid-template-columns: 1fr 64px auto; align-items: center; gap: 8px; margin-top: 12px; color: #5e7390; font-size: 11.5px; }
.rp-apply .rp-input { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .5px; }
.rp-verified { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 10px; border-radius: 9px; background: #e9f7f0; color: #1d6b55; font-size: 12px; font-weight: 600; opacity: 0; }
.rp-bk { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid #edf1f7; }
.rp-bk b { display: block; margin-bottom: 4px; }
.rp-bk .rp-ok { opacity: 0; }
.rp-tag { justify-self: start; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.rp-tag[data-tone="warn"] { background: #fff1d6; color: #8a5a00; } .rp-tag[data-tone="info"] { background: #e6efff; color: #2453b3; } .rp-tag[data-tone="bad"] { background: #fde8e6; color: #a8321f; }
.rp-bk .rp-to { align-self: center; font-size: 11.5px; font-weight: 600; }
.rp-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; color: #8193ad; font-size: 11px; font-weight: 600; }
.rp-rail li { position: relative; padding-top: 9px; }
.rp-rail li::before, .rp-rail i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: #e3e9f2; }
.rp-rail i { background: var(--close-blue); transform-origin: left; transform: scaleX(0); }
.books-stop[data-stop="report"] .rp, .books-stop[data-stop="sent"] .rp { --rp-w: 460px; }
.rp-page { position: relative; margin: 0; aspect-ratio: 1056 / 816; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #e3e8f0; background: #fff; }
.rp-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rp-page .rf-live { position: absolute; inset: 0; }
.rp-page.is-live > img { visibility: hidden; }
.rp-note { margin: -4px 0 10px; color: #5e7390; font-size: 11.5px; }
.rp-field small { display: block; margin-bottom: 4px; color: #3e5272; font-size: 11.5px; font-weight: 600; }
.rp-send-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.rp-file { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rp-file img { width: 44px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px #e3e8f0; }
.rp-file b { display: block; font-size: 12px; } .rp-file small { color: #5e7390; font-size: 11px; }
.rp-send-btn { position: relative; display: grid; }
.rp-send-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; justify-content: center; }
.rp-send-btn svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rp-send-b { opacity: 0; }
.rp-send-fill { position: absolute; inset: 0; border-radius: inherit; background: #18794e; opacity: 0; }
.rp-send-btn > span { position: relative; }

/* The Reconcile stop: QuickBooks' Reconcile page with Sumlino's helper strip. */
.rp-recon { --rp-w: 470px; }
.rc-qbo { padding: 2px 7px; border-radius: 5px; background: #e6f2ea; color: #1d6b3f; font-size: 10.5px; font-weight: 650; }
.rc-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; color: var(--close-muted); font-size: 11px; }
.rc-top > span { padding: 8px 10px; border-radius: 9px; background: #f6f8fb; }
.rc-top b { display: block; margin-top: 2px; color: var(--close-ink); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.rc-top .rc-diffbox { background: #fff8ea; box-shadow: inset 0 0 0 1.5px #f0b453; }
.rc-diffbox b { color: #8a5a00; }
.rc-top .rc-diffbox.is-zero { background: #e9f7f0; box-shadow: inset 0 0 0 1.5px #20a582; } .rc-diffbox.is-zero b { color: #1d6b55; }
.rc-table .rp-tr { position: relative; grid-template-columns: 17px minmax(0, 1.5fr) minmax(0, .8fr) 70px; font-size: 12px; }
.rc-table .rp-tr::before { content: ""; position: absolute; inset: 0; background: #fff4dd; opacity: var(--hl, 0); pointer-events: none; }
.rc-table .rp-tr > * { position: relative; }
.rc-memo { color: var(--close-muted); font-size: 11.5px; }
.rc-old b, .rc-old .rc-memo { color: var(--close-muted); }
.rc-strip { margin-top: 12px; padding: 10px 12px 11px; border-radius: 11px; background: #f3f7ff; box-shadow: inset 0 0 0 1px #d8e5ff; opacity: 0; }
.rc-strip-head { display: flex; align-items: center; gap: 6px; color: var(--close-muted); font-size: 11px; }
.rc-strip-head b { margin-right: 4px; color: var(--close-blue); font-size: 12.5px; font-weight: 700; letter-spacing: -.2px; }
.rc-strip-head em { position: relative; display: grid; margin-left: auto; color: #3e5272; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.rc-strip-head em i { grid-area: 1 / 1; font-style: normal; white-space: nowrap; } .rc-counts-b { opacity: 0; }
.rc-clues { position: relative; display: grid; min-height: 44px; margin-top: 8px; }
.rc-clue { grid-area: 1 / 1; display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #e1e8f2; color: #3e5272; font-size: 11.5px; line-height: 1.4; opacity: 0; }
.rc-clue b { color: var(--close-ink); font-size: 12px; }
.rc-fu { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: #3e5272; font-size: 11.5px; opacity: 0; }
.rc-fu b { color: var(--close-ink); }
.rc-fu-btn { position: relative; display: grid; overflow: hidden; }
.rc-fu-btn > span { position: relative; grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.rc-fu-btn svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rc-fu-fill { position: absolute; inset: 0; background: #20a582; opacity: 0; }
.rc-fu-b { opacity: 0; }
/* Still list: every card and both sides show their finished state. */
.close-scene:not(.is-scripted) :is(.rp-saved, .rp-to, .rp-verified, .rp-bk .rp-ok, .rp-meter-b, .rp-send-b, .rp-send-fill, .rc-strip, .rc-clue-b, .rc-fu, .rc-fu-b, .rc-fu-fill, .rc-counts-b, .ledger-to, .ledger-b) { opacity: 1; }
.close-scene:not(.is-scripted) :is(.rp-from, .rp-send-a, .rc-clue-a, .rc-fu-a, .rc-counts-a, .ledger-from, .ledger-a) { opacity: 0; }
.close-scene:not(.is-scripted) .ledger-ok { opacity: 1; transform: none; }
.close-scene:not(.is-scripted) .ledger-ok path { stroke-dashoffset: 0; }
.close-scene:not(.is-scripted) .rp-rail i { transform: none; }
.close-scene:not(.is-scripted) :is(.books-stops, .books-agree) { color: #fff; }
.close-scene:not(.is-scripted) :is(.books-label small, .books-head .eyebrow, .ledger h4, .books-agree span) { color: #8fa6cf; }
.close-scene:not(.is-scripted) :is(.books-label b, .ledger h4 b) { color: #fff; }

/* ---- The pinned scene ---------------------------------------------------- */
.close-scene.is-scripted .close-books { position: absolute; inset: var(--close-top, 72px) calc((100% - 100vw) / 2) 0; width: auto; overflow: hidden; }
.close-scene.is-scripted .books-head { position: absolute; left: 0; right: 0; top: clamp(18px, 4vh, 40px); will-change: opacity; }
.close-scene.is-scripted .books-view { position: absolute; inset: 0; display: block; margin: 0; }
.close-scene.is-scripted .books-stops { display: block; }
.close-scene.is-scripted .books-stop { position: absolute; left: 50%; top: var(--stop-y, 50%); z-index: 3; display: block; width: var(--w, 300px); height: var(--h, 300px); margin: calc(var(--h, 300px) / -2) 0 0 calc(var(--w, 300px) / -2); opacity: 0; will-change: transform, opacity; }
.close-scene.is-scripted .books-label { position: absolute; left: 50%; bottom: calc(100% + 12px); display: flex; align-items: baseline; gap: 8px; transform: translateX(-50%); white-space: nowrap; }
.close-scene.is-scripted .books-label small { display: none; }
.close-scene.is-scripted .books-card { position: absolute; left: 0; top: 0; }
.close-scene.is-scripted .books-card .rp { transform: scale(var(--fit, 1)); transform-origin: 0 0; }
.close-scene.is-scripted .ledger { position: absolute; top: var(--stop-y, 50%); z-index: 2; width: var(--ledger-w, 300px); max-width: none; transform: translateY(-50%); opacity: 0; will-change: transform, opacity; }
.close-scene.is-scripted .ledger-bank { right: calc(50% + var(--ledger-gap, 330px)); }
.close-scene.is-scripted .ledger-books { left: calc(50% + var(--ledger-gap, 330px)); }
/* The month ruler: one mark per stop, dated by the visitor's clock; the head rides it as the month passes. */
.close-scene.is-scripted .books-ruler { position: absolute; left: 50%; top: var(--ruler-y, 80%); z-index: 2; display: block; width: var(--ruler-w, 560px); height: 34px; margin-left: calc(var(--ruler-w, 560px) / -2); will-change: transform, opacity; }
.ruler-track { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: #dbe3ee; transform-origin: 50% 50%; }
.ruler-done { position: absolute; inset: 0; border-radius: inherit; background: var(--close-blue); transform: scaleX(0); transform-origin: left; }
.ruler-head { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--close-blue); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #c7d7f5; will-change: transform; }
.ruler-marks { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 0; list-style: none; }
.ruler-marks li { position: absolute; left: calc(var(--i, 0) * 100% / var(--n, 6)); top: 0; display: grid; justify-items: center; gap: 9px; transform: translateX(-50%); }
.ruler-marks i { width: 6px; height: 6px; margin-top: -2px; border-radius: 50%; background: #c9d5e6; transition: background var(--duration-fast, 200ms) var(--close-ease); }
.ruler-marks small { color: var(--close-muted); font-size: 11px; font-weight: 650; letter-spacing: .2px; white-space: nowrap; transition: color var(--duration-fast, 200ms) var(--close-ease); }
.ruler-marks li.is-passed i { background: var(--close-blue); }
.ruler-marks li.is-passed small { color: var(--close-ink); }
.close-scene.is-scripted .books-agree { position: absolute; left: 50%; top: var(--mark-y, 50%); z-index: 4; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.close-scene.is-scripted .books-mark { position: absolute; left: 50%; top: var(--mark-y, 42%); z-index: 5; width: var(--mark-w, 150px); margin: 0 0 0 calc(var(--mark-w, 150px) / -2); transform: translateY(-50%); opacity: 0; will-change: transform, opacity; }
.close-scene.is-scripted .books-mark-fill { fill: var(--close-blue); opacity: 0; }
.close-scene.is-scripted .books-mark-stroke { stroke: var(--close-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.close-scene.is-scripted .books-mark-stroke path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.close-scene.is-scripted.is-night .books-head .eyebrow { color: #8fa6cf; }
/* Narrow screens: the two sides stand as two totals under the heading, and the cards take the width. */
@media (max-width: 999px) {
  .close-scene.is-scripted .ledger { top: var(--chip-y, 96px); width: calc(50% - 22px); transform: none; }
  .close-scene.is-scripted .ledger-bank { right: auto; left: 16px; }
  .close-scene.is-scripted .ledger-books { left: auto; right: 16px; }
  .close-scene.is-scripted :is(.ledger-rows, .ledger h4 b) { display: none; }
  .close-scene.is-scripted .ledger h4 { margin-bottom: 6px; }
  .close-scene.is-scripted .ledger-total { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-top: 0; font-size: 12px; }
  .close-scene.is-scripted .ledger-total > span:first-child { color: var(--close-muted); font-size: 11px; font-weight: 600; }
  .close-scene.is-scripted .ledger-total .ledger-amt { font-size: 15px; }
  .ruler-marks small { font-size: 10px; }
}
@media (max-width: 760px) {
  .books-client { gap: 9px; padding-right: 12px; font-size: 12px; }
  .books-agree em { margin: 0 .25em; }
}
@media (max-width: 620px) {
  .books-view { grid-template-columns: minmax(0, 1fr); }
  .ledger-bank, .ledger-books { justify-self: center; }
}
/* In the pinned scene feature-story.js places the closing line (--finale-top)
   so the landed mark fits above it and the cast below. */
.close-scene.is-scripted .brand-finale { align-self: start; margin-top: var(--finale-top, 24vh); padding-top: 0; padding-bottom: 0; }
.close-scene.is-scripted .close-cast { bottom: max(24px, 6vh); bottom: max(24px, 6svh); }
@media (max-height: 700px) { .close-scene.is-scripted .close-cast { bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .ruler-marks i, .ruler-marks small { transition: none; } }