/* Open Charity CRM — public site (about + help). Same design language and theme
   tokens as the app; standalone so the site never depends on app assets. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e6e8ee;
  --border-strong: #d5d8e2;
  --text: #191b22;
  --muted: #69707f;
  --faint: #a7adbb;
  --accent: #4f46e5;
  --accent-strong: #4338ca;
  --accent-soft: #eef0fe;
  --accent-contrast: #ffffff;
  --success: #16a34a;
  --hero: #191734;
  --hero-2: #211e42;
  --hero-text: #e6e7f5;
  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(23,24,32,.05), 0 1px 3px rgba(23,24,32,.04);
  --shadow-2: 0 10px 34px rgba(23,24,32,.10), 0 2px 6px rgba(23,24,32,.05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"] {
  --bg: #0f1015;
  --surface: #171821;
  --surface-2: #1d1f2a;
  --border: #262837;
  --border-strong: #343748;
  --text: #e8e9f0;
  --muted: #9aa0b2;
  --faint: #5d6273;
  --accent: #8188f5;
  --accent-strong: #9aa0fa;
  --accent-soft: #23244a;
  --accent-contrast: #0f1015;
  --success: #4ade80;
  --hero: #0b0c12;
  --hero-2: #12131c;
  --hero-text: #c9cbe2;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 34px rgba(0,0,0,.5);
}
html { color-scheme: light; scroll-behavior: smooth; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--hero); color: var(--hero-text);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 13px 22px;
  display: flex; align-items: center; gap: 18px;
}
.topbar .brand { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -.01em; text-decoration: none; }
.topbar nav { display: flex; gap: 16px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.topbar nav a { color: var(--hero-text); font-size: 14px; font-weight: 600; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
.topbar .cta {
  background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 999px;
  font-weight: 700;
}
.topbar .cta:hover { background: var(--accent-strong); color: #fff; }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--hero) 0%, var(--hero-2) 60%, #2c2860 130%);
  color: var(--hero-text); padding: 84px 22px 96px; text-align: center;
}
.hero h1 {
  font-size: clamp(30px, 5.4vw, 52px); line-height: 1.12; color: #fff;
  letter-spacing: -.025em; max-width: 780px; margin: 0 auto 20px; font-weight: 800;
}
.hero h1 em { font-style: normal; color: #a5b4fc; }
.hero p { max-width: 640px; margin: 0 auto 34px; font-size: 17.5px; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px; font-weight: 700;
  font-size: 15px; text-decoration: none; transition: transform 150ms, background 150ms;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.hero-badges { margin-top: 42px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-badges span {
  font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); color: var(--hero-text);
}

/* ---------- page body ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.section { padding: 68px 0 10px; }
.section > h2 {
  font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; margin-bottom: 8px; font-weight: 800;
}
.section > .lede { color: var(--muted); max-width: 640px; margin-bottom: 34px; font-size: 16.5px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 20px; box-shadow: var(--shadow-1);
}
.feature .icon { font-size: 26px; display: block; margin-bottom: 10px; }
.feature h3 { font-size: 16px; margin-bottom: 6px; letter-spacing: -.01em; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.feature a { font-size: 13.5px; font-weight: 600; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
.split h2 { font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.02em; margin-bottom: 12px; }
.split p { color: var(--muted); margin-bottom: 12px; }
.split ul { color: var(--muted); padding-left: 20px; }
.split li { margin-bottom: 7px; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-2);
}
.panel .stat { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.panel .stat-label { color: var(--muted); font-size: 13px; margin-bottom: 18px; }

.footer {
  margin-top: 84px; border-top: 1px solid var(--border); padding: 30px 22px 44px;
  color: var(--muted); font-size: 13.5px; text-align: center;
}
.footer a { font-weight: 600; }

/* ---------- help layout ---------- */
.help-layout {
  max-width: 1140px; margin: 0 auto; padding: 34px 22px 60px;
  display: grid; grid-template-columns: 250px 1fr; gap: 42px; align-items: start;
}
@media (max-width: 880px) { .help-layout { grid-template-columns: 1fr; } .toc { position: static !important; } }
.toc {
  position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 8px; box-shadow: var(--shadow-1);
  max-height: calc(100vh - 100px); overflow-y: auto;
}
.toc a {
  display: block; padding: 6px 12px; border-radius: 8px; color: var(--muted);
  font-size: 13.5px; font-weight: 600;
}
.toc a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.toc .toc-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint);
  font-weight: 700; padding: 12px 12px 4px;
}

.help-body { min-width: 0; }
.help-body h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; margin-bottom: 8px; }
.help-body > p.lede { color: var(--muted); font-size: 16.5px; margin-bottom: 8px; }
.help-section { margin-top: 46px; scroll-margin-top: 80px; }
.help-section h2 {
  font-size: 21px; letter-spacing: -.015em; padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.help-section h3 { font-size: 16px; margin: 22px 0 8px; }
.help-section p, .help-section li { color: var(--muted); font-size: 14.5px; }
.help-section p { margin-bottom: 10px; }
.help-section ul, .help-section ol { padding-left: 22px; margin-bottom: 12px; }
.help-section li { margin-bottom: 6px; }
.help-section strong { color: var(--text); }
.help-section code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 12.5px; color: var(--text);
}
.tip {
  background: var(--accent-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 12px 16px; margin: 14px 0; font-size: 14px; color: var(--text);
}
.tip b { color: var(--accent-strong); }
.demo-note {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; margin: 14px 0; font-size: 13.5px; color: var(--muted);
}
.kbd-path { font-weight: 700; color: var(--text); }