/* ==========================================================================
   Privacy / Terms, the legal pages for agency.adminless.ai.

   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' for style-src today, and the
   follow-up on that header is to TIGHTEN it to nonces, not to loosen it. An
   inline style block here would be dropped the moment that happens and the
   page would render unstyled.

   The palette is ssa.css's values, written literally. These pages do not
   import tokens.css or ssa.css for the same independence reason.
   ========================================================================== */

:root {
  --paper: #F2EDE1;
  --paper-2: #E8E1D2;   /* ssa.css's recessed surface: the one emphasised block */
  --ink: #1F1D1A;
  --muted-ink: #645E55;
  --accent: #24504A;    /* deep green */
  --rule: #D8D1C0;
}

*, *::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(--paper-2);
  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; }
}