/*
 * Rules, colour roles and approved exceptions: docs/design.md.
 * Classes and when to use each: docs/components.md.
 * Raw values (colour, size, space, radius, shadow) belong in :root below.
 */

:root {
  --bg: #ffffff;
  --panel: #f7f7f5;
  --panel-2: #efefec;
  --border: #e5e5e2;
  --border-strong: #cfcfca;
  --text: #1a1a1a;
  --text-2: #6b6b6b;
  --text-3: #8f8f8a;

  --accent: #1f5edb;
  --accent-hover: #1a4fba;
  --accent-soft: #eef3fd;
  --focus: #1f5edb;

  --ok: #1d7a3a;
  --ok-soft: #ebf6ee;
  --warn: #8a5a00;
  --warn-soft: #fdf5e3;
  --warn-line: #e0a526;
  --bad: #b42318;
  --bad-soft: #fdeceb;
  --info: #1f5edb;
  --info-soft: #eef3fd;

  /* The shadow at the edge of a table that scrolls sideways. */
  --shadow-edge: rgba(20, 20, 20, 0.16);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 28px;
  --fs-display: 46px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --radius: 6px;
  --control-h: 36px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.hidden { display: none !important; }
.muted { color: var(--text-3); }

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Path-based views: set on <html> before paint (public/route-class.js) */
html.route-app #authPage,
html.route-auth #appMain { display: none !important; }

.boot-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
html.route-app:not(.ready) .boot-screen,
html.route-auth:not(.ready) .boot-screen { display: flex; }
html.route-app:not(.ready) .container,
html.route-app:not(.ready) #appFooter,
html.route-auth:not(.ready) .container,
html.route-auth:not(.ready) #appFooter { visibility: hidden; }
.boot-text { font-size: var(--fs-sm); color: var(--text-3); }

/* One width for every page, header included. Only a statement with its PDF
   showing spreads wider (.review below); the header never moves. */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) var(--s-7);
  flex: 1;
  width: 100%;
}

/* ─── Controls ─────────────────────────────────────────────── */

button {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  min-height: var(--control-h);
  padding: 0 var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
button:hover { background: var(--panel); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.primary-btn {
  width: 100%;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: var(--fs-md);
  min-height: 40px;
}
.primary-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
a.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0 var(--s-4);
  font-weight: 500;
}
a.primary-btn:hover { background: var(--accent-hover); }

.secondary-btn,
.api-btn {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.secondary-btn:hover,
.api-btn:hover { background: var(--panel); }

.api-btn { min-height: 32px; padding: 0 var(--s-3); }

.convert-btn,
.secondary-btn { width: auto; min-width: 112px; }

.link-btn {
  background: none;
  border: none;
  min-height: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.link-btn { text-decoration: none; }
.link-btn:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }

.text-link { color: var(--accent); font-size: var(--fs-md); text-decoration: none; font-weight: 500; }
.text-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--s-1);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"] {
  width: 100%;
  min-height: 40px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-4);
}
input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
input::placeholder { color: var(--text-3); }

input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

.model-select {
  flex: 1;
  max-width: 320px;
  min-height: var(--control-h);
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 0 32px 0 var(--s-3);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6b6b' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}
.model-select:hover { border-color: var(--text-3); }
.model-select:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.model-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Header + footer ──────────────────────────────────────── */

.site-header,
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
}
.brand-mark { display: block; flex: none; }
/* The accountant's double underline: a checked total. */
.brand-name { padding-bottom: 5px; margin-bottom: -5px; background: url("/brand-underline.svg") left bottom / 100% 5px no-repeat; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--s-2);
  border-radius: var(--radius);
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); background: var(--panel); }

.header-cta { width: auto; min-height: 32px; font-size: var(--fs-sm); padding: 0 var(--s-3); }

.quota-badge {
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-decoration: none;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
a.quota-badge:hover { color: var(--text); background: var(--panel); }

.menu-wrap { position: relative; }
.menu-trigger { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-1));
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-1);
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 400;
  min-height: 34px;
  padding: 0 var(--s-3);
  text-decoration: none;
  line-height: 34px;
  font-size: var(--fs-sm);
}
.menu-item:hover { background: var(--panel); }
.menu-email { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); color: var(--text-2); border-bottom: 1px solid var(--border); margin-bottom: var(--s-1); overflow: hidden; text-overflow: ellipsis; }
.menu-danger { color: var(--bad); }

/* Footer: the same on every page. Brand and one line on the left, three short
   link columns, then a thin bar with the copyright and a status line (plan and
   pages left when signed in). Content sits at the page width. */
.site-footer { background: var(--panel); border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-sm); }
.footer-inner { max-width: 960px; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-5); }
/* The last column (the email address, which can't wrap) is as wide as its text, so it never pokes past the edge. */
.footer-top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) max-content; gap: var(--s-6); }
/* Too narrow for five columns: the brand takes the top row and the four link columns share the next. */
@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)) max-content; gap: var(--s-6) var(--s-5); }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand p { margin-top: var(--s-3); max-width: 280px; line-height: 1.55; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.footer-link { color: var(--text-2); text-decoration: none; }
.footer-link:hover { color: var(--text); text-decoration: underline; }
/* Inside the app the footer is one quiet line: copyright and the legal links.
   The header already shows the pages left, and the app needs the room. */
.footer-mini { display: none; gap: var(--s-4); flex-wrap: wrap; }
body.is-app .footer-top, body.is-app .footer-formats { display: none; }
body.is-app .footer-mini { display: flex; }
body.is-app .site-footer { background: var(--bg); }
body.is-app .footer-inner { padding-top: var(--s-4); padding-bottom: var(--s-4); }
body.is-app .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--border); color: var(--text-3); }

/* ─── Landing ──────────────────────────────────────────────── */

.landing { padding-bottom: var(--s-6); }


.hero { padding: var(--s-7) 0 var(--s-6); }
.hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--s-3);
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-4);
}
.hero h1 mark {
  color: inherit;
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-lead { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.55; margin: 0 auto var(--s-5); max-width: 620px; text-wrap: balance; }

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); }
.hero-primary { width: auto; min-height: 44px; padding: 0 var(--s-5); }

.hero-bullets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.hero-bullets li::before { content: "✓ "; color: var(--ok); font-weight: 600; }

.section { padding: var(--s-7) 0; border-top: 1px solid var(--border); }

/* Landing: real screenshots of the app. */
.hero h1 mark { white-space: nowrap; }
@media (max-width: 600px) { .hero h1 br { display: none; } }
.hero-kicker { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); }
.hero-shot { margin-top: var(--s-7); }
.hero-shot img, .show-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 48px -24px rgba(20, 20, 20, 0.28);
  background: var(--bg);
}
.hero-shot figcaption { text-align: center; color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-3); }
.show-kicker { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); }
.landing .section-heading.center { text-align: center; margin-bottom: var(--s-6); }
.risk-line { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--s-3); }
.hero .risk-line { text-align: center; }



.how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.how-steps li { text-align: center; padding: 0 var(--s-2); }
.how-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; margin-bottom: var(--s-3); }
.how-steps h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--s-2); }
.how-steps p { font-size: var(--fs-md); color: var(--text-2); line-height: 1.55; }
.cta-row { display: flex; flex-direction: column; align-items: center; margin-top: var(--s-6); }


.flow { margin: var(--s-7) auto 0; max-width: 1000px; }
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .flow-tall { display: none; }
.flow-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.flow-dash { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; animation: flow-dash 0.9s linear infinite; }
.flow-node { fill: var(--bg); stroke: var(--text); stroke-width: 2; }
.flow-dot { fill: var(--accent); }
.flow-page { fill: var(--bg); stroke: var(--text); stroke-width: 2; }
.flow-page.back { stroke: var(--border-strong); }
.flow-bar { fill: var(--panel-2); }
.flow-bar.dark { fill: var(--text-3); }
.flow-tag { fill: var(--bad-soft); }
.flow-tag-text { fill: var(--bad); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.flow-label { fill: var(--text-2); font-size: 13px; }
.flow-label.strong { fill: var(--text); font-size: 15px; font-weight: 600; }
.flow-ring { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.flow-ring.r1 { opacity: 0.14; animation: flow-pulse 2.4s ease-out infinite; }
.flow-ring.r2 { opacity: 0.07; animation: flow-pulse 2.4s ease-out 0.4s infinite; }
.flow-core { fill: var(--accent); }
.flow-tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.flow-chip rect { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1.5; }
.flow-chip text { fill: var(--text); font-size: 14px; font-weight: 500; }
@keyframes flow-dash { to { stroke-dashoffset: -18; } }
@keyframes flow-pulse {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-dash, .flow-ring { animation: none; }
  .flow-dot { display: none; }
}

.how .flow { margin: 0 auto var(--s-6); }
.how-steps li p { font-size: var(--fs-sm); }

/* Features: the two that sell it get a panel each, with the real screenshot
   cropped at the bottom; the other four sit in a 2×2 grid of close-ups. */
.spot { background: var(--panel); border-radius: 14px; padding: var(--s-6) var(--s-6) 0; overflow: hidden; margin-bottom: var(--s-4); }
.spot-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: end; margin-bottom: var(--s-5); }
.spot h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.spot-top > p, .feat-card p:not(.show-kicker) { color: var(--text-2); line-height: 1.55; }
.spot-shot { height: 300px; overflow: hidden; border-radius: 10px 10px 0 0; box-shadow: 0 1px 3px rgba(20, 20, 20, 0.08); }
.spot-shot .show-shot { border: 0; border-radius: 0; box-shadow: none; }
.spot .mini { display: none; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.feat-card { border: 1px solid var(--border); border-radius: 14px; padding: var(--s-5); display: flex; flex-direction: column; }
.feat-card .feat-vis { background: var(--panel); border-radius: 10px; padding: 10px; margin-bottom: var(--s-4); }
.feat-card h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: var(--s-2); }
.feat-card p:not(.show-kicker) { font-size: 14px; }

/* Close-ups of the app, drawn with the same demo statement as the screenshots.
   They are pictures of the app, so "verified" keeps the app's green. */
.landing .mini { --ok: #1d7a3a; --ok-soft: #ebf6ee; }
.mini { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06); }
.mini-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--panel-2); align-items: center; }
.mini-row:first-child { border-top: 0; }
.mini-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-row .amt { text-align: right; min-width: 56px; }
.mini-row .bal { text-align: right; min-width: 64px; color: var(--text-2); }
.mini-head { color: var(--text-2); background: var(--panel); font-weight: 500; font-size: 12px; }
.mini-hl { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mini-off { box-shadow: inset 0 -2px 0 var(--warn-line); }
.mini-warn { margin: 10px; border-radius: var(--radius); background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn-line); padding: 10px var(--s-3); }
.mini-warn b, .mini-ok { display: flex; gap: var(--s-2); align-items: center; font-weight: 600; }
.mini-warn p { margin-top: var(--s-1); color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.mini-warn p span { color: var(--accent); }
.mini-ok { margin: 10px; border-radius: var(--radius); background: var(--ok-soft); box-shadow: inset 3px 0 0 var(--ok); padding: 9px var(--s-3); }
.mini-ok .mini-note { font-weight: 400; color: var(--text-3); }
.mini-dot { flex: none; width: 15px; height: 15px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mini-warn .mini-dot { background: var(--warn-line); }
.mini-ok .mini-dot { background: var(--ok); }
.mini-cell { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; background: var(--bg); padding: 0 4px; }
.mini-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; padding: 10px; background: var(--panel); }
.mini-pair > .mini { box-shadow: none; }
.mini-pdf { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px var(--s-3); font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #222; }
.mini-pdf strong { display: block; font-size: 11px; margin-bottom: 6px; letter-spacing: 0.02em; }
.mini-pdf div { display: grid; grid-template-columns: 40px minmax(0, 1fr) 46px; gap: 6px; padding: 2px 3px; white-space: nowrap; }
.mini-pdf div span { overflow: hidden; text-overflow: ellipsis; }
.mini-pdf div span:last-child { text-align: right; }
.mini-pdf .hl { outline: 1.5px solid var(--warn-line); background: var(--warn-soft); border-radius: 2px; }
.mini-chain { padding: var(--s-3); }
.mini-chain .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-2); font-weight: 600; }
.mini-chain .top span { font-size: 11.5px; color: var(--bad); background: var(--bad-soft); padding: 2px var(--s-2); border-radius: 999px; }
.mini-month { background: var(--panel); border-radius: var(--radius); padding: 7px 10px; display: flex; justify-content: space-between; }
.mini-month span { color: var(--text-3); font-size: 12px; }
.mini-link { margin-left: 14px; padding: var(--s-1) 0 var(--s-1) var(--s-3); border-left: 2px solid var(--ok); color: var(--ok); font-size: 12px; }
.mini-link.bad { border-color: var(--bad); color: var(--bad); }
.mini-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 10px; border-bottom: 1px solid var(--panel-2); font-size: 12.5px; }
.mini-bar b { margin-right: auto; font-weight: 500; white-space: nowrap; }
.mini-btn { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.mini-btn.bad { color: var(--bad); border-color: #f0c3bf; }
.mini-sel { background: var(--accent-soft); }
.mini-box { width: 12px; height: 12px; border: 1.5px solid var(--border-strong); border-radius: 3px; display: inline-block; vertical-align: -2px; margin-right: var(--s-2); }
.mini-sel .mini-box { background: var(--accent); border-color: var(--accent); }
.mini-export { padding: var(--s-3); }
.mini-label { font-size: 11.5px; color: var(--text-2); margin-bottom: var(--s-1); }
.mini-select { border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 5px 9px; margin-bottom: 10px; display: flex; justify-content: space-between; }
.mini-select::after { content: "⌄"; color: var(--text-2); }
.mini-preview { border: 1px solid var(--border); border-radius: var(--radius); font-size: 11.5px; overflow: hidden; }
.mini-preview div { display: grid; grid-template-columns: 76px 64px minmax(0, 1fr); gap: var(--s-2); padding: var(--s-1) var(--s-2); border-top: 1px solid var(--panel-2); white-space: nowrap; }
.mini-preview span { overflow: hidden; text-overflow: ellipsis; }
.mini-preview div:first-child { border-top: 0; background: var(--panel); color: var(--text-2); }
.mini-download { margin-top: 10px; background: var(--accent); color: #fff; text-align: center; border-radius: var(--radius); padding: 6px; font-weight: 500; }

/* Comparison: no outer box; the Crossfooted column is a raised blue-outlined card. */
.table-wrap.compare-table { border: 0; border-radius: 0; overflow: visible; }
.compare-table tr:hover td { background: none; }
.compare-table tr:hover td.us { background: var(--bg); }
.compare-table table { font-size: var(--fs-md); border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td { padding: 14px var(--s-4); white-space: normal; vertical-align: middle; border-bottom: 1px solid var(--panel-2); }
.compare-table thead th { text-align: left; background: none; color: var(--text-2); font-size: var(--fs-sm); border-bottom-color: var(--border); }
.compare-table tbody th { text-align: left; font-weight: 500; color: var(--text); background: none; }
.compare-table td { color: var(--text-3); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table .us { color: var(--text); font-weight: 600; background: var(--bg); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); box-shadow: 0 10px 30px -18px rgba(31, 94, 219, 0.55); }
.compare-table .us .icon, .compare-table .us img { width: 18px; height: 18px; vertical-align: -4px; margin-right: var(--s-2); color: var(--accent); }
.compare-table thead .us { color: var(--accent); font-size: var(--fs-md); border-top: 2px solid var(--accent); border-radius: 12px 12px 0 0; }
.compare-table tbody tr:last-child .us { border-bottom: 2px solid var(--accent); border-radius: 0 0 12px 12px; }
@media (max-width: 720px) {
  .how-steps { grid-template-columns: 1fr; gap: var(--s-4); }
  .how-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--s-3); text-align: left; padding: 0; }
  .how-num { grid-row: span 2; margin-bottom: 0; }
  .how-steps h3 { margin: 6px 0 2px; }
  /* Phones: the screenshots would be too small to read, so the spotlights show close-ups too. */
  .spot { padding: var(--s-5) var(--s-4) var(--s-4); }
  .spot-top { grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-4); }
  .spot h3 { font-size: var(--fs-lg); }
  .spot-shot { display: none; }
  .spot .mini { display: block; }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .mini-pair { grid-template-columns: minmax(0, 1fr); }
  .mini-bar { flex-wrap: wrap; gap: 6px; }
  .mini-btn { padding: 3px 6px; }
  .feat-card { padding: var(--s-4); }
  /* Title first, like the spotlights above, so every feature reads the same way down the page. */
  .feat-card .feat-vis { order: 1; margin: var(--s-4) 0 0; }
  /* Same left-to-right picture as on desktop, just smaller. */
  .how .flow { margin-bottom: var(--s-5); }
  .compare-table th, .compare-table td { padding: 10px var(--s-2); font-size: var(--fs-sm); }
  /* Two columns of answers fit a phone; "Typing it in" is the one people need least. */
  .compare-table tr > :nth-child(2) { display: none; }
  .compare-table .us .icon, .compare-table .us img { display: none; }
  /* Without the ticks, centring keeps the answers evenly inside the blue box. */
  .compare-table .us { text-align: center; }
  /* A two-option table (e.g. CSV or OFX) keeps both options. */
  .compare-table.two-up tr > :nth-child(2) { display: table-cell; }
}
.section-heading { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-2); }
.landing .section-heading { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.section-sub { font-size: var(--fs-md); color: var(--text-2); margin-bottom: var(--s-5); }


/* Your data: one panel, the promise on the left and the four points as rows on the right. */
.trust { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.trust-lead { background: var(--panel); padding: 36px var(--s-6); display: flex; flex-direction: column; }
.trust-lead .section-sub { margin-bottom: 0; }
.trust-links { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: var(--s-2); }
.trust-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-4); padding: 22px 28px; border-top: 1px solid var(--border); }
.trust-item:first-child { border-top: 0; }
.trust-item h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--s-1); }
.trust-item p { color: var(--text-2); }

.landing-pricing { margin-top: var(--s-5); }

/* FAQ: grouped by topic; each question is a soft grey card. */
.faq-group { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
/* Guide pages (e.g. /pdf-to-qbo): numbered click-by-click steps, short prose and notes, in the FAQ's text column. */
.hero-note { text-align: center; color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-2); }
.guide-steps { max-width: 720px; margin: 0 auto; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); line-height: 1.6; }
.guide-steps li::marker { color: var(--accent); font-weight: 700; }
.guide-source, .section-note { max-width: 720px; margin: var(--s-5) auto 0; text-align: center; color: var(--text-2); font-size: var(--fs-sm); }
.prose { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-4); line-height: 1.65; color: var(--text-2); }
.prose strong { color: var(--text); }
.guide-list { list-style: none; max-width: 720px; margin: var(--s-6) auto 0; display: flex; flex-direction: column; gap: var(--s-3); color: var(--text-2); line-height: 1.55; }
.guide-list li { display: flex; gap: var(--s-2); align-items: flex-start; }
.guide-list .icon { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }
.guide-list strong { color: var(--text); }
/* A small spreadsheet, for pages that show the Excel/CSV output (/bank-statement-to-excel). */
.mini-sheet { max-width: 720px; margin: 0 auto; font-size: 13px; }
.sheet-row { display: grid; grid-template-columns: 106px minmax(150px, 1fr) 84px 96px 84px; border-top: 1px solid var(--panel-2); }
.sheet-row:first-child { border-top: 0; }
.sheet-row > span { padding: 7px 10px; border-left: 1px solid var(--panel-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-row > span:first-child { border-left: 0; }
.sheet-row > span:nth-child(n+3) { text-align: right; }
.sheet-head { background: var(--panel); color: var(--text-2); font-weight: 500; }
/* Phones: the sheet scrolls sideways inside its box, like a real spreadsheet; the page doesn't. */
.mini-sheet { overflow-x: auto; }
.mini-sheet .sheet-row { min-width: 580px; }
/* Guide cards: one per method (/bank-statement-to-excel "The free ways"): a numbered title with a short label, the
   steps in a white inset, and what goes wrong in a red-edged list. The last card is ours, in the accent colour. */
.ways { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-4); }
.way { background: var(--panel); border-radius: 12px; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); color: var(--text-2); line-height: 1.6; }
.way-head { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.way-head h3 { color: var(--text); font-size: var(--fs-md); font-weight: 600; margin-right: auto; }
.way-num { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.way-tag { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.way-tag.is-good { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.way-tag.is-bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.way-steps { counter-reset: way-step; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); background: var(--bg); border-radius: 10px; padding: var(--s-4); }
.way-steps li { counter-increment: way-step; position: relative; padding-left: 34px; }
.way-steps li::before { content: counter(way-step); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.way strong { color: var(--text); }
.way-tip { font-size: var(--fs-sm); }
.way-breaks { border-left: 3px solid var(--bad); padding-left: var(--s-3); }
.way-breaks-title { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bad); margin-bottom: var(--s-1); }
.way-breaks ul, .way-goods { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }
.way-breaks li, .way-goods li { display: flex; gap: var(--s-2); align-items: flex-start; }
.way-breaks .icon { flex: none; width: 15px; height: 15px; margin-top: 5px; color: var(--bad); }
.way-ours { background: var(--accent-soft); }
/* Short cards with no steps sit side by side; the step-heavy ones stay full width. */
.ways-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ways-pair .way-head { align-items: flex-start; }
.way-head h3 .way-brand { display: inline-flex; vertical-align: -5px; margin-left: 4px; gap: 6px; font-size: inherit; }
.way-goods .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.way-ours .primary-btn { align-self: flex-start; width: auto; margin-top: var(--s-1); }
@media (max-width: 720px) {
  .ways-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Guide articles (/guides/…): one 720px reading column, centred in the page width. */
.guide { max-width: 720px; margin: 0 auto; padding-top: var(--s-5); color: var(--text-2); line-height: 1.65; }
.guide-head { margin-bottom: var(--s-5); }
.guide-head h1 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--text); margin-bottom: var(--s-3); }
.guide-lead { font-size: var(--fs-lg); line-height: 1.55; margin-bottom: var(--s-3); }
.guide-updated { font-size: var(--fs-sm); color: var(--text-3); }
.guide-answer { background: var(--accent-soft); border-radius: 12px; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); color: var(--text); }
.guide-toc { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); background: var(--panel); border-radius: 12px; }
.guide-toc-title { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); }
.guide-toc ol { padding-left: var(--s-5); columns: 2; column-gap: var(--s-6); }
.guide-toc li { break-inside: avoid; margin-bottom: var(--s-1); }
.guide-toc a, .guide a:not([class]) { color: var(--accent); text-decoration: none; }
.guide-toc a:hover, .guide a:not([class]):hover { text-decoration: underline; }
.guide-section { padding: var(--s-6) 0 var(--s-2); border-top: 1px solid var(--border); scroll-margin-top: var(--s-4); }
.guide-section + .guide-section { margin-top: var(--s-4); }
.guide-section h2 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); margin-bottom: var(--s-3); }
.guide-section h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin: var(--s-5) 0 var(--s-2); }
.guide-section > p { margin-bottom: var(--s-4); }
.guide-section strong { color: var(--text); }
.guide .guide-steps { margin: 0 0 var(--s-4); }
.guide .guide-list { margin: 0 0 var(--s-4); }
.guide-plain { margin: 0 0 var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.guide .guide-table { margin-bottom: var(--s-4); }
.guide-table table { font-size: var(--fs-md); }
.guide-table th { white-space: normal; }
.guide-table td { line-height: 1.5; color: var(--text-2); }
.guide-table td:first-child { color: var(--text); }
.guide-table tr:hover td { background: none; }
.cell-from { display: block; font-size: var(--fs-sm); color: var(--text-3); font-weight: 400; margin-top: 2px; }
.guide .mini-sheet { margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: 10px; }
.sheet-3 .sheet-row { grid-template-columns: 110px minmax(160px, 1fr) 100px; min-width: 0; }
.guide-download, .guide-sources { font-size: var(--fs-sm); }
.guide-sources { color: var(--text-3); }
/* QFX guide: each source field beside its plain-English meaning. */
.qfx-example { margin-bottom: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.qfx-example figcaption { padding: var(--s-3) var(--s-4); background: var(--panel); color: var(--text); font-weight: 600; }
.qfx-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); }
.qfx-field code { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .qfx-field { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
/* QFX guide: the raw file above the spreadsheet it becomes. */
.qfx-convert { margin-bottom: var(--s-4); padding: var(--s-4); background: var(--panel); border-radius: 12px; }
.qfx-convert figcaption { font-weight: 600; color: var(--text); margin-bottom: var(--s-3); }
.qfx-convert-label { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s-2); }
.qfx-raw { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); overflow-x: auto; }
.guide .qfx-convert .mini-sheet { margin-bottom: var(--s-2); }
.sheet-4 .sheet-row { grid-template-columns: 100px minmax(0, 1fr) 90px 90px; min-width: 0; }
.qfx-convert-note { font-size: var(--fs-sm); color: var(--text-3); }
/* Retention guide: when the keeping clock starts, as two short timelines. */
.keep-clock { margin-bottom: var(--s-4); padding: var(--s-4); background: var(--panel); border-radius: 12px; display: flex; flex-direction: column; gap: var(--s-4); }
.keep-clock figcaption { font-weight: 600; color: var(--text); }
.keep-clock-where { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: var(--s-2); }
.keep-track { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.keep-track li { position: relative; padding: var(--s-4) var(--s-3) 0 0; border-top: 2px solid var(--border-strong); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.keep-track li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); }
.keep-track .is-start, .keep-track .is-end { border-top-color: var(--accent); }
.keep-track .is-start::before { background: var(--accent); border-color: var(--accent); }
.keep-track .is-end::before { border-color: var(--accent); }
.keep-date { display: block; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.keep-track .is-end .keep-date { color: var(--accent); }
.keep-track .is-end { border-top-color: transparent; }
@media (max-width: 520px) {
  /* Phones: the balance column steps aside so dates and descriptions stay whole. */
  .sheet-4 .sheet-row { grid-template-columns: 86px minmax(0, 1fr) 82px; font-size: 12px; }
  .sheet-4 .sheet-row > span { padding: 7px 8px; }
  .sheet-4 .sheet-row > span:nth-child(2) { white-space: normal; }
  .sheet-4 .sheet-row > span:nth-child(4) { display: none; }
  .keep-track { grid-template-columns: minmax(0, 1fr); }
  .keep-track li { border-top: 0; border-left: 2px solid var(--border-strong); padding: 0 0 var(--s-3) var(--s-4); }
  .keep-track .is-start { border-left-color: var(--accent); }
  .keep-track .is-end { border-left-color: transparent; }
  .keep-track li::before { top: 2px; left: -7px; }
  .keep-track li:last-child { padding-bottom: 0; }
}
.guide .way-ours { margin-bottom: var(--s-4); }
.guide .way-head h3 { margin: 0; }
.way-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.way-actions .primary-btn { margin-top: 0; }
.guide .section-faq .faq-group { max-width: none; }
.guide .cta-band { margin-top: var(--s-7); }
.guide .faq-item summary, .guide .cta-band h2 { color: var(--text); }
.guide-formula { font-weight: 600; line-height: 1.6; padding: var(--s-3) var(--s-4); background: var(--bg); border-radius: 8px; }
.guide-table td.r, .guide-table th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.guide-table tr.guide-total td { font-weight: 600; color: var(--text); background: var(--panel); }
/* Comparison tables: our column lightly tinted, with the mark and accent colour in its header. */
.ours-table .us { background: var(--accent-soft); color: var(--text); }
.ours-table thead .us { color: var(--accent); font-weight: 600; white-space: nowrap; }
.ours-table thead .us img { width: 18px; height: 18px; vertical-align: -4px; margin-right: var(--s-2); }
.ours-table tr:hover td.us { background: var(--accent-soft); }
.ours-table th, .ours-table td { vertical-align: top; text-wrap: balance; }
/* Guides: avoid a lone word on the last line of a paragraph or list item. */
.guide p, .guide li { text-wrap: pretty; }
.guide-download-btn { width: auto; min-height: 40px; padding: 0 var(--s-5); }
/* Reconcile guide: the two sides meeting at one number, the item sorter, the calculator, the click-to-play video. */
.rec-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; margin-bottom: var(--s-3); }
.guide .rec-sides .guide-table { margin-bottom: 0; }
.rec-sides .guide-table table { font-size: var(--fs-sm); }
.rec-meet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); border-radius: 12px; background: var(--accent-soft); color: var(--text); }
.rec-meet-side strong { font-variant-numeric: tabular-nums; margin-left: 4px; }
.rec-equals { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; font-weight: 700; }
.rec-meet-ok { font-size: var(--fs-sm); font-weight: 600; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 2px 10px; }
.rec-sorter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-4); }
.rec-sort-card { background: var(--panel); border-radius: 12px; padding: var(--s-4); }
.rec-sort-q { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 2px; }
.rec-sort-a { color: var(--text); font-weight: 500; margin-bottom: var(--s-2); }
.rec-sort-card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.rec-sort-card li { display: flex; gap: var(--s-2); align-items: baseline; color: var(--text-2); }
.rec-sign { flex: none; display: inline-flex; justify-content: center; width: 20px; font-weight: 700; color: var(--text-2); }
.rec-sign.is-plus { color: var(--ok); }
.rec-sign.is-minus { color: var(--bad); }
.rec-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); background: var(--panel); border-radius: 12px; padding: var(--s-4); margin-bottom: var(--s-4); }
.rec-calc fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rec-calc legend { font-weight: 600; color: var(--text); margin-bottom: var(--s-1); }
.rec-calc label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); }
.rec-calc input[type="text"] { margin: 0; min-height: 36px; font-variant-numeric: tabular-nums; }
.rec-calc-total { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text); font-weight: 600; padding-top: var(--s-2); border-top: 1px solid var(--border); }
.rec-calc-total output { font-variant-numeric: tabular-nums; }
.rec-calc-result { grid-column: 1 / -1; padding: var(--s-3) var(--s-4); border-radius: 8px; background: var(--bg); color: var(--text-2); font-weight: 500; }
.rec-calc[data-state="ok"] .rec-calc-result { background: var(--ok-soft); color: var(--ok); }
.rec-calc[data-state="bad"] .rec-calc-result { background: var(--bad-soft); color: var(--bad); }
.rec-calc .link-btn { grid-column: 1 / -1; justify-self: start; font-size: var(--fs-sm); }
.guide-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; margin-bottom: var(--s-2); }
.guide-video-play { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #000; cursor: pointer; min-height: 0; }
.guide-video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-video-play:hover { background: #000; }
.guide-video-icon { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(0, 0, 0, 0.75); }
.guide-video-icon::after { content: ""; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.guide-video-play:hover .guide-video-icon, .guide-video-play:focus-visible .guide-video-icon { background: var(--accent); }
.guide-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.guide-video-credit { font-size: var(--fs-sm); color: var(--text-3); }
@media (max-width: 720px) {
  .rec-sides { grid-template-columns: minmax(0, 1fr); }
  .rec-sorter, .rec-calc { grid-template-columns: minmax(0, 1fr); }
}
.guide code { font-size: 0.88em; background: var(--panel); border-radius: 4px; padding: 0 3px; color: var(--text); }

/* Free bank-file converter (/tools/qfx-to-csv): drop zone, options, then one card per account. */
.bt { margin-bottom: var(--s-6); }
.bt-drop { margin-bottom: var(--s-4); padding: var(--s-6) var(--s-5); }
.bt-drop .dropzone-icon { display: flex; margin: 0 auto var(--s-3); }
.bt-drop .dropzone-text, .bt-drop .dropzone-hint { display: block; }
.bt-drop .dropzone-text { color: var(--text); }
.bt-options { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: flex-end; }
.bt-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.bt-field .model-select { max-width: none; min-height: 36px; }
.bt-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.bt-seg label { position: relative; cursor: pointer; }
.bt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bt-seg span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--s-4); font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); background: var(--bg); }
.bt-seg label + label span { border-left: 1px solid var(--border-strong); }
.bt-seg input:checked + span { background: var(--accent-soft); color: var(--accent); }
.bt-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.bt-more-options { margin-top: var(--s-3); font-size: var(--fs-sm); }
.bt-more-options summary { cursor: pointer; color: var(--accent); font-weight: 500; width: max-content; }
.bt-more-options .bt-options { margin-top: var(--s-3); }
.bt-check { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; color: var(--text); }
.bt-error { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--bad-soft); color: var(--bad); font-size: var(--fs-sm); }
.bt-result { margin-top: var(--s-5); }
.bt-result-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--panel); border-radius: 12px; margin-bottom: var(--s-4); }
.bt-result-bar p { color: var(--text); }
.bt-actions { display: flex; align-items: center; gap: var(--s-4); }
.bt-actions .primary-btn { width: auto; min-height: 36px; padding: 0 var(--s-5); }
.bt-account { border: 1px solid var(--border); border-radius: 12px; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); }
.bt-account-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.bt-account-head h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text); margin: 0; }
.bt-account-head span { font-size: var(--fs-sm); color: var(--text-3); }
.bt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.bt-stats dt { font-size: 12px; color: var(--text-3); }
.bt-stats dd { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.bt-checks { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--fs-sm); line-height: 1.5; }
.bt-checks li { display: flex; gap: var(--s-2); align-items: flex-start; }
.bt-checks .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.bt-checks .is-ok .icon { color: var(--ok); }
.bt-checks .is-bad { color: var(--bad); }
.bt-checks .is-bad .icon { color: var(--bad); }
.bt-checks .is-warn .icon { color: var(--warn-line); }
.bt-checks .is-info .icon { color: var(--text-3); }
.bt-account .bt-preview { margin-bottom: var(--s-1); }
.bt-preview + .bt-more { margin-top: var(--s-1); }
.bt-account > :last-child { margin-bottom: 0; }
.bt-preview td { font-variant-numeric: tabular-nums; }
.bt-preview td.r, .bt-preview th.r { text-align: right; white-space: nowrap; }
.bt-preview tr:hover td { background: none; }
.bt-more { font-size: 12px; color: var(--text-3); }
.bt-note { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-2); }
.bt-note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.bt-note .link-btn, .bt-note .text-link { font-size: inherit; }
@media (max-width: 720px) {
  .bt-options { flex-direction: column; align-items: stretch; }
  .bt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-account { padding: var(--s-4); }
  .bt-result-bar { flex-direction: column; align-items: stretch; }
  .bt-actions { justify-content: space-between; }
  .bt-preview th, .bt-preview td { padding: 6px 8px; font-size: 12px; }
  .bt-preview td:first-child { white-space: nowrap; }
}
.guide .page-updated { padding-top: var(--s-4); }
@media (max-width: 720px) {
  .guide { padding-top: var(--s-2); }
  .guide-head h1 { font-size: 26px; }
  .guide-answer, .guide-toc { padding: var(--s-4); }
  .guide-toc ol { columns: 1; }
  .guide-section h2 { font-size: 20px; }
  .guide-table table { font-size: var(--fs-sm); }
  .sheet-3 .sheet-row { grid-template-columns: 88px minmax(0, 1fr) 76px; font-size: 12px; }
  .sheet-3 .sheet-row > span { padding: 7px 8px; }
}
@media (max-width: 600px) {
  .way { padding: var(--s-4); }
  .way-steps { padding: var(--s-3); }
}
.page-updated { text-align: center; color: var(--text-3); font-size: var(--fs-sm); padding: 0 var(--s-4) var(--s-6); }

.guide-tips { padding: var(--s-4) var(--s-5); background: var(--panel); border-radius: 12px; }
.guide-tips li { display: block; }
.faq-group + .faq-group { margin-top: var(--s-6); }
.faq-group-title { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-1); }
.faq-item { background: var(--panel); border-radius: 10px; }
.faq-item summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) 18px; font-size: var(--fs-md); font-weight: 500; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--text-3); font-size: var(--fs-lg); line-height: 1.2; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: calc(-1 * var(--s-1)) 18px var(--s-4); font-size: var(--fs-md); color: var(--text-2); }


.cta-band {
  text-align: center;
  background: var(--panel);
  border-radius: var(--radius);
  border-top: none;
  padding: var(--s-7) var(--s-5);
  margin-top: var(--s-4);
}
.cta-band h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--s-2); }
.cta-band p { color: var(--text-2); margin-bottom: var(--s-5); }
/* Closing band: brand blue, centred. The double underline is the accountant's mark for a total that's been checked. */
.cta-ledger { text-align: center; background: var(--accent); color: #fff; border-radius: 12px; padding: var(--s-8) var(--s-6); }
.guide .cta-ledger h2, .cta-ledger h2 { color: #fff; margin-bottom: var(--s-3); text-wrap: balance; }
.cta-ledger .dbl { border-bottom: 4px double rgba(255, 255, 255, 0.75); padding-bottom: 1px; }
.cta-ledger p { color: rgba(255, 255, 255, 0.86); margin: 0 auto var(--s-5); max-width: 540px; text-wrap: balance; }
.cta-ledger-actions { display: flex; justify-content: center; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.cta-ledger .primary-btn { width: auto; margin: 0; background: #fff; color: var(--accent); }
.cta-ledger .primary-btn:hover { background: var(--accent-soft); }
.cta-ledger .text-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta-ledger .cta-ledger-note { margin: var(--s-4) auto 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }
@media (max-width: 720px) { .cta-ledger { padding: var(--s-7) var(--s-5); } }

/* Icons: Phosphor duotone (filled paths; the light layer is built in). */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

/* Inline icons sit on the text baseline at 16px. */
.icon-ok { color: var(--ok); }
.icon-warn { color: var(--warn-line); }
.icon-bad { color: var(--bad); }
.icon-file { color: var(--text-3); }
.verify-title .icon,
.batch-badge .icon,
.chain-link .icon,
.batch-file-status .icon,
.plan-current-btn .icon,
.menu-item .icon,
.section-label .icon,
.staged-item .icon,
.cell-main .icon,
.col-status .icon { width: 16px; height: 16px; }
.verify-title .icon { align-self: center; margin-right: calc(-1 * var(--s-2)); }
.chain-link .icon,
.batch-file-status .icon,
.cell-main .icon,
.col-status .icon,
.section-label .icon { vertical-align: -3px; margin-right: 6px; }
.batch-badge { display: inline-flex; align-items: center; gap: 5px; }
.menu-item { display: flex; align-items: center; gap: var(--s-2); }
.menu-item .icon { color: var(--text-3); }
.menu-danger .icon { color: var(--bad); }
.section-label .icon { color: var(--text-3); }

.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--s-3);
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.chips li {
  font-size: var(--fs-sm);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px var(--s-3);
  background: var(--bg);
}

/* Flow diagram under the hero: statements → check → formats. */
/* On the landing page, positive marks use the brand blue; red stays for
   problems. (The app keeps green for "verified", a status people act on.) */
.landing { --ok: var(--accent); --ok-soft: var(--accent-soft); }

/* Section intros */
.section-intro { max-width: 640px; margin-bottom: var(--s-6); }
.section-intro.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-intro .section-sub { margin-bottom: 0; text-wrap: balance; }
.section-intro .section-heading { text-wrap: balance; }

/* Month strip: Jan → Feb → Mar → (Apr missing) → May */
.legal-page { padding-bottom: var(--s-7); }
.legal-h1 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; margin-bottom: var(--s-3); }
.legal-lead { font-size: var(--fs-lg); color: var(--text-2); max-width: 40rem; margin-bottom: var(--s-6); }
.legal-updated { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-4); }
.legal-section { padding: var(--s-5) 0; border-top: 1px solid var(--border); max-width: 40rem; }
.legal-section h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-3); }
.legal-section p { color: var(--text-2); margin-bottom: var(--s-3); }
.legal-list,
.legal-steps { margin: 0 0 var(--s-3) var(--s-5); color: var(--text-2); }
.legal-list li,
.legal-steps li { margin-bottom: var(--s-2); }
.legal-table-wrap { margin: var(--s-3) 0 var(--s-4); }
.legal-note { font-size: var(--fs-sm) !important; color: var(--text-3) !important; }
.legal-back { margin-top: var(--s-6); }
.notfound { padding-block: var(--s-7) var(--s-8); }
.notfound-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* ─── Pricing cards (landing + billing) ────────────────────── */

.price-badge {
  display: inline-block;
  background: var(--text);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 1px var(--s-2);
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: 2px;
  margin-left: var(--s-2);
}
.price-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
a.secondary-btn { color: var(--text); }
a.secondary-btn:hover { background: var(--panel); }

/* Pricing cards: a header strip with the plan name, then price, button and the facts as ticks. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.plan { background: var(--panel); border-radius: 14px; padding: var(--s-1); }
.plan-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px var(--s-3); }
.plan-name { font-size: var(--fs-md); font-weight: 600; }
.plan-badge { font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.plan-body { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 20px 18px; }
.plan.is-featured { background: var(--accent); }
.plan.is-featured .plan-name { color: #fff; }
.plan.is-featured .plan-badge { background: var(--bg); color: var(--accent); }
.plan.is-featured .plan-body { border-color: transparent; }
.plan-price { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.plan-action { margin: var(--s-4) 0 18px; }
.plan-action .price-btn { width: 100%; }
/* A plan card with nothing to do (Free while on a paid plan): no button, just the gap above the list. */
.plan-action:empty { margin-bottom: 0; }
/* The current plan still gets a button, so every card lines up; it just can't be pressed. */
.plan-current-btn:disabled { opacity: 1; cursor: default; background: var(--panel); color: var(--text-2); border-color: var(--border); gap: var(--s-2); }
.plan-current-btn .icon { width: 16px; height: 16px; }
.plan-facts { list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
.plan-facts li { display: flex; gap: var(--s-2); align-items: center; }
.plan-facts li:first-child { color: var(--text); }
.plan-facts strong { font-weight: 600; }
.plan-facts .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.plans-includes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--text-2); }
.plans-includes li { display: inline-flex; align-items: center; gap: var(--s-2); }
.plans-includes .icon { width: 16px; height: 16px; color: var(--accent); }
/* One-time page pack, under the plan cards (shared partial site/partials/plans.html). */
.pack-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.pack-title { font-size: var(--fs-md); color: var(--text); }
.pack-sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.pack-action { flex: none; }
.pack-action .price-btn { width: auto; padding: 0 var(--s-5); }
.billing-promises { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-2); text-align: center; text-wrap: balance; }
@media (max-width: 640px) {
  .pack-strip { flex-direction: column; align-items: stretch; text-align: left; }
  .pack-action .price-btn { width: 100%; }
}
/* Under the dropzone: who can see a statement, said where people decide to upload. */
.privacy-line { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.privacy-line .text-link { font-size: inherit; white-space: nowrap; } /* the sentence's size; never split */

/* ─── Auth pages/* ─── Auth pages ───────────────────────────────────────────── */

/* Auth pages fill the screen between header and footer, centred top to bottom. */
html.route-auth .container { display: flex; flex-direction: column; }
.auth-page { flex: 1; display: flex; justify-content: center; align-items: center; padding: var(--s-6) 0 var(--s-7); }
.auth-wrap { width: 100%; display: flex; justify-content: center; align-items: center; gap: var(--s-8); }
/* Sign-up: form and perks share one cream panel, like the landing page's blocks; the form is the biggest thing on it. */
.auth-wrap.is-signup { align-items: flex-start; gap: 0; background: var(--panel); border-radius: 14px; padding: var(--s-7) var(--s-6); }
.auth-wrap .auth-card { flex: 0 1 480px; }
.auth-wrap.is-signup .auth-card { flex: 0 0 380px; max-width: none; background: none; border: 0; border-radius: 0; padding: 0 var(--s-7) 0 0; }
.auth-wrap.is-signup .auth-legal, .auth-wrap.is-signup .auth-switch { text-align: left; text-wrap: pretty; }
.auth-aside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-6); border-left: 1px solid var(--border); padding: 6px 0 0 var(--s-7); }
.auth-aside.hidden { display: none; }
.auth-aside h2 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: calc(-1 * var(--s-3)); }
.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-md); color: var(--text-2); }
.auth-perks li { display: flex; gap: 10px; align-items: flex-start; }
.auth-perks .icon { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 3px; }
.auth-perks b { color: var(--text); font-weight: 600; }
.auth-proof-cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); }
.auth-proof-cap a { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.auth-proof-cap a:hover { text-decoration: underline; }
.auth-proof .mini-in { color: var(--ok); }
.auth-proof .mini-ok { white-space: nowrap; }
.auth-proof .mini-ok .mini-note { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
/* The box's spacing moves to the wrapper so the button centres on the input. */
.pw-field { position: relative; margin-bottom: var(--s-4); }
.pw-field input { padding-right: 64px; margin-bottom: 0; }
/* Spans the input's full height, so the label is centred whatever the spacing around it. */
.pw-toggle { position: absolute; right: 6px; top: 0; bottom: 0; margin: auto 0; height: 28px; display: flex; align-items: center; min-height: 0; padding: 0 10px; border: 0; background: none; color: var(--text-2); font-size: var(--fs-sm); }
.pw-toggle:hover { color: var(--text); background: var(--panel); }
@media (max-width: 860px) {
  .auth-wrap { flex-direction: column; align-items: center; gap: var(--s-5); width: 100%; }
  .auth-wrap.is-signup { padding: var(--s-5) var(--s-4); gap: var(--s-6); }
  .auth-wrap.is-signup .auth-card { flex: none; padding: 0; }
  .auth-wrap .auth-card, .auth-aside { flex: none; width: 100%; max-width: 480px; }
  .auth-aside { border-left: 0; border-top: 1px solid var(--border); padding: var(--s-5) 0 0; }
}
.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--panel);
  border-radius: 14px;
  padding: var(--s-7);
}
.auth-card h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--s-2); }
.auth-lead { font-size: 16px; color: var(--text-2); margin-bottom: var(--s-6); }
.auth-error {
  color: var(--bad);
  background: var(--bad-soft);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.auth-legal { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-3); text-align: center; text-wrap: balance; }
.auth-legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.auth-forgot { font-size: var(--fs-sm); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-done { font-size: var(--fs-md); color: var(--text); background: var(--ok-soft); border-radius: var(--radius); padding: var(--s-3) var(--s-4); line-height: 1.5; }
.auth-switch { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.auth-switch a { font-weight: 500; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* ─── App: page heads ──────────────────────────────────────── */

.page-head { margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--fs-lg); font-weight: 600; }
/* The Statements label only separates statements from batches; alone it would repeat the title. */
#batchHistory.hidden + .section-label { display: none; }
.page-head p { color: var(--text-2); font-size: var(--fs-md); margin-top: var(--s-1); }

/* Statement / batch page */
.doc-head { margin-bottom: var(--s-5); }
/* /demo: what the sample is and what to try, above the statement. */
.demo-banner { display: flex; align-items: center; gap: var(--s-3) var(--s-5); flex-wrap: wrap; background: var(--accent-soft); border-radius: 10px; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); color: var(--text-2); line-height: 1.55; }
.demo-banner p { flex: 1 1 420px; }
.demo-banner strong { color: var(--text); }
.demo-banner .primary-btn { flex: none; width: auto; }
.demo-banner .link-btn { margin-left: var(--s-1); }
/* The cell the demo asks you to change. */
#transactionsTableBody td.demo-hint { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; background: var(--accent-soft); }
.doc-head h1 { font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; margin-top: var(--s-2); }
.doc-meta { color: var(--text-2); font-size: var(--fs-md); margin-top: var(--s-1); font-variant-numeric: tabular-nums; }
.back-link { font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; }
.back-link:hover { color: var(--text); }

.section-label {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

.notice {
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-md);
  margin-bottom: var(--s-5);
  background: var(--info-soft);
  color: var(--text);
}
.notice-warn { background: var(--warn-soft); }
.notice-ok { background: var(--ok-soft); }
.notice-info { background: var(--info-soft); }
.notice a { font-weight: 500; }

/* ─── Convert ──────────────────────────────────────────────── */

.dropzone {
  display: block;
  background: var(--panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  cursor: pointer;
  margin-bottom: var(--s-5);
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone.drag-over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.dropzone.is-locked { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.dropzone-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--bg); color: var(--accent); margin-bottom: var(--s-3); }
.dropzone-icon .icon { width: 26px; height: 26px; }
.dropzone-text { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-1); }
.dropzone-hint { color: var(--text-2); font-size: var(--fs-sm); }

.staged-section {
  margin: 0 0 var(--s-6);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.staged-list { list-style: none; margin: 0 0 var(--s-4); display: flex; flex-direction: column; }
.staged-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}
.staged-item:last-child { border-bottom: none; }
.staged-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staged-meta { color: var(--text-3); font-size: var(--fs-sm); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.staged-remove { min-height: 28px; padding: 0 var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.staged-remove:hover { color: var(--bad); }

.convert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); justify-content: space-between; }
.convert-bar { display: flex; align-items: center; gap: var(--s-3); flex: 1; min-width: 200px; }
.convert-bar-label { font-size: var(--fs-sm); color: var(--text-2); flex-shrink: 0; }
.convert-actions-btns { display: flex; gap: var(--s-2); align-items: center; }
.staged-hint { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }

/* Progress: a static bar that fills as the job advances. */
.status {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-6);
}
.status::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  width: var(--progress, 0%);
}
.status-text { font-size: var(--fs-md); }

/* ─── Results ──────────────────────────────────────────────── */

.results-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-4); gap: var(--s-3); flex-wrap: wrap; }
.results-title { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.results-title .retention-note { margin: 0; }
.results-count { font-size: var(--fs-md); font-weight: 600; }
.results-actions { display: flex; align-items: center; gap: var(--s-4); white-space: nowrap; }
.export-controls { flex-wrap: wrap; align-items: center; }
.export-controls .model-select { flex: 0 1 auto; max-width: 300px; }
.export-controls .export-date { max-width: 150px; }
.export-controls button { min-height: var(--control-h); }
#downloadBtn,
#batchDownloadBtn { background: var(--accent); border-color: var(--accent); color: #fff; }
#downloadBtn:hover,
#batchDownloadBtn:hover { background: var(--accent-hover); }
.export-field { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); }
.export-field input { width: 88px; min-height: var(--control-h); margin: 0; font-size: var(--fs-sm); }
.export-note { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.export-note:empty { display: none; }
.export-note.export-error { color: var(--warn); }
.export-check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }

.order-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.order-switch.hidden { display: none; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button { min-height: 0; padding: 3px var(--s-3); border: 0; border-radius: 0; background: var(--bg); color: var(--text-2); font-size: var(--fs-sm); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: 500; }
.retention-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin: 0 0 var(--s-4);
}

.verify-banner {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
  font-size: var(--fs-md);
  color: var(--text-2);
}
.verify-banner p { margin: var(--s-1) 0 0; }
.verify-banner ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.verify-title { font-weight: 600; color: var(--text); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; }
.verify-ok { border-left-color: var(--ok); background: var(--ok-soft); }
.verify-warn { border-left-color: var(--warn-line); background: var(--warn-soft); }
.verify-info { border-left-color: var(--info); background: var(--info-soft); }
.verify-save { font-weight: 400; font-size: var(--fs-sm); color: var(--text-2); }
.verify-save-err { color: var(--bad); }
.verify-next { margin-left: auto; min-height: 0; padding: 2px var(--s-3); font-size: var(--fs-sm); font-weight: 500; }

/* ─── Several rows at once ─────────────────────────────────── */

.col-check { width: 1%; padding-right: 0 !important; }
.col-check input { margin: 0; vertical-align: middle; cursor: pointer; }
tr.row-selected td { background: var(--info-soft, #eef3fd); }
.bulk-bar {
  position: sticky;
  top: var(--s-2);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-size: var(--fs-sm);
}
.bulk-bar.hidden { display: none; }
.bulk-count { font-weight: 500; margin-right: auto; }
.bulk-bar button:not(.link-btn) { min-height: 0; padding: 4px var(--s-3); font-size: var(--fs-sm); }
.bulk-danger { color: var(--bad); }

/* ─── Totals bar ───────────────────────────────────────────── */

.totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--s-3);
  background: var(--bg);
}
.totals.hidden { display: none; }
.total { padding: var(--s-3) var(--s-4); min-width: 0; }
.total + .total { border-left: 1px solid var(--border); }
.total-label { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.total-value { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: center; gap: var(--s-1); }
.total-value.is-in { color: var(--ok); }
.total-cur { color: var(--text-3); font-weight: 400; font-size: var(--fs-sm); }
@media (max-width: 600px) {
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .total:nth-child(3) { border-left: none; }
  .total:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* ─── Tables ───────────────────────────────────────────────── */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: var(--s-6);
}
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left;
  color: var(--text-2);
  font-weight: 600;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  white-space: nowrap;
}
th.r { text-align: right; }
td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafaf8; }
.cell-main { font-weight: 500; overflow-wrap: anywhere; }
.cell-sub { color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.col-status { color: var(--text-2); white-space: nowrap; }
td.empty { color: var(--text-3); padding: var(--s-6); text-align: center; }

.col-date { color: var(--text-2); white-space: nowrap; width: 100px; font-variant-numeric: tabular-nums; }
.col-desc { color: var(--text); overflow-wrap: anywhere; min-width: 14rem; line-height: 1.35; } /* long references wrap so amounts stay in view */
.col-num { text-align: right; font-variant-numeric: tabular-nums; width: 110px; white-space: nowrap; }
.col-deposit { color: var(--ok); }
.col-withdrawal { color: var(--text); }
.col-balance { color: var(--text-2); }
.col-account { color: var(--text-2); white-space: nowrap; }
.col-actions { width: 1%; white-space: nowrap; text-align: right; }


tr.row-active td { background: #fff8d6; }
tr.row-active:hover td { background: #fff3c2; }
tr.row-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.row-flag td { background: var(--warn-soft); }
tr.row-flag:hover td { background: #fbefd2; }
td.cell-flag { box-shadow: inset 0 -2px 0 var(--warn-line); }
td.cell-invalid { box-shadow: inset 0 0 0 1px var(--bad); }
td[contenteditable] { cursor: text; }
td[contenteditable]:focus { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--bg); }

.row-btn { min-height: 0; padding: 0 var(--s-1); font-size: var(--fs-sm); line-height: 1.4; background: none; border-color: transparent; color: var(--text-3); }
tr:hover .row-btn { color: var(--text-2); border-color: var(--border); }
.row-btn:hover { color: var(--text); background: var(--panel); }

/* The statement table can be wider than a phone. A shadow at the edge shows there's more to scroll to: the white
   "local" layers scroll with the table and cover each shadow once that edge is reached, or when the table fits (as it
   does on wider screens). A row with its own tint covers the shadow too. */
.review .table-wrap {
  background:
    linear-gradient(to right, var(--bg) 16px, transparent 40px) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 16px, transparent 40px) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--shadow-edge), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--shadow-edge), transparent) right / 14px 100% no-repeat scroll,
    var(--bg);
}
/* Phones: the same tighter columns as the half-width table beside the PDF, so the amounts start sooner. */
@media (max-width: 600px) {
  .review .table-wrap th, .review .table-wrap td { padding-left: var(--s-2); padding-right: var(--s-2); }
  .review .col-date { width: 88px; }
  .review .col-desc { min-width: 9rem; }
  .review .col-num { width: 84px; }
}

/* Touch screens: bigger targets. Padding or a minimum size grows the area you can tap, and a matching negative margin
   keeps the layout where it was. A checkbox can't take padding, so it grows a little instead. Mouse screens are
   unchanged. */
@media (pointer: coarse) {
  .row-btn { min-width: 32px; min-height: 32px; margin-block: -6px; }
  .col-check input { width: 20px; height: 20px; }
  .verify-next { min-height: 32px; margin-block: -5px; }
  .link-btn, .back-link, .doc-siblings a, .name-link { padding-block: 8px; margin-block: -8px; }
}

/* ─── Modal (export) ───────────────────────────────────────── */

.modal {
  /* Centred (the global margin reset would pin it to the corner). */
  margin: auto;
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.modal::backdrop { background: rgba(20, 20, 20, 0.35); }
.modal-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
.modal-title { font-size: var(--fs-lg); font-weight: 600; }
.modal-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-2); }
.modal-field.hidden { display: none; }
/* Text-like inputs fill the window; radios and checkboxes keep their own size (the batch Export "Files" choice). */
.modal-field .model-select, .modal-field input:not([type="radio"], [type="checkbox"]) { width: 100%; max-width: none; margin: 0; }
.modal-choice input { margin: 0; }
.modal-field .muted { font-size: var(--fs-sm); }
.modal-choice { border: 0; padding: 0; margin: 0; }
.modal-choice legend { padding: 0; margin-bottom: var(--s-1); }
.modal-choice label { display: flex; align-items: baseline; gap: var(--s-2); color: var(--text); font-size: var(--fs-md); padding: 2px 0; }
.modal-choice .muted { color: var(--text-3); }
.modal .export-note { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-1); }

.export-preview:empty { display: none; }
.preview-head { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s-1); }
.preview-name { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.preview-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 220px; }
.preview-table table { font-size: 12px; }
.preview-table th, .preview-table td { padding: 4px 8px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.preview-text { margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); font-size: 12px; line-height: 1.45; max-height: 220px; overflow: auto; white-space: pre; }
.preview-note { color: var(--text-3); font-size: var(--fs-sm); margin: var(--s-1) 0 0; }
.modal-actions button { min-height: var(--control-h); }
/* The message window's button sizes to its word, alone or beside Cancel. */
#messageOk { width: auto; min-width: 88px; padding: 0 var(--s-4); }

/* ─── Recent statements (Convert page) ─────────────────────── */

.recent { margin-top: var(--s-6); }
.recent-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.recent-list { list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.recent-list:empty { display: none; }
.recent-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}
.recent-item:last-child { border-bottom: none; }
.recent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.recent-meta { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; display: flex; align-items: center; gap: var(--s-1); }
.recent-empty { color: var(--text-2); font-size: var(--fs-md); padding: var(--s-5) var(--s-4); border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; }
@media (max-width: 600px) {
  .recent-item { flex-wrap: wrap; row-gap: var(--s-1); }
  .recent-name { flex-basis: 100%; }
  .recent-meta { flex: 1; }
}

/* ─── History ──────────────────────────────────────────────── */

.history-note { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--s-4); }

/* ─── Batches ──────────────────────────────────────────────── */

.batch-section { margin: 0 0 var(--s-6); }
.batch-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-4); }
.batch-head-actions { display: flex; align-items: center; gap: var(--s-3); }
.batch-head .export-note { margin: 0; }
.batch-summary { font-size: var(--fs-md); color: var(--text-2); margin: 0; }

/* One-off statements in a batch: a plain list. */
.batch-singles { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); }
.singles-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--s-3); }
.single-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.single-stmt {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--panel);
  border-radius: var(--radius);
}
.single-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.single-account { font-weight: 500; }
.single-file { color: var(--text-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.single-stmt .chain-meta { display: flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
.single-stmt .link-btn { font-size: var(--fs-sm); }
@media (max-width: 600px) {
  .single-stmt { flex-wrap: wrap; row-gap: var(--s-1); }
  .single-main { flex-basis: 100%; }
  .single-stmt .chain-meta { flex: 1; }
  /* A phone has no hover to show a name or period cut short with "…", so they wrap. */
  .single-file, .chain-file { white-space: normal; overflow-wrap: anywhere; overflow: visible; }
}
.batch-files { list-style: none; display: flex; flex-direction: column; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); }
.batch-files:empty { display: none; }
.batch-file { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.batch-file:last-child { border-bottom: none; }
.batch-file-status { color: var(--text-2); font-size: var(--fs-sm); flex-shrink: 0; max-width: 55%; text-align: right; }
.batch-file.is-done .batch-file-status { color: var(--ok); }
.batch-file.is-failed .batch-file-status { color: var(--bad); }
.batch-file.is-skipped .batch-file-status { color: var(--text-3); }
.batch-file.is-busy .batch-file-status::before { content: "● "; color: var(--accent); }

.batch-accounts { display: flex; flex-direction: column; gap: var(--s-4); margin: 0 0 var(--s-5); }
.batch-account { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); }
.batch-account-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.batch-account-head h3 { font-size: var(--fs-md); font-weight: 600; }
.batch-account-meta { font-size: var(--fs-sm); color: var(--text-2); margin: var(--s-1) 0 var(--s-4); font-variant-numeric: tabular-nums; }

/* Status pill: colour + word, used for account and statement state. */
.batch-badge { font-size: var(--fs-sm); font-weight: 500; padding: 2px var(--s-2); border-radius: 999px; }
.batch-ok { color: var(--ok); background: var(--ok-soft); }
.batch-bad { color: var(--bad); background: var(--bad-soft); }
.batch-warn { color: var(--warn); background: var(--warn-soft); }
.batch-info { color: var(--info); background: var(--info-soft); }

.chain { list-style: none; display: flex; flex-direction: column; }
.chain-stmt {
  display: grid;
  grid-template-columns: minmax(12rem, auto) 1fr auto;
  grid-template-areas: "period file open" "period meta open";
  column-gap: var(--s-4);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border-radius: var(--radius);
  font-size: var(--fs-md);
}
.chain-stmt.is-dup { opacity: 0.55; }
.chain-period { grid-area: period; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chain-file { grid-area: file; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: var(--fs-sm); }
.chain-meta { grid-area: meta; color: var(--text-3); font-size: var(--fs-sm); }
.chain-stmt .link-btn { grid-area: open; font-size: var(--fs-sm); }
.chain-link { margin-left: var(--s-5); padding: var(--s-2) 0 var(--s-2) var(--s-4); border-left: 2px solid var(--border); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.chain-ok { color: var(--ok); border-left-color: var(--ok); }
.chain-bad { color: var(--bad); border-left-color: var(--bad); font-weight: 500; }
.chain-warn { color: var(--warn); border-left-color: var(--warn-line); }

.batch-export { border-top: 1px solid var(--border); padding-top: var(--s-4); }
/* History: batches and statements are two tables with the same columns, so they line up. */
#batchHistory .history-table { margin-bottom: var(--s-6); }
.history-table .col-status { width: 232px; }
.history-table .col-actions { width: 92px; } /* two 32px icons, the gap between them and the cell's padding */
/* Every row is one height: a name stays on one line, cut short with "…" (the whole name shows on hover), and so
   does the status. Wrapped names made rows of four heights, with their second line under the icon. */
.history-table table { table-layout: fixed; }
.history-table .cell-main { display: flex; align-items: center; }
.history-table .cell-main .icon { flex: none; }
.history-table .batch-name, .history-table .job-name, .history-table .name-link, .history-table .col-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The link itself cuts short, so its "…" is blue too; its focus ring sits inside, where the cut can't hide it. */
.history-table .name-link { display: block; }
.history-table .name-link:focus-visible { outline-offset: -2px; }
/* Narrower screens drop the Pages and Rows columns first, so names keep room. */
@media (max-width: 900px) {
  .history-table .hide-sm { display: none; }
}
/* A statement or batch name that opens it: a link (blue, like every link); deleted ones stay plain text. */
.name-link { color: var(--accent); text-decoration: none; }
.name-link:hover, .name-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
/* Row actions as quiet icons: rename (blue on hover) and delete (red on hover). */
.del-btn, .edit-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-height: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--text-3); cursor: pointer; }
.del-btn:hover, .del-btn:focus-visible { background: var(--bad-soft); color: var(--bad); }
/* Holds the trash's place while there's nothing to delete yet, so the pencils stay in line. */
.action-spacer { display: inline-block; width: 32px; height: 32px; vertical-align: middle; }
.edit-btn:hover, .edit-btn:focus-visible { background: var(--accent-soft); color: var(--accent); }
.del-btn .icon, .edit-btn .icon { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.col-actions .edit-btn + .del-btn, .col-actions .edit-btn + .action-spacer { margin-left: var(--s-1); }
/* Save is first in the form (so Enter saves) but shown after Cancel, like every other window. */
.modal-actions.save-first { flex-direction: row-reverse; justify-content: flex-start; }
.doc-title-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.doc-title-row h1 { margin-top: 0; }
/* Previous / Next statement in the same batch. */
.doc-siblings { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--fs-sm); }
/* History rows: every cell is centred on the row (the name and its date as one block), so the icons and their hover
   tint have the same space above and below, clear of the lines. */
.history-table td { vertical-align: middle; }
/* History: the date starts under the name, not under its icon (the 16px icon and its 6px gap). */
.history-table .col-desc .cell-sub { padding-left: calc(16px + 6px); }

/* ─── Billing ──────────────────────────────────────────────── */

.billing-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: flex-end;
  justify-content: space-between;
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
/* Account (bottom of Plan & billing): email and Delete account. */
.account-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
}
.account-label { margin-top: var(--s-7); }
.account-email { font-weight: 500; overflow-wrap: anywhere; }
.account-note { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-1); max-width: 34rem; }
.danger-btn { color: var(--bad); }
.danger-btn:hover { background: var(--bad-soft); border-color: var(--bad); }
.primary-btn.danger-solid { width: auto; background: var(--bad); border-color: var(--bad); }
.primary-btn.danger-solid:hover { background: #912018; border-color: #912018; }
.modal-narrow { width: min(440px, calc(100vw - 32px)); }
.modal-text { color: var(--text-2); }
.modal .auth-error { margin: 0; }
.billing-plan { font-size: var(--fs-lg); font-weight: 600; }
.billing-sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-1); }
.usage { flex: 1; min-width: min(320px, 100%); max-width: 420px; display: flex; flex-direction: column; gap: var(--s-3); }
/* Each side of a row stays whole: the date moves under the count rather than splitting. */
.usage-label > span { white-space: nowrap; }
.usage-label { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); justify-content: space-between; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s-2); font-variant-numeric: tabular-nums; }
.usage-label strong { color: var(--text); font-weight: 600; }
.usage-bar { height: 8px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.usage-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.usage-fill.is-full { background: var(--bad); }
/* Signed in, the sales half of the line under the plans (site/partials/plans.html) is for the home page only. */
#billingView .promise-contract { display: none; }
.billing-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 720px) {
  .container { padding: var(--s-4) var(--s-4) var(--s-6); }
  .dropzone { padding: var(--s-6) var(--s-4); }
  .site-header,
  header { flex-wrap: wrap; }
  /* Inside the app the header stays on one line: the logo mark alone, tighter nav. */
  body.is-app .site-header { flex-wrap: nowrap; gap: var(--s-2); }
  body.is-app .brand-name { display: none; }
  body.is-app .header-actions { gap: var(--s-1); flex-wrap: nowrap; }
  body.is-app .nav-link { padding: var(--s-2) var(--s-1); }
  .nav-link.landing-only { display: none; }
  .hero { padding-top: var(--s-5); }
  .hero h1 { font-size: 34px; }
  .landing .section-heading { font-size: 24px; }
  .plans { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .trust-lead { padding: var(--s-5) var(--s-4); }
  .trust-links { flex-direction: row; gap: var(--s-5); padding-top: var(--s-4); }
  .trust-item { padding: 18px var(--s-4); gap: var(--s-3); }
  .cta-band h2 { font-size: 24px; }
  .faq-item summary { padding: 14px var(--s-4); }
  .faq-item p { margin: calc(-1 * var(--s-1)) var(--s-4) 14px; }
  /* The four "every plan includes" ticks sit in a 2×2 grid, in a soft panel, under the cards. */
  .plans-includes { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; gap: var(--s-3); background: var(--panel); border-radius: 12px; padding: var(--s-4) var(--s-3); }
  .plans-includes li { white-space: nowrap; }
  .plans-includes li { align-items: flex-start; }
  .plans-includes .icon { margin-top: 2px; flex: none; }
  .auth-card { padding: var(--s-6) var(--s-5); }
  .auth-page { padding-top: var(--s-2); }
  .hide-sm { display: none; }
}

@media (max-width: 640px) {
  .chain-stmt { grid-template-columns: 1fr auto; grid-template-areas: "period open" "file open" "meta open"; }
  .chain-link { margin-left: var(--s-3); }
  /* Long statuses (errors) go under the file name, so similar names stay readable. */
  .batch-file { flex-wrap: wrap; row-gap: 2px; }
  .batch-file-status { max-width: 100%; flex-basis: 100%; text-align: left; }
}

@media (max-width: 600px) {
  .export-controls { width: 100%; }
  .export-controls .model-select { flex: 1 1 100%; max-width: none; }
}

/* ─── Review: the original PDF beside the table ────────────── */

.review:not(.has-pdf) .pdf-pane,
.review-tabs { display: none; }
.review-tabs { gap: var(--s-1); margin-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.review-tab {
  min-height: 0;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-2);
  font-size: var(--fs-md);
}
.review-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

.pdf-pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  margin-bottom: var(--s-6);
}
.pdf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pdf-tools { display: flex; gap: var(--s-1); }
.icon-btn { min-height: 0; width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; }
.pdf-scroll { position: relative; flex: 1; overflow: auto; padding: 12px; outline: none; }
.pdf-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.pdf-page { position: relative; margin: 0 auto 12px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.pdf-canvas { display: block; width: 100%; height: 100%; }
.pdf-mark {
  position: absolute;
  background: rgba(214, 69, 65, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(214, 69, 65, 0.75);
  border-radius: 3px;
  pointer-events: none;
}
.pdf-hl {
  position: absolute;
  background: rgba(255, 204, 0, 0.22);
  box-shadow: 0 0 0 2px rgba(222, 160, 0, 0.9);
  border-radius: 3px;
  pointer-events: none;
}
.pdf-status { padding: var(--s-7) var(--s-5); text-align: center; color: var(--text-2); font-size: var(--fs-md); }
.pdf-status p + p { margin-top: var(--s-3); }
.pdf-status .file-pick { display: inline-block; cursor: pointer; }
.review.pdf-message .pdf-toolbar,
.review.pdf-message .pdf-scroll { display: none; }

@media (min-width: 1100px) {
  .review.has-pdf:not(.pdf-hidden) {
    --review-w: min(1240px, calc(100vw - 64px));
    width: var(--review-w);
    margin-left: calc((100% - var(--review-w)) / 2);
    display: grid;
    /* The table is where you work, so it gets a little more room. */
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    gap: var(--s-5);
    align-items: start;
  }
  .review.has-pdf:not(.pdf-hidden) .pdf-pane {
    position: sticky;
    top: var(--s-4);
    height: calc(100vh - 2 * var(--s-4));
  }
  .review.pdf-message:not(.pdf-hidden) .pdf-pane { height: auto; }
  /* Half the page: tighter columns so every column, row buttons included, fits. */
  .review.has-pdf:not(.pdf-hidden) th,
  .review.has-pdf:not(.pdf-hidden) td { padding-left: var(--s-2); padding-right: var(--s-2); }
  .review.has-pdf:not(.pdf-hidden) .col-date { width: 88px; }
  .review.has-pdf:not(.pdf-hidden) .col-desc { min-width: 9rem; }
  .review.has-pdf:not(.pdf-hidden) .col-num { width: 84px; }
  .review.pdf-hidden .pdf-pane { display: none; }
}

@media (max-width: 1099px) {
  .review.has-pdf .review-tabs { display: flex; }
  .review .pdf-toggle { display: none; }
  .review:not(.tab-pdf) .pdf-pane { display: none; }
  .review.tab-pdf #resultsSection { display: none; }
  .review.tab-pdf .pdf-pane { height: 78vh; }
  .review.tab-pdf.pdf-message .pdf-pane { height: auto; }
}

/* The smallest phones: the page count drops its word so the app header stays on one line. */
/* Too narrow for two columns of ticks on one line each: one column instead. */
@media (max-width: 370px) {
  .plans-includes { grid-template-columns: auto; justify-content: start; }
}

@media (max-width: 360px) {
  .quota-word { display: none; }
}


/* Phones: brand on top, Product and Legal side by side, Contact below. */
@media (max-width: 720px) {
  .footer-inner { padding: var(--s-6) var(--s-4) var(--s-5); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { margin-top: var(--s-6); flex-direction: column; }
  body.is-app .footer-bottom { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  /* History on a phone: each statement is a row like the Convert list, nothing cut off. */
  .history-table { overflow: visible; }
  .history-table thead { display: none; }
  .history-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); border-bottom: 1px solid var(--border); }
  .history-table tbody tr:last-child { border-bottom: 0; }
  .history-table td { border-bottom: 0; }
  .history-table td.col-desc { grid-column: 1 / -1; min-width: 0; padding-bottom: 0; }
  .history-table table { table-layout: auto; }
  /* A phone shows no hover, so names and status wrap instead of being cut short. */
  .history-table .batch-name, .history-table .job-name, .history-table .name-link, .history-table .col-status { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
}