/* ==========================================================================
   Privacy / Terms, the legal pages for company.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' (style-src 'self'). An inline
   style block here would simply be dropped by the browser and the page would
   render unstyled.

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

:root {
  --paper: #FFFFFF;
  --paper-2: #ECEFF4;   /* mnc.css's recessed surface: the one emphasised block */
  --ink: #101C2E;
  --muted-ink: #54606E;
  --accent: #27506F;    /* steel blue */
  --rule: #DBE0E7;
}

*, *::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; }
}