/* The prose pages — /policy and /tos. They are the landing page's paper with
   the marketing removed: same tokens, same type stacks, same header and footer,
   because a legal page that looks like it came from somewhere else reads like it
   was bought rather than written.

   Shared rather than inlined twice. It is served with the same five-minute cache
   as the pages themselves, so a correction to either lands at the same speed as
   the correction to the text. */
:root {
  --paper:#FFFFFF; --card:#FFFFFF; --sunk:#F6F8FA; --rule:#D1D9E0;
  --ink:#1F2328; --dim:#59636E; --signal:#0969DA; --onsignal:#FFFFFF;
  --deep:#0D1117; --deep-dim:#9198A1; --deep-signal:#4493F8;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial,
         sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
         monospace;
  --r1:4px; --r2:6px; --r3:12px;
  color-scheme:light;
}
* { box-sizing:border-box }
body { margin:0; font:17px/1.65 var(--sans); background:var(--paper); color:var(--ink);
       -webkit-font-smoothing:antialiased }
img { max-width:100%; height:auto; display:block }
a { color:var(--signal) }
h1, h2, h3 { line-height:1.2; letter-spacing:-.015em; margin:0 }
h1 { font-size:clamp(30px, 4.4vw, 44px); font-weight:700 }
h2 { font-size:clamp(21px, 2.4vw, 26px); font-weight:700; margin:44px 0 14px }
h3 { font-size:18px; font-weight:600; letter-spacing:0; margin:26px 0 8px }
p, ul, ol { margin:0 0 14px }
ul, ol { padding-left:22px }
li { margin:0 0 7px }
.wrap { width:min(1120px, calc(100% - 44px)); margin:0 auto }

header { position:sticky; top:0; z-index:10; background:#FFFFFFF2;
         backdrop-filter:blur(8px); border-bottom:1px solid var(--rule) }
header .wrap { display:flex; align-items:center; gap:16px; padding:11px 0 }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
         font-weight:700; letter-spacing:-.01em; font-size:18px; margin-right:auto }
.brand img { width:34px; height:34px; object-fit:contain }
header nav { display:flex; align-items:center; gap:8px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
       min-height:40px; padding:0 18px; border-radius:var(--r2); border:1px solid var(--rule);
       background:var(--card); color:var(--ink); font:600 14px/1 var(--sans);
       text-decoration:none; cursor:pointer; white-space:nowrap }
.btn.go { background:var(--signal); border-color:var(--signal); color:var(--onsignal) }

/* The document itself. One column, measured for reading rather than for filling
   the window — a policy set to the full width of a desktop is a policy nobody
   finishes. */
main { padding:52px 0 64px }
.doc { width:min(72ch, calc(100% - 44px)); margin:0 auto }
.dated { font-size:14px; line-height:1.5; color:var(--dim); margin:14px 0 0 }

/* The short version, first, in a box. Somebody who reads only this should still
   come away with the truth rather than with a friendlier version of it. */
.gist { margin:30px 0 8px; padding:20px 22px; background:var(--card);
        border:1px solid var(--rule); border-left:3px solid var(--signal);
        border-radius:var(--r2) }
.gist h2 { margin:0 0 10px; font-size:19px }
.gist p:last-child, .gist ul:last-child { margin-bottom:0 }

table { width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--rule);
         vertical-align:top }
th { font-weight:600; font-size:14px; color:var(--ink); background:var(--sunk) }
code { font:14px/1.4 var(--mono); background:var(--sunk); padding:1px 5px;
       border-radius:var(--r1) }
.note { font-size:15px; color:var(--dim) }

footer { background:var(--deep); color:var(--deep-dim); padding:48px 0 40px; font-size:15px;
         margin-top:20px }
footer a { color:var(--deep-signal); text-decoration:none }
footer a:hover { text-decoration:underline }
footer .cols { display:flex; flex-wrap:wrap; gap:26px 46px; align-items:flex-start }
footer .cols > div:first-child { margin-right:auto; max-width:34ch }
footer .fbrand { display:flex; align-items:center; gap:10px; color:#F0F6FC;
                 font-weight:700; margin-bottom:10px }
footer .fbrand img { width:30px; height:30px; object-fit:contain }
footer nav { display:grid; gap:9px }
footer .legal { margin-top:30px; padding-top:20px; border-top:1px solid #3D444D;
                font-size:13px; line-height:1.6; color:var(--deep-dim) }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; border-radius:var(--r1) }