/* Website illustrations reuse the extension's character painter and motion tokens. */
.story-beats button { border: 0; padding: 5px 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.story-beats button:focus-visible { outline: 2px solid #075cff; outline-offset: 4px; border-radius: 3px; }
.profile-avatar-stack { position: relative; display: grid; width: 51px; height: 51px; flex: none; }
.profile-avatar-stack .story-character { grid-area: 1/1; width: 100%; padding: 10px; border-radius: 13px; background: var(--avatar-color); transition: opacity var(--icon-swap-dur),transform var(--icon-swap-dur) var(--icon-swap-ease); }
.profile-after { opacity: 0; transform: scale(.8); }
.profile-edit { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; background: #075cff; color: #fff; border: 2px solid #fff; border-radius: 50%; font: normal 12px sans-serif; }
.profile-picker { padding: 17px; border: 1px solid #dce6f5; border-radius: 15px; background: #fff; box-shadow: 0 12px 30px #183e7510; transform-origin: 24px 0; transition: opacity var(--dropdown-open-dur),transform var(--dropdown-open-dur) var(--dropdown-ease); }
.profile-picker header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; font-size: 12px; color: #314b6f; }
.profile-picker header strong { font-weight: 550; }
.profile-picker header > span { color: #8194ad; font-size: 17px; }
.profile-palette { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.profile-palette > span { display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; padding: 8px; transition: background var(--duration-fast),border-color var(--duration-fast),transform var(--duration-fast) var(--ease-bounce); }
.profile-palette .story-character { width: 36px; }
.profile-chapter[data-beat="0"] [data-profile-option="cobalt"] { border-color: #9bbdff; background: #eaf1ff; }
.profile-chapter[data-beat="1"] [data-profile-option="mint"],.profile-chapter[data-beat="2"] [data-profile-option="mint"] { border-color: #6bb7a6; background: #e4f4ed; transform: scale(1.05); }
.profile-palette > span:nth-child(2n) .client-character-eyes { animation-delay: -1.7s; }
.profile-palette > span:nth-child(3n) .client-character-eyes { animation-delay: -3.2s; }
.profile-motion { display: flex; justify-content: space-between; align-items: center; margin-block: 15px; color: #667d99; font-size: 10px; }
.profile-motion > i { width: 25px; height: 15px; padding: 3px; background: #075cff; border-radius: 20px; }
.profile-motion > i::after { content: ''; display: block; width: 9px; height: 9px; margin-left: auto; background: #fff; border-radius: 50%; }
.profile-save { display: flex; justify-content: space-between; background: #075cff; border-radius: 8px; padding: 10px 13px; color: #fff; font-size: 11px; }
.profile-saved { position: absolute; inset: 183px 22px auto; display: grid; justify-items: center; text-align: center; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity var(--duration-slow),transform var(--duration-slow) var(--ease-smooth-out); }
.profile-saved > .story-character { width: 82px; padding: 16px; margin-bottom: 20px; border-radius: 23px; background: var(--avatar-color); }
.profile-saved strong { color: #274b41; font-size: 20px; letter-spacing: -.5px; font-weight: 550; }
.profile-saved p { color: #738a84; font-size: 11px; margin: 10px 0 18px; }
.profile-saved > div { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #31846e; }
.profile-saved i { font-style: normal; }
.profile-chapter[data-beat="2"] .profile-picker { opacity: 0; transform: translateY(-4px) scale(var(--dropdown-closing-scale)); transition-duration: var(--dropdown-close-dur); }
.profile-chapter[data-beat="2"] .profile-saved { opacity: 1; transform: none; }
.profile-chapter[data-beat="2"] .profile-before { opacity: 0; transform: scale(.8); }
.profile-chapter[data-beat="2"] .profile-after { opacity: 1; transform: none; }

.workflow-section { padding-top: 72px; border-top: 1px solid #e1e9f4; }
.workflow-section .section-heading { margin-bottom: 65px; }
.workflow-story { margin-bottom: 35px; }
.workflow-scope { display: block; color: #7b8fa5; font-size: 11px; line-height: 1.6; max-width: 300px; }
.workflow-app { padding: 0 22px 18px; background: #fff; }
.workflow-browser { display: flex; gap: 16px; align-items: center; height: 35px; margin: 0 -22px 22px; padding: 0 17px; border-bottom: 1px solid #e6ecf4; background: #f6f8fb; }
.workflow-browser > span { font-size: 8px; color: #c6d2e1; letter-spacing: 2px; }
.workflow-browser small { font-size: 9px; color: #657182; }
.workflow-page-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; gap: 10px; }
.workflow-page-title > span { display: grid; gap: 9px; }
.workflow-page-title small { color: #627086; font-size: 8px; letter-spacing: .8px; }
.workflow-page-title strong { font-size: 18px; font-weight: 550; letter-spacing: -.5px; color: #314966; }
.workflow-page-title > i { color: #657181; font-size: 9px; font-style: normal; text-align: right; }
.workflow-helper { padding: 12px; border: 1px solid #d6e4ff; border-radius: 11px; background: #f7faff; }
.workflow-helper-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workflow-helper-brand .story-wordmark { font-size: 14px; letter-spacing: -.5px; gap: 5px; }
.workflow-helper-brand .story-character { width: 20px; }
.workflow-helper-brand > small { color: #59759d; font-size: 9px; }
.workflow-search { display: flex; align-items: center; gap: 8px; margin-top: 10px; border: 1px solid #bcd1fa; border-radius: 7px; background: #fff; padding: 8px 10px; font-size: 12px; color: #385b86; }
.workflow-search > span { color: #7398cf; font-size: 16px; }
.workflow-search b { font-weight: 500; }
.workflow-search i { font-size: 9px; font-style: normal; margin-left: auto; color: #96a5b9; }
.feed-match { display: flex; justify-content: space-between; margin-top: 10px; font-size: 9px; color: #6985a9; opacity: 0; transform: translateY(4px); transition: opacity var(--duration-fast),transform var(--duration-fast) var(--ease-smooth-out); }
.feed-match b { font-weight: 550; color: #305b94; }
.feed-match i { color: #075cff; font-style: normal; }
.feed-chapter:not([data-beat="0"]) .feed-match { opacity: 1; transform: none; }
.workflow-table-head { display: flex; justify-content: space-between; margin-top: 22px; padding: 0 8px 9px; border-bottom: 1px solid #e9edf5; font-size: 9px; color: #66788f; }
.workflow-row { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 8px; border-bottom: 1px solid #edf1f6; border-radius: 6px; color: #5f7590; font-size: 11px; transition: opacity var(--duration-fast),background var(--duration-fast),box-shadow var(--duration-fast); }
.workflow-row > span { display: flex; gap: 16px; align-items: center; }
.workflow-row small { font-size: 8px; color: #96a5b8; }
.workflow-row b { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.feed-chapter:not([data-beat="0"]) .muted-row { opacity: .38; }
.feed-chapter[data-beat="2"] .located-row { box-shadow: 0 0 0 2px #81abff; background: #f0f5ff; color: #285699; }
.row-locator { position: absolute; bottom: -8px; right: 10px; padding: 3px 5px; border-radius: 3px; background: #075cff; color: #fff; font-size: 8px; font-style: normal; opacity: 0; transform: translateY(4px); transition: opacity var(--duration-fast),transform var(--duration-fast) var(--ease-smooth-out); z-index: 1; }
.feed-chapter[data-beat="2"] .row-locator { opacity: 1; transform: none; }
.workflow-footnote { position: absolute; bottom: 16px; left: 22px; right: 22px; text-align: center; color: #90a0b4; font-size: 9px; }
.history-payee { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-block: 1px solid #e9eef6; }
.history-payee > span:first-child { display: grid; gap: 8px; }
.history-payee small { font-size: 8px; letter-spacing: .7px; color: #95a5b9; }
.history-payee strong { font-size: 13px; font-weight: 500; color: #3d587c; }
.history-launch { display: flex; align-items: center; gap: 6px; border: 1px solid #bdd2fc; border-radius: 7px; background: #f3f7ff; padding: 8px 10px; color: #075cff; font-size: 11px; transition: background var(--duration-fast),box-shadow var(--duration-fast); }
.history-launch .story-character { width: 17px; }
.history-chapter:not([data-beat="0"]) .history-launch { background: #e7efff; box-shadow: 0 0 0 3px #075cff0a; }
.history-placeholder { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; padding-top: 25px; color: #95a4b8; font-size: 11px; }
.history-placeholder b,.history-placeholder i { text-align: right; font-weight: 400; font-style: normal; }
.history-sheet { position: absolute; top: 211px; left: 22px; right: 22px; padding: 16px; border: 1px solid #dce6f4; border-radius: 12px; background: #fff; box-shadow: 0 12px 35px #254d7610; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity var(--dropdown-open-dur),transform var(--dropdown-open-dur) var(--dropdown-ease); }
.history-chapter:not([data-beat="0"]) .history-sheet { opacity: 1; transform: none; }
.history-sheet > header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.history-sheet header > span { display: grid; gap: 6px; }
.history-sheet header small { font-size: 7px; letter-spacing: .6px; color: #889bb4; }
.history-sheet header strong { font-size: 12px; font-weight: 500; color: #365375; }
.history-sheet header i { font-style: normal; color: #99a9bb; }
.history-entry { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #edf1f7; font-size: 10px; color: #7f91a8; }
.history-entry > span { display: grid; gap: 5px; }
.history-entry small { font-size: 11px; color: #405e83; }
.history-entry b { font-weight: 500; color: #496581; }
.history-insight,.recon-reviewed { display: flex; gap: 10px; align-items: center; color: #467c6b; padding-top: 12px; font-size: 11px; opacity: 0; transform: translateY(6px); transition: opacity var(--duration-slow),transform var(--duration-slow) var(--ease-smooth-out); }
.history-insight .story-character,.recon-reviewed .story-character { width: 26px; }
.history-insight > span:last-child,.recon-reviewed > span:last-child { display: grid; gap: 4px; }
.history-insight small,.recon-reviewed small { font-size: 9px; color: #8a9db0; }
.history-chapter[data-beat="2"] .history-insight,.recon-chapter[data-beat="2"] .recon-reviewed { opacity: 1; transform: none; }
.recon-balance { display: flex; gap: 25px; align-items: center; margin: 22px 0; }
.recon-balance > span { display: grid; gap: 7px; color: #63758e; font-size: 10px; }
.recon-balance strong { font-size: 29px; font-weight: 500; letter-spacing: -1px; color: #273f5e; font-variant-numeric: tabular-nums; }
.recon-balance small { color: #5b7290; font-size: 12px; }
.recon-balance-line { height: 36px; width: 1px; background: #e5ebf5; }
.recon-find { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 9px; color: #4f6d92; margin-top: 12px; }
.recon-find b { font-weight: 550; color: #315789; margin-left: 8px; }
.recon-find i { font-style: normal; font-size: 9px; color: #075cff; }
.recon-clue { margin-top: 13px; border: 1px solid #dce6f5; border-radius: 10px; background: #fff; opacity: 0; transform: translateY(8px); transition: opacity var(--duration-slow),transform var(--duration-slow) var(--ease-smooth-out),box-shadow var(--duration-fast); }
.recon-clue header { display: flex; justify-content: space-between; padding: 10px 12px 0; color: #6884a5; font-size: 9px; }
.recon-clue header small { color: #96a6ba; font-size: 9px; }
.recon-clue-row { display: flex; gap: 9px; align-items: center; padding: 12px; }
.unselected-check { width: 13px; height: 13px; border: 1px solid #bccbdf; border-radius: 3px; }
.recon-clue-row > span:nth-child(2) { display: grid; gap: 4px; }
.recon-clue-row strong { font-size: 11px; color: #3c597e; font-weight: 500; }
.recon-clue-row small { font-size: 9px; color: #93a3b7; }
.recon-clue-row b { font-size: 12px; color: #345681; margin-left: auto; font-weight: 500; }
.recon-clue-footer { display: flex; justify-content: space-between; border-top: 1px solid #ecf1f8; padding: 8px 12px; color: #075cff; font-size: 9px; }
.recon-clue-footer i { font-style: normal; }
.recon-chapter:not([data-beat="0"]) .recon-clue { opacity: 1; transform: none; }
.recon-chapter[data-beat="2"] .recon-clue { box-shadow: 0 0 0 2px #9bbdff; }

.recon-page-preview{transition:opacity var(--page-fade-dur) var(--page-fade-ease),transform var(--page-slide-dur) var(--page-slide-ease)}
.recon-followup-preview{position:absolute;inset:52px 22px 18px;background:#fff;opacity:0;transform:translateX(var(--page-slide-distance));pointer-events:none;transition:opacity var(--page-fade-dur) var(--page-fade-ease),transform var(--page-slide-dur) var(--page-slide-ease)}
.recon-chapter[data-beat="2"] .recon-page-preview{opacity:0;transform:translateX(calc(-1 * var(--page-slide-distance)))}
.recon-chapter[data-beat="2"] .recon-followup-preview{opacity:1;transform:none}
.recon-followup-preview .story-wordmark{font-size:18px;gap:6px;letter-spacing:-.6px}.recon-followup-preview .story-character{width:26px}.recon-followup-preview .story-wordmark>small{margin-left:auto;color:#5f7390;letter-spacing:.6px;font-size:8px}
.recon-followup-preview h4{font-size:19px;letter-spacing:-.6px;color:#243a57;font-weight:600;margin:24px 0 10px}.followup-preview-scope{font-size:11px!important;font-weight:550;color:#375171!important;margin:0 0 13px!important;border-bottom:1px solid #e4ebf5;padding-bottom:14px}.followup-preview-scope span{display:block;font-size:10px;font-weight:400;color:#5f7390;margin-top:5px}
.followup-preview-period{display:flex;justify-content:space-between;align-items:center;color:#5f7390;font-size:9px}.followup-preview-total{font-size:11px!important;margin:15px 0 0!important;color:#5f7390!important}.followup-preview-total strong{color:#314966;font-weight:600}
.followup-preview-row{display:flex;align-items:center;gap:10px;padding:17px 0;border-bottom:1px solid #e4ebf5}.followup-preview-row>span{flex:1;min-width:0}.followup-preview-row strong{display:block;font-size:11px;color:#344d70;font-weight:550}.followup-preview-row small{display:block;color:#5f7390;font-size:9px;margin-top:6px}.followup-preview-row em{font-style:normal;color:#31846e}.followup-preview-row b{font-weight:500;font-size:11px;color:#3c597e;font-variant-numeric:tabular-nums}.followup-preview-row svg{flex:none;width:12px;height:12px;fill:none;stroke:#8196b3;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.followup-preview-footnote{font-size:10px!important;color:#5f7390!important;margin-top:15px!important}
.workflow-settings-note { text-align: center; font-size: 12px; color: #7a8da7; line-height: 1.7; margin: 0 0 56px; }
.recon-followup-preview h4{margin:18px 0 8px}.followup-preview-scope{padding-bottom:10px;margin-bottom:10px!important}.followup-preview-total{margin-top:12px!important}.followup-preview-row{padding-block:14px}.followup-preview-footnote{margin-top:12px!important;font-size:9px!important}

.principles { padding-block: 64px; }
.principles h2 { font-size: clamp(30px,3vw,40px); line-height: 1.16; letter-spacing: -.035em; }
.principles h3 { color: #314966; font-size: 14px; font-weight: 550; letter-spacing: -.2px; }
@media(max-width:800px) {
  #client-story .story-nav button { padding: 8px; gap: 5px; }
  #client-story .story-nav button > span { display: none; }
  .story-beats { gap: 10px; }
  .story-beats li { gap: 5px; }
  .story-beats li::before { flex: none; width: 4px; height: 4px; }
  .story-beats button { font-size: 9px; }
  .profile-avatar-stack { width: 42px; height: 42px; }
  .profile-picker { padding: 13px; }
  .profile-picker header { margin-bottom: 10px; }
  .profile-palette { gap: 4px; }
  .profile-palette > span { padding: 6px; }
  .profile-palette .story-character { width: 32px; }
  .profile-motion { margin-block: 12px; }
  .profile-saved { top: 157px; }
  .profile-saved > .story-character { margin-bottom: 15px; }
  .workflow-section { padding-top: 52px; }
  .workflow-section .section-heading { margin-bottom: 35px; }
  .workflow-scope { display: none; }
  .workflow-app { padding: 0 17px 15px; }
  .workflow-browser { margin: 0 -17px 15px; }
  .workflow-page-title { margin-bottom: 14px; }
  .workflow-page-title strong { font-size: 16px; }
  .workflow-helper { padding: 10px; }
  .workflow-table-head { margin-top: 16px; }
  .workflow-row { padding-block: 10px; }
  .workflow-row > span { gap: 10px; }
  .workflow-footnote { bottom: 12px; font-size: 8px; }
  .history-payee { padding-block: 11px; }
  .history-sheet { top: 187px; left: 17px; right: 17px; padding: 13px; }
  .history-entry { padding-block: 8px; }
  .history-insight { padding-top: 9px; }
  .recon-balance { margin-block: 15px; }
  .recon-balance strong { font-size: 26px; }
  .recon-clue-row { padding-block: 10px; }
  
  .recon-followup-preview{inset:47px 17px 15px}.recon-followup-preview h4{font-size:18px;margin-top:14px}.followup-preview-row{padding-block:9px}.followup-preview-row strong{font-size:10px}.followup-preview-row small{font-size:8px}.followup-preview-total{margin-top:10px!important}
  .workflow-settings-note { font-size: 11px; max-width: 280px; margin-inline: auto; margin-bottom: 40px; }
}
@media(max-width:620px) {
  .principles { padding-block: 48px; gap: 25px; }
  .principles article { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; padding-top: 22px; }
  .principles article > b { grid-row: 1/3; padding-top: 3px; }
  .principles h3 { margin: 0 0 9px; }
  .principles article p { margin: 0; max-width: 300px; }
}
@media(prefers-reduced-motion:reduce) {
  .feature-story * { animation: none !important; transition: none !important; }
}

/* Current read-only tools, illustrated with fictional transactions. */
.workflow-selection { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; padding: 10px 12px; border-radius: 8px; background: #edf5ff; color: #42648d; font-size: 10px; }
.workflow-selection small { color: #7186a2; font-size: 9px; }
.workflow-selection strong { color: #075cff; font-weight: 600; }
.recon-counts { display: flex; gap: 18px; color: #647284; font-size: 9px; margin-top: 15px; }
.recon-counts b { font-weight: 600; color: #48678b; }
.journal-totals { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
.journal-totals > span { display: grid; gap: 7px; font-size: 9px; color: #7084a0; }
.journal-totals strong { color: #304f78; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.journal-totals > span:last-child strong { color: #9b662c; }
.journal-sample-row { display: flex; justify-content: space-between; gap: 10px; padding: 13px 5px; border-bottom: 1px solid #eaf0f7; font-size: 10px; color: #8d9db3; }
.journal-sample-row b { color: #5c7392; font-weight: 500; margin-left: 9px; }
.journal-sample-row strong { color: #526e93; font-weight: 500; }
.journal-review-sheet { position: absolute; left: 22px; right: 22px; top: 215px; padding: 14px; border: 1px solid #d5e2f6; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #254d7610; opacity: 0; transform: translateY(10px) scale(var(--dropdown-pre-scale)); transform-origin: top center; transition: opacity var(--dropdown-open-dur),transform var(--dropdown-open-dur) var(--dropdown-ease); }
.journal-review-sheet header { display: flex; justify-content: space-between; color: #34557c; font-size: 12px; font-weight: 600; }
.journal-review-sheet header > span { border-radius: 5px; background: #fff5e8; color: #9b662c; padding: 3px 5px; font-size: 9px; font-weight: 500; }
.journal-review-sheet p { display: flex; align-items: center; gap: 9px; color: #7d684d; background: #fff9ef; padding: 10px; border-radius: 7px; font-size: 11px; }
.journal-review-sheet p i { font-style: normal; font-weight: 700; }
.journal-chapter:not([data-beat="0"]) .journal-review-sheet { opacity: 1; transform: none; }
.journal-subtotal { display: flex; align-items: center; gap: 9px; color: #406c60; padding-top: 5px; font-size: 10px; opacity: 0; transform: translateY(5px); transition: opacity var(--duration-slow),transform var(--duration-slow) var(--ease-smooth-out); }
.journal-subtotal .story-character { width: 24px; }
.journal-subtotal > span:nth-child(2),.journal-subtotal b { display: grid; gap: 6px; }
.journal-subtotal small { color: #8499a5; font-size: 8px; font-weight: 400; }
.journal-subtotal b { margin-left: auto; text-align: right; font-size: 11px; font-weight: 600; }
.journal-chapter[data-beat="2"] .journal-subtotal { opacity: 1; transform: none; }
/* Beat three: the pasted spreadsheet comparison, a step after the subtotal. */
.journal-compare { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 8px 9px; border: 1px solid #dfe7f3; border-radius: 8px; background: #f8fafd; color: #34557c; font-size: 10px; font-weight: 600; opacity: 0; transform: translateY(5px); transition: opacity var(--duration-slow) var(--ease-in-out), transform var(--duration-slow) var(--ease-smooth-out); }
.journal-compare i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: #eaf1ff; color: #075cff; }
.journal-compare i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.journal-compare > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.journal-compare small { color: #5a6e86; font-size: 8px; font-weight: 400; }
.journal-chapter[data-beat="2"] .journal-compare { opacity: 1; transform: none; transition-delay: 320ms; }
@media(max-width:800px) {
 #workflow-story .story-nav { gap: 2px; }
 #workflow-story .story-nav button { padding-inline: 7px; font-size: 10px; gap: 4px; }
 #workflow-story .story-nav button > span { display: none; }
 .journal-review-sheet { left: 17px; right: 17px; top: 193px; padding: 12px; }
 .journal-totals strong { font-size: 12px; }
 .journal-subtotal { gap: 6px; font-size: 9px; }
 .journal-subtotal .story-character { width: 19px; }
 .workflow-selection { margin-top: 12px; font-size: 9px; }
 .recon-counts { gap: 12px; margin-top: 10px; }
}
@media(prefers-reduced-motion:reduce) { .journal-review-sheet,.journal-subtotal,.journal-compare { transition: none; } }

.recon-chapter .workflow-page-title { margin-bottom: 10px; }
.recon-chapter .recon-balance { margin-block: 12px; }
.recon-chapter .recon-counts { margin-top: 0; }
@media(max-width:800px) {
 .recon-chapter .recon-balance { margin-block: 7px; }
 .recon-chapter .workflow-browser { margin-bottom: 10px; }
 .recon-chapter .workflow-page-title { margin-bottom: 8px; }
 .recon-chapter .recon-clue { margin-top: 8px; }
 
}

.workflow-bank-memo{display:block!important;border-left:2px solid #bed3ff;padding-left:7px;margin-top:5px;color:#596f8a!important;font-size:10px!important;line-height:1.4;letter-spacing:0!important}.workflow-bank-memo b{display:block;color:#075cff;font-size:9px!important;font-weight:650}

/* Report review: the same frame language as the brand scene. A QuickBooks
   report sits on the left, the Sumlino review on the right, and the three
   statements take turns on a quiet timer (or on a click). Nothing pins. */
.report-spotlight { max-width:1120px; margin:26px auto 40px; padding-top:44px; border-top:1px solid #dde7f5; }
.report-pin { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4vw,60px); align-items:center; }
/* Wide screens: the scene holds for a short travel and the statements change
   with the scroll. Elsewhere the tabs take turns on a timer. */
.report-spotlight.is-pinned { height:calc(var(--report-stage-height) + var(--report-travel) + 44px); }
.report-spotlight.is-pinned .report-pin { position:sticky; top:var(--report-inset); }
.report-scroll-hint { display:none; margin:12px 0 0; color:#667282; font-size:11px; }
.report-spotlight.is-pinned .report-scroll-hint { display:block; }
.report-spotlight-copy { min-width:0; }
.report-spotlight h3 { margin:0 0 16px; font-size:clamp(30px,3.2vw,44px); line-height:1.1; font-weight:550; letter-spacing:-1.5px; color:#1c304d; }
.report-spotlight-copy > p:not(.eyebrow) { max-width:460px; margin:0 0 22px; color:#5d7490; font-size:14px; line-height:1.75; }
.report-guide { display:grid; gap:6px; }
.report-guide > button { position:relative; display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border:1px solid transparent; border-radius:12px; background:transparent; color:#5f7592; font:inherit; text-align:left; cursor:pointer; overflow:hidden; transition:background-color var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast); }
.report-guide > button[aria-pressed=true] { color:#244567; background:#fff; border-color:#b6cefa; box-shadow:0 3px 12px #224d8710; }
.report-guide > button[aria-pressed=true] strong,.report-guide > button[aria-pressed=true] .report-step-index { color:#075cff; }
@media (hover:hover) and (pointer:fine) { .report-guide > button:not([aria-pressed=true]):hover { background:#ffffff85; color:#4a6283; } }
.report-guide > button:focus-visible,.report-learn:focus-visible { outline:2px solid #075cff; outline-offset:4px; }
.report-step-index { flex:none; font-size:10px; font-variant-numeric:tabular-nums; color:#657387; }
.report-guide strong { display:block; font-size:15px; font-weight:600; }
.report-step-description { display:block; margin-top:4px; color:#61748a; font-size:12px; line-height:1.5; }
/* The active statement's turn, drawn along the bottom edge of its tab. */
.report-step-timer { position:absolute; left:0; right:0; bottom:0; height:2px; background:#075cff; opacity:0; transform:scaleX(var(--report-timer,0)); transform-origin:0 50%; }
.report-guide > button[aria-pressed=true] .report-step-timer { opacity:.8; }
.report-learn { display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:10px 14px; color:#075cff; font-size:12px; font-weight:600; text-decoration:none; }
.report-learn svg { transition:transform var(--duration-fast) var(--ease-smooth-out); }
@media (hover: hover) and (pointer: fine) { .report-learn:hover svg { transform:translateX(4px); } }
.report-journey { min-width:0; }
.report-stage { position:relative; }
.report-scene { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:420px; border:1px solid #e3e9f2; border-radius:18px; background:#fff; box-shadow:0 1px 2px #10182912,0 28px 56px -22px #10182940; overflow:hidden; font-variant-numeric:tabular-nums; }
.rs-page { display:grid; align-content:start; gap:12px; min-width:0; padding:14px 16px 16px; background:#f8fafd; }
.rs-reports { display:grid; }
.rs-report { grid-area:1/1; display:grid; gap:4px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--duration-medium) var(--ease-in-out),transform var(--duration-medium) var(--ease-smooth-out),visibility 0s var(--duration-medium); }
.rs-report.is-active { opacity:1; visibility:visible; transform:none; transition:opacity var(--duration-slow) var(--ease-in-out),transform var(--duration-slow) var(--ease-smooth-out); }
.rs-title { display:grid; gap:2px; margin:4px 0 6px; }
.rs-title b { color:#1b3354; font-size:12.5px; letter-spacing:-.2px; }
.rs-title small { color:#667282; font-size:8.5px; }
.rs-head,.rs-row { display:grid; grid-template-columns:minmax(0,1fr) 70px; align-items:center; gap:8px; padding:0 9px; }
.rs-head { height:18px; color:#667282; font-size:8px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.rs-head span:last-child,.rs-row b { text-align:right; }
.rs-row { position:relative; height:30px; border:1px solid #e9eef6; border-radius:8px; background:#fff; color:#3b5273; font-size:9.5px; white-space:nowrap; transition:border-color var(--duration-fast),box-shadow var(--duration-fast),transform var(--duration-fast) var(--ease-smooth-out); }
.rs-row span { overflow:hidden; text-overflow:ellipsis; }
.rs-row b { color:#1b3354; font-weight:600; }
.rs-row.is-total { background:#f3f6fb; }
.rs-row.is-total span,.rs-row.is-total b { font-weight:700; color:#1b3354; }
.rs-row.is-flag::before { content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:3px; border-radius:2px; background:#f0a224; opacity:0; transform:scaleY(.4); transition:opacity var(--duration-fast),transform var(--duration-fast) var(--ease-smooth-out); }
/* Once the statement has settled, the review's row is found on the page. */
.rs-report.is-active .rs-row.is-flag { border-color:#f3c77a; box-shadow:0 0 0 3px #f0a22418,0 6px 14px -8px #10182940; transform:translateX(2px); transition-delay:420ms; }
.rs-report.is-active .rs-row.is-flag::before { opacity:1; transform:none; transition-delay:420ms; }
.rs-report.is-active .rs-row.is-flag b { color:#9a5b0b; transition:color var(--duration-fast) 420ms; }
.rs-panel { position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:12px 14px 14px; border-left:1px solid #e6ebf3; background:#fff; box-shadow:-10px 0 28px -16px #10182933; }
.rs-brand { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid #edf1f7; }
.rs-brand .story-wordmark { font-size:14px; letter-spacing:-.5px; gap:5px; }
.rs-brand .story-character { width:20px; }
.rs-brand small { color:#667282; font-size:9px; font-weight:600; }
.report-previews { display:grid; }
.report-example { grid-area:1/1; margin:0; opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none; transition:opacity var(--duration-medium) var(--ease-in-out),transform var(--duration-medium) var(--ease-smooth-out),visibility 0s var(--duration-medium); }
.report-example.is-active { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity var(--duration-slow) var(--ease-in-out) 60ms,transform var(--duration-slow) var(--ease-smooth-out) 60ms; }
.report-preview-sheet { display:grid; gap:0; }
.report-preview-sheet h4 { margin:2px 0 4px; color:#1b3354; font-size:14px; font-weight:650; letter-spacing:-.2px; }
.report-preview-context { margin:0 0 12px; color:#667282; font-size:9.5px; line-height:1.6; }
.report-preview-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.report-preview-metrics > div { padding:10px 10px 9px; border:1px solid #e3e9f2; border-radius:10px; background:#fff; transition:border-color var(--duration-fast),background-color var(--duration-fast); }
.report-preview-metrics small { color:#5f7592; font-size:9px; font-weight:600; }
.report-preview-metrics strong { display:block; margin:6px 0 4px; color:#1b3354; font-size:21px; font-weight:650; letter-spacing:-.6px; }
.report-preview-metrics div > span { display:block; color:#667282; font-size:8.5px; line-height:1.5; }
.report-key-number { display:inline-block; position:relative; isolation:isolate; line-height:1.2; white-space:nowrap; }
.report-key-number::before { content:''; position:absolute; z-index:-1; inset:-2px -5px; border-radius:6px; background:#d7eee7; clip-path:inset(0 100% 0 0); transition:clip-path var(--duration-slow) var(--ease-smooth-out); }
.report-journey.is-visible .report-example.is-active .report-key-number::before { clip-path:inset(0); transition-delay:360ms; }
.report-journey.is-visible .report-example.is-active .report-focus { background:#f8faff; border-color:#94b8ff; }
.report-movement-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 0; color:#1b3354; font-size:10px; font-weight:700; }
.report-movement-heading span { color:#667282; font-size:8.5px; font-weight:600; }
.report-preview-movement { display:flex; justify-content:space-between; gap:12px; margin-top:6px; padding:9px 10px; border:1px solid #f3c77a; border-radius:10px; background:#fff8ec; }
.report-preview-movement strong { color:#1b3354; font-size:11px; font-weight:650; }
.report-preview-movement span { display:block; margin-top:3px; color:#667282; font-size:8.5px; }
.report-preview-movement > div:last-child { text-align:right; }
.report-preview-movement > div:last-child strong { color:#9a5b0b; }
/* Follow a flag through: the row's actions, a press on Create to-do, then the to-do with the figures attached. */
.report-preview-actions { display:flex; gap:5px; margin-top:7px; }
.report-preview-actions > * { display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border:1px solid #dfe7f3; border-radius:999px; background:#fff; color:#3b5273; font-size:8.5px; font-weight:650; }
.report-preview-actions b { border-color:#0657f0; background:#075cff; color:#fff; transform-origin:50% 50%; }
.report-journey.is-visible .report-example.is-active .report-preview-actions b { animation:report-press 420ms var(--ease-smooth-out) 760ms both; }
.report-preview-todo { display:flex; align-items:center; gap:8px; margin-top:7px; padding:8px 9px; border:1px solid #cfe6db; border-radius:10px; background:#f2faf6; opacity:0; transform:translateY(6px); transition:opacity var(--duration-slow) var(--ease-in-out),transform var(--duration-slow) var(--ease-smooth-out); }
.report-preview-todo i { display:grid; place-items:center; flex:none; width:14px; height:14px; border:1.5px solid #35866e; border-radius:4px; background:#35866e; color:#fff; }
.report-preview-todo i svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16; stroke-dashoffset:16; transition:stroke-dashoffset 260ms var(--ease-smooth-out); }
.report-preview-todo > span { flex:1; min-width:0; display:grid; gap:2px; }
.report-preview-todo strong { color:#1b3354; font-size:10px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-preview-todo small { color:#4b6280; font-size:8.5px; }
.report-journey.is-visible .report-example.is-active .report-preview-todo { opacity:1; transform:none; transition-delay:1150ms; }
.report-journey.is-visible .report-example.is-active .report-preview-todo i svg { stroke-dashoffset:0; transition-delay:1500ms; }
@keyframes report-press { 0% { transform:scale(1); } 40% { transform:scale(.9); background:#0348d6; } 100% { transform:scale(1); } }
.report-preview-prompt { margin:10px 0 0; color:#5f7592; font-size:9.5px; line-height:1.6; }
.report-preview-scope { margin:12px 8px 0; color:#637488; font-size:10px; line-height:1.7; text-align:center; }
@media(max-width:800px) {
 .report-spotlight { margin-top:10px; padding-top:34px; }
 .report-pin { grid-template-columns:1fr; gap:18px; }
 .report-spotlight h3 { letter-spacing:-1px; text-align:center; }
 .report-spotlight-copy { text-align:center; }
 .report-spotlight-copy > p:not(.eyebrow) { margin-inline:auto; margin-bottom:16px; }
 .report-spotlight .eyebrow { justify-content:center; }
 .report-guide { display:flex; gap:4px; }
 .report-guide > button { justify-content:center; gap:5px; min-height:44px; padding:10px 5px; background:#ffffff85; }
 .report-guide strong { font-size:11px; }
 .report-step-index,.report-step-description,.report-learn { display:none; }
 .report-scene { grid-template-columns:1fr; min-height:0; max-width:440px; margin:0 auto; }
 .rs-page { display:none; }
 .rs-panel { border-left:0; box-shadow:none; padding:14px 14px 16px; }
 .report-preview-metrics strong { font-size:22px; }
}
@media(max-width:360px) { .report-preview-metrics { gap:6px; } .report-preview-metrics > div { padding:9px 8px; } .report-preview-metrics strong { font-size:19px; } }
@media(prefers-reduced-motion:reduce) { .report-learn svg,.report-guide > button,.report-example,.rs-report,.rs-row,.rs-row::before,.report-preview-metrics > div,.report-key-number::before,.report-preview-todo,.report-preview-todo i svg { transition:none!important; } .report-preview-actions b { animation:none!important; } .report-preview-todo { opacity:1; transform:none; } .report-preview-todo i svg { stroke-dashoffset:0; } .report-step-timer { display:none; } }
/* Phones: unselected statement tabs read as tappable surfaces, not faint text. */
@media (max-width: 760px) {
  .report-guide > button:not([aria-pressed=true]) { border-color: #dfe7f2; background: #ffffffc7; color: #3f5878; }
}

/* The close. One client's August is ticked off as the page scrolls, the month
   is stamped, the lights go down and the closing line rises. Without script or
   with reduced motion it is a still night scene with the month already done. */
.marketing-home { --night-stars:
  radial-gradient(circle at 8% 14%, #c9d8ff 0 1px, transparent 1.6px), radial-gradient(circle at 23% 61%, #c9d8ff 0 1px, transparent 1.6px),
  radial-gradient(circle at 37% 27%, #9fb6e8 0 .8px, transparent 1.4px), radial-gradient(circle at 52% 83%, #c9d8ff 0 1px, transparent 1.6px),
  radial-gradient(circle at 66% 9%, #9fb6e8 0 .8px, transparent 1.4px), radial-gradient(circle at 79% 47%, #c9d8ff 0 1.2px, transparent 1.8px),
  radial-gradient(circle at 91% 72%, #9fb6e8 0 .8px, transparent 1.4px), radial-gradient(circle at 15% 92%, #9fb6e8 0 .8px, transparent 1.4px),
  radial-gradient(circle at 44% 49%, #6f8cc4 0 .7px, transparent 1.3px), radial-gradient(circle at 71% 66%, #6f8cc4 0 .7px, transparent 1.3px);
  --night-stars-size: 430px 310px, 430px 310px, 430px 310px, 430px 310px, 430px 310px, 280px 230px, 280px 230px, 280px 230px, 190px 170px, 190px 170px; }
.close-scene { position: relative; isolation: isolate; color: #1c304d; }
.close-anchor { position: absolute; top: var(--close-anchor, 0px); left: 0; width: 1px; height: 1px; pointer-events: none; }
.close-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 72px; padding: 88px 0 72px; }
.close-sky { position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); overflow: hidden; background: #0a1630; pointer-events: none; }
/* Twilight: while the sky is still falling, the top darkens first and a soft
   blue glow stays low, so the page passes through dusk rather than grey. */
.close-scene.is-scripted .close-sky { background: linear-gradient(180deg, #0a1630 0%, #0d1d40 45%, #1c3a7a 100%); }
.close-scene.is-scripted .close-sky::before { content: ""; position: absolute; inset: 0; background: #0a1630; opacity: var(--stars, 0); }
.close-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 46% at 50% 54%, #1b3f8f5c, transparent 72%); }
.close-stars { position: absolute; inset: 0; opacity: .8; background-image: var(--night-stars); background-size: var(--night-stars-size); }
.close-character svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The cast rises into the closing frame, standing on a soft horizon under the
   closing line, so the scene and the footer below read as one night. */
.close-cast { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 2vw, 22px); width: min(100%, 760px); height: 84px; padding-bottom: 6px; }
.close-horizon { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, #3c5b9a, transparent); }
.close-character { --i: 0; display: block; flex: none; width: clamp(30px, 4.6vw, 56px); color: var(--character-ink); transform: translateY(calc((1 - var(--rise, 1)) * 130%)); opacity: var(--rise, 1); }
.close-cast.is-risen .close-character .client-character-eyes { transform-box: fill-box; transform-origin: center; animation: story-blink 5.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.close-cast.is-risen .close-character svg { animation: close-cast-idle 5.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.close-cast:not(.is-in-view) .close-character svg, .close-cast:not(.is-in-view) .client-character-eyes { animation-play-state: paused; }
@keyframes close-cast-idle { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(-2deg); } }
.close-scene.is-scripted .close-cast { position: absolute; bottom: 14vh; bottom: 14svh; left: 50%; translate: -50% 0; }
.close-scene.is-scripted .close-character { opacity: 0; will-change: transform; }
.close-scene.is-scripted .close-horizon { opacity: 0; transform: scaleX(0); transform-origin: 50% 50%; will-change: transform; }
.close-scene .beta-callout.brand-finale { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 0 8px; border-radius: 0; background: none; color: #fff; text-align: center; }
.brand-finale .eyebrow { margin: 0 0 20px; color: #8fa6cf; font-size: 10px; }
.brand-finale h2 { margin: 0; color: #fff; font-size: clamp(34px,5vw,68px); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; }
.brand-finale h2 > span { background: linear-gradient(90deg,#6ea0ff,#b9d0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.close-scene .brand-finale > p:not(.eyebrow) { margin: 22px 0 28px; color: #a9badb; font-size: 15px; line-height: 1.7; }
.brand-finale .finale-action { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.brand-finale .primary-cta { gap: 36px; box-shadow: 0 0 0 1px #ffffff1f, 0 18px 50px -12px #075cffcc; }
.close-scene .brand-finale .beta-note { color: #a9badb; }
/* Texts reveal (transitions.dev #18) for the closing line. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}
/* Pinned scene: the stage holds while the month plays out (close-books.css).
   Scroll drives only transforms and opacity. */
.close-scene.is-scripted { height: var(--close-length, 1000vh); margin-bottom: -7vh; }
@media (max-width: 760px) { .close-scene.is-scripted { --close-length: 900vh; } }
.close-scene.is-scripted .close-stage { position: sticky; top: 0; display: grid; place-items: center; gap: 0; height: 100vh; height: 100svh; padding: var(--close-top, 80px) 0 20px; }
.close-scene.is-scripted .brand-finale { grid-area: 1 / 1; }
/* Night rises from the foot of the screen like a tide: the sky layer is a
   quarter taller than the stage, its top edge softened by a mask, and the
   scroll moves it up with a transform until the soft edge is above the top. */
.close-scene.is-scripted .close-sky { top: 0; bottom: -25%; opacity: 0; transform: translateY(100%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%); mask-image: linear-gradient(180deg, transparent, #000 20%); will-change: transform; }
.close-scene.is-scripted .close-stars { opacity: calc(var(--stars, 0) * .8); }
/* The star field is ten full-screen gradients whose opacity the scroll sets every
   frame; its own layer turns each change into a compositor step instead of a repaint. */
.close-scene.is-scripted .close-stars { will-change: opacity; }
.close-scene.is-scripted .brand-finale:not(.is-shown) { pointer-events: none; }
/* In the pinned scene the closing line follows the scroll instead of a timed
   reveal: feature-story.js sets opacity and transform per frame, with no blur
   (an animated blur on text is paint-heavy and adds nothing here). */
.close-scene.is-scripted .brand-finale .t-stagger-line { opacity: 0; transform: translateY(28px); filter: none; transition: none; }

/* Night header: as the sky falls the bar takes on the same navy, so the
   closing scene fills the whole screen; it returns to light on the way up. */
.marketing-home .site-header .site-brand { transition: color var(--duration-very-slow) var(--ease-in-out); }
.marketing-home .site-header .brand-symbol img { transition: opacity var(--duration-fast), transform var(--duration-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-in-out); }
.marketing-home .site-header .header-menu { transition: background-color var(--duration-very-slow) var(--ease-in-out), border-color var(--duration-very-slow) var(--ease-in-out); }
.marketing-home .site-header.is-over-night { background-color: #0a1630f0; border-bottom-color: #ffffff12; box-shadow: 0 10px 30px -18px #000; transition-duration: var(--duration-very-slow); }
.marketing-home .site-header.is-over-night .site-brand { color: #fff; }
.marketing-home .site-header.is-over-night .brand-symbol img { filter: brightness(0) invert(1); }
.marketing-home .site-header.is-over-night .header-menu { border-color: #ffffff26; background-color: #ffffff0f; }
.marketing-home .site-header.is-over-night .header-menu span { background: #e6edfb; }
@media(min-width:701px) {
  .marketing-home .site-header.is-over-night nav a { --nav-tint: #ffffff12; --nav-edge: #ffffff2e; color: #c3d0e8; }
  .marketing-home .site-header.is-over-night nav a:hover, .marketing-home .site-header.is-over-night nav a[aria-current="page"] { color: #fff; }
}
.marketing-home .site-header.is-night-fading,
.marketing-home .site-header.is-night-fading :is(.site-brand, .brand-symbol img, nav a, .header-menu, .header-menu span),
.marketing-home .site-header.is-night-fading nav a::before {
  transition-duration: 600ms !important;
  transition-delay: 0ms !important;
  transition-timing-function: var(--ease-in-out) !important;
}
.marketing-home .site-header.is-night-fading .header-menu span { transition-property: background-color, transform, opacity !important; }
@media(prefers-reduced-motion:reduce) { .marketing-home .site-header .site-brand, .marketing-home .site-header .brand-symbol img, .marketing-home .site-header .header-menu { transition: none; } .marketing-home .site-header.is-night-fading, .marketing-home .site-header.is-night-fading * { transition: none !important; } }
/* The home footer: the cast walks on, takes a bow, and stays in view. */
.marketing-home .site-credits { position: relative; isolation: isolate; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 0; padding: 8px 0 34px; border-top: 0; color: #a9badb; text-align: center; }
.site-credits::before { content: ""; position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); background-color: #0a1630; }
/* The footer's stars sit on their own layer so they can thin out on phones, where
   the text fills the width and a star landing on a letter reads as dust. */
.site-credits::after { content: ""; position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); background-image: var(--night-stars); background-size: var(--night-stars-size); pointer-events: none; }
@media (max-width: 620px) { .site-credits::after { opacity: .4; } }
.site-credits .footer-brand { margin-top: 8px; }
.site-credits .site-brand { color: #fff; }
.site-credits .site-brand img { filter: brightness(0) invert(1); }
.site-credits .footer-social { justify-content: center; margin-top: 26px; }
.site-credits .footer-social a { border-color: #ffffff21; background: #ffffff0d; color: #e6edfb; }
.site-credits .footer-social a svg { color: #c9d6ee; background: #ffffff14; }
.site-credits .footer-social small { color: #8fa6cf; }
.site-credits .footer-social a:is(:hover,:focus-visible) { border-color: #6ea0ff80; background: #ffffff1a; color: #fff; }
.site-credits .footer-social a:is(:hover,:focus-visible) svg { color: #fff; background: #075cff; }
.site-credits :is(.footer-social a, .footer-legal a):focus-visible { outline-color: #8fb4ff; }
.site-credits .footer-legal { width: 100%; margin-top: 42px; border-top-color: #1d2d50; color: #8fa6cf; text-align: left; }
.site-credits .footer-legal a:hover { color: #fff; }
.site-credits .footer-disclaimer { width: 100%; max-width: none; margin-top: 14px; color: #7f93b9; text-align: left; }
@media(max-width:620px) {
  .close-stage { gap: 56px; padding: 64px 0 56px; }
  .close-scene .brand-finale > p:not(.eyebrow) { max-width: 280px; font-size: 13px; }
  .brand-finale h2 { letter-spacing: -.03em; }
  .site-credits .footer-social a { flex: 1 1 100%; }
}
/* Short screens: the cast stands lower and shorter, under the closing line rather than across it. */
@media(max-height:700px) { .close-scene.is-scripted .close-cast { height: 52px; } .close-scene .beta-note-detail { display: none; } }
@media(prefers-reduced-motion:reduce) {
  .t-stagger-line { transition: none !important; }
  .close-character, .close-character svg, .close-character .client-character-eyes { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.brand-finale .eyebrow.t-stagger-line { display: flex; justify-content: center; }
.close-scene .eyebrow i::before, .close-scene .eyebrow i::after { background: #6ea0ff; }
/* Small text controls get a 44px-tall invisible tap area without moving the layout. */
.story-beats button, .tour-skip { position: relative; }
.story-beats button::after, .tour-skip::after { content: ""; position: absolute; inset: -12px -6px; }
@media(max-width:800px) { .story-beats button { font-size: 10px; } }

/* The phone menu over the night: the same sheet in navy instead of a white flash. */
@media(max-width:700px) {
  .marketing-home .site-header.is-over-night nav { background: #0a1630; }
  .marketing-home .site-header.is-over-night nav > a { color: #e8eefb; }
  .marketing-home .site-header.is-over-night nav > a:is([aria-current="page"], .is-going) { color: #8fb4ff; }
  .marketing-home .site-header.is-over-night nav :is(.menu-eyebrow, .menu-label, .menu-note) { color: #9fb2d3; }
  .marketing-home .site-header.is-over-night nav .menu-social a { border-color: #ffffff24; background: #ffffff0f; color: #e8eefb; }
}
/* Dragging past the end shows the same night, not the light page colour. */
html.is-night-end, html.is-night-end body { background-color: #0a1630; }

/* 05 · Batch cleanup: the dashboard, not QuickBooks. Beat 0 chooses the client,
   beat 1 filters and ticks two expenses, beat 2 slides the preview in. */
.batch-app { --batch-ink: #314966; }
.batch-env { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: #fff5e4; color: #8a5a0e; font-size: 8px; font-style: normal; font-weight: 650; letter-spacing: .3px; }
.batch-client { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #dde6f3; border-radius: 10px; background: #fbfcfe; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast); }
.batch-client > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.batch-client small { color: #627086; font-size: 8px; letter-spacing: .8px; }
.batch-client strong { color: var(--batch-ink); font-size: 12px; font-weight: 600; }
.batch-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #edf3ff; color: #075cff; font-size: 9px; font-weight: 650; flex: none; }
.batch-linked { padding: 3px 8px; border-radius: 999px; background: #e8f6ef; color: #1c7c52; font-size: 9px; font-style: normal; font-weight: 600; opacity: 0; transform: translateY(3px); transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-smooth-out); }
.batch-chapter[data-beat="0"] .batch-client { border-color: #9bbdff; background: #f3f7ff; box-shadow: 0 0 0 3px #075cff12; }
.batch-chapter:not([data-beat="0"]) .batch-linked, .batch-chapter.is-active .batch-linked { opacity: 1; transform: none; }
.batch-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.batch-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid #dde6f3; border-radius: 7px; background: #fff; color: #52657f; font-size: 10px; font-weight: 550; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast); }
.batch-chip svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.batch-count { margin-left: auto; border-color: transparent; background: none; color: #627086; font-weight: 500; }
.batch-chapter:not([data-beat="0"]) .batch-chip.is-category { border-color: #9bbdff; background: #edf3ff; color: #1d4fb8; }
.batch-table { margin-top: 10px; border: 1px solid #e6ecf4; border-radius: 10px; overflow: hidden; }
.batch-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid #edf1f6; font-size: 11px; color: var(--batch-ink); transition: background var(--duration-fast), opacity var(--duration-fast); }
.batch-row:last-child { border-bottom: 0; }
.batch-row > span { display: grid; gap: 1px; flex: 1; min-width: 0; font-weight: 550; }
.batch-row small { color: #627086; font-size: 8.5px; font-weight: 500; }
.batch-row b { font-weight: 550; font-variant-numeric: tabular-nums; }
.batch-check { display: grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid #c3d0e2; border-radius: 4px; background: #fff; flex: none; transition: background var(--duration-quick), border-color var(--duration-quick); }
.batch-check svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--duration-fast) var(--ease-smooth-out); }
.batch-chapter:not([data-beat="0"]) .batch-row[data-pick] { background: #f0f5ff; }
.batch-chapter:not([data-beat="0"]) .batch-row[data-pick] .batch-check { background: #075cff; border-color: #075cff; }
.batch-chapter:not([data-beat="0"]) .batch-row[data-pick] .batch-check svg { stroke-dashoffset: 0; }
.batch-chapter:not([data-beat="0"]) .batch-row[data-pick="2"] .batch-check svg { transition-delay: 160ms; }
.batch-chapter[data-beat="2"] .batch-row:not([data-pick]) { opacity: .45; }
.batch-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 11px; border-radius: 8px; background: #f3f6fb; color: #42648d; font-size: 10px; transition: background var(--duration-fast), color var(--duration-fast); }
.batch-bar strong { padding: 5px 9px; border-radius: 6px; background: #c9d6ea; color: #fff; font-weight: 600; transition: background var(--duration-fast); }
.batch-count-picked { display: none; }
.batch-chapter:not([data-beat="0"]) .batch-bar { background: #edf3ff; color: #1d4fb8; }
.batch-chapter:not([data-beat="0"]) .batch-count-idle { display: none; }
.batch-chapter:not([data-beat="0"]) .batch-count-picked { display: inline; }
.batch-chapter:not([data-beat="0"]) .batch-bar strong { background: #075cff; }
.batch-review { position: absolute; left: 22px; right: 22px; bottom: 40px; padding: 12px 13px 10px; border: 1px solid #d6e4ff; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -16px #10306740, 0 0 0 1px #ffffff; opacity: 0; transform: translateY(14px); transition: opacity var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out); }
.batch-review header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--batch-ink); }
.batch-review header i { padding: 2px 7px; border-radius: 999px; background: #eef1f6; color: #4b5a70; font-size: 8.5px; font-style: normal; font-weight: 600; }
.batch-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; margin-top: 4px; font-size: 9.5px; color: #3b4d66; background: #f6f8fb; }
.batch-line.is-change { background: #edf3ff; }
.batch-line b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #182c48; }
.batch-line .ui-arrow { width: 10px; height: 10px; color: #8a97ab; }
.batch-line em { font-size: 8px; font-style: normal; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8a97ab; }
.batch-review footer { margin-top: 8px; color: #8a97ab; font-size: 8.5px; }
.batch-chapter[data-beat="2"] .batch-review { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .batch-client, .batch-linked, .batch-chip, .batch-row, .batch-check, .batch-check svg, .batch-bar, .batch-bar strong, .batch-review { transition: none !important; } }
/* Five helper tabs wrap on phones instead of pushing past the edge. */
@media (max-width: 800px) { .workflow-story.is-gallery .story-nav { flex-wrap: wrap; justify-content: center; } }
/* Batch cleanup demo: chapter 01 of the home-page walkthrough. A small
   dashboard that one cursor works through on a 15s clock while the chapter is
   active (batch-spotlight.js): filter, select, preview, a typed confirmation,
   then the changes verify. The director only sets data-stage and a few
   classes; everything visual lives here. Reduced motion shows the verified
   result with no cursor. Fictional data. */
.batch-spotlight-art { position: relative; width: 100%; }
.bs-frame { position: relative; border: 1px solid #d8e2f0; border-radius: 16px; background: #f6f8fc; box-shadow: 0 24px 50px -30px #17345440, 0 2px 6px #1734540f; overflow: hidden; font-family: Inter, "Segoe UI", sans-serif; color: #314966; }
.bs-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #e3eaf4; background: #fff; color: #627086; font-size: 9px; letter-spacing: .6px; text-transform: uppercase; }
.bs-bar > span { font-size: 7px; color: #c3cfe0; }
.bs-body { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.bs-rail { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 12px 0; border-right: 1px solid #e3eaf4; background: #fff; }
.bs-mark { display: block; width: 24px; height: 21px; margin-bottom: 8px; color: #075cff; }
.bs-mark svg, .bs-placeholder-mark svg, .bs-buddy svg { display: block; width: 100%; height: auto; overflow: visible; }
.bs-nav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #6b7d95; }
.bs-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bs-nav.is-current { background: #edf3ff; color: #075cff; }
.bs-main { display: grid; gap: 10px; padding: 12px 14px 14px; transition: opacity var(--duration-fast) var(--ease-smooth-out); }
.bs-context { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid #dde6f3; border-radius: 10px; background: #fff; }
.bs-context > span:not(.batch-avatar) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
.bs-context small { color: #627086; font-size: 7.5px; letter-spacing: .7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-context strong { color: #314966; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-join { width: 14px; height: 14px; flex: none; fill: none; stroke: #b4c2d6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.batch-avatar.is-qb { background: #e8f6ef; color: #1c7c52; }
.bs-context .batch-linked { margin-left: auto; opacity: 1; transform: none; }
.bs-work { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 10px; align-items: start; }
.bs-list { display: grid; gap: 8px; align-content: start; }
.bs-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.bs-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid #dde6f3; border-radius: 7px; background: #fff; color: #4b5a70; font-size: 9px; font-weight: 600; transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out); }
.bs-chip svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bs-chip.is-press { transform: scale(.97); }
.bs-count { margin-left: auto; border-color: transparent; background: none; color: #627086; font-weight: 500; }
.bs-frame:not([data-stage="idle"]) .bs-chip-category { border-color: #9bbdff; background: #edf3ff; color: #1d4fb8; }
.bs-table { border: 1px solid #e6ecf4; border-radius: 10px; background: #fff; overflow: hidden; }
.bs-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #edf1f6; font-size: 10px; color: #314966; transition: background var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out); }
.bs-row:last-child { border-bottom: 0; }
.bs-row > span { display: grid; gap: 1px; flex: 1; min-width: 0; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-row small { color: #627086; font-size: 8px; font-weight: 500; }
.bs-row b { font-weight: 550; font-variant-numeric: tabular-nums; }
.bs-frame:not([data-stage="idle"]) .bs-row[data-cat="rent"] { opacity: .38; }
.bs-check { display: grid; place-items: center; flex: none; width: 13px; height: 13px; border: 1.5px solid #c3d0e2; border-radius: 4px; background: #fff; transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), transform 120ms var(--ease-smooth-out); }
.bs-check svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--duration-fast) var(--ease-smooth-out); }
.bs-check.is-press { transform: scale(.85); }
.bs-row.is-picked { background: #f0f5ff; }
.bs-row.is-picked .bs-check { background: #075cff; border-color: #075cff; }
.bs-row.is-picked .bs-check svg { stroke-dashoffset: 0; }
.bs-selbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #f1f4f9; color: #4b5a70; font-size: 9.5px; font-weight: 600; transition: background var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out); }
.bs-selbar em { font-style: normal; color: #627086; font-weight: 500; }
.bs-preview-btn, .bs-apply-btn { padding: 5px 9px; border-radius: 6px; background: #c9d6ea; color: #fff; font-size: 9px; font-weight: 600; white-space: nowrap; transition: background var(--duration-quick) var(--ease-smooth-out), transform 120ms var(--ease-smooth-out); }
.bs-preview-btn.is-press, .bs-apply-btn.is-press { transform: scale(.96); }
.bs-frame.is-ready .bs-selbar { background: #edf3ff; color: #1d4fb8; }
.bs-frame.is-ready .bs-selbar em { color: #4a679a; }
.bs-frame.is-ready .bs-preview-btn, .bs-frame.is-typed .bs-apply-btn { background: #075cff; }
/* The right pane: a placeholder, then the preview, then the run, stacked in one cell. */
.bs-pane { position: relative; display: grid; border: 1px solid #dde6f3; border-radius: 12px; background: #fff; }
.bs-pane > * { grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); }
.bs-frame[data-stage="idle"] .bs-placeholder, .bs-frame[data-stage="filtered"] .bs-placeholder, .bs-frame[data-stage="previewing"] .bs-preview, .bs-frame[data-stage="running"] .bs-run, .bs-frame[data-stage="verified"] .bs-run { opacity: 1; transform: none; }
.bs-placeholder { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 18px 14px; text-align: center; }
.bs-placeholder-mark { display: block; width: 34px; color: #075cff; margin-bottom: 4px; }
.bs-placeholder strong { font-size: 11px; color: #13233b; }
.bs-placeholder small { font-size: 9px; line-height: 1.5; color: #5c728e; max-width: 180px; }
.bs-preview { display: grid; gap: 6px; padding: 11px 11px 10px; }
.bs-preview header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 10px; font-weight: 600; color: #13233b; }
.bs-preview header i { padding: 2px 6px; border-radius: 999px; background: #eef1f6; color: #4b5a70; font-size: 8px; font-style: normal; font-weight: 600; }
.bs-lines { display: grid; gap: 4px; }
.bs-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; font-size: 8.5px; color: #314966; }
.bs-line.is-change { background: #edf3ff; }
.bs-line b { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: #182c48; white-space: nowrap; }
.bs-arrow { width: 9px; height: 9px; fill: none; stroke: #8a97ab; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bs-line em { font-size: 7.5px; font-style: normal; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8a97ab; }
.bs-confirm { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bs-input { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: 24px; padding: 0 8px; border: 1px solid #d3dff0; border-radius: 6px; background: #fff; font-size: 9px; transition: border-color var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out); }
.bs-input.is-press, .bs-input.is-focus { border-color: #075cff; box-shadow: 0 0 0 2px #075cff1f; }
.bs-input em { color: #a3b1c6; font-style: normal; }
.bs-input.has-text em { display: none; }
.bs-typed { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: 1px; color: #13233b; }
.bs-caret { display: none; width: 1px; height: 12px; margin-left: 1px; background: #075cff; animation: bs-blink 1s steps(2, start) infinite; }
.bs-input.is-focus .bs-caret { display: block; }
.bs-run { position: relative; display: grid; gap: 9px; padding: 11px 11px 10px; }
.bs-head { display: flex; gap: 9px; align-items: flex-start; }
.bs-markbox { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #edf3ff; color: #075cff; transition: background var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out); }
.bs-spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #c9dbfb; border-top-color: #075cff; animation: bs-spin .9s linear infinite; transition: opacity var(--duration-quick) var(--ease-smooth-out); }
.bs-check { }
.bs-markbox .bs-check { position: absolute; width: 15px; height: 15px; border: 0; background: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: rotate(-40deg) scale(.6); }
.bs-markbox .bs-check path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.bs-swap { display: grid; }
.bs-swap > * { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-smooth-out); }
.bs-ok, .bs-count-match { opacity: 0; }
.bs-frame:not([data-stage="idle"]) .bs-count-match { opacity: 1; }
.bs-frame:not([data-stage="idle"]) .bs-count-all { opacity: 0; }
.bs-head-copy { display: grid; gap: 2px; min-width: 0; }
.bs-head-copy strong { font-size: 11px; color: #13233b; }
.bs-head-copy small { font-size: 8.5px; line-height: 1.45; color: #5c728e; }
.bs-progress { height: 4px; border-radius: 2px; background: #e4ebf6; overflow: hidden; transition: opacity var(--duration-fast) var(--ease-smooth-out); }
.bs-progress i { display: block; width: 38%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #7fabff, #075cff); animation: bs-sweep 1.3s ease-in-out infinite; }
.bs-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bs-items li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e6ecf4; border-left: 3px solid #cfd8e6; border-radius: 8px; opacity: .7; transition: border-color var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out); }
.bs-items li > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.bs-items strong { font-size: 9.5px; color: #13233b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-items small { font-size: 8px; color: #5c728e; }
.bs-items b { flex: none; padding: 2px 6px; border-radius: 999px; background: #eef1f6; color: #4b5a70; font-size: 7.5px; font-weight: 600; transition: background var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out); }
.bs-dot { display: grid; place-items: center; flex: none; width: 15px; height: 15px; border: 2px solid #d6dfec; border-radius: 50%; background: transparent; transition: background var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out); }
.bs-dot svg { width: 9px; height: 9px; fill: none; stroke: #1c7c52; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bs-dot path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--duration-slow) var(--ease-smooth-out) 60ms; }
.bs-items li.is-ok { opacity: 1; border-left-color: #8ed1b3; }
.bs-items li.is-ok .bs-dot { background: #e8f6ef; border-color: #e8f6ef; }
.bs-items li.is-ok .bs-dot path { stroke-dashoffset: 0; }
.bs-items li.is-ok b { background: #e8f6ef; color: #1c7c52; }
.bs-items li.is-ok .bs-ok { opacity: 1; }
.bs-items li.is-ok .bs-busy { opacity: 0; }
.bs-frame[data-stage="verified"] .bs-head .bs-ok { opacity: 1; }
.bs-frame[data-stage="verified"] .bs-head .bs-busy, .bs-frame[data-stage="verified"] .bs-progress, .bs-frame[data-stage="verified"] .bs-spinner { opacity: 0; }
.bs-frame[data-stage="verified"] .bs-markbox { background: #e8f6ef; color: #1c7c52; }
.bs-frame[data-stage="verified"] .bs-markbox .bs-check { animation: bs-check-in 520ms var(--ease-smooth-out) both; }
.bs-frame[data-stage="verified"] .bs-markbox .bs-check path { animation: bs-draw 420ms var(--ease-smooth-out) 100ms both; }
.bs-buddy { position: absolute; top: -17px; right: 14px; width: 28px; color: #23856d; opacity: 0; transform: translateY(12px) scale(.5); filter: drop-shadow(0 2px 3px #17345424); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform 620ms var(--ease-bounce); }
.bs-frame[data-stage="verified"] .bs-buddy { opacity: 1; transform: none; transition-delay: 150ms; }
.bs-confetti { position: absolute; left: 25px; top: 25px; width: 0; height: 0; pointer-events: none; }
.bs-confetti > * { position: absolute; left: -3px; top: -1px; opacity: 0; }
.bs-confetti i { width: 7px; height: 3px; border-radius: 2px; background: var(--piece); }
.bs-confetti b { left: -4px; top: -6px; color: var(--piece); font: 800 10px/1 ui-monospace, Menlo, monospace; }
.bs-confetti > :nth-child(1) { --piece: #075cff; --dx: -34px; --dy: -30px; --r: 40deg; --n: 0; }
.bs-confetti > :nth-child(2) { --piece: #23856d; --dx: -14px; --dy: -44px; --r: -30deg; --n: 1; }
.bs-confetti > :nth-child(3) { --piece: #df6355; --dx: 12px; --dy: -40px; --r: 60deg; --n: 2; }
.bs-confetti > :nth-child(4) { --piece: #c88a12; --dx: 30px; --dy: -26px; --r: -50deg; --n: 3; }
.bs-confetti > :nth-child(5) { --piece: #8960c9; --dx: -26px; --dy: -12px; --r: 20deg; --n: 4; }
.bs-confetti > :nth-child(6) { --piece: #17899b; --dx: 24px; --dy: -8px; --r: -20deg; --n: 5; }
.bs-frame[data-stage="verified"] .bs-confetti > * { animation: bs-burst 900ms cubic-bezier(.2, .7, .3, 1) calc(100ms + var(--n) * 25ms) both; }
/* The cursor: one actor, so every change in the art has a visible cause. */
.bs-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 21px; height: 23px; pointer-events: none; opacity: 0; transform: translate(var(--cx, 0px), var(--cy, 0px)); transition: transform var(--cursor-glide, 620ms) cubic-bezier(.45, .05, .15, 1), opacity var(--duration-fast); will-change: transform; }
.bs-cursor.is-snapping { transition: opacity var(--duration-fast); }
/* The press squeezes toward the tip, so the point never drifts off its target. */
.bs-cursor svg { display: block; width: 21px; height: 23px; overflow: visible; fill: #1b3354; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px #10182940); transform-origin: 3.2px 2.6px; transition: transform 120ms var(--ease-smooth-out); }
.bs-cursor.is-pressing svg { transform: scale(.88); }
.bs-cursor i { position: absolute; left: -7px; top: -7.4px; width: 20px; height: 20px; border: 1.5px solid #075cff; border-radius: 50%; opacity: 0; }
.bs-cursor.is-click i { animation: bs-cursor-click 380ms var(--ease-smooth-out) both; }
.bs-frame.has-cursor .bs-cursor { opacity: 1; }
@keyframes bs-cursor-click { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes bs-blink { to { visibility: hidden; } }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@keyframes bs-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } }
@keyframes bs-check-in { 0% { opacity: 0; transform: rotate(-40deg) scale(.6); } 60% { opacity: 1; transform: rotate(4deg) scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes bs-draw { to { stroke-dashoffset: 0; } }
@keyframes bs-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 35% { opacity: 1; transform: translate(calc(var(--dx) * .7), calc(var(--dy) * .7)) rotate(var(--r)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 22px)) rotate(calc(var(--r) + 120deg)) scale(.8); } }
/* Phones: one column; the preview and the run slide over the list instead of stacking under it. */
@media (max-width: 800px) { .bs-work { grid-template-columns: 1fr; position: relative; } .bs-placeholder { display: none; } .bs-pane { position: absolute; inset: 0; z-index: 2; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); } .bs-frame[data-stage="previewing"] .bs-pane, .bs-frame[data-stage="running"] .bs-pane, .bs-frame[data-stage="verified"] .bs-pane { opacity: 1; transform: none; } .bs-preview, .bs-run { padding: 9px 10px 8px; gap: 5px; } }
@media (max-width: 480px) { .bs-body { grid-template-columns: 36px minmax(0, 1fr); } .bs-main { padding: 10px; } .bs-context { gap: 7px; } .bs-context small { display: none; } .bs-context strong { font-size: 10px; } .bs-context .batch-linked { padding: 3px 6px; } }
@media (prefers-reduced-motion: reduce) { .batch-spotlight-art *, .batch-spotlight-art *::before { transition: none !important; animation: none !important; } .bs-cursor, .bs-confetti, .bs-caret { display: none !important; } .bs-frame[data-stage="verified"] .bs-markbox .bs-check { opacity: 1; transform: none; } .bs-frame[data-stage="verified"] .bs-markbox .bs-check path { stroke-dashoffset: 0; } }

/* The category chip opens a small account menu (transitions.dev menu dropdown,
   on the shared dropdown tokens): the cursor drops down to Materials, the menu
   closes and the chip's label swaps to it (text-states swap). */
.bs-chip-anchor { position: relative; display: inline-flex; align-self: flex-start; }
.bs-chip-label { display: inline-block; }
.bs-chip .bs-chevron { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.bs-frame.is-menu-open .bs-chip-category { border-color: #9bbdff; background: #f5f8ff; color: #1d4fb8; }
.bs-frame.is-menu-open .bs-chip .bs-chevron { transform: rotate(180deg); }
.bs-menu { position: absolute; z-index: 2; top: calc(100% + 4px); left: 0; display: grid; gap: 1px; min-width: 128px; padding: 4px; border: 1px solid #dbe5f3; border-radius: 9px; background: #fff; box-shadow: 0 12px 26px -12px #10244047, 0 1px 2px #1024400f; transform-origin: top left; transform: scale(var(--dropdown-pre-scale, .97)); opacity: 0; pointer-events: none; transition: transform var(--dropdown-open-dur, 250ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)), opacity var(--dropdown-open-dur, 250ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)); }
.bs-frame.is-menu-open .bs-menu { transform: scale(1); opacity: 1; }
.bs-frame.is-menu-closing .bs-menu { transform: scale(var(--dropdown-closing-scale, .99)); opacity: 0; transition: transform var(--dropdown-close-dur, 150ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)), opacity var(--dropdown-close-dur, 150ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)); }
.bs-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 7px; border-radius: 6px; color: #3b4a62; font-size: 9px; font-weight: 600; white-space: nowrap; transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }
.bs-menu-item em { color: #8a98ad; font-style: normal; font-variant-numeric: tabular-nums; }
.bs-menu-item.is-current { color: #1d4fb8; }
.bs-menu-item.is-hover { background: #edf3ff; color: #1d4fb8; }
.bs-menu-item.is-press { background: #dbe7ff; }
@media (prefers-reduced-motion: reduce) { .bs-menu, .bs-chip .bs-chevron, .bs-menu-item { transition: none; } }

/* The client switcher, as in the dashboard's collapsed rail: the client button
   opens a menu of saved clients, each wearing the character chosen for it in the
   extension (the dashboard draws them still). Before a client is chosen, the
   button and the client card show an empty slot and the cleanup waits. */
.bs-face { display: grid; place-items: center; border-radius: 7px; }
.bs-face svg { display: block; width: 76%; height: auto; overflow: visible; }
.bs-face.is-mint { background-color: #e5f5ee; color: #23856d; }
.bs-face.is-coral { background-color: #fff0ea; color: #df6355; }
.bs-face.is-gold { background-color: #fff6d9; color: #c88a12; }
.bs-client { position: relative; display: grid; justify-items: center; margin-bottom: 4px; }
.bs-client-tile { width: 28px; height: 28px; border-radius: 8px; outline: 1.5px dashed transparent; outline-offset: -1.5px; transition: background-color var(--duration-quick) var(--ease-smooth-out), outline-color var(--duration-quick) var(--ease-smooth-out), transform 120ms var(--ease-smooth-out); }
.bs-client-tile.is-press { transform: scale(.94); }
.bs-client-tile svg, .bs-client-avatar svg { transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-bounce); }
.bs-frame:not(.has-client) :is(.bs-client-tile, .bs-client-avatar) { background-color: #fff; outline: 1.5px dashed #c3cfe0; outline-offset: -1.5px; }
.bs-frame:not(.has-client) :is(.bs-client-tile, .bs-client-avatar) svg { opacity: 0; transform: scale(.6); }
.bs-frame.is-clients-open .bs-client-tile { background-color: #f5f8ff; outline-color: #9bbdff; }
.bs-clients { position: absolute; z-index: 2; top: 0; left: calc(100% + 14px); display: grid; gap: 1px; width: max-content; padding: 4px; border: 1px solid #dbe5f3; border-radius: 9px; background: #fff; box-shadow: 0 12px 26px -12px #10244047, 0 1px 2px #1024400f; transform-origin: top left; transform: scale(var(--dropdown-pre-scale, .97)); opacity: 0; pointer-events: none; transition: transform var(--dropdown-open-dur, 250ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)), opacity var(--dropdown-open-dur, 250ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)); }
.bs-frame.is-clients-open .bs-clients { transform: scale(1); opacity: 1; }
.bs-frame.is-clients-closing .bs-clients { transform: scale(var(--dropdown-closing-scale, .99)); opacity: 0; transition: transform var(--dropdown-close-dur, 150ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)), opacity var(--dropdown-close-dur, 150ms) var(--dropdown-ease, cubic-bezier(.22, 1, .36, 1)); }
.bs-client-item { display: flex; align-items: center; gap: 7px; padding: 4px 7px 4px 4px; border-radius: 6px; color: #3b4a62; font-size: 9px; font-weight: 600; white-space: nowrap; transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }
.bs-client-item .bs-face { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.bs-client-item > span:not(.bs-face) { flex: 1; }
.bs-tick { width: 10px; height: 10px; margin-left: 10px; fill: none; stroke: #075cff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bs-client-item.is-current { color: #1d4fb8; }
.bs-client-item.is-current .bs-tick { opacity: 1; }
.bs-client-item.is-hover { background: #edf3ff; color: #1d4fb8; }
.bs-client-item.is-press { background: #dbe7ff; }
.bs-client-name .bs-empty { color: #627086; font-weight: 500; }
.bs-client-name > * { overflow: hidden; text-overflow: ellipsis; }
.bs-frame:not(.has-client) .bs-client-name .bs-full, .bs-frame.has-client .bs-client-name .bs-empty { opacity: 0; }
.bs-after { transition: opacity var(--duration-fast) var(--ease-smooth-out) 120ms; }
.bs-frame:not(.has-client) .bs-after { opacity: 0; transition-delay: 0ms; }
/* The client's name is the point of the strip: the company name gives way first, and on phones the QB badge and Linked pill carry it alone. */
@media (min-width: 481px) { .bs-client-avatar + span { flex-shrink: 0; } }
@media (max-width: 480px) { .bs-context > span.bs-after:not(.batch-avatar) { display: none; } }
.bs-work { transition: opacity var(--duration-medium) var(--ease-smooth-out); }
.bs-frame:not(.has-client) .bs-work { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .bs-clients, .bs-client-item, .bs-client-tile, .bs-client-tile svg, .bs-client-avatar svg, .bs-after, .bs-work { transition: none; } }
/* Batch invoices (the row under expenses, batch-spotlight.js): the same frame,
   with Void and Delete, and a customer menu
   that takes more than one. Each pass alternates the action; the frame's
   data-op picks which words show. A paid invoice stays out of the review. */
.bs-frame[data-op="void"] .bi-d, .bs-frame[data-op="delete"] .bi-v { display: none; }
.bi-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bi-title { color: #13233b; font-size: 10px; font-weight: 650; }
.bi-ops { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: #f1f4f9; }
.bi-op { padding: 3px 8px; border-radius: 6px; color: #627086; font-size: 9px; font-weight: 600; white-space: nowrap; transition: background-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), transform 120ms var(--ease-smooth-out); }
.bi-op.is-current { background: #fff; color: #13233b; box-shadow: 0 1px 2px #1734541f; }
.bs-frame[data-op="delete"] .bi-op.is-current { color: #b8402b; }
.bi-op.is-press { transform: scale(.95); }
.bi-menu { min-width: 150px; }
.bi-menu .bs-menu-item { justify-content: flex-start; gap: 7px; }
.bi-menu .bs-menu-item > span { flex: 1; }
.bi-box { display: grid; place-items: center; flex: none; width: 11px; height: 11px; border: 1.5px solid #c3d0e2; border-radius: 3px; background: #fff; transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out); }
.bi-box svg { width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--duration-fast) var(--ease-smooth-out); }
.bs-menu-item.is-on .bi-box { background: #075cff; border-color: #075cff; }
.bs-menu-item.is-on .bi-box svg { stroke-dashoffset: 0; }
.bs-menu-item.is-on { color: #1d4fb8; }
.bi-status { font-style: normal; font-weight: 600; color: #5c728e; }
.bi-status[data-status="overdue"] { color: #9a5b0b; }
.bi-status[data-status="paid"] { color: #1c7c52; }
.bs-frame:not([data-stage="idle"]) .bs-row[data-cust="north"] { opacity: .38; }
.bs-line.is-blocked { background: #fff6e2; }
.bs-line.is-blocked em { color: #8a5a0e; }
.bs-frame[data-op="delete"] .bs-line.is-change { background: #fdf0ec; }
@media (prefers-reduced-motion: reduce) { .bi-op, .bi-box, .bi-box svg { transition: none; } }