/* Proofline — shared base. Single source of truth for design tokens,
   navigation and footer. Page-specific CSS stays inline on each page and
   cascades over this file. Generated pages pull this in via build.py. */

:root{
  --ink:#0a1929;--ink-2:#3d4a5c;--ground:#f5f7fa;--ground-2:#e9eef4;--line:#cfd7e0;
  --accent:#0891b2;--accent-2:#0e7490;--accent-ink:#ffffff;--ok:#046d4a;--warn:#8a4a05;
  --focus:#0e7490;
  --s-1:.5rem;--s-2:1rem;--s-3:1.5rem;--s-4:2rem;--s-5:3rem;--s-6:4rem;--s-7:6rem;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-feature-settings:'ss01','cv11','tnum';font-optical-sizing:auto}
body{margin:0;background:var(--ground);color:var(--ink);line-height:1.55;font-size:16px}

a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- navigation ---- */
.nav{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground);z-index:10}
.nav nav{display:flex;align-items:center;gap:1.15rem;margin-left:auto;flex-wrap:wrap}
.nav nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem;line-height:1;
  padding:.35rem .1rem;letter-spacing:-.005em}
.nav nav a:hover{color:var(--ink)}
.brand{font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.03em;
  font-size:1.575rem;line-height:1;display:inline-flex;align-items:center}
.brand-mark{color:var(--accent)}

/* ---- footer ---- */
footer[role="contentinfo"]{border-top:1px solid var(--line);padding:var(--s-4) var(--s-3);
  color:var(--ink-2);font-size:.85rem;text-align:center;background:var(--ground)}
footer[role="contentinfo"] a{color:var(--ink-2);margin:0 .5rem}
footer[role="contentinfo"] a:hover{color:var(--ink)}
footer[role="contentinfo"] .tagline{display:block;margin-top:var(--s-1);
  font-style:italic;color:var(--ink-2)}

/* On narrow screens the nav wraps onto its own row rather than disappearing.
   The previous rule hid it entirely under 520px, leaving phone visitors with
   no navigation at all. */
@media (max-width:640px){
  .nav{flex-wrap:wrap;gap:var(--s-2)}
  .nav nav{margin-left:0;width:100%;gap:.9rem;justify-content:flex-start}
  .nav nav a{font-size:.9rem}
}

/* ---- document pages (license, privacy, security, accessibility) ----
   These were each carrying their own dark-theme stylesheet, which clashed
   with the site chrome. They now share one light treatment. */
main.doc{max-width:52rem;margin:0 auto;padding:var(--s-5) var(--s-3)}
main.doc h1{font-size:2.1rem;letter-spacing:-.03em;margin:0 0 var(--s-1);color:var(--ink)}
main.doc .sub{color:var(--ink-2);font-family:var(--mono);font-size:.86rem;margin:0 0 var(--s-4)}
main.doc h2,main.doc h3{font-size:1.12rem;margin:0 0 var(--s-1);letter-spacing:-.02em;color:var(--ink)}
main.doc p,main.doc li{color:var(--ink-2);font-size:.97rem}
main.doc li{margin-bottom:.35rem}
main.doc a{color:var(--accent-2)}
main.doc .box{background:var(--ground-2);border:1px solid var(--line);border-radius:10px;
  padding:var(--s-3);margin:var(--s-3) 0}
main.doc .box p:last-child{margin-bottom:0}
main.doc code{font-family:var(--mono);font-size:.86em;background:var(--ground-2);
  padding:.12em .38em;border-radius:4px;color:var(--ink)}
main.doc .box code{background:var(--ground)}
main.doc table{width:100%;border-collapse:collapse;margin:var(--s-2) 0;font-size:.92rem}
main.doc th,main.doc td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
main.doc th{color:var(--ink);font-weight:600}
main.doc .note{font-size:.88rem;color:var(--ink-2);border-left:3px solid var(--accent);
  padding-left:var(--s-2);margin:var(--s-3) 0}

/* ---- dark-themed pages ----
   Some sections (sales) are designed dark. build.py stamps data-theme="dark"
   on those pages so the shared nav and footer follow the page instead of
   sitting light-on-dark. */
body[data-theme="dark"] .nav{background:#0a1929;border-bottom-color:#1e293b}
body[data-theme="dark"] .brand{color:#f8fafc}
body[data-theme="dark"] .nav nav a{color:#94a3b8}
body[data-theme="dark"] .nav nav a:hover{color:#f8fafc}
body[data-theme="dark"] footer[role="contentinfo"]{background:#0a1929;
  border-top-color:#1e293b;color:#94a3b8}
body[data-theme="dark"] footer[role="contentinfo"] a{color:#94a3b8}
body[data-theme="dark"] footer[role="contentinfo"] a:hover{color:#f8fafc}
body[data-theme="dark"] footer[role="contentinfo"] .tagline{color:#64748b}