/* Pro Bookkeepers: payroll, QuickBooks and Xero service pages.
   Loads after style.css. Every rule is scoped to main.sb or an sb- class, so
   nothing leaks into other pages. Colours are shell.css tokens only; green and
   red are left for money, so flags are ink and fixes are emerald. */

.sb{--r:14px;}
.sb h2{font-size:var(--fs-h2);line-height:1.02;}
.sb .section{padding-block:clamp(4.5rem,8vw,7rem);}
.sb .section--ink .sb-head p,.sb .section--ink > .wrap > p{color:#A6B8CC;}
.sb-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.sb-num{font-variant-numeric:tabular-nums;}

/* ---------- Section head: headline left, intro right (homepage pattern) ---------- */
.sb-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.1rem 2.5rem;align-items:end;
  margin-bottom:clamp(2.25rem,5vw,3.5rem);}
.sb-head h2{margin:0;max-width:18ch;}
.sb-head p{margin:0;max-width:46ch;font-size:1.0625rem;}
.sb-head .eyebrow{grid-column:1/-1;margin-bottom:0;}
.sb-head--stack{grid-template-columns:minmax(0,1fr);}
.sb-head--stack h2{max-width:22ch;}
@media (max-width:820px){.sb-head{grid-template-columns:minmax(0,1fr);}}

/* ---------- Hero: copy left, credentials card right ---------- */
.sb-hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.sb-hero h1{max-width:19ch;}
.sb-hero .lead{max-width:56ch;margin:1.4rem 0 1.1rem;}
.sb-hero__more{max-width:56ch;}
.sb-hero .btn-row{margin-top:1.6rem;}
.sb-hero__note{font-size:.9375rem;margin:1.1rem 0 0;}
.sb-facts{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(1.4rem,3vw,2rem);
  box-shadow:0 30px 70px -40px rgba(13,27,42,.45);}
.sb-facts__k{font-size:.8125rem;font-weight:600;color:var(--slate);margin:0 0 1rem;}
.sb-facts ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.sb-facts li{display:grid;grid-template-columns:6.25rem minmax(0,1fr);gap:1rem;align-items:baseline;margin:0;
  padding:.85rem 0;border-bottom:1px solid var(--line);}
.sb-facts li > b{font:800 1.5rem/1 var(--display);color:var(--ink);letter-spacing:-.01em;}
.sb-facts li span{font-size:.9rem;line-height:1.4;color:var(--slate);}
.sb-facts li span strong{display:block;}
.sb-facts__stamp{display:inline-block;margin:1.2rem 0 0;font-size:.75rem;font-weight:700;color:var(--accent-dark);
  border:2px solid var(--accent-dark);border-radius:6px;padding:.45rem .65rem;transform:rotate(-3deg);}
@media (max-width:960px){.sb-hero__grid{grid-template-columns:minmax(0,1fr);}.sb-facts{max-width:520px;}}

/* ---------- Working paper: the problem list, on ink ---------- */
.sb-wp{background:#fff;border:1px solid #22364D;border-radius:14px;overflow:hidden;color:var(--ink);}
.sb-wp__head,.sb-wp__row{display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,1.5fr);gap:1.5rem;
  padding:1.3rem 1.5rem;align-items:start;}
.sb-wp__head{background:var(--ink-800);color:#9DAAB9;font-size:.8125rem;font-weight:500;padding-block:.9rem;}
.sb-wp__row{border-top:1px solid var(--line);transition:background .2s;}
.sb-wp__row:hover{background:#F8FAFB;}
.sb-wp__ref{font-weight:700;font-size:.875rem;line-height:1.6;color:var(--accent-dark);font-variant-numeric:tabular-nums;}
.sb-wp__row h3{font:700 var(--fs-h3)/1.25 var(--display);margin:0;color:var(--ink);}
.sb-wp__row p{margin:0;color:var(--slate);font-size:.9375rem;}
.sb-after{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;margin-top:2rem;}
.sb-after a:not(.btn){color:#fff;}
@media (max-width:960px){
  .sb-wp__head{display:none;}
  .sb-wp__row{grid-template-columns:2.75rem minmax(0,1fr);gap:.4rem 1rem;padding:1.15rem 1.2rem;}
  .sb-wp__row p{grid-column:2;}
}

/* ---------- Demo layout ---------- */
.sb-demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.sb-demo__copy{padding-top:clamp(0rem,2vw,1.5rem);}
.sb-demo__copy > p{font-size:1.0625rem;margin:1.1rem 0 1.5rem;}
.sb-demo__copy h2{max-width:15ch;}
.sb-label{display:block;font-size:.8125rem;font-weight:600;color:var(--slate);margin:0 0 .5rem;}
.sb-demo__copy > p.sb-fine,.sb-fine{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;line-height:1.45;color:var(--slate);margin:1rem 0 0;}
.sb-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}
@media (max-width:960px){.sb-demo{grid-template-columns:minmax(0,1fr);}}

/* Country toggle: real buttons with aria-pressed */
.sb-toggle{display:flex;width:100%;padding:3px;background:#fff;border:1px solid var(--line);border-radius:10px;gap:2px;margin:0 0 .6rem;}
.sb-toggle button{flex:1;font:600 .9375rem/1 var(--sans);padding:.75rem .5rem;border:0;border-radius:8px;background:transparent;
  color:var(--slate);cursor:pointer;transition:background .2s,color .2s;}
.sb-toggle button:hover{color:var(--ink);background:var(--surface);}
.sb-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff;}
.sb-demo__copy > p.sb-toggle__note,.sb-toggle__note{font-size:.875rem;margin:0 0 1.4rem;min-height:2.8em;}

/* ---------- App window ("stage") ---------- */
.sb-stage{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px -40px rgba(13,27,42,.45);overflow:hidden;font-variant-numeric:tabular-nums;}
.sb-stage__bar{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);
  background:#F8FAFB;font-size:.8125rem;font-weight:600;color:var(--ink);}
.sb-stage__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--accent);flex:none;}
.sb-stage__ico .sb-ico{width:17px;height:17px;stroke-width:2;}
.sb-state{margin-left:auto;font-size:.75rem;font-weight:600;padding:.35rem .55rem;border-radius:6px;background:var(--surface);
  color:var(--slate);white-space:nowrap;}
.sb-state.is-busy{background:var(--accent-soft);color:var(--accent-dark);}
.sb-state.is-done{background:var(--ink);color:#fff;}
.sb-stage__note{margin:0;padding:.55rem 1.1rem .75rem;font-size:.75rem;color:var(--muted);text-align:right;}
.sb-stage__cap{margin:0;padding:.8rem 1.1rem 0;font-size:.75rem;font-weight:600;color:var(--muted);}

.sb-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);}
.sb-steps li{position:relative;margin:0;padding:.7rem .25rem;text-align:center;font-size:.75rem;font-weight:600;color:var(--muted);}
.sb-steps li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background .3s;}
.sb-steps li.is-on{color:var(--ink);}
.sb-steps li.is-on::after{background:var(--accent);}
.sb-steps li.is-done{color:var(--accent-dark);}
.sb-steps li.is-done::after{background:var(--accent-dark);}

.sb-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 1.1rem;
  border-top:1px dashed var(--line-strong);font-size:.8125rem;color:var(--slate);}
.sb-foot b{font-size:1.125rem;color:var(--ink);white-space:nowrap;transition:color .3s;}
.sb-foot b.is-ok{color:var(--accent-dark);}
.sb-jnl + .sb-foot{border-top:0;}
.sb-out{padding:1.1rem 1.25rem 1.25rem;background:var(--ink);color:#C3CCD8;font-size:.875rem;animation:sbRise .4s ease both;}
.sb-out strong{display:block;font:800 1.5rem/1.1 var(--display);letter-spacing:-.01em;color:#fff;margin-bottom:.45rem;}
.sb-out p{margin:0;}
@keyframes sbRise{from{opacity:0;transform:translateY(6px);}}
@keyframes sbFlash{from{background:var(--accent-soft);}}
@keyframes sbSpin{to{transform:rotate(360deg);}}

/* ---------- Pay-run poster ---------- */
.sb-run{list-style:none;margin:0;padding:.35rem 0 .5rem;}
.sb-run li{display:grid;grid-template-columns:minmax(0,1fr) auto 8.75rem;gap:.3rem .9rem;align-items:center;margin:0;
  padding:.5rem 1.1rem;font-size:.875rem;transition:background .3s;}
.sb-run .d{color:var(--ink);}
.sb-run .a{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap;}
.sb-run em{justify-self:end;font-style:normal;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:6px;
  background:var(--surface);color:var(--muted);white-space:nowrap;transition:background .3s,color .3s,transform .3s;}
.sb-run li.is-on{background:#F8FAFB;box-shadow:inset 3px 0 0 var(--accent);}
.sb-run li.is-on em,.sb-run li.is-done em{background:var(--accent-soft);color:var(--accent-dark);}
.sb-run li.is-on em{transform:translateX(4px);}

.sb-jnl{width:100%;border-collapse:collapse;font-size:.8125rem;border-top:1px solid var(--line);}
.sb-jnl caption{text-align:left;padding:.8rem 1.1rem .2rem;font-size:.75rem;font-weight:600;color:var(--muted);}
.sb-jnl th{font-weight:600;font-size:.75rem;color:var(--muted);text-align:left;padding:.5rem 1.1rem .45rem;border-bottom:1px solid var(--line);}
.sb-jnl td{padding:.42rem 1.1rem;border-bottom:1px solid var(--line);color:var(--ink);}
.sb-jnl th + th,.sb-jnl td + td{text-align:right;width:6.75rem;white-space:nowrap;}
.sb-jnl tbody td + td{color:#A7B1BE;}
.sb-jnl tbody tr.is-in td + td{color:var(--ink);}
.sb-jnl tr.is-cr td:first-child{padding-left:2.1rem;}   /* credits indented, as in a journal */
.sb-jnl tr.is-new td{animation:sbFlash 1.1s ease;}
.sb-jnl tfoot td{font-weight:700;color:var(--ink);border-bottom:3px double var(--line-strong);transition:border-color .4s;}
.sb-jnl tfoot.is-done td{border-bottom-color:var(--ink);}
@media (max-width:560px){
  .sb-run li{grid-template-columns:minmax(0,1fr) auto;}
  .sb-run em{grid-column:1/-1;justify-self:start;}
  .sb-jnl th + th,.sb-jnl td + td{width:auto;padding-inline:.5rem;}
  .sb-jnl td:first-child,.sb-jnl th:first-child{padding-left:.9rem;}
  .sb-jnl tr.is-cr td:first-child{padding-left:1.6rem;}
  .sb-jnl td + td:last-child,.sb-jnl th + th:last-child{padding-right:.9rem;}
}

/* ---------- File health scan ---------- */
.sb-scan__list{list-style:none;margin:0;padding:.2rem 0;}
.sb-scan__list li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:.15rem .85rem;align-items:start;margin:0;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--line);transition:background .3s;}
.sb-scan__list li::before{content:"";grid-row:span 2;width:18px;height:18px;margin-top:.1rem;border-radius:50%;
  border:1.5px solid var(--line-strong);box-sizing:border-box;display:grid;place-items:center;
  font:700 .6875rem/1 var(--sans);}
.sb-scan__list b{color:var(--ink);font-size:.875rem;font-weight:600;line-height:1.35;}
.sb-scan__list .c{font-size:.6875rem;font-weight:600;padding:.25rem .45rem;border-radius:6px;background:var(--surface);
  color:var(--muted);white-space:nowrap;}
.sb-scan__list .t{grid-column:2/-1;font-size:.8125rem;line-height:1.45;color:var(--slate);}
.sb-scan__list .t > span{display:none;}
.sb-scan__list .t > .q{display:inline;}
.sb-scan__list li.is-checking::before,.sb-scan__list li.is-fixing::before{border-color:var(--accent);border-top-color:transparent;animation:sbSpin .7s linear infinite;}
.sb-scan__list li.is-flag{background:var(--surface);}
.sb-scan__list li.is-flag::before{content:"!";background:var(--ink);border-color:var(--ink);color:#fff;}
.sb-scan__list li.is-flag .c{background:var(--ink);color:#fff;}
.sb-scan__list li.is-fixed::before{content:"\2713";background:var(--accent);border-color:var(--accent);color:var(--ink);}
.sb-scan__list li.is-fixed .c{background:var(--accent-soft);color:var(--accent-dark);}
.sb-scan__list li.is-fixing{background:var(--surface);}
.sb-scan__list li.is-fixing .t > .q,.sb-scan__list li.is-flag .t > .q,.sb-scan__list li.is-fixed .t > .q{display:none;}
.sb-scan__list li.is-fixing .t > .f,.sb-scan__list li.is-flag .t > .f{display:inline;color:var(--ink);}
.sb-scan__list li.is-fixed .t > .x{display:inline;}

/* ---------- Two-column deep dive with a side card ---------- */
.sb-side{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(1.4rem,3vw,2rem);
  box-shadow:0 30px 60px -45px rgba(13,27,42,.35);}
.sb-side h3{font:700 var(--fs-h3)/1.25 var(--display);margin:0 0 1rem;}
.sb-side .ticks li{font-size:.95rem;}
.sb-side .callout{margin:1.5rem 0 0;}

/* ---------- FAQ: heading left, questions right ---------- */
.sb-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.sb-faq__head{position:sticky;top:100px;}
.sb-faq__head h2{max-width:14ch;}
.sb-faq .faq{max-width:none;margin:0;}
@media (max-width:960px){.sb-faq{grid-template-columns:minmax(0,1fr);}.sb-faq__head{position:static;}}

/* ---------- Final CTA: the homepage's closing panel ---------- */
.sb-final{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);background:var(--ink);
  color:#D6DDE6;border-radius:22px;padding:clamp(1.75rem,5vw,4rem);position:relative;overflow:hidden;}
.sb-final::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,transparent 0 37px,rgba(0,168,114,.12) 37px 38px);}
.sb-final > *{position:relative;}
.sb-final h2{color:#fff;max-width:17ch;}
.sb-final .eyebrow{color:#9DAAB9;}
.sb-final > div > p{font-size:1.0625rem;margin:1.1rem 0 1.75rem;max-width:48ch;color:#D6DDE6;}
.sb-final .form-status{background:var(--ink-800);color:#fff;border-color:#22364D;}
.sb-final__note{font-size:.8125rem !important;color:#B9C4D1 !important;margin:.9rem 0 0 !important;}
.sb-final__side{background:var(--ink-800);border-radius:16px;padding:1.75rem;align-self:start;}
.sb-final__side h3{color:#fff;font:700 var(--fs-h3)/1.25 var(--display);margin:0 0 .6rem;}
.sb-final__side p{color:#D6DDE6;font-size:.95rem;}
.sb-final__side .btn{white-space:normal;text-align:center;}
@media (max-width:960px){.sb-final{grid-template-columns:minmax(0,1fr);}}

@media (prefers-reduced-motion:reduce){
  .sb-scan__list li.is-checking::before,.sb-scan__list li.is-fixing::before{animation:none;}
  .sb-run li.is-on em{transform:none;}
}