/* ==========================================================================
   Privacy / Terms, the legal pages for adminless.ai (the root card).

   Structure copied from website/claims-landing/public/privacy.css, which is
   the exemplar for the family, with this site's palette written literally.
   The reasoning is carried over unchanged:

   These carry their OWN stylesheet rather than the landing page's, on purpose:
   they are documents that must stay readable even if the marketing CSS is
   rewritten, and they are the pages on this site that should never break for
   a design reason.

   It is an external file, not a <style> block, because nginx serves this site
   under a strict CSP with no 'unsafe-inline' (style-src 'self'). An inline
   style block here would simply be dropped by the browser and the page would
   render unstyled.

   The palette is root.css's values, written literally. These pages do not
   import tokens.css or root.css for the same independence reason, and
   because tokens.css carries a 72px display scale built for a one-screen
   card, which is the wrong scale for a document you read.
   ========================================================================== */

:root {
  --paper: #F3EFE4;
  --ink: #1B1B1F;
  --muted-ink: #5E594F;
  --accent: #14213D;
  --rule: #D9D4C7;
  /* root.css deliberately dropped --paper-2 and --paper-3 (no rule on the
     card used them), so the one emphasised block on these pages is drawn as
     a wash of --ink over the paper rather than as a fifth invented tone. */
  --box: rgba(27, 27, 31, 0.05);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 28px; }

header { border-bottom: 1px solid var(--rule); }
header .wrap { display: flex; align-items: center; min-height: 74px; }
.mark { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 19px; }
.mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

main { padding: 56px 0 80px; }

h1 { font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }

.updated {
  margin: 0 0 30px;
  color: var(--muted-ink);
  font-size: 14.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h2 { font-size: 23px; line-height: 1.25; margin: 44px 0 12px; }
h3 { font-size: 19px; margin: 28px 0 8px; }

p { margin: 0 0 16px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lede { font-size: 20px; color: var(--muted-ink); margin-bottom: 32px; }

/* the one emphasised block per page: the plain-English summary, and the
   explanation of how the visitor count works without identifying anybody */
.box {
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--box);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.box p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 16.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }

footer {
  border-top: 1px solid var(--rule);
  padding: 28px 0 48px;
  color: var(--muted-ink);
  font-size: 15.5px;
}
footer a { color: var(--muted-ink); }

@media (max-width: 700px) {
  body { font-size: 17px; }
  h1 { font-size: 30px; }
  h2 { font-size: 21px; }
  main { padding: 40px 0 56px; }
  table, th, td { font-size: 15.5px; }
  /* a two-column table of "what / why" is unreadable at 375; stack it */
  thead { display: none; }
  tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  td { display: block; border: 0; padding: 0 0 6px; }
  td:first-child { font-weight: 600; }
}