/* Statement2Ledger page styles. Builds on /brand/tokens.css and /site.css (loaded first). All classes are prefixed s2l-. */
:root {
  --s2l-ok-bg: #e9f4ee; --s2l-ok-line: #b9dbc7; --s2l-ok-ink: #22603f;
  --s2l-warn-bg: #fdf0e3; --s2l-warn-line: #efc9a3; --s2l-warn-ink: #8f3d10; --s2l-warn-mark: #c2621f;
  --s2l-none-bg: #f1f2f4; --s2l-none-line: #d9dce2; --s2l-none-ink: #454d5c;
  --s2l-err: #b42318; --s2l-brass-text: #8a5f14; --s2l-faint: #6b7280;
  --s2l-shadow: 0 1px 2px rgba(22, 34, 59, .05), 0 10px 30px rgba(22, 34, 59, .07);
}

[hidden] { display: none !important; }

/* Focus: a darker ring than the site default so it reaches 3:1 against white and the page background. */
:focus-visible { outline-color: #8a5f14; }

/* Hero */
.s2l-hero { padding-bottom: 8px; }
.s2l-hero p.kicker { font-size: 0.75rem; color: var(--s2l-brass-text); max-width: none; }
.s2l-hero h1 { max-width: 820px; }
.s2l-hero > p:not(.kicker) { max-width: 640px; }
/* Beta notice under the intro: amber like the 'check this' badge it points to. */
.s2l-hero > p.s2l-beta { max-width: 720px; margin: 14px 0 0; padding: 9px 12px; border-radius: 10px; background: #fff8e6;
  border: 1px solid #ead08c; color: var(--ink-2); font-size: 0.95rem; }
.s2l-beta-tag { display: inline-block; margin-right: 6px; vertical-align: 1px; font: 700 0.72rem/1 var(--font-sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: #6b4a0e; background: #f5e2b2; border-radius: 99px; padding: 4px 8px; }
.s2l-points { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.s2l-points li { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 500; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px 5px 10px; }
.s2l-points svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

/* Tool card and drop zone */
.s2l-tool { padding-top: 18px; outline: none; }
.s2l-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--s2l-shadow); }
@media (min-width: 720px) { .s2l-card { padding: 24px; } }
.s2l-drop { position: relative; text-align: center; border: 2px dashed #d6ccba; border-radius: 14px; background: #fcfaf6;
  padding: 34px 18px 26px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.s2l-drop:hover { border-color: var(--brass-bright); }
.s2l-drop.is-over { border-color: var(--brass); background: var(--brass-soft); }
.s2l-drop-icon { width: 46px; height: 46px; color: var(--brass); margin-bottom: 6px; }
.s2l-drop-title { font: 700 clamp(1.2rem, 3vw, 1.45rem)/1.25 var(--font-serif); margin: 0 0 2px; }
.s2l-drop-or { color: var(--muted); font-size: 0.9rem; margin: 0 0 10px; }
.s2l-drop-hint { color: var(--muted); font-size: 0.875rem; margin: 14px 0 0; }
.s2l-when-files { display: none; }
.has-files .s2l-when-files { display: inline; }
.has-files .s2l-when-empty { display: none; }
.has-files .s2l-drop { padding: 16px 18px; display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; }
.has-files .s2l-drop-icon { width: 30px; height: 30px; margin: 0; }
.has-files .s2l-drop-title { font: 600 1rem var(--font-sans); margin: 0; }
.has-files .s2l-drop-or, .has-files .s2l-drop-hint { display: none; }

.s2l-privacy { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--s2l-ok-bg); color: var(--ink-2); }
.s2l-privacy svg { width: 22px; height: 22px; flex: none; color: var(--s2l-ok-ink); margin-top: 1px; }
.s2l-privacy p { margin: 0; font-size: 0.93rem; }
.s2l-privacy strong { color: var(--ink); }
.s2l-ready { display: block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--s2l-ok-ink); }
.s2l-ready::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: 1px; }

/* Progress */
.s2l-progress { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.s2l-progress-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 8px; }
.s2l-progress-text { margin: 0; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; flex: 1 1 240px; }
.s2l-noscript { margin: 12px 0 0; font-weight: 600; color: var(--s2l-err); }
.s2l-progress progress { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: var(--well); overflow: hidden; accent-color: var(--brass-bright); }
.s2l-progress progress::-webkit-progress-bar { background: var(--well); border-radius: 99px; }
.s2l-progress progress::-webkit-progress-value { background: var(--brass-bright); border-radius: 99px; }
.s2l-progress progress::-moz-progress-bar { background: var(--brass-bright); }

/* File list */
.s2l-files { margin-top: 22px; }
.s2l-files-title { font: 700 0.78rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.s2l-queue { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s2l-file { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 7px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card); font: 500 0.9rem var(--font-sans); color: var(--ink); cursor: pointer; text-align: left; }
.s2l-file:hover { border-color: var(--brass-bright); }
.s2l-file[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.s2l-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.s2l-chip { flex: none; font: 600 0.72rem/1 var(--font-sans); letter-spacing: 0.02em; border-radius: 99px; padding: 4px 8px; background: var(--s2l-none-bg); color: var(--s2l-none-ink); }
.s2l-chip.ok { background: var(--s2l-ok-bg); color: var(--s2l-ok-ink); }
.s2l-chip.warn { background: var(--s2l-warn-bg); color: var(--s2l-warn-ink); }
.s2l-chip.bad { background: #fde8e7; color: var(--s2l-err); }

/* Result */
.s2l-result { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--s2l-shadow); }
@media (min-width: 720px) { .s2l-result { padding: 26px 28px; } }
.s2l-result-kicker { font: 600 0.72rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s2l-brass-text); margin: 0 0 4px; }
.s2l-result-head h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); overflow-wrap: anywhere; margin-bottom: 12px; outline: none; }
.s2l-meta { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 0 0 20px; padding: 14px 16px; background: var(--well); border-radius: 12px; }
.s2l-meta div { min-width: 0; max-width: 100%; }
.s2l-meta dt { font: 600 0.72rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s2l-meta dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* Error / special states */
.s2l-state { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--s2l-none-line); background: var(--s2l-none-bg); border-radius: 14px; padding: 18px; }
.s2l-state h3 { margin: 0 0 6px; }
.s2l-state p { margin: 0 0 8px; color: var(--ink-2); }
.s2l-state ul { margin: 0; padding-left: 1.2em; color: var(--ink-2); }
.s2l-state li { margin-bottom: 4px; }
.s2l-state-icon { width: 28px; height: 28px; flex: none; color: var(--s2l-none-ink); }
.s2l-state.is-warn { background: var(--s2l-warn-bg); border-color: var(--s2l-warn-line); }
.s2l-state.is-warn .s2l-state-icon { color: var(--s2l-warn-mark); }
.s2l-state.is-error { background: #fdf0ef; border-color: #f2c4c0; }
.s2l-state.is-error .s2l-state-icon { color: var(--s2l-err); }

/* Date question */
.s2l-dateq { border: 1.5px solid var(--brass-bright); background: #fffaf0; border-radius: 14px; padding: 16px 18px; margin: 0 0 16px; }
.s2l-dateq legend { float: left; width: 100%; font: 700 1.05rem var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 4px; padding: 0; }
.s2l-dateq-help { clear: both; margin: 0 0 12px; color: var(--ink-2); font-size: 0.95rem; }
.s2l-dateq-options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.s2l-radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; }
.s2l-radio-card:hover { border-color: var(--brass-bright); }
.s2l-radio-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.s2l-radio-card:has(input:focus-visible) { outline: 3px solid var(--brass-bright); outline-offset: 2px; }
.s2l-radio-card input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.s2l-radio-card strong { display: block; }
.s2l-dateq-eg { display: block; font-size: 0.88rem; color: var(--muted); overflow-wrap: anywhere; }
.s2l-dateq.is-answered { border-color: var(--line); background: var(--card); }

/* Reconciliation badge */
.s2l-recon { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--s2l-none-line); background: var(--s2l-none-bg); outline: none; }
.s2l-recon-icon { width: 26px; height: 26px; flex: none; display: none; margin-top: 1px; }
.s2l-recon.is-ok { background: var(--s2l-ok-bg); border-color: var(--s2l-ok-line); }
.s2l-recon.is-ok .s2l-i-ok { display: block; color: var(--ok); }
.s2l-recon.is-warn { background: var(--s2l-warn-bg); border-color: var(--s2l-warn-line); }
.s2l-recon.is-warn .s2l-i-warn { display: block; color: var(--s2l-warn-mark); }
.s2l-recon.is-none .s2l-i-none { display: block; color: #6b7280; }
/* Adds up, but the opening or closing balance was worked out: amber, never green. */
.s2l-recon.is-unverified { background: #fff8e6; border-color: #ead08c; }
.s2l-recon.is-unverified .s2l-i-warn { display: block; color: #a8761f; }
.s2l-recon.is-unverified .s2l-recon-title { color: #6f4e0c; }
.s2l-recon-body { min-width: 0; }
.s2l-recon-title { margin: 0; font-weight: 700; font-size: 1.02rem; }
.s2l-recon.is-ok .s2l-recon-title { color: var(--s2l-ok-ink); }
.s2l-recon.is-warn .s2l-recon-title { color: var(--s2l-warn-ink); }
.s2l-recon.is-none .s2l-recon-title { color: var(--s2l-none-ink); }
.s2l-recon-detail { margin: 3px 0 0; font-size: 0.92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.s2l-recon-actions { margin: 10px 0 0; }
.s2l-recon .btn { background: #fff; }
.s2l-recon .btn:hover { background: var(--ink); color: #fff; }

/* Summary strip */
.s2l-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
@media (min-width: 720px) { .s2l-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s2l-sum { background: var(--card); padding: 10px 14px; min-width: 0; }
.s2l-sum label, .s2l-sum-label { display: block; font: 600 0.72rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.s2l-sum-value { display: block; font: 600 1.05rem var(--font-sans); font-variant-numeric: tabular-nums; padding: 4px 0; overflow-wrap: anywhere; }
.s2l-sum input { width: 100%; font: 600 1.05rem var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); border: 1.5px solid transparent; border-radius: 8px;
  background: var(--well); padding: 3px 8px; min-height: 36px; }
.s2l-sum input:hover { border-color: var(--line); }
.s2l-sum input:focus { outline: none; border-color: #8a5f14; background: #fff; box-shadow: 0 0 0 1px #8a5f14, 0 0 0 4px var(--brass-soft); }
.s2l-in { color: var(--s2l-ok-ink); }

/* Notes */
.s2l-notes { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--brass-bright); background: var(--well); border-radius: 0 12px 12px 0; }
.s2l-notes-title { font: 700 0.78rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.s2l-notes ul { margin: 0; padding-left: 1.1em; font-size: 0.92rem; color: var(--ink-2); }
.s2l-notes li { margin-bottom: 3px; overflow-wrap: anywhere; }

/* Table */
.s2l-table-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 22px 0 8px; }
.s2l-table-head h3 { margin: 0; font-size: 1.1rem; }
.s2l-count { font-weight: 500; color: var(--muted); font-size: 0.95rem; }
.s2l-table-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
.s2l-skip-table { flex-basis: 100%; font-size: 0.85rem; font-weight: 600; color: var(--s2l-brass-text); }
.s2l-notice { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 12px; background: var(--ink); color: #fff; border-radius: 10px; font-size: 0.9rem; }
.s2l-notice p { margin: 0; overflow-wrap: anywhere; }
.s2l-notice.is-error { background: #fdf0ef; color: var(--s2l-err); border: 1px solid #f2c4c0; }
.s2l-notice .btn { border-color: #fff; color: #fff; }
.s2l-notice .btn:hover { background: #fff; color: var(--ink); }
.s2l-table-wrap { max-height: min(68vh, 640px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (pointer: fine) { .s2l-table-wrap { overscroll-behavior: contain; } }
.s2l-table-wrap:focus-visible { outline-offset: 2px; }
.s2l-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.s2l-table th, .s2l-table td { padding: 3px 4px; border-bottom: 1px solid #efe9df; vertical-align: top; }
.s2l-table thead th { position: sticky; top: 0; z-index: 2; background: var(--well); text-align: left; font: 600 0.72rem var(--font-sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.s2l-table thead th.c-amt, .s2l-table thead th.c-bal { text-align: right; }
.s2l-table tbody tr:last-child > * { border-bottom: 0; }
.s2l-table tbody tr:hover > * { background: #fcfaf6; }
.s2l-table .c-n { width: 52px; text-align: right; color: var(--muted); font-size: 0.8rem; padding: 12px 8px 3px; white-space: nowrap; font-weight: 500; }
.s2l-table thead .c-n { padding: 9px 8px; }
.s2l-table .c-date { width: 124px; }
.s2l-table .c-amt, .s2l-table .c-bal { width: 120px; }
.s2l-table .c-ref { width: 104px; }
.s2l-table .c-act { width: 80px; white-space: nowrap; text-align: right; padding-right: 8px; padding-top: 5px; }
.s2l-cell { display: block; width: 100%; min-width: 0; font: inherit; line-height: 1.4; color: var(--ink); background: transparent; border: 1.5px solid #ece6da; border-radius: 7px; padding: 6px 8px; min-height: 36px; text-overflow: ellipsis; }
/* Descriptions grow to show all their text (textarea mirrored by a hidden ::after copy). */
.s2l-grow { display: grid; }
.s2l-grow::after { content: attr(data-value) " "; white-space: pre-wrap; overflow-wrap: anywhere; visibility: hidden; font: inherit; line-height: 1.4; padding: 6px 8px; border: 1.5px solid transparent; }
.s2l-grow > textarea, .s2l-grow::after { grid-area: 1 / 1 / 2 / 2; }
.s2l-grow > textarea { resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.s2l-cell:hover { border-color: var(--line); background: #fff; }
.s2l-cell:focus { outline: none; border-color: #8a5f14; background: #fff; box-shadow: 0 0 0 1px #8a5f14, 0 0 0 4px var(--brass-soft); text-overflow: clip; }
.s2l-cell.num { text-align: right; }
.s2l-cell.is-in { color: var(--s2l-ok-ink); }
.s2l-cell[aria-invalid="true"] { border-color: var(--s2l-err); background: #fdf0ef; }
.s2l-cell::placeholder { color: var(--s2l-faint); }
.s2l-rowbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.s2l-rowbtn svg { width: 16px; height: 16px; }
.s2l-rowbtn:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.s2l-rowbtn.del:hover { color: var(--s2l-err); border-color: #f2c4c0; background: #fdf0ef; }
tr.is-bad > * { background: var(--s2l-warn-bg); }
tr.is-bad:hover > * { background: #fbe7d3; }
tr.is-bad > .c-n { box-shadow: inset 4px 0 0 var(--s2l-warn-mark); color: var(--s2l-warn-ink); font-weight: 700; }
tr.is-new > * { animation: s2l-flash 1.2s ease-out; }
@keyframes s2l-flash { from { background: var(--brass-soft); } }
@media (prefers-reduced-motion: reduce) { tr.is-new > * { animation: none; } }
.s2l-flag { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-bright); margin-right: 6px; vertical-align: 1px; cursor: help; }
.s2l-add { margin: 10px 0 0; }
.s2l-add .btn { gap: 6px; }

/* Export */
.s2l-export { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.s2l-export h3 { font-size: 1.1rem; margin-bottom: 12px; }
.s2l-export-opts { display: grid; gap: 14px 20px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 760px) { .s2l-export-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s2l-export-opts .field input { min-height: 44px; width: 100%; }
.s2l-export-opts .field select { min-height: 44px; }
.s2l-export-opts .field .s2l-bid-other { margin-top: 8px; }
.s2l-amt-style { margin: 0; }
.s2l-amt-style legend { font: 600 0.9rem var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 5px; }
.s2l-amt-style .check { margin-bottom: 6px; align-items: center; min-height: 28px; cursor: pointer; }
.s2l-amt-style .check input { margin-top: 0; }
.s2l-export-block { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #fffaf0; border: 1.5px solid var(--brass-bright); font-weight: 600; font-size: 0.93rem; }
.s2l-export-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .s2l-export-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s2l-exp { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 64px; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 12px;
  background: #fff; color: var(--ink); cursor: pointer; font: inherit; transition: background-color .15s, color .15s; }
.s2l-exp:hover { background: var(--ink); color: #fff; }
.s2l-exp:hover .s2l-exp-sub { color: #d9d3c6; }
.s2l-exp:disabled { cursor: not-allowed; border-color: var(--line); color: var(--s2l-faint); background: #faf8f4; }
.s2l-exp:disabled .s2l-exp-sub { color: var(--s2l-faint); }
.s2l-exp-name { font-weight: 700; font-size: 1rem; }
.s2l-exp-sub { font-size: 0.8rem; color: var(--muted); }
.s2l-export-status { margin: 10px 0 0; min-height: 1.5em; font-size: 0.9rem; color: var(--ink-2); overflow-wrap: anywhere; }
.s2l-export-status.is-error { color: var(--s2l-err); font-weight: 600; }

/* Content below the tool */
.s2l-how { padding-top: 64px; }
.s2l-steps { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.s2l-steps li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.s2l-steps p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.s2l-step-n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 0.95rem var(--font-sans); margin-bottom: 10px; }
.s2l-proof h3 { margin-bottom: 6px; }
.s2l-proof p { margin: 0; color: var(--ink-2); }
.s2l-two { display: grid; gap: 16px 32px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 820px) { .s2l-two { grid-template-columns: 1fr 1fr; } .s2l-guides .s2l-guide:nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .s2l-guides .s2l-two { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; } .s2l-guides .s2l-guide:nth-child(3) { grid-column: auto; } }
.s2l-list { list-style: none; padding: 0; margin: 0 0 12px; }
.s2l-list li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink-2); }
.s2l-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%; }
.s2l-list-ok li::before { background: var(--s2l-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2L11.5 5.7' fill='none' stroke='%232f7a55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.s2l-list-no li::before { background: var(--s2l-none-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.s2l-honest { background: var(--well); border-radius: 12px; padding: 12px 14px; font-size: 0.95rem; color: var(--ink-2); }
.s2l-guide ol { margin: 0 0 12px; padding-left: 1.3em; color: var(--ink-2); }
.s2l-guide li { margin-bottom: 7px; }
.s2l-guide h3 { font: 700 1.2rem var(--font-serif); margin-bottom: 12px; }
.s2l-faq-list { display: grid; gap: 0 40px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 900px) { .s2l-faq-list { grid-template-columns: 1fr 1fr; } }
.s2l-q { padding: 16px 0; border-top: 1px solid var(--line); }
.s2l-q h3 { margin-bottom: 6px; }
.s2l-q p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

@media (max-width: 520px) {
  .s2l-points li { font-size: 0.85rem; }
  .s2l-file-name { max-width: 180px; }
}

/* Phones: each transaction is a small card (date and amount on the first line, the description under them), so
   nothing has to be scrolled sideways. The column headings are replaced by small labels. */
@media (max-width: 600px) {
  .s2l-table-wrap { max-height: none; overflow: visible; border: 0; background: transparent; }
  .s2l-table { min-width: 0; display: block; }
  .s2l-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .s2l-table tbody { display: block; }
  .s2l-table tbody tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:
      "n date amt" "n desc desc" "n bal ref" "n act act"; gap: 2px 6px; padding: 8px 6px 6px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .s2l-table tbody tr > * { display: block; width: auto; padding: 0; border-bottom: 0; background: transparent; }
  .s2l-table tbody tr:hover > * { background: transparent; }
  .s2l-table tbody tr.is-bad { background: var(--s2l-warn-bg); border-color: var(--s2l-warn-line); }
  .s2l-table tbody tr.is-bad > .c-n { box-shadow: none; }
  .s2l-table .c-n { grid-area: n; width: auto; padding: 10px 0 0; text-align: left; }
  .s2l-table .c-date { grid-area: date; width: auto; }
  .s2l-table .c-amt { grid-area: amt; width: auto; }
  .s2l-table .c-desc { grid-area: desc; }
  .s2l-table .c-bal { grid-area: bal; width: auto; }
  .s2l-table .c-ref { grid-area: ref; width: auto; }
  .s2l-table .c-act { grid-area: act; width: auto; text-align: right; padding: 0; }
  .s2l-table td::before { display: block; font: 600 0.66rem var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 2px 2px 1px; }
  .s2l-table td.c-date::before { content: "Date"; }
  .s2l-table td.c-amt::before { content: "Amount"; text-align: right; }
  .s2l-table td.c-desc::before { content: "Description"; }
  .s2l-table td.c-bal::before { content: "Balance"; text-align: right; }
  .s2l-table td.c-ref::before { content: "Reference"; }
  .s2l-table td.c-act::before { content: none; }
  .s2l-rowbtn { width: 44px; height: 44px; }
}