/* Shared by privacy.html, terms.html and the blog. Same tokens and footer as index.html. */
:root {
  --paper: #f8f8f6;
  --paper-2: #f1efed;
  --card: #ffffff;
  --ink: #292524;
  --ink-2: #57534e;
  --muted: #78716c;
  --rule: #e7e5e4;
  --rule-2: #d6d3d1;
  --dark: #292524;
  --charcoal: #44403b;
  --accent: #0d6b5e;
  --accent-wash: #e4f2ee;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Reddit Mono", ui-monospace, SFMono-Regular, monospace;
  --bevel: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(255, 255, 255, .25);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

nav { position: sticky; top: 0; z-index: 20; background: rgba(248, 248, 246, .92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--rule); }
nav .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 500 18px var(--sans); letter-spacing: -0.02em; }
.logo-mark { width: 20px; height: 22px; position: relative; }
.logo-mark::before { content: ""; position: absolute; inset: 0 3px 3px 0; border: 2px solid var(--ink); background: var(--card); }
.logo-mark::after { content: ""; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; background: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dark); border-radius: 0; background: var(--charcoal); color: #fff; box-shadow: var(--bevel); font: 500 14px/20px var(--sans); padding: 8px 14px; text-decoration: none; }
.btn:hover { background: var(--dark); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.doc { max-width: 760px; margin: 0 auto; padding: 72px 24px 104px; }
.doc .kicker { font: 400 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.doc h1 { font: 400 clamp(40px, 5vw, 56px)/1.08 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.015em; margin: 10px 0 12px; }
.doc .updated { font: 400 13px var(--mono); color: var(--muted); margin: 0 0 36px; }
.doc .summary { background: var(--card); border: 1px solid var(--rule); padding: 18px 22px; margin-bottom: 40px; color: var(--ink-2); }
.doc .summary b { color: var(--ink); font-weight: 500; }
.doc h2 { font: 400 26px/1.25 var(--serif); margin: 44px 0 10px; padding-top: 22px; border-top: 1px dashed var(--rule-2); }
.doc h2 .n { font: 400 13px var(--mono); color: var(--accent); margin-right: 10px; vertical-align: 4px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc li b, .doc p b { color: var(--ink); font-weight: 500; }
.doc a { color: var(--accent); }
.doc .mono { font-family: var(--mono); font-size: 14px; color: var(--ink); }

footer { background: #072e28; color: #b9cfc9; font-size: 15px; }
footer a { text-decoration: none; }
footer a:hover { color: #fff; }
.foot-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-block: 48px 36px; }
footer .logo { color: #fff; }
footer .logo-mark::before { border-color: #fff; background: transparent; }
footer .logo-mark::after { background: #7fd1c0; }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px 40px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: #8fb0a8; }
.foot-legal div { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-legal a[aria-current] { color: #fff; }

@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .doc { padding: 48px 16px 72px; }
}