:root{
  --bg:#fbfaf8; --fg:#1c1b19; --mut:#6b6862; --line:#e6e2db; --card:#fff;
  --acc:#1a7f5a; --accbg:#e8f5ef;
  --warn:#a8641b; --warnbg:#fdf1e2;
  --bad:#b3261e; --badbg:#fbe4e2;
  --off:#7a7670; --offbg:#f1efec;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16151a; --fg:#eceaf0; --mut:#9a95a5; --line:#2c2a33; --card:#1e1d24;
    --acc:#4fd6a0; --accbg:#12291f;
    --warn:#e0a458; --warnbg:#2b2013;
    --bad:#ff8a7a; --badbg:#2e1715;
    --off:#8e8a96; --offbg:#232128;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
header{border-bottom:1px solid var(--line);padding:26px 0 0;margin-bottom:8px}
h1{margin:0 0 16px;font-size:23px;font-weight:650;letter-spacing:-.015em}
.tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  background:var(--offbg);color:var(--mut);padding:3px 8px;border-radius:20px;vertical-align:3px}
.lede{margin:0;color:var(--mut);max-width:70ch;font-size:14px}
.lede strong{color:var(--fg)}

/* --- wizard ------------------------------------------------------------- */
.steps{display:flex;gap:26px;flex-wrap:wrap}
.steps span{position:relative;padding:0 0 12px;font-size:12.5px;color:var(--mut);
  border-bottom:2px solid transparent}
.steps span.now{color:var(--fg);font-weight:600;border-bottom-color:var(--acc)}
.steps span.done{color:var(--acc)}
.steps span.done::before{content:'\2713\a0'}

.screen{display:none;padding:30px 0 10px}
.screen.on{display:block;animation:in .16s ease-out}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.screen-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap}
.screen-head h2{margin-bottom:0}
.screen>h2{margin:0 0 8px;font-size:21px;font-weight:640;letter-spacing:-.015em;display:block}
.lead{margin:0 0 22px;color:var(--mut);font-size:14px;max-width:72ch}
.note{margin:22px 0 0;color:var(--mut);font-size:12.5px;line-height:1.6;max-width:74ch}

.how{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.how>div{flex:1 1 190px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:16px 18px}
.how .arrow{flex:0 0 auto;align-self:center;color:var(--mut);font-size:17px;opacity:.55;
  user-select:none}
@media (max-width:760px){
  .how{flex-direction:column}
  .how .arrow{align-self:flex-start;margin-left:22px;transform:rotate(90deg)}
}
.how b{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:var(--accbg);color:var(--acc);font-size:12px;font-weight:700;margin-bottom:9px}
.how p{margin:0;font-size:12.5px;line-height:1.6;color:var(--mut)}
.how p+p{margin-top:6px}
.how strong{color:var(--fg)}
.how em{font-style:normal;color:var(--fg);font-size:12px}

.cards{display:flex;gap:16px;flex-wrap:wrap}
.card{flex:1 1 280px;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:20px;cursor:pointer;transition:border-color .13s,background .13s;
  display:block;font:inherit;color:inherit}
.card:hover{border-color:var(--acc);background:var(--accbg)}
.card b{display:block;font-size:15px;font-weight:620;margin-bottom:6px}
.card span{display:block;font-size:12.5px;line-height:1.6;color:var(--mut)}

.nav{display:flex;align-items:center;gap:12px;padding:26px 0 0;margin-top:26px;
  border-top:1px solid var(--line)}
.back{background:none;border-color:transparent;color:var(--mut);padding-left:0}
.back::before{content:'\2190\a0'}
.back:hover:not(:disabled){border-color:transparent;color:var(--fg)}

.explain{margin-bottom:18px}
.steps-list{margin:0;padding-left:20px;font-size:12.5px;line-height:1.65;color:var(--mut)}
.steps-list li{margin:6px 0;padding-left:3px}
.steps-list strong{color:var(--fg)}
.steps-list em{font-style:normal;color:var(--fg)}

.step{padding:24px 0;border-bottom:1px solid var(--line)}
h2{margin:0 0 6px;font-size:16px;font-weight:620;display:flex;align-items:center;gap:10px}
.n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--offbg);color:var(--mut);font-size:12px;font-weight:700}
.hint{margin:0 0 14px;color:var(--mut);font-size:13.5px;max-width:74ch}

.needs{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;margin:0;max-width:76ch}
.needs-label{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--mut);margin:0 0 8px 2px}
.needs .col{display:inline-block;margin:0 6px 6px 0;padding:3px 10px;border-radius:20px;
  font-size:12.5px;font-weight:600;background:var(--accbg);color:var(--acc)}
.needs .col.opt{background:var(--offbg);color:var(--mut);font-weight:500}
.cols{list-style:none;margin:0;padding:0}
.cols li{display:flex;gap:9px;font-size:12.5px;line-height:1.6;color:var(--mut);
  padding:7px 0;border-bottom:1px solid var(--line)}
.cols li:last-child{border-bottom:0;padding-bottom:0}
.cols .col{flex:0 0 82px;width:82px;margin:0;text-align:center;align-self:flex-start}
.cols .cd{flex:1;min-width:0}
.cols strong{color:var(--fg)}
.cols em{font-style:normal;color:var(--fg)}
.cols .alt{display:block;position:relative;margin:5px 0;padding-left:15px}
.cols .alt::before{content:'';position:absolute;left:0;top:9px;width:8px;height:1px;
  background:var(--mut);opacity:.6}
.cols code{font-size:11px;background:var(--offbg);padding:1px 5px;border-radius:4px}
.needs-note{margin:11px 0 0;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.55;color:var(--mut)}
.needs-note strong{color:var(--fg)}
.needs-note em{font-style:normal;color:var(--fg)}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:22px;text-align:center;
  background:var(--card);transition:border-color .15s,background .15s}
.drop.over{border-color:var(--acc);background:var(--accbg)}
.drop p{margin:0;color:var(--mut);font-size:14px}
.link{background:none;border:0;color:var(--acc);font:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:0}
.formats{margin:7px 0 0;font-size:11.5px;color:var(--mut)}
.formats code{font-size:11px;background:var(--offbg);padding:1px 5px;border-radius:4px;margin:0 1px}
.chosen{margin-top:10px;font-size:13px;color:var(--fg)}
.chosen b{font-weight:600}

.mapping{margin-top:16px}
.maphelp{margin:0 0 14px;font-size:13.5px;color:var(--mut);max-width:76ch;line-height:1.55}
.maphelp strong{color:var(--fg)}
.adapter{background:var(--accbg);border:1px solid var(--acc);border-radius:9px;
  padding:12px 15px;margin:0 0 16px;max-width:78ch}
.adapter .ck{display:flex;gap:9px;align-items:flex-start;font-size:13px;cursor:pointer}
.adapter .ck input{margin:2px 0 0;accent-color:var(--acc);flex:0 0 auto}
.adapter .ck strong{color:var(--fg)}
.adapter ul{margin:8px 0 0 27px;padding:0;font-size:12.5px;line-height:1.55;color:var(--mut)}
.adapter li{margin:4px 0}
.adapter li strong{color:var(--fg)}
.adapter li em{font-style:normal;color:var(--fg)}
.adapter-note{margin:9px 0 0 27px;font-size:11.5px;color:var(--mut)}
.fields{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.field{flex:1 1 190px;min-width:180px;max-width:250px}
.mapping label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--mut);margin-bottom:5px}
.mapping select{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--card);color:var(--fg);width:100%}
.fhelp{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--mut)}
.fhelp strong{color:var(--fg);font-weight:600}
.reqmark{margin-left:6px;font-size:9.5px;letter-spacing:.04em;color:var(--acc);
  background:var(--accbg);padding:1px 5px;border-radius:20px;text-transform:uppercase}
.optmark{margin-left:6px;font-size:9.5px;letter-spacing:.04em;color:var(--mut);
  background:var(--offbg);padding:1px 5px;border-radius:20px;text-transform:uppercase}
.field.req select{border-color:var(--mut)}
.field.unset select{border-color:var(--bad);background:var(--badbg)}
.mapwarn{margin:12px 0 0;font-size:13px;color:var(--bad);
  background:var(--badbg);padding:9px 13px;border-radius:8px;max-width:72ch}
.mapwarn strong{font-weight:650}


.runbar{display:flex;align-items:center;gap:14px}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);
  color:var(--fg);padding:8px 15px;border-radius:8px;font-size:14px}
button:hover:not(:disabled){border-color:var(--mut)}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600;padding:9px 22px}
@media (prefers-color-scheme:dark){.primary{color:#0d1a14}}
.status{color:var(--mut);font-size:13.5px}

#s-results{padding-bottom:50px}
.banner{border-radius:9px;padding:11px 15px;margin-bottom:12px;font-size:13.5px}
.banner.error{background:var(--badbg);color:var(--bad)}
.banner.warn{background:var(--warnbg);color:var(--warn)}
.banner.info{background:var(--offbg);color:var(--mut)}

.metrics{display:flex;gap:30px;flex-wrap:wrap;padding:18px 0 4px}
.m b{display:block;font-size:27px;font-weight:640;letter-spacing:-.02em;line-height:1.15}
.m span{color:var(--mut);font-size:12px}
.routes{display:flex;flex-direction:column;gap:5px;max-width:520px;margin:16px 0 22px}
.rb{display:grid;grid-template-columns:110px 1fr 46px;gap:10px;align-items:center;font-size:12px}
.rb>div{height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.rb i{display:block;height:100%;background:var(--acc)}
.rb b{text-align:right;color:var(--mut);font-weight:500;font-variant-numeric:tabular-nums}

.toolbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{padding:5px 12px;font-size:13px;border-radius:20px}
.filters button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.filters button.danger.on{background:var(--bad);border-color:var(--bad);color:#fff}
.downloads{display:flex;gap:8px}

.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:1040px;margin-top:16px;font-size:13px}
th{text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);padding:0 10px 8px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg)}
th.r,td.r{text-align:right}
td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr.differs{background:var(--badbg)}
tr.blank{background:var(--warnbg)}
tr.noted td.ev{color:var(--warn);font-style:italic}
.d{white-space:nowrap;color:var(--mut);font-variant-numeric:tabular-nums}
.desc{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.acct{font-weight:550;max-width:210px}
.b{display:inline-block;padding:1px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.b.Auto{background:var(--accbg);color:var(--acc)}
.b.Review{background:var(--warnbg);color:var(--warn)}
.b.Unknown{background:var(--offbg);color:var(--off)}
.conf{white-space:nowrap}
.conf .bar{display:inline-block;width:44px;height:6px;background:var(--line);
  border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:7px}
.conf .bar i{display:block;height:100%;background:var(--acc)}
.conf span{font-variant-numeric:tabular-nums;color:var(--mut);font-size:12px}
.ev,.rt{color:var(--mut);font-size:11.5px;white-space:nowrap}
.mk{font-size:11px;font-weight:600}
.mk.match{color:var(--acc)} .mk.differs{color:var(--bad);cursor:help} .mk.blank{color:var(--warn)}
.more{color:var(--mut);font-size:12.5px;padding:12px 0}
footer{border-top:1px solid var(--line);padding:18px 0 40px;color:var(--mut);font-size:12.5px}
code{font-size:12px;background:var(--offbg);padding:1px 6px;border-radius:5px}

/* --- review screen ------------------------------------------------------- */
.who{float:right;color:var(--mut);font-size:13px;font-weight:400}
.screen{display:none;padding:28px 0 80px}
.screen.on{display:block}
.boot{padding:20px}
.bad{color:var(--bad)}

.g{display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:11px 14px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);margin-bottom:7px}
.g.decided{border-color:var(--acc)}
.g.changed{border-color:var(--warn);background:var(--warnbg)}
.gm{min-width:0;flex:1}
.gm b{display:block;font-size:13.5px;font-weight:600}
.gs{font-size:12px;color:var(--mut);margin-right:12px}
.ge{font-size:12px;color:var(--mut)}
.noted{color:var(--acc)}
.g select{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg);color:var(--fg);min-width:210px}

h2 .n{font-size:12px;color:var(--mut);background:var(--offbg);
  padding:2px 8px;border-radius:20px;vertical-align:3px;margin-left:6px}
.m.Unknown b{color:var(--bad)} .m.Review b{color:var(--warn)} .m.Auto b{color:var(--acc)}

.footerbar{position:sticky;bottom:0;display:flex;gap:14px;align-items:center;
  padding:14px 0;margin-top:20px;border-top:1px solid var(--line);background:var(--bg)}
.fnote{flex:1;font-size:12.5px;color:var(--mut);line-height:1.5;max-width:64ch}
.fnote strong{color:var(--fg)}

.adapter{display:flex;gap:10px;align-items:flex-start;background:var(--accbg);
  border:1px solid var(--acc);border-radius:9px;padding:12px 14px;margin:14px 0;font-size:12.5px}
.adapter strong{color:var(--fg)}
.warn{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:10px 13px;
  font-size:12.5px;margin:12px 0;max-width:74ch}
.warnbox{background:var(--badbg);border:1px solid var(--bad);border-radius:10px;
  padding:16px 18px;margin:16px 0;max-width:74ch}
.warnbox h3{margin:0 0 8px;font-size:15px}
.warnbox p{margin:0 0 12px;font-size:13px;line-height:1.6}

#groups h2{margin:28px 0 6px}
#groups h2:first-child{margin-top:8px}
.metrics{padding-bottom:10px}

/* --- landing ------------------------------------------------------------
   The signed-out screen. It extends the tokens above rather than introducing a
   second palette: the page a firm sees before signing in and the tool they use
   afterwards should not look like two products.

   Selectors are kept at two classes (.landing .x) so they beat the generic
   .screen>h2 rule above regardless of source order. */

.landing{padding-top:34px}

.landing .eyebrow{margin:0 0 14px;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--acc)}

.landing .hero-title{margin:0 0 18px;font-size:clamp(30px,5.2vw,52px);line-height:1.06;
  font-weight:680;letter-spacing:-.032em;max-width:19ch}

.landing .hero-lead{margin:0 0 28px;font-size:clamp(15px,1.6vw,18px);line-height:1.6;
  color:var(--mut);max-width:56ch}

.landing .hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.landing .hero-note{font-size:12.5px;color:var(--mut);max-width:34ch;line-height:1.5}

/* The signature. A statement line on the left, the account it lands in on the
   right, and the evidence underneath — the whole product in four rows. Set in
   mono because that is the material: bank exports and account codes are
   fixed-width by nature, not by decoration. */
.landing .ledger{margin:52px 0 0;padding:0;border:1px solid var(--line);border-radius:12px;
  background:var(--card);overflow:hidden}

.landing .ledger-head{display:flex;justify-content:space-between;gap:16px;
  padding:12px 20px;border-bottom:1px solid var(--line);background:var(--offbg);
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut)}

.landing .lrow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:4px 20px;padding:16px 20px;border-bottom:1px solid var(--line);
  align-items:baseline;
  opacity:0;transform:translateY(6px);
  animation:lrow-in .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(120ms + var(--i) * 110ms)}
.landing .lrow:last-child{border-bottom:0}

@keyframes lrow-in{to{opacity:1;transform:none}}

.landing .lsrc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;color:var(--fg);word-break:break-word;
  /* The global `code` rule pills every inline code element. Here the element is
     a whole statement line in a grid cell, so the pill stretched into a grey bar
     across the column. The line is the material, not a highlighted token. */
  background:none;padding:0;border-radius:0}

.landing .lout{font-size:14.5px;color:var(--fg);text-align:right}
.landing .lout b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:600;margin-right:8px}
.landing .lout i{color:var(--mut);font-style:normal}

/* The evidence line sits under the statement line, where the eye already is. */
.landing .lwhy{grid-column:1/-1;font-size:12px;color:var(--mut)}

.landing .is-auto .lout b{color:var(--acc)}
.landing .is-review .lout b{color:var(--warn)}
.landing .is-unknown .lout{color:var(--mut)}

/* Sections ------------------------------------------------------------- */
.landing .sec-title{margin:0 0 22px;font-size:20px;font-weight:650;
  letter-spacing:-.018em;max-width:26ch}

.landing .states{margin:64px 0 0}
.landing .state-grid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.landing .state{padding:20px;border:1px solid var(--line);border-radius:12px;
  background:var(--card)}
.landing .st-tag{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em}
.landing .st-auto .st-tag{background:var(--accbg);color:var(--acc)}
.landing .st-review .st-tag{background:var(--warnbg);color:var(--warn)}
.landing .st-unknown .st-tag{background:var(--offbg);color:var(--off)}
.landing .st-body{margin:0;font-size:13.5px;line-height:1.6;color:var(--mut)}

.landing .learn{margin:64px 0 0;padding:30px;border:1px solid var(--line);
  border-radius:12px;background:var(--card)}
.landing .learn-body{margin:0 0 14px;font-size:14.5px;line-height:1.68;color:var(--mut);
  max-width:66ch}
.landing .learn-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;background:var(--offbg);padding:1px 6px;border-radius:4px;color:var(--fg)}
.landing .learn-cta{margin-top:24px}

@media (max-width:640px){
  .landing .lrow{grid-template-columns:1fr;gap:6px}
  .landing .lout{text-align:left}
  .landing .ledger-head span:last-child{display:none}
}

/* An entrance animation is a nicety; someone who has asked for less motion
   should still see the content, immediately and in place. */
@media (prefers-reduced-motion:reduce){
  .landing .lrow{opacity:1;transform:none;animation:none}
}

/* --- start screen -------------------------------------------------------- */
.picks{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:840px}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  font:inherit;color:inherit;cursor:pointer;
  transition:border-color .14s,transform .14s}
.pick:hover:not(:disabled){border-color:var(--acc);transform:translateY(-2px)}
.pick:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pick:disabled{cursor:not-allowed;opacity:.5}
.pick-t{font-size:17px;font-weight:640;letter-spacing:-.012em}
.pick-b{font-size:13.5px;line-height:1.6;color:var(--mut)}
.pick-go{margin-top:6px;font-size:13px;font-weight:600;color:var(--acc)}
.pick:disabled .pick-go{color:var(--mut)}

.crumb{margin:0 0 14px}
.link{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--mut);
  cursor:pointer}
.link:hover{color:var(--fg)}
.link:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}

.fields input[type=text]{width:100%;max-width:340px;padding:9px 11px;font:inherit;
  font-size:14px;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:7px}
.fields input[type=text]:focus{outline:2px solid var(--acc);outline-offset:-1px;
  border-color:var(--acc)}