/* 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;
  /* The shared page width (site/index.html and the app); text keeps --prose. */
  --measure: 1440px;
  --prose: 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 32px;
}

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;
}

/* The page column is wide; the document itself stays a readable measure. */
main > .wrap > * {
  max-width: var(--prose);
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 16px;
  }
}

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

/* Each h2 and h3 carries an id, so any of them can be the target of a link.
   scroll-margin-top keeps the heading off the top edge when one is followed:
   the bar above is static and scrolls away, so this is breathing room, not
   clearance. A heading's own margin-top does not do it — the jump lands on the
   border box, above which the margin has already collapsed out of view. */
h2 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin: 44px 0 10px;
  scroll-margin-top: 24px;
}

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

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;
  }
}