/* ============================================================
   PaperDoDo — /bookkeeping landing page
   Loaded on top of /smallbusiness/styles.css, which carries the
   brand tokens and shared components (nav, buttons, steps, FAQ,
   CTA, footer). Only the components unique to this page live here.
   ============================================================ */

.center{ text-align:center; margin:36px 0 0; }
.hero h1{ font-size:clamp(2.05rem,4.2vw,3.2rem); }
.hero .lede strong{ color:var(--ink); }
.chip{
  display:inline-block; font-size:.82rem; font-weight:600; color:var(--accent);
  background:var(--accent-soft); padding:.3rem .75rem; border-radius:999px; margin:0 0 1.1rem;
}

/* ---------- Two-step qualifying form ---------- */
.qform fieldset{ border:0; margin:0 0 14px; padding:0; }
.qform legend{ font-size:.88rem; font-weight:600; color:var(--ink-2); margin-bottom:.45rem; padding:0; }
.qform__prog{ display:flex; gap:6px; margin:0 0 16px; }
.qform__prog i{ flex:1; height:4px; border-radius:4px; background:var(--line); transition:background .2s var(--ease); }
.qform__prog i.is-on{ background:var(--accent-bright); }
.qform__k{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 .9rem; }
.qform__warn{ font-size:.85rem; color:var(--warn); background:#fdf0dc; border-radius:var(--radius-sm); padding:.6rem .8rem; margin:-4px 0 14px; }
.qform__back{ display:block; margin:.7rem auto 0; background:none; border:0; font:inherit; font-size:.9rem; color:var(--text-soft); cursor:pointer; }
.qform__back:hover{ color:var(--ink); }
.qform .formmsg[hidden]{ display:none; }

.opts{ display:grid; gap:8px; }
.opts--2{ grid-template-columns:1fr 1fr; }
.opt{ position:relative; cursor:pointer; }
.opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.opt span{
  display:block; text-align:center; font-size:.93rem; font-weight:500; color:var(--text);
  padding:.62rem .5rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.opt:hover span{ border-color:#b9cfe8; }
.opt input:checked + span{ border-color:var(--accent-bright); background:var(--accent-soft); color:var(--accent-deep); font-weight:600; }
.opt input:focus-visible + span{ outline:3px solid var(--accent-bright); outline-offset:2px; }

/* ---------- Problems ---------- */
.probs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.prob{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm); }
.prob__n{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.6rem; color:var(--accent-bright); margin-bottom:.4rem; }
.prob h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.18rem; }
.prob p{ margin:0; color:var(--text-soft); font-size:.96rem; }

/* ---------- What we handle ---------- */
.checks{ list-style:none; margin:0; padding:26px 28px; display:grid; gap:.85rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); }
.checks li{ position:relative; padding-left:1.9rem; color:var(--text); }
.checks li::before{
  content:""; position:absolute; left:.4rem; top:.32em; width:5px; height:10px;
  border:2px solid var(--accent); border-top:0; border-left:0; transform:rotate(42deg);
}
.mets--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Plans ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 26px 26px; box-shadow:var(--shadow-sm); }
.plan--hot{ border:2px solid var(--accent-bright); box-shadow:var(--shadow-md); }
.plan__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--accent); color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:.3rem .8rem; border-radius:999px;
}
.plan h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.4rem; margin:0 0 .2rem; }
.plan__vol{ color:var(--text-faint); font-size:.9rem; margin:0 0 1.1rem; }
.plan ul{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.6rem; flex:1; align-content:start; }
.plan li{ position:relative; padding-left:1.7rem; font-size:.95rem; color:var(--text-soft); }
.plan 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);
}
.plans__note{ text-align:center; color:var(--text-soft); max-width:680px; margin:28px auto 0; }
.catchup{ max-width:860px; margin:36px auto 0; background:var(--ink); color:#c3d3e8; border-radius:18px; padding:32px; }
.catchup h3{ color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.3rem; }
.catchup .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.catchup .btn--ghost:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* ---------- Final CTA ---------- */
.cta__phone{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.6rem; margin:1.4rem 0 .2rem; }
.cta__phone a{ color:#fff; }

@media (max-width:960px){
  .probs, .plans{ grid-template-columns:1fr; }
  .plans{ gap:28px; }
  .mets--4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .mets--4{ grid-template-columns:1fr; }
  .catchup{ padding:24px 20px; }
}

/* ---------- Paperless / owner time ---------- */
.easy{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:940px; margin:0 auto; }
.easy__card{ background:var(--accent-soft); border:1px solid #cfe2fb; border-radius:18px; padding:30px 28px; }
.easy__big{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(2.6rem,5vw,3.4rem); line-height:1; letter-spacing:-.03em; color:var(--accent); margin-bottom:.6rem; }
.easy__card h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.2rem; }
.easy__card p{ margin:0; color:var(--text-soft); }
@media (max-width:720px){ .easy{ grid-template-columns:1fr; } }