/* Shared styling for the plain document pages (privacy, support, 404).
   Same tokens as the landing page, quieter treatment: these are read
   top-to-bottom rather than scanned. */

:root {
  --paper:     #FBF9FE;
  --surface:   #FFFFFF;
  --ink:       #17121F;
  --ink-2:     #4A4157;
  --ink-3:     #7C7290;
  --line:      #E7E0F2;
  --line-soft: #F0EAFA;
  --violet:      #5B47D6;
  --violet-wash: #EDE9FD;
  --mint:      #12A96D;
  --mint-wash: #E2F6EE;

  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #110D1A;
    --surface:   #1A1428;
    --ink:       #F4F1FB;
    --ink-2:     #C3B9D8;
    --ink-3:     #8E82AB;
    --line:      #2E2542;
    --line-soft: #241C36;
    --violet:      #A492FF;
    --violet-wash: #241C41;
    --mint:      #3FD394;
    --mint-wash: #102E24;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:     #110D1A;
  --surface:   #1A1428;
  --ink:       #F4F1FB;
  --ink-2:     #C3B9D8;
  --ink-3:     #8E82AB;
  --line:      #2E2542;
  --line-soft: #241C36;
  --violet:      #A492FF;
  --violet-wash: #241C41;
  --mint:      #3FD394;
  --mint-wash: #102E24;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--violet); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.rail { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: 24px; }

.doc-head {
  border-bottom: 1px solid var(--line);
  padding-block: 20px;
  margin-bottom: 52px;
}
.doc-head .rail { display: flex; align-items: center; gap: 10px; }
.wordmark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -.03em;
}
.wordmark img { width: 28px; height: 28px; border-radius: 8px; }
.doc-head nav { margin-left: auto; font-size: 14.5px; }
.doc-head nav a { color: var(--ink-2); text-decoration: none; }
.doc-head nav a:hover { color: var(--ink); text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(32px, 5vw, 44px); letter-spacing: -.036em; }
h2 { font-size: 23px; margin-top: 46px; margin-bottom: 12px; }
h3 { font-size: 17.5px; margin-top: 30px; margin-bottom: 8px; }

p { margin: 0 0 18px; color: var(--ink-2); }
p.lede { font-size: 19px; color: var(--ink-2); margin-top: 18px; }

.updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 0;
}

ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
li {
  color: var(--ink-2);
  padding-left: 26px;
  position: relative;
}
li::before {
  content: "";
  position: absolute;
  left: 6px; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet);
}
li strong { color: var(--ink); font-weight: 600; }

.callout {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 26px 0;
}
.callout.good { border-color: color-mix(in srgb, var(--mint) 32%, transparent); background: var(--mint-wash); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--violet-wash);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--ink);
}

.doc-foot {
  margin-top: 72px;
  border-top: 1px solid var(--line);
  padding: 32px 0 56px;
  font-size: 14px;
  color: var(--ink-3);
}
.doc-foot .rail { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.doc-foot nav { display: flex; gap: 20px; margin-left: auto; }
.doc-foot a { color: var(--ink-3); text-decoration: none; }
.doc-foot a:hover { color: var(--ink); text-decoration: underline; }