/* ===== Stafferin Payroll Guides · shared theme for provider pages (offline-safe, same-origin) ===== */
:root{
  --ink:#0b1224; --ink-2:#1e293b; --slate:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e6eaf2; --bg:#ffffff; --bg-soft:#f7f9fc; --bg-soft-2:#eef2fb;
  --brand:#5b5bf0; --brand-2:#7c6cff; --brand-ink:#3a3ad6; --ok:#10b981; --warn:#f59e0b;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-md:0 10px 30px -12px rgba(16,24,40,.25);
  --radius:16px; --radius-sm:11px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-soft);color:var(--ink);
  font-family:'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{width:min(940px,92vw);margin-inline:auto}

/* nav */
nav.top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 0 var(--line)}
nav.top .bar{display:flex;align-items:center;gap:16px;padding:13px 0;width:min(940px,92vw);margin-inline:auto}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--ink)}
.brand .mark{width:32px;height:32px;flex:0 0 auto}
.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:-2px}
nav.top .links{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.top .links a{font-size:14px;font-weight:600;color:var(--slate);padding:8px 12px;border-radius:999px}
nav.top .links a:hover{color:var(--brand-ink);background:var(--bg-soft-2)}
nav.top .cta{color:#fff !important;background:linear-gradient(135deg,#5b5bf0,#7c6cff);padding:9px 15px;border-radius:999px;box-shadow:0 8px 18px -6px rgba(91,91,240,.6)}
@media(max-width:820px){.nav-hide-sm{display:none !important}}

/* breadcrumb + hero */
.crumb{font-size:13.5px;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--brand-ink);font-weight:600}
.guide-hero{padding:10px 0 26px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--bg-soft))}
.logo-chip{display:inline-flex;align-items:center;justify-content:center;height:50px;min-width:100px;padding:0 16px;border-radius:11px;font-weight:800;font-size:20px;letter-spacing:-.02em;margin-bottom:14px}
.lc-adp{background:#e3001b;color:#fff}.lc-qb{background:#2ca01c;color:#fff}
.lc-gusto{background:#f45d48;color:#fff}.lc-paychex{background:#004b8d;color:#fff}
h1{font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.025em;margin:6px 0 12px;font-weight:800}
.lede{font-size:17.5px;color:var(--slate);max-width:680px;margin:0}
.lede b{color:var(--ink)}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.tag-easy{background:#dcfce7;color:#166534}.tag-med{background:#fef9c3;color:#854d0e}.tag-strict{background:#fee2e2;color:#991b1b}

/* meta strip */
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.meta .pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--slate);box-shadow:var(--shadow-sm)}
.meta .pill b{color:var(--ink)}

/* steps */
section{padding:30px 0}
h2{font-size:24px;letter-spacing:-.02em;margin:0 0 18px;font-weight:800}
.step{display:grid;grid-template-columns:46px 1fr;gap:18px;padding-bottom:26px;position:relative}
.step:not(:last-child)::before{content:"";position:absolute;left:22px;top:46px;bottom:0;width:2px;background:linear-gradient(var(--line),transparent)}
.step .num{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#5b5bf0,#7c6cff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;box-shadow:0 8px 18px -7px rgba(91,91,240,.7)}
.step h3{margin:8px 0 6px;font-size:19px}
.step p{margin:0 0 12px;color:var(--slate);font-size:15.5px}
.step p b{color:var(--ink)}
.step ul{margin:0 0 12px;padding-left:20px;color:var(--slate);font-size:15px}
.step li{margin:4px 0}
kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:#eef2fb;border:1px solid #d9def0;border-bottom-width:2px;border-radius:6px;padding:2px 7px;color:var(--ink-2);font-weight:600}

/* mock UI screenshot */
.mock{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;margin:6px 0 6px}
.mock .topbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#f1f5f9;border-bottom:1px solid var(--line)}
.mock .topbar .dot{width:11px;height:11px;border-radius:50%}
.mock .topbar .url{margin-left:8px;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#64748b;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 12px;flex:1}
.mock .body{padding:20px}
.mock .row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;font-size:14px;background:#fff}
.mock .row.active{border-color:var(--brand);background:var(--bg-soft-2);box-shadow:0 0 0 3px rgba(91,91,240,.12)}
.mock .row .ic{width:26px;height:26px;border-radius:7px;background:var(--bg-soft-2);display:flex;align-items:center;justify-content:center;font-size:14px}
.mock .row .grow{flex:1}
.mock .menu-item{padding:9px 14px;border-radius:8px;font-size:14px;color:var(--slate)}
.mock .menu-item.sel{background:var(--brand);color:#fff;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#5b5bf0,#7c6cff);color:#fff;font-weight:700;font-size:14px;border-radius:9px;padding:9px 16px}
.btn.gray{background:#e2e8f0;color:#334155}
.btn.green{background:#16a34a}
/* annotation pointer */
.note{position:relative;display:inline-flex;align-items:center;gap:7px;background:#fffbeb;border:1px dashed #f59e0b;color:#92400e;font-size:12.5px;font-weight:700;border-radius:8px;padding:5px 11px;margin-top:8px}

/* callouts */
.callout{display:flex;gap:12px;border-radius:12px;padding:14px 16px;margin:6px 0 4px;font-size:14.5px}
.callout.warn{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid var(--warn);color:#7c2d12}
.callout.ok{background:#ecfdf5;border:1px solid #a7f3d0;border-left:4px solid var(--ok);color:#065f46}
.callout.info{background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid #3b82f6;color:#1e3a8a}
.callout b{display:block;margin-bottom:2px}

/* mapping table */
.maptable{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:4px 0}
.maptable th{background:#f1f5f9;text-align:left;padding:11px 14px;font-weight:700;font-size:13px;color:var(--slate);border-bottom:1px solid var(--line)}
.maptable td{padding:10px 14px;border-bottom:1px solid var(--line)}
.maptable tr:last-child td{border-bottom:none}
.maptable code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;background:#eef2fb;border-radius:5px;padding:2px 7px}
.maptable .arr{color:var(--brand);text-align:center;font-weight:800}

/* next steps */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.cta-row a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px 18px;font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:var(--shadow-sm)}
.cta-row a:hover{border-color:#d9def0;box-shadow:var(--shadow-md)}
.cta-row a.primary{background:linear-gradient(135deg,#5b5bf0,#7c6cff);color:#fff;border:none}

footer{border-top:1px solid var(--line);background:#fff;padding:28px 0;margin-top:20px;color:var(--muted);font-size:13.5px}
footer .inner{width:min(940px,92vw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
footer a{color:var(--brand-ink);font-weight:600}

@media print{nav.top,.cta-row{display:none}body{background:#fff}.mock,.maptable{box-shadow:none}}