/* WonFlo Help Center — shared styles for /help/ (landing + every article).

   WHY THIS FILE EXISTS, when every other page on this site inlines its own
   <style> block: the knowledge base is one template repeated N times and is
   expected to grow. Duplicating ~90 lines of identical CSS into every new
   article is how a template drifts. Marketing pages are each bespoke, so they
   keep inlining; help pages are not, so they share.

   Design tokens (--slate, --copper, --cream, --body, --display, --mono …) come
   from /styles.css, which every help page loads FIRST. This file only adds the
   help-specific layer on top. Same origin, no build step, no imports. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--charcoal);line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}

/* ── hero (shared by landing + articles) ───────────────────────────────── */
.hero{padding:clamp(36px,5.5vw,62px) 0 10px}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.8vw,44px);line-height:1.12;letter-spacing:-.02em;color:var(--slate);margin:14px 0 14px}
.dek{font-size:clamp(16px,2vw,19px);color:var(--gray);line-height:1.5;max-width:36em}

/* ── breadcrumb (articles) ─────────────────────────────────────────────── */
.crumb{padding-top:clamp(24px,4vw,38px);font-family:var(--mono);font-size:12.5px;color:var(--gray)}
.crumb a{color:var(--gray);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumb a:hover{color:var(--copper);border-bottom-color:rgba(236,75,29,.4)}
.crumb .sep{margin:0 8px;opacity:.5}
.crumb+.hero{padding-top:16px}

/* ── search (landing) ──────────────────────────────────────────────────── */
.search{margin:26px 0 6px;position:relative}
.search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search input{width:100%;font-family:var(--body);font-size:17px;color:var(--slate);background:#fff;border:1px solid var(--bone);border-radius:14px;padding:16px 18px 16px 48px;transition:border-color .2s,box-shadow .2s}
.search input::placeholder{color:var(--gray)}
.search input:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(236,75,29,.12)}
.search .ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--gray);fill:none;stroke-width:2;pointer-events:none}
.search input:focus~.ico{stroke:var(--copper)}
.searchnote{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--gray);min-height:17px}

/* ── category sections + article cards (landing) ───────────────────────── */
.cats{padding:20px 0 8px}
.cat{margin-bottom:34px}
.cat>h2{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);padding-bottom:10px;border-bottom:1px solid var(--bone);margin-bottom:14px}
.cat .list{display:flex;flex-direction:column;gap:12px}
.card{display:block;background:#fff;border:1px solid var(--bone);border-radius:14px;padding:18px 20px;text-decoration:none;transition:border-color .2s,transform .15s}
.card:hover{border-color:var(--copper);transform:translateY(-1px)}
.card h3{font-family:var(--display);font-weight:600;font-size:18.5px;color:var(--slate);letter-spacing:-.01em;margin-bottom:6px;line-height:1.25}
.card p{font-size:15px;color:var(--gray);line-height:1.5}
.cat[hidden],.card[hidden]{display:none}

/* Empty state — shown only when a query matches nothing. */
.empty{background:#fff;border:1px dashed var(--bone);border-radius:14px;padding:28px 24px;text-align:center}
.empty h3{font-family:var(--display);font-weight:600;font-size:19px;color:var(--slate);margin-bottom:8px}
.empty p{font-size:15.5px;color:var(--gray);max-width:38ch;margin:0 auto}
.empty a{color:var(--copper);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(236,75,29,.35)}

/* ── article prose ─────────────────────────────────────────────────────── */
.updated{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--gray)}
article{padding:8px 0 30px}
article h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.8vw,27px);letter-spacing:-.015em;color:var(--slate);margin:38px 0 12px;line-height:1.18}
article h3{font-family:var(--display);font-weight:600;font-size:18px;color:var(--slate);margin:24px 0 8px;line-height:1.3}
article p{font-size:17px;color:var(--charcoal);margin-bottom:16px}
article p b,article li b{color:var(--slate);font-weight:600}
article a.inl{color:var(--copper);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(236,75,29,.35)}
article a.inl:hover{border-bottom-color:var(--copper)}
article ul,article ol{margin:0 0 16px 2px;list-style:none}
article ul li,article ol li{position:relative;padding-left:26px;margin-bottom:10px;font-size:16.5px}
article ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--copper);transform:rotate(45deg)}
article ol{counter-reset:step}
article ol li{counter-increment:step}
article ol li::before{content:counter(step);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(236,75,29,.12);color:var(--copper);font-family:var(--mono);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center}

/* UI path chip — "Customize → Service area". Keeps dashboard nav readable. */
.ui{font-family:var(--mono);font-size:.88em;background:var(--bone-2);color:var(--slate);border-radius:5px;padding:2px 6px;white-space:nowrap}

.note{background:var(--slate);color:var(--cream);border-radius:14px;padding:20px 22px;margin:24px 0;font-size:16px;line-height:1.55}
.note .nh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-light);margin-bottom:8px}
.note b{color:#fff}
.note a{color:var(--copper-light);font-weight:600}

.tbl{border:1px solid var(--bone);border-radius:14px;overflow:hidden;margin:20px 0;background:#fff}
.tbl .r{display:grid;grid-template-columns:.85fr 1.4fr}
.tbl .r+.r{border-top:1px solid var(--bone-2)}
.tbl .r>div{padding:12px 15px;font-size:15px}
.tbl .head{background:var(--cream)}
.tbl .head>div{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gray)}
.tbl .k{color:var(--slate);font-weight:600}
@media(max-width:560px){.tbl .r>div{font-size:13.5px;padding:10px 11px}}

/* ── "still stuck" footer, on every article and the landing page ───────── */
.stuck{background:var(--slate-3);color:var(--slate-mute);border-radius:18px;padding:clamp(22px,3.2vw,30px);margin:36px 0 8px}
.stuck h2{font-family:var(--display);font-weight:600;font-size:21px;color:#fff;margin-bottom:8px;letter-spacing:-.01em}
.stuck p{font-size:16px;line-height:1.55;max-width:46ch;margin-bottom:14px}
.stuck a.mail{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:15px;padding:11px 18px;border-radius:10px;background:var(--copper);color:var(--copper-deep);text-decoration:none;transition:background .2s,transform .15s}
.stuck a.mail:hover{background:#f15a2e;transform:translateY(-1px)}
.stuck .back{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--slate-mute);text-decoration:none}
.stuck .back:hover{color:var(--cream)}