/* Knewness legal & support pages — porcelain ground, ink type, one serif
   reserved for the scripture epigraph, matching the app's Radiance system. */
:root {
  --ground: #FBF9F6;
  --raised: #FFFFFF;
  --ink: #1C1E26;
  --ink-soft: #4A4D59;
  --muted: #70727C;
  --accent: #3D4FA6;
  --hair: rgba(28, 30, 38, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #17181D;
    --raised: #1F2127;
    --ink: #ECEDF1;
    --ink-soft: #B9BCC7;
    --muted: #8B8E99;
    --accent: #93A2E8;
    --hair: rgba(236, 237, 241, 0.12);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; }

header.masthead { margin-bottom: 40px; }
.brand {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
}
.brand::before { content: "\1F54A\FE0F"; margin-right: 8px; }
nav.top { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; }
nav.top a {
  font-size: 14px; color: var(--muted); text-decoration: none; font-weight: 600;
}
nav.top a[aria-current="page"] { color: var(--accent); }
nav.top a:hover { color: var(--accent); }

h1 {
  font-size: clamp(28px, 5vw, 36px); line-height: 1.15;
  letter-spacing: -0.02em; font-weight: 700; margin: 8px 0 6px;
}
.eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); margin: 0;
}
.updated { color: var(--muted); font-size: 14px; margin: 4px 0 0; }

h2 {
  font-size: 20px; letter-spacing: -0.01em; font-weight: 700;
  margin: 40px 0 8px; scroll-margin-top: 20px;
}
h3 { font-size: 16px; font-weight: 650; margin: 24px 0 4px; }
p, li { color: var(--ink-soft); font-size: 16px; }
p { margin: 12px 0; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
strong { color: var(--ink); }
a { color: var(--accent); }

.lede { font-size: 18px; color: var(--ink-soft); }

.epigraph {
  font-family: Charter, Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 17px; color: var(--ink-soft);
  border-left: 2px solid var(--hair); padding-left: 16px; margin: 24px 0;
}
.epigraph cite {
  display: block; font-family: -apple-system, sans-serif; font-style: normal;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); margin-top: 6px;
}

.card {
  background: var(--raised); border: 1px solid var(--hair);
  border-radius: 14px; padding: 18px 20px; margin: 20px 0;
}
.card h3:first-child, .card p:first-child { margin-top: 0; }

.toc { font-size: 15px; }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

.crisis {
  background: #FFF7EC; border: 1px solid rgba(143, 103, 22, 0.28);
  border-radius: 14px; padding: 18px 20px; margin: 24px 0;
}
@media (prefers-color-scheme: dark) {
  .crisis { background: rgba(224, 178, 93, 0.10); border-color: rgba(224, 178, 93, 0.30); }
}
.crisis strong { color: var(--ink); }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tablewrap { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   DOCUMENT SCALE — privacy, terms, support.

   These were set at article size: 16px body in a 720px column, a 36px title,
   an 18px lede. That reads as a blog post, and a legal page that looks like a
   blog post reads as marketing rather than as terms (founder, 2026-07-30).

   Legal documents are set smaller and denser. The floor here is deliberate:
   14.5px body with 1.58 leading, which stays comfortably above the size where
   text becomes an accessibility problem, and the column narrows with the type
   so the measure stays near 75 characters rather than sprawling.

   Scoped to body.doc, so the marketing page at / keeps its larger voice.
   --------------------------------------------------------------------------- */
.doc .wrap { max-width: 640px; padding-top: 44px; }
.doc { line-height: 1.58; }
.doc h1 { font-size: clamp(22px, 3.4vw, 27px); margin: 6px 0 4px; }
.doc .eyebrow { font-size: 10.5px; letter-spacing: 0.15em; }
.doc .updated { font-size: 12.5px; }
.doc .lede { font-size: 15px; margin: 14px 0; }
.doc .toc { font-size: 12.5px; line-height: 1.75; }
.doc h2 { font-size: 15.5px; margin: 30px 0 6px; }
.doc h3 { font-size: 14px; margin: 18px 0 2px; }
.doc p, .doc li { font-size: 14.5px; }
.doc p { margin: 10px 0; }
.doc li { margin: 5px 0; }
.doc ul, .doc ol { padding-left: 20px; }
.doc table { font-size: 13px; }
.doc th, .doc td { padding: 8px 10px 8px 0; }
.doc .card, .doc .crisis { padding: 14px 16px; margin: 16px 0; border-radius: 11px; }
.doc footer.foot { margin-top: 48px; font-size: 12px; }

footer.foot {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hair);
  font-size: 13px; color: var(--muted);
}
footer.foot a { color: var(--muted); }