/* ═══════════════════════════════════════════════════════════════════════════
   help.css — the RunSignl Help Center.

   IT IS THE SAME BRAND, DOING A DIFFERENT JOB. The tokens, type stack, accent,
   radii and button shape are lifted verbatim from marketing/index.html so a
   visitor never feels handed off to a third-party docs product. What is
   deliberately absent is the sales page's machinery: no fixed canvas, no GSAP,
   no scroll choreography, no full-viewport sections. Someone reading this page
   has a problem; decoration is in their way.

   Single committed look (Obsidian), matching the marketing site, so a help page
   opened from a dark landing page does not flash white.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --accent:#7C6CFF; --accent-2:#6D5DFF; --accent-hover:#8B7BFF;
  --live:#34D399;
  --bg:#050508; --surface:#101017; --surface-2:#16161F;
  --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.18);
  --ink:#F5F3FA; --ink-2:#ABA6B8; --ink-3:#6E6979;
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --radius:16px; --ease:cubic-bezier(0.22,0.61,0.36,1);
  --gutter:clamp(20px,5vw,56px);
  --shell:min(1080px, calc(100vw - (var(--gutter) * 2)));
  --measure:min(68ch, 100%);
  color-scheme:dark;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover); text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.hc-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.hc-skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px; padding:10px 18px; color:var(--ink); font-family:var(--mono); font-size:12.5px}
.hc-skip:focus{left:16px; text-decoration:none}

/* ── the wordmark, exactly as the marketing site builds it ─────────────── */
.wm{font-family:var(--display); font-weight:600; white-space:nowrap; letter-spacing:-0.01em; color:var(--ink)}
.wm-bar{display:inline-block; width:0.1em; height:0.7em; margin:0 0.07em; border-radius:1px; background:var(--live); vertical-align:baseline; transform:translateY(0.14em); box-shadow:0 0 7px color-mix(in srgb,var(--live) 55%,transparent)}
.wm-dot{color:var(--live); text-shadow:0 0 8px color-mix(in srgb,var(--live) 45%,transparent)}

/* ── buttons: the marketing site's pill, unchanged ─────────────────────── */
.hc-btn{font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; border-radius:999px; padding:9px 18px; min-height:44px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); text-decoration:none; transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease)}
.hc-btn:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-1px); text-decoration:none}
.hc-btn-accent{background:linear-gradient(180deg,var(--accent-hover),var(--accent-2)); border-color:transparent; color:#fff; font-weight:500; box-shadow:0 6px 20px rgba(124,108,255,0.30), inset 0 1px 0 rgba(255,255,255,0.22)}
.hc-btn-accent:hover{box-shadow:0 10px 28px rgba(124,108,255,0.42); border-color:transparent; color:#fff}

/* ── header ───────────────────────────────────────────────────────────── */
.hc-head{position:sticky; top:0; z-index:40; background:rgba(5,5,8,0.82); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--border)}
.hc-head-in{width:var(--shell); margin:0 auto; display:flex; align-items:center; gap:14px; padding:13px 0; min-height:64px}
/* 44px of hit area on every header control, without a 44px-tall header: the
   negative margin-block gives the touch target back to the layout. Same idiom
   the marketing site's footer already uses. */
.hc-brand{display:inline-flex; align-items:center; gap:11px; font-size:18px; color:var(--ink); min-height:44px}
.hc-brand:hover{text-decoration:none}
.hc-logo{overflow:visible; flex:none}
.hc-head-help{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:5px 11px; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px; margin-block:-11px}
.hc-head-help:hover{color:var(--ink-2); border-color:var(--border-strong); text-decoration:none}
.hc-head-nav{margin-left:auto; display:flex; align-items:center; gap:22px}
.hc-head-nav a:not(.hc-btn){font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-2); display:inline-flex; align-items:center; min-height:44px}
.hc-head-nav a:not(.hc-btn):hover{color:var(--ink); text-decoration:none}
@media(max-width:680px){
  .hc-head-nav a:not(.hc-btn){display:none}
  .hc-head-in{gap:10px}
  .hc-brand{font-size:16px}
}
/* Below this the brand, the "Help Center" pill and Sign in stop fitting on one
   line and the button wraps to two. The pill is the first thing to go: the h1
   directly beneath it already says Help Center, so nothing is lost. */
@media(max-width:560px){
  .hc-head-help{display:none}
  .hc-btn{padding:9px 15px}
}

/* ── page shell ───────────────────────────────────────────────────────── */
.hc-main{width:var(--shell); margin:0 auto; padding:clamp(34px,6vw,62px) 0 clamp(52px,8vw,88px)}

h1{font-family:var(--display); font-weight:600; letter-spacing:-0.02em; line-height:1.18; font-size:clamp(30px,4.6vw,42px)}
.hc-lede{color:var(--ink-2); font-size:clamp(16px,1.6vw,17.5px); line-height:1.65; max-width:var(--measure); margin-top:14px}

/* ── index ────────────────────────────────────────────────────────────── */
.hc-index-head{padding-bottom:clamp(26px,4vw,38px); border-bottom:1px solid var(--border)}
.hc-search{margin-top:26px; max-width:560px}
.hc-search input{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
  padding:13px 16px; min-height:48px; transition:border-color .2s var(--ease);
}
.hc-search input::placeholder{color:var(--ink-3)}
.hc-search input:focus{outline:none; border-color:var(--accent)}
.hc-search input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hc-search-count{font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; color:var(--ink-3); margin-top:9px; min-height:17px}

.hc-cat{margin-top:clamp(34px,5vw,46px)}
.hc-cat-h{font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-0.01em}
.hc-cat-d{color:var(--ink-3); font-size:14px; margin-top:5px; max-width:var(--measure)}
.hc-cards{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; margin-top:18px}
.hc-card{display:flex; flex-direction:column; gap:6px; height:100%; padding:17px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .2s var(--ease), background .2s var(--ease)}
.hc-card:hover{border-color:var(--border-strong); background:var(--surface-2); text-decoration:none}
.hc-card-t{font-family:var(--display); font-size:15.5px; font-weight:500; color:var(--ink); line-height:1.4}
.hc-card-d{font-size:13.5px; line-height:1.6; color:var(--ink-2)}
.hc-results{margin-top:30px}
.hc-empty{color:var(--ink-2); font-size:14px; margin-top:14px}

/* ── article ──────────────────────────────────────────────────────────── */
.hc-crumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3)}
.hc-crumbs li + li::before{content:"/"; margin-right:8px; color:var(--ink-3)}
.hc-crumbs a{color:var(--ink-3); display:inline-flex; align-items:center; min-height:44px; margin-block:-13px}
.hc-crumbs a:hover{color:var(--ink-2)}

.hc-article-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:44px; margin-top:22px}
.hc-article{min-width:0; max-width:var(--measure)}
.hc-article h1{margin-bottom:0}

.hc-body{margin-top:30px}
.hc-body h2{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-0.01em; line-height:1.3; margin:38px 0 12px}
.hc-body h3{font-family:var(--display); font-size:17px; font-weight:600; line-height:1.4; margin:26px 0 8px}
.hc-body h2:first-child, .hc-body h3:first-child{margin-top:0}
.hc-body p{color:var(--ink-2); margin:0 0 14px}
.hc-body strong{color:var(--ink); font-weight:600}
.hc-body em{color:var(--ink); font-style:normal; font-weight:500}
.hc-body code{font-family:var(--mono); font-size:0.88em; background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; color:var(--ink)}
.hc-body ul, .hc-body ol{margin:0 0 16px; padding-left:22px; color:var(--ink-2)}
.hc-body li{margin-bottom:7px}
.hc-body li::marker{color:var(--ink-3)}
.hc-body ol{counter-reset:none}
.hc-body ol li{padding-left:3px}

.hc-note{border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:10px; background:var(--surface); padding:14px 16px; margin:20px 0}
.hc-note-limit{border-left-color:var(--live)}
.hc-note-k{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.hc-note p{margin:0; font-size:14.5px; color:var(--ink-2)}

.hc-verified{margin-top:34px; padding-top:16px; border-top:1px solid var(--border); font-family:var(--mono); font-size:11px; letter-spacing:0.03em; color:var(--ink-3)}

/* ── on-this-page: quiet, and only where there is room for it ─────────── */
.hc-toc{display:none}
@media(min-width:1040px){
  .hc-article-wrap{grid-template-columns:minmax(0,1fr) 200px}
  .hc-toc{display:block; position:sticky; top:96px; align-self:start; padding-top:8px}
  .hc-toc-h{font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:12px}
  .hc-toc ul{list-style:none}
  .hc-toc li{margin-bottom:9px; line-height:1.45}
  .hc-toc a{color:var(--ink-3); font-size:13px}
  .hc-toc a:hover{color:var(--ink-2); text-decoration:none}
}

.hc-related{margin-top:clamp(40px,6vw,56px)}
.hc-help-more{margin-top:clamp(34px,5vw,46px); padding:22px 24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); max-width:var(--measure)}
.hc-help-more h2{font-family:var(--display); font-size:18px; font-weight:600}
.hc-help-more p{color:var(--ink-2); font-size:14.5px; margin-top:9px}
.hc-help-more strong{color:var(--ink)}
.hc-help-more em{color:var(--ink); font-style:normal; font-family:var(--mono); font-size:0.92em}
.hc-help-more-act{margin-top:16px}
.hc-back{margin-top:30px; font-family:var(--mono); font-size:12px; letter-spacing:0.04em}
.hc-back a{color:var(--ink-3); display:inline-flex; align-items:center; min-height:44px; margin-block:-13px}
.hc-back a:hover{color:var(--ink-2); text-decoration:none}

/* ── footer ───────────────────────────────────────────────────────────── */
.hc-foot{border-top:1px solid var(--border); padding:44px 0 34px; margin-top:20px}
.hc-foot-in, .hc-foot-bot{width:var(--shell); margin:0 auto}
.hc-foot-in{display:flex; flex-wrap:wrap; gap:22px 48px; justify-content:space-between; align-items:flex-start}
.hc-foot-brand{display:flex; flex-direction:column; gap:8px}
.hc-foot-brand .wm{font-size:18px}
.hc-foot-tag{font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; color:var(--ink-3)}
.hc-foot-nav{display:flex; flex-wrap:wrap; gap:10px 26px}
.hc-foot-nav a{color:var(--ink-2); font-size:13.5px; display:inline-flex; align-items:center; min-height:44px; margin-block:-11px}
.hc-foot-nav a:hover{color:var(--accent); text-decoration:none}
.hc-foot-bot{margin-top:34px; padding-top:20px; border-top:1px solid var(--border)}
.hc-foot-bot p{font-size:11.5px; line-height:1.7; color:var(--ink-3)}
.hc-foot-legal{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; margin-top:10px}

@media(max-width:620px){
  body{font-size:15.5px}
  .hc-cards{grid-template-columns:1fr}
  .hc-main{padding-top:28px}
}