/* ============================================================
   PaperDoDo — /smallbusiness landing page
   Self-contained stylesheet. Brand tokens mirror ../styles.css
   and ../accountants/styles.css so every page reads as the same
   company; the components below are specific to this page.
   ============================================================ */

:root{
  --accent-bright: #0A84FF;
  --accent:        #0B63CE;
  --accent-deep:   #094ea3;
  --accent-soft:   #e8f2ff;

  --ink:      #0b1b33;
  --ink-2:    #12294a;
  --paper:    #ffffff;
  --paper-2:  #f4f8fd;
  --line:     #dde7f2;

  --text:       #16243a;
  --text-soft:  #51637d;
  --text-faint: #8496ae;

  --good:  #128a5a;
  --warn:  #b06a00;
  --bad:   #c02c2c;

  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      1120px;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 4px 12px rgba(11,18,32,.05);
  --shadow-md: 0 2px 6px rgba(11,18,32,.07), 0 18px 40px rgba(11,18,32,.09);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65;
  color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  font-weight:800; color:var(--ink); line-height:1.14;
  letter-spacing:-.025em; margin:0 0 .5em;
}
h1{ font-size:clamp(2.05rem,4vw,3rem); letter-spacing:-.03em; }
h2{ font-size:clamp(1.7rem,3.3vw,2.4rem); }
h3{ font-size:1.14rem; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--accent-bright); outline-offset:2px; border-radius:4px; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(11,18,32,.05); }
.nav__inner{ display:flex; align-items:center; gap:20px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; }
.brand:hover{ text-decoration:none; }
.brand__mark{ width:30px; height:32px; color:var(--accent-bright); flex:none; }
.brand__name{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.12rem; letter-spacing:-.02em; font-weight:600; }
.brand__name b{ font-weight:800; }
.brand__tag{
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:.22rem .5rem; border-radius:999px;
}
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{ color:var(--text-soft); font-size:.95rem; font-weight:500; }
.nav__links a:hover{ color:var(--ink); text-decoration:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--accent); color:#fff; font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem; border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 6px 18px rgba(11,99,206,.24);
  transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover{ background:var(--accent-deep); transform:translateY(-1px); text-decoration:none; color:#fff; }
.btn:disabled{ opacity:.6; cursor:default; transform:none; }
.btn--sm{ padding:.6rem 1.1rem; font-size:.92rem; }
.btn--ghost{ background:transparent; color:var(--accent); box-shadow:none; border:1.5px solid var(--line); }
.btn--ghost:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.btn--block{ width:100%; }
/* The nav CTA carries a short label on phones so it never wraps to two
   lines beside the wordmark; the sticky bar shows the full one. */
.btn__short{ display:none; }

/* ---------- Section furniture ---------- */
section{ padding:76px 0; }
.section--tint{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .8rem;
}
.sechead{ max-width:740px; margin:0 0 44px; }
.sechead p{ color:var(--text-soft); font-size:1.06rem; margin:0; }
.sechead--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Hero ---------- */
.hero{ padding:56px 0 68px; background:
  radial-gradient(900px 420px at 15% -10%, var(--accent-soft), transparent 70%); }
.hero__grid{ display:grid; grid-template-columns:1.14fr .86fr; gap:46px; align-items:center; }
.hero .lede{ font-size:1.13rem; color:var(--text-soft); max-width:38em; }
.wins{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.7rem; }
/* Tick is absolutely positioned rather than a flex sibling, so the bold lead-in
   and the sentence after it stay in one wrapping text flow. */
.wins li{ display:block; position:relative; padding-left:1.9rem; font-size:1rem; color:var(--text-soft); }
.wins__tick{ position:absolute; left:0; top:.24em; width:20px; height:20px; border-radius:50%; background:var(--accent-soft); }
.wins__tick::after{
  content:""; position:absolute; left:6px; top:5px; width:5px; height:9px;
  border:2px solid var(--accent); border-top:0; border-left:0; transform:rotate(42deg);
}
.wins strong{ color:var(--ink); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero__trust{ font-size:.9rem; color:var(--text-faint); margin:1.2rem 0 0; }

/* ---------- Dashboard mock (hero visual) ---------- */
.mock{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; }
.mock__bar{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  background:var(--ink); color:#cddcf0; font-size:.82rem; font-weight:500;
}
.mock__dot{ width:9px; height:9px; border-radius:50%; background:#39516f; flex:none; }
.mock__body{ padding:18px; }
.kpirow{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.kpi{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 13px; }
.kpi__k{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.kpi__v{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.22rem; color:var(--ink); letter-spacing:-.02em; margin-top:.15rem; }
.kpi__d{ display:block; font-size:.76rem; font-weight:600; margin-top:.1rem; }
.kpi__d--up{ color:var(--good); }
.kpi__d--down{ color:var(--bad); }
.kpi__d--flat{ color:var(--text-faint); }

.row{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); font-size:.92rem; }
.row:last-child{ border-bottom:0; }
.row__name{ font-weight:600; color:var(--ink); flex:1; min-width:0; }
.row__meta{ display:block; font-weight:400; font-size:.79rem; color:var(--text-faint); }
.row__num{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); }
.pill{ flex:none; font-size:.73rem; font-weight:700; padding:.24rem .62rem; border-radius:999px; white-space:nowrap; }
.pill--good{ background:#e3f6ec; color:var(--good); }
.pill--warn{ background:#fdf0dc; color:var(--warn); }
.pill--info{ background:var(--accent-soft); color:var(--accent); }
.mock__foot{ padding:12px 18px; background:var(--paper-2); border-top:1px solid var(--line); font-size:.81rem; color:var(--text-soft); }

/* ---------- Signs you're flying blind ---------- */
.signs{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:900px; margin:0 auto; }
.sign{
  background:#fff; border:1px solid var(--line); border-left:3px solid #e0b7b7;
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm);
}
.sign h3{ margin:0 0 .3rem; color:var(--ink); }
.sign p{ margin:0; font-size:.95rem; color:var(--text-soft); }
.signs__note{ max-width:760px; margin:30px auto 0; text-align:center; color:var(--text-soft); }
.signs__note strong{ color:var(--ink); }

/* ---------- Monthly pack / animated chart ---------- */
.pack{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.packlist{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:16px; }
.packlist li{ position:relative; padding-left:2.4rem; }
.packlist__n{
  position:absolute; left:0; top:.05em; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.8rem;
}
.packlist h3{ margin:0 0 .15rem; color:var(--ink); }
.packlist p{ margin:0; font-size:.95rem; color:var(--text-soft); }

.chartcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:24px 24px 20px; }
.chartcard__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; }
.chartcard__t{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.05rem; color:var(--ink); margin:0; }
.chartcard__s{ margin:0 0 18px; font-size:.85rem; color:var(--text-faint); }
.legend{ display:flex; gap:14px; font-size:.78rem; color:var(--text-soft); font-weight:600; }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.legend .i-in{ background:var(--accent-bright); }
.legend .i-out{ background:#c9d9ec; }

.chart{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; align-items:end; height:190px; }
.bargroup{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.bars{ display:flex; gap:4px; align-items:flex-end; height:100%; }
.bar{
  flex:1; border-radius:5px 5px 0 0; height:0;
  transition:height .9s var(--ease);
}
.bar--in{ background:linear-gradient(180deg,#3ba0ff,#0A84FF); }
.bar--out{ background:#c9d9ec; }
.bargroup__k{ text-align:center; font-size:.74rem; font-weight:600; color:var(--text-faint); padding-top:8px; }
.chart__foot{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:.88rem; color:var(--text-soft); }
.chart__foot strong{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){ .bar{ transition:none; } }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm); }
.step__k{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.step h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.18rem; }
.step p{ margin:0; color:var(--text-soft); font-size:.96rem; }
.step__when{ display:block; margin-top:.9rem; font-size:.84rem; font-weight:600; color:var(--text-faint); }

/* ---------- Metrics grid ---------- */
.mets{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.met{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); border-top:3px solid var(--accent-bright); }
.met h3{ margin:0 0 .3rem; color:var(--ink); font-weight:700; }
.met p{ margin:0; font-size:.94rem; color:var(--text-soft); }

/* ---------- Fit / not fit ---------- */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:940px; margin:0 auto; }
.fitcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); }
.fitcard h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.15rem; margin:0 0 1rem; }
.fitcard ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.fitcard li{ position:relative; padding-left:1.7rem; font-size:.96rem; color:var(--text-soft); }
.fit--yes li::before{
  content:""; position:absolute; left:.3rem; top:.34em; width:5px; height:10px;
  border:2px solid var(--good); border-top:0; border-left:0; transform:rotate(42deg);
}
.fit--no li::before{
  content:"—"; position:absolute; left:0; top:-.05em; color:var(--text-faint); font-weight:700;
}

/* ---------- Differentiators ---------- */
.diffs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.diff h3{ margin:0 0 .35rem; color:var(--ink); }
.diff p{ margin:0; color:var(--text-soft); font-size:.96rem; }

/* ---------- Pricing ---------- */
.price{ max-width:580px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); overflow:hidden; text-align:center; }
.price__head{ padding:32px 28px 22px; border-bottom:1px solid var(--line); }
.price__name{ font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0 0 .6rem; }
.price__line{ margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.8rem; color:var(--ink); line-height:1.15; letter-spacing:-.025em; }
/* The cleanup figure is the anchor the rest of the page is judged against,
   so it carries its own label above it rather than sitting in a sentence. */
.price__anchor{
  margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:clamp(2rem,4.4vw,2.6rem); color:var(--ink);
  line-height:1.1; letter-spacing:-.03em;
}
.price__of{
  display:block; font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:.35rem;
}
.price__then{ margin:.5rem 0 0; font-size:1rem; font-weight:600; color:var(--text-soft); }
.price__sub{ margin:.8rem 0 0; color:var(--text-soft); font-size:.96rem; }
.price ul{ list-style:none; margin:0; padding:26px 28px; text-align:left; display:grid; gap:.7rem; }
.price li{ position:relative; padding-left:1.8rem; font-size:.97rem; color:var(--text-soft); }
.price li::before{
  content:""; position:absolute; left:.35rem; top:.35em; width:5px; height:10px;
  border:2px solid var(--accent); border-top:0; border-left:0; transform:rotate(42deg);
}
.price__foot{ padding:0 28px 30px; }
.price__fine{ margin:.9rem 0 0; font-size:.85rem; color:var(--text-faint); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:0 auto; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:12px; box-shadow:var(--shadow-sm); }
.faq summary{ cursor:pointer; list-style:none; padding:18px 52px 18px 22px; position:relative; font-weight:600; color:var(--ink); font-size:1.02rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:24px; top:26px; width:9px; height:9px;
  border:2px solid var(--text-faint); border-top:0; border-left:0;
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details p{ margin:0; padding:0 22px 20px; color:var(--text-soft); font-size:.98rem; }

/* ---------- CTA + form ---------- */
.cta{ background:var(--ink); color:#e6eefa; }
.cta h2{ color:#fff; }
.cta__grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.cta p{ color:#a9bdd8; }
.cta .wins li{ color:#c3d3e8; }
.cta .wins strong{ color:#fff; }
.cta .wins__tick{ background:rgba(10,132,255,.22); }
.cta .wins__tick::after{ border-color:#7db9ff; }

.formcard{ background:#fff; border-radius:18px; padding:28px; box-shadow:var(--shadow-md); color:var(--text); }
.formcard h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.35rem; color:var(--ink); margin:0 0 .3rem; }
.formcard > p{ color:var(--text-soft); font-size:.95rem; margin:0 0 1.2rem; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.88rem; font-weight:600; color:var(--ink-2); margin-bottom:.35rem; }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--text);
  padding:.72rem .85rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea{ min-height:86px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent-bright); box-shadow:0 0 0 3px rgba(10,132,255,.16);
}
.field__opt{ font-weight:400; color:var(--text-faint); }
.hp{ position:absolute; left:-9999px; }
.formnote{ font-size:.83rem; color:var(--text-faint); margin:.9rem 0 0; text-align:center; }
.formmsg{ margin:.9rem 0 0; font-size:.93rem; font-weight:600; min-height:1.2em; }
.formmsg.is-ok{ color:var(--good); }
.formmsg.is-err{ color:var(--bad); }

/* ---------- Footer ---------- */
.foot{ background:#07142a; color:#8ea6c4; padding:44px 0 36px; font-size:.92rem; }
.foot__grid{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.foot a{ color:#c6d8ef; }
.foot__links{ display:flex; flex-wrap:wrap; gap:22px; }
.foot__legal{ margin:22px 0 0; font-size:.85rem; color:#5f7794; }

/* ---------- Sticky mobile CTA ----------
   Cold traffic lands, scrolls and never scrolls back up to the nav.
   The bar appears once the hero CTA is off screen, on small screens only. */
.stickycta{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(11,18,32,.08);
  transform:translateY(110%); transition:transform .25s var(--ease);
}
.stickycta.is-shown{ transform:none; }
@media (max-width:720px){ .stickycta{ display:block; } body{ padding-bottom:0; } }
@media (prefers-reduced-motion: reduce){ .stickycta{ transition:none; } }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__grid, .cta__grid, .pack{ grid-template-columns:1fr; gap:38px; }
  .steps, .diffs, .mets{ grid-template-columns:1fr; }
  .fit{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  section{ padding:56px 0; }
  .nav__links{ display:none; }
  .signs{ grid-template-columns:1fr; }
  /* Three compact tiles rather than three tall ones — the snapshot has to
     stay glanceable without pushing the rest of the hero off screen. */
  .kpirow{ gap:8px; }
  .kpi{ padding:10px; }
  .kpi__v{ font-size:1rem; }
  .kpi__k, .kpi__d{ font-size:.66rem; }
  .brand__tag{ display:none; }
  .btn--nav{ padding:.55rem .9rem; font-size:.86rem; }
  .btn--nav .btn__long{ display:none; }
  .btn--nav .btn__short{ display:inline; }
  .cta{ padding-bottom:96px; }
}