/* Shared by the Knowledge Center hub and every article. Same palette and fonts as the landing page (site/index.html),
   different layout: these pages are for reading, not the one-screen hero. */
:root {
  --page: #f9f9f7; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --faint: #c3c2b7; --line: #e1e0d9;
  --value: #2a78d6; --over: #e34948;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --ink: #f4f4f2; --ink-2: #c3c2b7; --muted: #898781; --faint: #3a3a37; --line: #2c2c2a;
    --value: #3987e5; --over: #e66767;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --ink: #f4f4f2; --ink-2: #c3c2b7; --muted: #898781; --faint: #3a3a37; --line: #2c2c2a;
  --value: #3987e5; --over: #e66767;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.6 var(--sans); }
:focus-visible { outline: 2px solid var(--value); outline-offset: 3px; }
a { color: var(--value); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; max-width: 760px; margin: 0 auto; }
.brand { font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 13px; font-family: var(--mono); border-bottom: 1px solid var(--faint); }
.top nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

main { max-width: 680px; margin: 0 auto; padding: 8px 24px 100px; }
.crumb { font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--ink); }

h1 { font-weight: 500; font-size: clamp(28px, 4.5vw, 40px); line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 0; max-width: 18em; }
.dek { color: var(--ink-2); font-size: 18px; line-height: 1.5; margin: 14px 0 0; max-width: 42ch; }
.meta { color: var(--muted); font-size: 13px; font-family: var(--mono); margin: 18px 0 0; }

.prose { margin-top: 36px; }
.prose h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 40px 0 12px; }
.prose p { margin: 0 0 16px; max-width: 68ch; }
.prose ul { margin: 0 0 16px; padding-left: 20px; max-width: 64ch; }
.prose li { margin: 0 0 8px; }
.prose strong { font-weight: 600; }
.note-box { border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin: 24px 0; background: color-mix(in srgb, var(--page) 60%, var(--line) 8%); }
.note-box p { margin: 0; font-size: 14px; color: var(--ink-2); }

.cta { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.cta p { margin: 0 0 14px; color: var(--ink-2); }
.cta a.btn { display: inline-block; background: var(--ink); color: var(--page); text-decoration: none; font-weight: 500; padding: 10px 18px; border-radius: 8px; }
.cta a.btn:hover { background: var(--value); }

.related { margin-top: 20px; }
.related a { display: block; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 2px; }

.hub-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
.hub-list li { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.hub-list a { color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 550; }
.hub-list a:hover { color: var(--value); }
.hub-list p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }

@media (max-width: 560px) { .top { padding: 16px 20px; } main { padding: 8px 20px 80px; } }