/* Shared styles for the legal pages (/privacy, /terms, /subprocessors, /dpa,
   /security).

   WHY a file and not an inline <style> like index.html. The site's CSP pins the
   landing page's one inline block by SHA-256, and every extra inline block would
   be another hash to keep in step by hand. One first-party stylesheet needs
   `style-src 'self'` — which is still not `'unsafe-inline'`, so the argument the
   Install section makes about the embed holds here too.

   The tokens are the landing page's, restated because the page has no build
   step. If the palette changes in index.html, change it here. */

:root {
  --ink: #05070d;
  --surface: rgb(255 255 255 / 3.5%);
  --hair: rgb(255 255 255 / 9%);
  --hair-strong: rgb(255 255 255 / 16%);
  --text: #e9edf7;
  --muted: #939eb5;
  --dim: #828da0;
  --brand: #6366f1;
  --warn: #f97316;
  --measure: 760px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: #a5b4fc;
}

/* ---------- top bar ---------- */
.bar {
  border-bottom: 1px solid var(--hair);
  padding: 16px 0;
}

.bar-in {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand img {
  width: 22px;
  height: 22px;
}

.brand .u {
  color: var(--brand);
}

.bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.bar-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 9px;
}

.bar-links a:hover {
  color: var(--text);
  background: var(--surface);
}

.bar-links a[aria-current='page'] {
  color: var(--text);
  background: var(--surface);
}

/* ---------- document ---------- */
main {
  padding: clamp(40px, 7vw, 72px) 0 96px;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 12px;
}

h2 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin: 44px 0 10px;
}

h3 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin: 26px 0 6px;
}

p,
li {
  color: var(--muted);
}

p {
  margin: 0 0 14px;
}

strong {
  color: var(--text);
  font-weight: 650;
}

.stamp {
  font-size: 0.8rem;
  color: var(--dim);
  margin-bottom: 28px;
}

.lede {
  font-size: 1.05rem;
  color: var(--text);
}

ul,
ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

li {
  margin-bottom: 7px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  color: var(--text);
}

/* A plain statement of something we do NOT do, or a limit worth not burying. */
.honest {
  font-size: 0.92rem;
  color: var(--muted);
  border-left: 2px solid var(--warn);
  padding-left: 14px;
  margin: 18px 0;
}

.box {
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 20px;
  margin: 18px 0;
}

.box p:last-child {
  margin-bottom: 0;
}

/* Tables carry the subprocessor list. They scroll rather than squeeze. */
.table-scroll {
  overflow-x: auto;
  margin: 18px 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.9rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
}

th {
  color: var(--text);
  font-weight: 650;
  white-space: nowrap;
}

footer {
  border-top: 1px solid var(--hair);
  padding: 26px 0 40px;
  color: var(--dim);
  font-size: 0.84rem;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.foot-links a {
  color: var(--muted);
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}